More than You Wanted to know about Mobile-Friendly Design
According to Google, by late 2015, mobile traffic is set to surpass desktop traffic. With terms like Mobilegeddon, responsive and mobile first flying around causing confusion, I thought I'd explain a bit about some common questions.
First off, the very dramatic sounding Mobilegeddon is the release of Google’s new ranking algorithm designed to boost mobile-friendly pages released April 21, 2015. For many businesses, this took mobile-friendly website design from nice-to-have to a must-have.
Unsurprisingly with all this going on, I get quite a few questions on how to create mobile-friendly websites. I've answered the FAQs here, of course if you have other questions or want to discuss your website, feel free to contact me.
WHAT Are RESPONSIVE websites?
Currently, this is the most common way to create a mobile-friendly website. Responsive design allows websites to be fluid — rearranging according to the size of the display. Often sections will be built in modules so they appear horizontally on a desktop screen and stacked vertically on a smartphone.
Here are two layouts from a retail finder page we did for Laura Geller. You can see all the elements from the desktop version are also on the mobile version but stacked rather than next to each other.
What Are Mobile (m.) Websites?
Previously when companies needed a mobile website, they had to create a completely separate mobile website. You can spot these by their m. prefixes. Depending on your budget and needs, this can sometimes still be the right solution. For instance, mobile download times are slower so a separate mobile website can account for this with less kb-heavy imagery and simple, easy to touch-navigate text menus. It can better accommodate mobile user paths as well — streamlining the functionality of a website and adjusting to the specific needs of mobile users. For instance, offering a quicker checkout process.
For example, this is a landing page I designed for AHAVA for a new product launch, as seen on their mobile and regular site.
WHAT DO I NEED TO KNOW ABOUT MOBILE AUDIENCES?
As a rule of thumb, the younger your customer-base, the more likely they are to visit your site on mobile (and the more quickly they’ll leave if they find it hard to navigate). In general, mobile users are an impatient bunch so avoid uploading unnecessary product photos, pop-ups, or anything that will slow their process down.
Also consider buying patterns — many users browse in mobile but purchase on desktop. You can increase conversions by making that a seamless transition (allow them to keep their shopping cart for example).
There are also more practical concerns such as making sure buttons are large enough and spaced far enough apart to avoid fumble-finger frustration. Use the functionality of the phone to your advantage, for example rather than making users enter their location manually, offer them the automatic location finder. Similarly, rather than just list a phone number, allow them to call immediately.
What’s Mobile-First?
Mobile-First is designing first considering the constraints of mobile visitors, then gradually designing out to tablet and desktop. The goal is to create simpler, more mobile-friendly interfaces instead of having mobile as an afterthought. The traditional desktop to mobile approach is based on graceful degradation (each step getting progressively simpler) vs mobile-first based on the idea of progressive enhancement (each step getting more complex).
While this sounds like a theoretical debate for designers, it is important to consider your target market, how they are accessing your site, and what are commonly used features of your site.
Does everything have to be redesigned for mobile?
While mobile usage is growing exponentially, sometimes it’s not necessary to accommodate for every business. Despite the scary name, Mobilegaddeon only happens when users are searching on a mobile device. For someI work with an accounting application for governmental organizations — they have zero interest in creating a mobile-friendly version because it’s complex software that their target market would never use it.
That said, for the marketing section of their site, we are creating a mobile-friendly version.
Want to test how mobile-friendly your site is? Visit Google's Mobile Friendly Test.