Images | Fiona MacNeill | Macknowlogist

Hone Smart Home

Mon, 13 Feb 2017 00:00:00 +0000

At the end of my last entry I outlined my discovery that there was an app building company called Bubble, which would likely lead to brand confusion. As a result I decided to go back to some of the ideas on and consider other possibilities that would tackle some of the same goals. The following company traits need to be suggested by the name:

Organisation, finesse, attention to detail
Protection and/or care
Attentiveness
A connection to housing and or containment

Initially I came up with “Corral”, especially as I thought that this would appeal to the Smart Home market in the United States which seems to be more fully developed than that of Europe (I have sought data to prove this but a lot of the market research is behind pay walls, I did however find a nice snippet from Statista included below).

“Corral” suggests containment, gathering and shepherding something that is perhaps unruly. There could also be a potentially useful or possibly tacky mnemonic in that “IoT Corral” would remind users of “O.K. Corral” (O.K. Corral (building), n.d.) , another US connection. However, I decided this would likely err on the tacky-side. “Corral” is quite a specific idea so I tried out some new logo ideas and also had a think about rocking the minimalist boat by creating a more three-dimensional logo.

Shapes which could suggest a corral - essentially an abstracted animal pen.

Shapes with the shadow casting turned on. This allowed me to think about how these images would look if they were simplified into 2D shaded areas to provide the illusion of depth and perspective. I created these images in Sketchup (Trimble, 2017), a piece of software which I will undoubtedly use for some of the graphic prototyping in the app. I have a background in 3D modelling and the smart home visualisations will be more effective if they are modelled architecturally.

In this version I omitted the lines in order to see how pue shading would look.

[Was once a linked image to the logo for Badisches Landesmuseum Karlsruhe - link is no longer available in 2021 when this post was archived]

I was thinking of something like this logo but with a top and bottom section and more shading placed over logo text or on the left of the logo image (Stankowski & Duschek, 1992 as in Hyland & Bateman, 2011, p. 266).

The “Corral” concept although an equilateral has some similarities to a circle or oval and could suggest protective and nurturing qualities as we learned from the initial lecture with Phil Jackson. It could also be seen to bear representational similarity to an eye depending upon the placement of the logo title text.

“Corral” wasn’t quite working for me, it felt too fortified and possible too specific to the United States, it also started to remind me of a bank or credit card and there needs to be something more personal and homely about this product. Once again I changed tact.

The next idea that I pursued was to develop the word “Hone” as the company or app name. I immediately had a better gut feeling about this word especially when combined with my “IoT” trademark-style embellishment. On the surface level there is a nice mnemonic in that the word rhymes with “Home” and upon searching there aren’t any competing products with the same name.

“Hone” is a verb which when used with no object is often confused with the concept of homing in on something as opposed to sharpening, perfecting or focusing which is the correct meaning; another “home” association, even though it is incorrect it is actually of benefit (Hone in vs. hone in, 2015). The only consideration with the word itself is that if viewed from a distance in a font without a high ascender on the “h” it could be read as “none”; this may mean that a capital letter at the start of the word is preferable. With this in-mind I started with the typefaces I had explore of what I had first in the Adobe Creative Suite (Adobe, 2017) and then took a look at some Google fonts (Google, 2017a). Initially I started with quite chunky fonts and felt that I would like to include a powerbutton in the design to indicate control rather than making the home connection explicit by using a symbol. This also felt like it would allow space for the company and app to expand to the commercial sector if the connection was more subtle.

The first electronic Hone logo mock-up using the Montserrat Subrayada (Ulanovsky, n.d.) font and Prosto One (Lemonad & Emelyanov, n.d.) fonts.

This initial logo was too blocked and the plugged-in nature of the black lines, reminiscent of wires connecting each letter suggested an audio system or electronic music genre. I created a contact sheet of fonts based to keep for future reference and to trial in some logo designs: You can view this at the .

I tried out a few more ideas based on some hinting towards the futurism and vorticism art movements (see 2, 6 and 7), although these experiments proved to be overly busy and vaguely reminiscent of the cognitive dissonance I encountered the time I observed the design of the “It’s a small world” ride at Disneyland in CA, USA.

Gbklyn, CC BY-SA 4.0 , via Wikimedia Commons

