Users aren't the only ones to worry about when it comes to viewing your site on a mobile device. Google made it official last month when they announced that mobile friendliness will influence a website's visibility and serve as a ranking signal. The algorithm change is scheduled for April 21, 2015. Websites that aren't mobile friendly will be penalized in search results. Use this handy tool to find out if your site is mobile friendly.
People often assume that that creating an awesome mobile site is just a matter of "making my current site look good on my iPhone." The idea that designing for mobile is just an exercise in designing for a smaller screen is a common misconception, and unfortunately it often leads to second-rate mobile sites, frustrated users and high bounce rates.
While screen size is the most obvious challenge when it comes to desktop vs mobile design, it's only one piece of the puzzle. Here are 3 main ideas to drive your mobile design strategy.
Consider the changes in user experience
Mobile devices have completely changed the experience of using the internet. People use their mobile device everywhere; while they're working, exercising, out to dinner, or even using the bathroom. Smartphones are small, convenient, and basically an extension of a user's hand. They're used for daily tasks, often on the fly, when users want to get information quickly or complete a task.
A successful mobile site prioritizes readability and a structured layout and with large, user-friendly hit areas.
Readability Keep your mobile site friendly for both deep readers and people who like to skim with a single column of content, larger font sizes and a clear text hierarchy. Your average paragraph text should be at least 14 px. Use color and size to help your readers easily distinguish headings, subheads, captions and important quotes.
Effective layout Effective mobile design requires a structured layout. A grid system of vertical columns provides an easy path for users to follow, and allows designers to strategically place text, headlines and other content.
Large "hit areas" A structured layout also allows ample space for any items your user needs to tap. Whether your trying to online shop while you exercise or check your email while making dinner, we're usually not as dexterous as we think we are. Your targets should be at least 30 x 30px. In their Human Inteface Guidelines, Apple recommend at least 44 x 44x.
Clarify your content
Mobile browsers usually don't load content as quickly as desktop browsers, so it's important to refine and optimize your content for quick loading. Your mobile strategy should put your most important, action driving content first. What do visitors want to learn or accomplish when they visit your mobile site? Understanding their motives will help refine your content and create easy-to-follow paths for users.
Give your images a thoughtful audit as well. Which ones are key to helping users understand your information, and which ones are filler? Skip flash and animation.
Simplify your design
Depending on your site's aesthetic, this may mean large scale changes or just a few tweaks. Keep your core content in mind and pare down your design to showcase and enhance the user's mobile experience.
The TOMS mobile site is a great example of thoughtful design edits that improve the user experience. In the desktop version, the company's tagline "One for One" overlaps the slider, adding some nice color contrast and visual interest. On the mobile version, the tagline sits below the slider so it's easy to read and doesn't interfere with tapping the individual slides. A simplified nav, menu icon and single column layout keeps the mobile site organized and easy-to-use.
When you think mobile, think beyond the smaller screen size. What opportunities can a smart, effective mobile site create for you?