SPRINGBOX / Insights

5 Guidelines for Mobile-Friendly Design

by Springbox, March 27, 2015

Google recently announced that it will factor website's mobile-friendliness into its search ranking algorithm beginning April 21, 2015. With mobile browsing accounting for over 60% of online traffic, now is the time to prioritize your website’s mobile experience. Ensure your site is prepared for the upcoming algorithm update by adhering to these 5 guidelines for mobile-friendly websites.

1. Avoid software that is not common on mobile devices
The mobile-friendly movement is about creating a more accessible web for all. If your site uses Adobe Flash or Flash video to power animations or streaming media experiences, you could be cutting out a large portion of mobile users as this software is not compatible with iPhones or iPads. Be sure your site is viewable for users on all devices by using HTML-based animation or MPEG-4 video instead.

Make Text Viewable Without Zooming For mobile sites, make text large and clear to reduce need for user to zoom.

2. Make text viewable without zooming.
There’s nothing more frustrating to a mobile user than having to squint or zoom in to read text on a website. Mobile-friendly sites use standard fonts that are plain and non-stylized. Google recommends using a base font size of at least 16 CSS pixels, then resizing based on the font’s properties. Google web fonts offers tons of open-source fonts that are free and optimized for the web.

Additionally, remember that when it comes to copy, less is more. Websites should try and use concise language and break text up into blocks or bullet points whenever possible to make it easier for mobile users to follow while scrolling.

3. Optimize website images
In addition to being an important ranking factor for Google, site speed can impact your site’s bounce rate. Most mobile users will abandon sites that take longer than 3 seconds to load.  A common culprit for slow page load times are large images and files. Prevent your images from dragging down site speed by compressing them for the web. ImageOptim and ImageAlpha are two excellent free apps to try for compression. Next, make sure your images scale and look great on any device by removing fixed width properties from the code. Learn more about optimized images here.

Guidelines for designing for mobile Be mindful of content element's size and wasted space when designing for mobile. Make CTAs, buttons and navigation items tap-friendly.

4. Be mindful of size and space
Mobile device’s screens are small, so reducing wasted space is key when it comes to designing mobile-friendly sites. Focus on the elements that matter such as clear navigation, logos, and headers while cutting out elements that take up extra space such as sidebars and excess copy, and large images. Also, be sure to test your site’s mobile readiness across real devices using a responsive design testing tool like Mobilizer.

5. Create tap-friendly CTAs
For mobile users, calls to action such as links and buttons that are too small or too close to other page elements can result in click errors. As it turns out, fingers are just not as precise as cursors. Mobile-friendly CTAs stand out and are large enough that that can be easily tapped with a finger. This also goes for menus and navigation items. A good rule of thumb is having a space of at least 28x28 pixels around links on your site for fingers.

Following these guidelines will ensure that your site provides a great experience for all types of users and is ready to breeze through Google's next update. Ready to test your site's mobile-friendliness? Give Google's mobile-friendly testing tool a spin.