Mobile-optimised Websites

By Adam Hampson / 16 Jul 2018

Digital marketing consultant Adam Hampson divulges how to ensure the best user experience for patients viewing your mobile-optimised website, and why this is vital to your digital marketing strategy

Moving with the times means moving with the technology, and more and more online searching is being conducted on portable devices. Adults accessing the internet via their smartphone increased to 73% in 2017,1 more than double the rate of 2011. As of May 2018, the way Google determines which sites are more prominent on its search page (search engine optimisation) is also beginning to favour mobile websites over desktop,2 so a mobile device-optimised site will positively affect your Google search rankings.

This is why it’s never been more important for you and your business to have a website optimised for mobile device use. Following the trends of online traffic should lead you straight to mobile browsing if you want to remain relevant and be seen by your potential patients on the world wide web. A correctly designed mobile-optimised website can lower your bounce rate, increase your traffic, and provide the valuable streamlined content needed to push you up the search engine rankings and onto the screens of more potential patients.

In this article, I’ll discuss not only why a mobile-optimised website is important for your business, but how best to design it for your patients’ best user experience. Although many aesthetic practitioners will not be designing a mobile-optimised site themselves, it is important that they have a basic understanding of their components and how they work.

Consider your users’ limitations

For your patients to have an exceptional user experience, you need to consider what you yourself look for when browsing a website. Considering your traffic’s browsing limitations on different mobile devices is important, because their journey around your site is either helped or hindered by your design.

Your desktop website may contain a lot of dynamic design that works well when the user has a tracking or scrolling cursor, but this won’t work on a mobile device or tablet. Consider how you display certain pieces of information that may be vital to prompting an enquiry and whether they’re accessible on a mobile and portable device. For example, does your desktop website incorporate pop-ups, hover-states that reveal a mirage of information once rolled over, or design using Flash Media Player? These elements won’t translate to your mobile site and will frustrate anyone trying to use it. A clunky user experience can frustrate your traffic, heightening your potential bounce rate (the number of visitors leaving your site). Your mobile site also lacks a cursor and a scroll bar. On portable devices, the scroll and the click are the same motion, so it’s important to consider this when designing your mobile-optimised site and space your clickable links accordingly. There is no user experience without usability, so it’s important to ensure your mobile site can work before you think about jazzing it up.

Your desktop website may contain a lot of dynamic design that works well when the user has a scrolling curser, but this won’t work on a mobile device 

Considerations for the best possible user experience

Readability

When designing for the optimum user experience, your mobile-optimised site should consider screen resolution. The size of the tablet itself isn’t as important here; resolution refers to the number of horizontal and vertical pixels on the display screen where your user will interact with your site. The more pixels there are, the more information is visible without scrolling. The iPad can range from 768 by 1024 pixels, to 2048 by 2732,3 with the same sort of disparity between iPhones and Androids. The most used screen resolution falls at 720 by 1280 pixels,4 so it’s best to aim for this kind of compatibility in lieu of designing for every variant on the market.

Link buttons

Links that are placed within text can be difficult to navigate (or avoid) with the all-purpose finger click. Mobile and portable devices are almost exclusively touchscreen so, as mentioned above, the scroll and the click are the exact same motion. This is why I recommend swapping links in your body of copy, which should be selective anyway, with clickable buttons. These buttons can be eye-catching and use imperatives such as ‘Book Your Consultation Now!’ These interesting, engaging, yet simple buttons create simplicity and guide your traffic through the important stages of the enquiry process.5

Contact functionality

Mobile optimisation for portable devices can have excellent functionality and contact capabilities when implicated correctly. For example, command function buttons such as one that states ‘click to contact’ can be linked straight through to a call with your contact number or can be designed to open a new email to your enquiry address. This can be useful as it allows for patients to not have to copy and paste or remember a number or email address to contact you, they can just press the button on your site and it’s done for them. Designing properly for mobile optimisation opens a vast world of real-time communication in which your traffic is interested and so can immediately initiate contact. This can also be useful when incorporating location tools that sync with map applications on the device, showing how a user can travel to your premises. Combine these streamlined communication portals with clickable icons mentioned above and you have a well-oiled mobile-optimised website.