I ran the logo contact sheet by a few people via social media, just for some initial thoughts and they gave me some good things to think about particularly the difference between European and US design tastes (an even split of EU and US comments). This also challenged some assumptions I had made about the better designs, so I will work up the best ideas in time for the session with Phil in order to get his feedback on the concept.

As a final piece of research to confirm that “hone” was a solid choice of word for branding I looked at the Google Ngram viewer (Google, 2017b). The Ngram Viewer allows you to search Google books content from 1800 - 2008 based on boolean word queries. So I searched for “hone” and I was interested to find that the capitalised form of the word was at the peek of it’s popularity around 1910 right at the end of the Edwardian era. I have made comparisons between the current state of Internet of Things (IoT) to the disarray around .

For example, during the Edwardian period there were different current voltages for electrical supply in different areas of England surly a recipe for fire or electrocution; IoT has many different wireless frequencies and no common consensus on standards so it isn’t all that different (although accidental death is less likely). This Edwardian connection provided more design inspiration and made me think that deriving inspiration from Edwardian architectural etchings and engravings may look more modern than 3D models which look dated very quickly. For example, Hive which is British Gas’s Smart Home thermostat has a lovely simulation interface, but the home simulated with 3D graphics looked like an early 2000s computer game (it seems that British Gas might have realised this too and the demo is now harder to find on the site, but still seems accessible via this link: [link no longer available]. With this in mind I considered what a banner could look like for hone, the logo needs some tracking adjustments, but this was a first try with some basic layer blending and a clean finish.

Phil also suggested that I look at some different wood finishes if I stick with this aesthetic. After coming back to this header test after a couple of days the current wood finish sort of reminds me of that cheap MDF coated board, so I definitely need to look at some alternatives. Something with more of a creamy background like this futurist drawing might be better.

By Antonio Sant'Elia - Utopie metropolitane, la mostra (in Italian). Style & Design. l'Espresso (2013-03-28). Retrieved on 2013-04-01., Public Domain, Link

References

Adobe. (2017). Adobe creative cloud [Computer software]. Retrieved from https://www.adobe.com/uk/creativecloud.html

Google. (2017a). Google fonts. Retrieved from the Google fonts website: https://fonts.google.com/

Google. (2017b). Google Ngram viewer. Retrieved from the Google Ngram Viewer website: https://books.google.com/ngrams

Home in vs. hone in. (2015) [Blog post]. Retrieved from http://blog.dictionary.com/hone-in-vs-home-in/

Hyland, A., & Bateman, S. (2011). Symbol. London, England: Lawrence King Publishing Ltd.

Lemonad, J., & Emelyanov, P. (n.d.). Prosto one. Retrieved from https://fonts.google.com/specimen/Prosto+One

O.K. Corral (building). (n.d.). In Wikipedia. Retrieved February, 18, 2017, from https://en.wikipedia.org/wiki/O.K._Corral_(building)

Trimble. (2017). SketchUp Make [Computer software]. Retrieved from http://www.sketchup.com/download?sketchup=make

Ulanovsky, J. (n.d.). Montserrat subrayada. Retrieved from https://fonts.google.com/specimen/Montserrat+Subrayada

Naming - initial ideas

Sat, 11 Feb 2017 00:00:00 +0000

On this page of my sketchbook I used a dice rolling exercise (Barnard & Briscoe, 2016) to explore different name combinations for the potential company. Initially I gravitated towards BubbleHome as a concept.

I then completed two iterations of the Lean Business canvas and fleshed out the idea a bit more. To summarise the main points, as this plan is likely to evolve over time:
Problem - top 3 problems

Each device has its own management system - this is a lot to keep track of
There is not a user-friendly way to map and monitor a smart home ecosystem in one place
Devices can have significant security issues when not setup correctly

Solution - top 3 solutions

Aggregate operational updates from devices via open api
Provide a mapping tool allowing users to position devices in a model of their home and review synchronous operations
Provide security advice based on device ecosystem and configuration patterns.

The cost structure versus the customer segment is a bit of a sore point in the canvas plans. The development costs seem like they will be very high in comparison to the small audience for this product in Europe. Marketing this product to US consumers might reap more benefits as there are a greater number of smart home products specifically marketed in the United States. The research to prove this is largely behind heady pay walls (NPD, 2017) but the main products such as Nest (Google, 2017b) and SmartThings (Samsung, 2017) were initially launched in the United States and therefore logically it makes sense that they may have larger customer segments in the United States as opposed to Europe. Another factor which I was able to locate recent research on was that security cameras are the most popular devices (NPD, 2016). This emphasis on security could serve my solution as well, as IP cameras are for security, but if they are compromised that could present some huge privacy issues and security issues for the end-user. It reminds me of the Shodan baby cam story (Porup, 2016) from last year and this thread on Reddit (jenn_and_tonic, 2016):

I spent a bit of time sketching logo ideas for a logo. I felt like I wanted BubbleHome to be approachable so initially I considered a bespoke serif script font. However, this would be rather unconventional for a tech-focused company where clean sans-serif screen fonts are the norm. I tried out the idea of including a house pictogram in the logo, but it kept looking more like an upload symbol than a house/home and I felt that it would narrow the scope of the solution (visually exclusive; what about apartments?), and there might be future expansion into corporate solutions.

This version was too busy and was really just a test. The blue background seemed caring and trustworthy, as did the circular bubble formation. I decided to take these elements forward to the next version. Font: DIN Alternate Bold // Background colour: #448ccb

I really liked this version and the evolution of “IoT” for Internet of Things becoming a trademark-like descriptor providing immediate context. To back up my assumption that IoT is an understood concept, I did a bit of digging in Google Trends (Google, 2017a). I compared several search terms and was interested to find that the interest in IoT now far outstrips “Internet of Things” although it could be that some are searching to find out what the acronym means! I also looked at “Smart Home” and “IFTTT” (main competitor in theory) for comparison. Another interesting observation was that the “Smart Home” term seems to be greater interest in the United States and the United Kingdom and “IoT” seems to be more prevalent elsewhere - this might be partially explained by the translation of Smart Home into different languages. This is something to bear in mind though with regard to marketing.

[Had to remove older Google Trends data]

I got as far as creating a Hero image for the Bubble or BubbleHome concept and then found that there was app builder with the name Bubble ( ) and very distinctive logo and I felt that this would like affect the success of the concept as an independent brand.

Plus there is a danger that people might think of a house like this:

Back to the drawing board…

References

Porup, J. M. (2016, January 23). “Internet of Things” security is hilariously broken and getting worse. ArsTechnica. Retrieved from https://arstechnica.com/security/2016/01/how-to-search-the-internet-of-things-for-photos-of-sleeping-babies/

Barnard, D. & Briscoe, R. (2016, June 14). Workshop on creating games and playful interations for adult learning in public spaces. Workshop presented at the first conference on Playful Learning, Manchester, UK. Abstract retrieved from http://conference.playthinklearn.net/blog/programme/full-abstracts-thursday-14th#10

Google. (2017a). Google trends search [Computer software]. Retrieved from https://www.google.com/trends/explore?q=smart%20home,IFTTT,Internet%20of%20Things,IoT

Google. (2017b). Nest learning thermostat. Retrieved from the Nest website: https://nest.com/uk/

jenn_and_tonic. (2016, June 19). I bought and returned a set of WiFi connected home security cameras. Forgot to delete my account and I can now watch the new owner [Electronic forum post]. Retrieved from https://redd.it/4ortwb

Maurya, A. (2016). Lean canvas. Retrieved from https://leanstack.com/lean-canvas/

NPD. (2016). Network connected cameras account for the majority, 61 percent, of U.S. home automation industry revenues. Retrieved from https://www.npd.com/wps/portal/npd/us/news/press-releases/2016/safety-and-security-are-lead-drivers-in-smart-home-technology-interest--according-to-npd-connected-intelligence/

NPD. (2017). Home automation. Retrieved from http://www.connected-intelligence.com/our-research/home-automation

Samsung. (2017). SmartThings - smart home system. Retrieved from the Samsung SmartThings website: https://www.smartthings.com/uk/

Welcome to my new IDM22 Journal

Sat, 04 Feb 2017 00:00:00 +0000

Greetings! I have decided that I would like to keep up my reflective writing activities during IDM22. This is due to my recent experience on the web development module and also thinking back to when I took IDM21 (seems so long ago now!). In both cases it was an immensely valuable venture.

Purpose of this blog

I find that I needed a central place to gather my thoughts and referencing-styles throughout this process, so a blog seems like the perfect solution to pull together snippets as I go along. This is not however, just any blog as I have decided to build it in Jekyll (2017) a very basic blogging platform, although deceptively technical, which is based on ruby. I feel that this will give me an opportunity to learn more about ruby and also after about 10 years of working with WordPress as a CMS I think that it is time to expand my repertoire a bit. Essentially, this site will be my online whiteboard as it is essential for me to have a space which I can access from anywhere and also I do not actually own a physical whiteboard! Using one at university would not suffice as I need to leave my scribblings and musings on it!

Initial ideas

To recount a few initial ideas based on our first design session. We have been set the task of devising a logo for a company and I suspect that the company will be our fictional client in this scenario. I also know that we have to create a functioning prototype for this particular assignment, so with that in mind I considered profitable and interesting options for an app design.

As a basis for this I considered some potential problems that could be solved. At first I thought that it would be good to build a clinical examination app, as that would benefit aspects of my day job supporting nursing students. Students have to take practical examinations for their clinical skills and an app that helped make it easier to mark these tests would be immensely helpful (the tests are often very complex). However, after more consideration I felt that this would not offer sufficient design challenge to satisfy the module’s learning objectives. After all this type of app would essentially be an interactive form. There is a lot of value in a well-designed form, but not a lot of aesthetic value perhaps.

Like OnStar for your smart home

With aesthetics and functions in mind I decided to return to some of the ideas that I touched upon in my earlier research project for IDM13. During IDM13 I completed a short 10 credit research project looking at 5 consumer-level Internet of Things (IoT) systems, including two smart home systems; Nest and SmartThings (Google, 2017; Samsung, 2017). The research project had provided me with some domain knowledge and at the end of the project I had felt like I would like to do more. One of the ideas which I had come up with during the project and have since learned is not unique is thinking about a management or monitoring tool for all IoT devices in the home regardless of vendor. This would be incredibly difficult to accomplish. Think of it, a management tool which could be used with any IoT device so all of the separate apps would only be required for specific configuration needs. For this you would need a common platform/OS for it to be viable, otherwise you would spend all your time trying to keep up with the platform changes and APIs.

IFTTT.com have it right in this area as they put the onus on the developers and manufacturers to update their IoT related applets so that they “works with IFTTT” (IFTTT, 2017). They have a strong brand, but they were also first to the party. I found myself thinking about whether there could be an app and service which could be more of an aggregator, picking up a log of what each device was doing and when, alerting the user to issues, but having a read-only type relationship with the systems and devices. This service would have a security angle and I felt that it would be like OnStar enhanced breakdown recovery (Vauxhall, 2017) for cars, except it would be for Internet of Things devices. This product would occupy a security angle, although I wouldn’t go as far as saying that it is akin to anti-virus, it can not perceive or diagnose threats but it might be the canary in the coalmine in that it would provide an early warning through it’s holistic overview of all IoT sub-systems in the home, rather than having to monitor each device individually via it’s own app.

Another aspect is that there is currently a large influx of devices on the market and based on observation it seems unlikely that all of these manufacturers will survive. For instance Revolv which was bought by Google’s Nest and then shut down (Hern, 2016) - however if a connection could be made with OpenHAB (OpenHAB Foundation, 2017) a platform for allowing continued use of devices when company support has been withdrawn (e.g. the company has gone out of business) then that could be a compelling piece of functionality, allowing for continued oversight, within the app I plan to design. This is out of scope for this part of the project, but would be something to consider further down the line, if the user base grew to support that.

So essentially the app I would like to build, is for web and mobile, although mobile first and is a utility that allows users to map and monitor their in-home ecosystem. I also envision that the app will include a catalogue of devices currently on the market with their established design and configuration patterns so that each device’s components could be mapped and there could even be a try-before-you-buy dimension to that. Additional devices could be added to the catalogue based on user requests and also possible sponsorship tie-ins from an advertising perspective. The idea of try-before-you-buy also emerged from my earlier research, you can view the design specifications which .

I used this page of sketchbook to explore different ideas related to objects in the home, Internet of Things and word associations.

References

Google. (2017). Nest learning thermostat. Retrieved from the Nest website: https://nest.com/uk/

Hern, A. (2016, April 5). Revolv devices bricked as Google's Nest shuts down smart home company. The Guardian. Retrieved from https://www.theguardian.com/technology/2016/apr/05/revolv-devices-bricked-google-nest-smart-home

IFTTT. (2017). One connection countless possibilities. Retrieved from the IFTTT website: https://partners.ifttt.com

Jekyll. (2017). Blogging platform based on Ruby (Version 3.4.0) [Computer software]. Retrieved from https://jekyllrb.com

OpenHAB Foundation. (2017). Introduction. Retrieved from the OpenHAB website: http://www.openhab.org/introduction.html

Samsung. (2017). SmartThings - smart home system. Retrieved from the Samsung SmartThings website: https://www.smartthings.com/uk/

Vauxhall. (2017). Vauxhall Onstar. Retrieved from the Vauxhall Onstar website: http://www.vauxhall.co.uk/onstar/index.html

The weekend of doom

Mon, 16 Jan 2017 00:00:00 +0000

In my last entry I talked about the suggestions that Theo provided from his perspective as a nurse and researcher. They were very helpful, but lead to some rather major layout changes. In particular, the to do: “I will need more space in the carousel/timeline”. This led to what I nicknamed in my GitHub posts as the Weekend of Hell, I am softening this within the context of this journal entry to be the Weekend of Doom.

. An image showing how the site looked prior to the changes to the carousel.

Altering the Flickity Carousel/Timeline

So changing the height of the Flickity carousel used for the patient timeline meant that the “dot” buttons had to be moved upwards otherwise they would be off the bottom of the visible area on most standard screen sizes. For reference, I have included a long screenshot that I made of the site prior to this work, on the right. So I decided that the dots should reside on-top of the carousel and then they would also be spatially connected to the navigation of the timeline. This is not really how Flickity carousels are really designed to exist (metafizzy, 2016), but it is closer to the original inspiration for my site the DuckDuckGo about page (DuckDuckGo, 2014). The main issue that I ran into was that the carousel needed to resize itself dynamically and I had media queries which hid the dots on mobile devices (as they were no longer very useful as buttons at that size). However, as the dots themselves are rendered automatically by the JavaScript, they were rendering much more quickly than the resizing. So I upon sizing-up a responsive browser window the dots and timeline appeared on top of everything and looked awful. I tried everything I could think of to fix this issue. I attempted to delay the dots in the JavaScript. I also tried writing a script which watched for the window size. I tried positioning the dots so that they moved upwards. I also tried creating condition code which watched for various conditions to be met prior to triggering the dots. Things I wrote worked to an extent, but not sufficiently or reliably enough to depend on them. In the end I had to temporarily hide the dots by setting them and the timeline to ‘display: none’. I also had to hide the spot where they generated by moving the about section upwards. Essentially the solution’s analogue equivalent is that the rabbit is being hidden in a compartment of the hat the whole time (oh wait…is that how they do it?).

Performance Issues

I am actually grateful that all of this happened as once I had cracked the rendering issue I realised that there were some major performance issues with the carousel/timeline. It took a bit of time to get to the bottom of it, but in the end I realised that it was the long svg that I had included to indicate the patient’s anxiety levels. Through testing in multiple browsers, on Mac, PC and mobile I realised that the image also wasn’t loading anywhere other than in Chrome for Mac. Everywhere it was just gumming up the works. I reassessed the need for the anxiety level gauge/image and decided that it was important to keep it. So through trial and error I ended up loading with an image tag in the html as a very, very long svg. This is the only svg in the site that I could not optimise as it resulted in optimisation errors because it was too long dimensions-wise. Also, I realised that I did not really want to optimise it as I would result in losing the drop shadow detail which I had added to a new version of the design.

The new design

The performance issues highlighted that the design of the patient anxiety-level link was in fact creating an optical illusion and making the carousel look guddery/jerky even once the problems with it were fixed. The new design not only looked more streamlined, but it moved more smoothly simply by virtue of its aesthetics.

Version 1 - This screenshot deliberately shows the progress between two slides. This version of the anxiety level image had a visual effect akin to passing a row of trees with bright light behind them. It became very jarring when viewed at-speed

Version 2: I created a long svg in Adobe Illustrator with a greater level of logic. Attempting to map the story thematically to a graphical interpretation of the patient stress levels. This link is on the one-hand more graph-like but also more oraganic as I made it from scratch by drawing and manipulating a continuous line…Can you tell I went to art school?

Space economy

This entry represents the end of a period where I added a lot of content to the site. This was a good thing, but it also meant that there were areas that felt overly heavy like the devices area. I decided to try adding a collapsible accordion as a container for the information, using a tutorial from Codrops (Mary Lou, 2012). The tutorial was bit old but I liked how it used CSS and I felt that I could build on it. The accordion looked quite nice too, I’m sure that you can sense a ‘but…’ coming on here? Well I will explain it in the next journal entry. I have however included a screenshot the accordion so that it can live on it perpetuity.

. This is where I got to with them. Partially styled, but a nice efficient use of space. I would have added svg “+“s on the right to indicate their interactivity.

The contact form actually works now

I wrote a dev post about the contact form, but yes the contact form is now working as it should. I just need to enhance the warning/alert aspects and add aria labels etc. And so does the back-to-top the button as in it only appears when one is sufficiently far from the top of the page for it to be useful. This took a couple of iterations of code to get right.

Finally…

I had come up with a CSS style for reference sections and I decided to add it to this journal as well as part of my custom child theme. I am going to try (time allowing) to add it to my all my posts retroactively, but it is a big job and I have surprised myself at the sheer number of posts that I have amassed here in the past few months.

References

Coyier, C. (2013, March 5). Using SVG

\[Blog post\]

. Retrieved from

DuckDuckGo. (2014, February 20). About DuckDuckGo. Retrieved January 15, 2017, from DuckDuckGo.com website:

Mary Lou. (2012, February 21). Accordion with CSS3

\[Blog post\]

. Retrieved from

metafizzy. (2016). Options. Retrieved January 15, 2017, from metafizzy website:

Sowmya. (2013). Re: Nesting an svg inside a div

\[Online forum comment\]

. Retrieved from StackOverflow website:

Accessibility and responsive bits

Mon, 02 Jan 2017 00:00:00 +0000

This journal entry represents a mammoth effort to add high-quality content to the site.

I developed and added the patient story. This was based on a characteristics list which I worked through rather vigorously on the afternoon of the 25th. This is still in handwritten form, so I will link to it as a google doc later on. I have included some key references for that process below. I want to highlight the National Joint Registry (2016) data, which was particularly helpful during the process of defining the patient story. Also the specific images that I used will be cited on the portfolio site (including cc0 works; royalty-free works) as I feel it is always very important to include the provenance of images in any context, but especially when engaging in a thought process based on a fictional patient/nurse interaction.
I added images to support the patient story. These images were sourced from pixabay and one of my all-time faves, Creative Commons search as a means to filter Flickr images by license ( ).
I recreated the images that I found for the patient story as drawings in Adobe Illustrator. I wanted the images in the timeline to be small (100px x 100px); this is a limited amount of ‘bandwidth’ to communicate a visual concept. For this reason I decided to use Adobe Illustrator to trace the images and then re-paint them, so that I could accentuate certain aspects through the use of selective colour. This worked well and I did investigate whether these images could be included as svgs, but the visual information was too complex as they were based on photographic materials. As a result I stuck with .png format as the final output.

] .svg version of a timeline image - quite a bit of artifacting (tech-speak for mess) in the image render and it looks too sketchy

