2015: The Year of “Mobile”

Have you checked your Google Analytics lately? Do you know how many website visitors are coming from mobile devices and tablets? Just click on Audience, Mobile and Overview to access a breakdown of your total site traffic.  The Overview contains three sub-tabs that are accessible from the links under the Explorer tab: Summary, Site Usage and Ecommerce.  The data in this section can help answer questions such as:

• How many people are visiting our site from mobile devices during a given time period?
• What percentage of our overall website visitors are using mobile devices?
• Is there a difference in the number of pages site visitors are viewing from desktops, mobile devices and tablets?
• How long are mobile visitors spending on our site?

If you have heavy site traffic coming from mobile devices and they are not spending much time on your site — engaging with your brand — most likely it’s not “responsive” (mobile friendly).

As you have probably heard, mid April of this year, Google made big changes to their search engine algorithm, giving priority to websites that are optimized for mobile devices. Over the past few months, many companies (our clients included) have started taking a closer look at their site traffic and refreshing their websites to make them mobile friendly.

If you’ve decided to create a responsive design website, here are a few tips to improve your design process and site performance:

10 Responsive Web Design Tips

1. Design as simple a site layout and HTML code as possible and using simple mechanisms for core elements such as navigation and menu options, using HTML5 guidelines and document types.
2. Avoid absolute positioning, fancy Javascript or Flash elements that may slow down page loading or complicate site adjustments on various mobile devices as the viewport width changes.
3. Build the entire layout of the interface first, before doing any coding. This ensures you have the look, feel and navigation you want before coding.
4. Keep it clean and functional. Make the buttons large enough for a fingertip and allow enough space between them so users don’t accidentally tap the wrong one.
5. Design easily-recognizable icons or stackable buttons with drop-down menus if you have multi-level navigation.
6. Create optimized images for each layout to reduce scaling and bandwidth issues. Use JPEG and GIF files, where possible. PNG can bloat your file sizes by 5-10 times.
7. Use exact image measurements and set dimensions to match to prevent scaling and preserve resolution. (Resolutions can be defined in an assortment of breakpoints, but there are several major sizes you should focus on).
8. Streamline copy to avoid long scrolling pages which can frustrate mobile users and cause them to bounce. Prioritize your content, making sure it is easily accessible and create Read More links if you absolutely must include heavy text in a particular section.
9. Make sure images, text and charts displayed in column format are stackable and can adjust to smaller viewport widths. (You may have to create full, half or third-width versions using style options depending upon the browser.)
10. Check out Google’s Design Standards to help make your pages load faster.   http://googlewebmastercentral.blogspot.co.uk/2013/08/making-smartphone-sites-load-fast.html

These are just a few tips we’ve learned from experience.  Ultimately, when designing a responsive website, always keep in mind that it needs to load and function quickly on all mobile devices, some of which may have low resolution, small processing power and weak bandwidth access, so keep it simple and well organized for maximum performance.