My Site's NOT Mobile Friendly? What does that mean?

Like it or loath it more and more people use their phones as a primary web browsing device. In some areas it will be the way that a majority of your site visitors see your site, so making the mobile browsing experience just as easy and engaging as the desktop experience is increasingly important. Add to that Google constantly tweaks their search algorithm and one of the parameters is the mobile friendliness of your site. So having a site that does not show up well on a phone not only will turn away potential customers, it will drop you in the search listings making it harder for ANY customers to find you.

If your site is more than three years old, chances are it is not mobile friendly to today's standards. Let's take a look at the basics of what "mobile friendly" means today.

There are essentially two ways that websites can be set up for mobile devices. The older way was to set up a completely separate mobile site. This worked ... sort of. It was dependent on the device and browser correctly identifying themselves to your website, and on your website being able to tell the difference between a phone and a tablet and a laptop and a desktop computer. Not surprisingly this did not always work well and there are very few circumstances where this would be recommended today.

Responsive Design

Today's approach is called Responsive Design. Instead of getting the phone or computer to tell your website who they are, your website sends instructions to them on how it should look based on the size of the screen. The website doesn't care if it is being seen on a 4" wide phone or a 27" monitor, it comes with a set of instructions that changes the layout based on that screen and leaves it to the device to follow those instructions.

Choosing how the layout looks as the screen size shrinks is part of your designer's job, but we can look at a few key principles.

1. People have Fat Fingers - Although there are increasingly larger touch devices, at the moment we generally assume that devices with screens larger than 1080 pixels wide will be using a mouse, and smaller devices will be using a touch screen. Buttons, links and menus all have to get a bit larger to accommodate the difference. It is generally recommended that anything that you need to touch is at least 3/4 of an inch square and have at least 1/4 of an inch between multiple targets.
2. Small gets larger, Large gets smaller - Font size gets adjusted for legibility as the device gets smaller. The recommended average screen font size for devices is 16px, although this varies slightly based on the choice of font. Headers and titles will get smaller so that they fit comfortably on the smaller screen. Body text and captions will get larger to make them more legible.
3. Relative Importance Changes - Although standards dictate that all of the functionality and information available on the desktop version of your site be available to visitors using their phones, not everything is of equal importance. Mobile users are more likely to be searching for items of timely relevance. Contact NOW, on Sale NOW... etc. Locations and contact information is of primary importance and should be larger and Macromedia available at the top of the page. Longer articles and text are less likely to be important to mobile phone users, so are positioned further down or moved to subsidiary locations. All of this requires some careful planning of your site design to allow these changes of layout and present the best and most useful site for your mobile visitors.
4. Don't Depend on Hover - Hovering, changes to the site that happen when your mouse moves over something before clicking, can provide a lot of very "cool" interactive experiences on your website. Those little changes can help the visitor know what to do, re-organize the layout to improve the design, or just exist as a bit of extra interest. However, those interactions don't work on touch screens. Regardless of the device, your website should never "depend" on someone using a mouse. Menus, accordion lists, tabs ... all of them need to work as well on a touch device without a mouse as they do on your desktop computer.

There is a wealth of detail that we could outline here regarding mobile first design and responsive design, but for a business owner looking at their site, the three principles outlined above are key.

Look at your site on your phone.

Are the menus easy to operate on a touch screen?

Is the text easy to read without zooming in?

Is the information that you would expect people in transit or walking down the street to need to find, prominent and clearly highlighted?

If you can't answer any of these questions with a resounding YES, then your website needs help to optimized for mobile devices.