.png version of the same image in Adobe Illustrator - more of the visual information from the original photograph is retained. This version has the right level of abstraction.
All of the images were optimised using . Honestly, I absolutely love this tool and will be using this from now on for all my images. Their algorithm somehow trims off the excess while keeping the core visual information.
Accessibility. I ran an accessibility analysis on the site using the WAVE Web Accessibility Tool ( ). It is pretty good, I still have a few aria, alt and title tags to include here or there but I have made progress in this area.
Infuriating. As someone who uses Reader View (I found out that this is the official name for it) mode in Firefox and the equivalent in Safari, I was very frustrated by the restrictive and arbitrary local style sheet implemented by this mode. I have spent way too much time customising how the site looks in this context, but it really mattered to me as this would really put me off a site. Also, focusing on it has highlighted the importance of the semantic web; the reader mode taps into the and other html5 element definitions. With a bit of hardcore tweaking, I finally have something that I can stand behind. The tweaking is outlined in a development post, however I found out by digging into the reader displays in the respective browser stylesheets that they will ignore certain css classes. Specifically I needed to implement a class called .hidden which is the container for the flickity carousel dots. The ‘dots’ are completely useless in the reader view and just look like an orphaned ordered list. I also instituted a .sr-only class which is applied to loading GIFs and other elements which should not be shown in the reader mode. All of this digging will serve me well for the print stylesheet, no doubt…
I ran the Google mobile accessibility test on the site - It passed! Here is the proof: There is still a lot of content to add, but it is great to know that I am on the right track.

