01 Nov

Mobile Friendly Design

You may have heard the term “mobile friendly” and like so many IT buzz words, be a little unclear on what it means exactly.

Mobile friendly design or tablet friendly design is web design that resizes or re-fortmats in real time depending on the display size or type. By “real time” I mean no screen refresh – the browser does not go back to the web server for new files or a different, cut-down version of your site. That was the design communities first attempt at making mobile friendly design. We have moved on.

“Responsive” design or mobile friendly design is preferenced by Google

So, for example, a mobile friendly design will shrink and expand depending on whether the site is loaded on a very large desktop screen, a smaller laptop screen and then a tablet and mobile phone.

The mobile friendly aspect of the site is controlled by computer code called CSS, or cascading style sheet. The style sheet will reformat the site depending on the available screen space, but it also makes other changes like: collapsing the the navigation into a tumbler, then the navigation flies out, normally to the left, so the user can see all the navigation items.

Typically to, items like banners are either made smaller or dispensed with completely. Sidebar content become stacked in two or one column. Mobile friendly web sites reduce the need for two-fingered zooming and pinching which is almost always mandatory on a non-mobile friendly site being viewed on a smart phone.

Mobile friendly websites came about to accommodate smaller screen sizes and particularly are aimed at overcoming an important usability issue for phones – the pointing device is your finger, and compared to a mouse pointer, it is very low resolution – literally a blunt tool.

Its worth noting that some mobile friendly design looks sparse on a desktop. Mobile friendly design sometimes creates more white space on larger screens. Some people prefer this, but its not what every one likes.

Handling navigation differently is important for smaller devices. You will certainly have had the experience of using a non-mobile friendly site… trying to activate a link with the finger touch and getting the link next door or underneath. This is a classic usability issue with non mobile friendly sites.

Google has a mobile friendly testing tool at https://search.google.com/search-console/mobile-friendly. There are other useful tools to see how different mobile phones display your site such as http://www.mobilephoneemulator.com.

The consequences for not having a mobile friendly website are mild at the time of writing, but likely to be much more important in the future. Most websites I manage have a mobile and tablet viewership of about 7-15%. The rest are laptop or desktop visitors using a larger screen and mouse. So that means up to 15% of visitor may struggle to navigate your website and the breadth of its content may be difficult for them to access.

However, it should be noted, that many site visits are just to get a phone number, location map or send an email, and many of these functions can be put up front on a site without the need to click away from the homepage.

Also, Google presently preferences mobile friendly websites on its mobile search platform, NOT all it search platforms, and typically that preference will likely only be a position or two higher on the search results pages compared to the desktop search.

In summary, if you are having a website made or design refreshed, you may as well build mobile friendly design into it. Although not critical, it will increase the number of people able to access your content and make it easier for them to interact with your site.