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-formats 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.

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 navigation into a tumbler (sometimes called “the hamburger”), then the navigation flies out, normally to the left, so the user can see all the navigation items and child pages.

Typically to, items like banners are either made smaller or dispensed with completely. Sidebar content becomes stacked in two or one columns. 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 smartphone.

Finger Navigation

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.

It’s worth noting that some mobile-friendly design looks sparse on a desktop as space has been created around navigational elements of the design to allow for touch, as opposed to mouse click. Some people prefer more white space and less complicated design, but it is not what everyone 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.

Mobile-Friendly Testing Tool

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

The consequences of 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 visitors 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.