References

BBC (2013, January 16). Going paperless “would save NHS billions.” BBC Health. Retrieved from

BBC (2016, September 7). NHS: Health apps to inform patient records. BBC Health. Retrieved from

Booth, R. (2016, December 13). The doctor on your Xbox? The NHS needs more digital ambition. The Guardian. Retrieved from

BS EN ISO 13485:2016 Medical devices. Quality management systems. Requirements for regulatory purposes. (2016). Retrieved 22 December 2016, from

BS ISO 13606-2:2008 Health informatics. Electronic health record communication. Archetype interchange specification. (2008). Retrieved 22 December 2016, from

Choices, N. (2016, November 1). Health and fitness trackers. Retrieved January 2, 2017, from

Dolatabadi, E., Babak, T., & Alex, M. (2014). Vision-based approach for long-term mobility monitoring: Single case study following total hip replacement. Journal of Rehabilitation Research and Development, 51(7), 1165–76.

Farmer, A. Wearables sector grows as smartwatches increase in popularity. Retrieved January 2, 2017, from

Heartfield, R., Loukas, G., & Gan, D. (2016). You are probably not the weakest link: Towards practical prediction of susceptibility to semantic social engineering attacks. IEEE Access, 4, 6910–6928. doi:10.1109/access.2016.2616285