Condense your design

As I discussed earlier, dynamic design is anything but on a mobile website. FlashPlayer graphics, instantly playable videos, and animations aren’t supported and will appear clumsy if they appear at all. Instead, consider condensing your design into statement content that both captures your audience, yet doesn’t overwhelm your potential patients.6 Statement content includes photography, graphics, and information that helps your user discern your services in a bite-size snapshot. Content overload can delineate your entire landing page, losing your users’ interest so just incorporate the necessities such as your brand colours, logo, and carefully selected written content to keep your traffic engaged and motivated to find out more. Try to capture the most engaging information and content you can before the user feels the need to scroll,7 which includes but isn’t limited to a service you offer, a photo of your team, or an enticing unique selling point. If you offer free consultations or are hosting an event day, this is a great way to introduce new traffic. Reduce the size of your navigation bar, menu, or photo banner to free up available pixels that are better used to engage and inspire. A great way to reduce menu size, yet still allow for easy functionality, is to adopt a collapsible drop-down menu with shelved parent pages. This means your information can be carefully categorised and will guide your traffic through their own client journey or funnel.

Data compiled from Google Analytics by the search engines themselves showed that sites that load in five seconds or less see 70% longer viewing session duration 

Content size and load times

The less complex the content, the less time it will take your mobile-optimised website to load. Load times have a huge impact on your users’ experience, a 2016 Google study found.8 Data compiled from Google Analytics by the search engines themselves showed that sites that load in five seconds or less see 70% longer viewing session duration. Of more than 10,000+ mobile web domains analysed, Google found that the average load time for mobile sites was 19 seconds, which can greatly impact your bounce rate. This means that the faster your site can load, the more likely your traffic is going to stick around and peruse your content and services.9 Lessening your load times means condensing your content. Stripped-back design that is easy to navigate and doesn’t include videos or too many images decreases your load time. Consider which content is your absolute priority, and which content you think your patients look for when choosing an aesthetics provider.

Conclusion

Ensuring the best user experience for your mobile-optimised website is a careful mosaic of different considerations and attributions. Your choice of content, functionality, and how you combine the two can either take your patients by the hand or push them away, so a careful balance between the two needs to be established and maintained. If you haven’t considered optimising your site for mobile use, then you could be missing out on vital conversion and alienating far too much traffic to ignore. 

References

  1. Office for National Statistics, ‘Home internet and social media usage’, <https://www.ons.gov.uk/peoplepopulationandcommunity/householdcharacteristics/homeinternetandsocialmediausage>
  2. Search Engine Land, ‘Google to move more sites to mobile-first index in coming weeks’, 21 February 2018. <https://searchengineland.com/google-move-sites-mobile-first-index-within-next-several-weeks-292660>
  3. Media Genesis, ‘Popular Screen Resolutions: Designing for All’, 25 March 2018. <http://mediag.com/news/popular-screen-resolutions-designing-for-all/>
  4. Device Atlas, ‘Most used phone screen sizes to design websites for in 2017’, 17 January 2017.
  5. <https://deviceatlas.com/blog/most-used-phone-screen-sizes-to-design-websites-2017 >
  6. Google Developers, ‘What Makes a Good Mobile Site?’ September 2016. <https://developers.google.com/web/fundamentals/design-and-ux/principles/#keep_calls_to_action_front_and_center>
  7. Adobe Blog, ’10 Do’s and Don’ts of Mobile UX Design’, 1 February 2018. <https://theblog.adobe.com/10-dos-donts-mobile-ux-design/?origref=https%3A%2F%2Fwww.google.co.uk%2F>
  8. Digital Marketing Institute, ‘3 Ways to Create Mobile-Friendly Content’, <https://digitalmarketinginstitute.com/en-gb/blog/2017-7-20-3-ways-to-create-mobile-friendly-content>
  9. Double Click by Google, ‘The need for mobile speed: How mobile latency impacts publisher revenue’, 2017. <https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/>

Comments

Log-in to post a comment