Institute for Quality and Efficiency in Health Care (2014). What can help relieve anxiety before surgery? - PubMed health - national library of medicine - PubMed health. Retrieved from

Johansson Stark, Å., Charalambous, A., Istomina, N., Salanterä, S., Sigurdardottir, A. K., Sourtzi, P., … Bachrach-Lindström, M. (2016). The quality of recovery on discharge from hospital, a comparison between patients undergoing hip and knee replacement - a European study. Journal of Clinical Nursing, 25(17-18), 2489–2501. doi:10.1111/jocn.13278

Nasr, N., & Enderby, P. (2014). Redefinition of life experience following total hip replacement: Analysis of narrative as performance. International Journal of Orthopaedic and Trauma Nursing, 18(2), 89–98. doi:10.1016/j.ijotn.2013.07.005

National Information Board. (2015, March 4). National information board’s workstreams. Retrieved January 2, 2017, from

National Joint Registry. (2016). 13th Annual Report 2016 National Joint Registry for England, Wales, Northern Ireland and the Isle of Man Surgical data to 31 December 2015. Retrieved from

NHS Choices. (2015, November 3). Health Apps library - NHS choices. Retrieved January 2, 2017, from

Press Association (2016, September 7). NHS to have one website for appointments, prescriptions and advice. The Guardian. Retrieved from

Pulkkinen, M., Junttila, K., & Lindwall, L. (2015). The perioperative dialogue - a model of caring for the patient undergoing a hip or a knee replacement surgery under spinal anaesthesia. Scandinavian Journal of Caring Sciences, 30(1), 145–153. doi:10.1111/scs.12233

Rudolfsson, G. (2013). Being altered by the unexpected: Understanding the perioperative patient’s experience: A case study. International Journal of Nursing Practice, 20(4), 433–437. doi:10.1111/ijn.12195

Wilson, D. (2016). An overview of the application of Wearable technology to nursing practice. Nursing Forum. doi:10.1111/nuf.12177

Wilson, C. J., Mitchelson, A. J., Tzeng, T. H., El-Othmani, M. M., Saleh, J., Vasdev, S., … Saleh, K. J. (2015). Caring for the surgically anxious patient: A review of the interventions and a guide to optimizing surgical outcomes. The American Journal of Surgery, 212(1), 151–159. doi:10.1016/j.amjsurg.2015.03.023

Image source: “ ” by is licensed under