“Responsive design means your website has been designed to render well no matter which device is used or the screen size. Responsive design is also Google’s recommended method of enabling “mobile-friendly” design — versus creating a separate mobile website. When performing searches using your mobile device, Google will let you know which websites are “mobile friendly”. To test your website or any particular web page, visit Google’s Mobile-Friendly Test tool.”
On April 21 2015, Google is making a major update to its mobile search algorithm. Google says this will have a “significant impact in our search results”. As you can imagine, some website owners who do not have a mobile-friendly website are rather stressed about this change. It’s been dubbed “mobilegeddon”.
This Google update shouldn’t have come as any surprise:
- Mobile traffic is growing like crazy.
- It can be an extremely frustrating user-experience to view websites on a mobile device when the website isn’t mobile-friendly.
- Google wants to show the best results on mobile devices so people continue to use their search engine.
- Google has been increasingly strengthening its recommendations to website owners to make their sites mobile-friendly.
Timeline of Google’s
Mobile-Friendly Changes:
- 2011: Google adds a smartphone Googlebot-mobile spider to crawl web results.
- 2012: Google officially recommends responsive design as its preferred mobile-friendly approach.
- 2013: Google adds mobile crawl errors to Webmaster Tools. Google updates its mobile search algorithm to account for faulty mobile redirects and smartphone errors.
- 2014: Google adds PageSpeed insights for mobile, adds warning labels next to mobile search results for sites which redirect mobile users to its homepage, and then for sites which use lots of Flash. Webmaster Tools adds a mobile usability feature. Google also adds a mobile-friendly label next to mobile search results.
- 2015: Google majorly updates mobile search algorithm to prioritize sites which are mobile-friendly.
Responsive design is now SEO
Starting April 21 2015, whether or not you have a responsive website design will be used to rank website results in Google’s mobile search.
Have a look at your current traffic: how many mobile search queries are you getting at the moment from Google? What is the trend like? Watch how this changes from April 21.
Things to consider before migrating to a responsive site
Responsive design is simply a tool. Using it doesn’t guarantee a good user-experience or a fast-loading site. I’ve seen lots of responsive design sites which are terrible.
When making the switch to a responsive design, there’s lots of things for a designer to carefully consider. In the list below, I’ve included some of the things I work though. Instead of rushing to convert your site to a responsive one, you may find it useful to ask yourself these so you can get better results for your investment:
1. Is it time to redesign your site entirely?
Before mobiles and tablets became popular, designers and coders could rely on a site displaying at a specific width, which gave them complete control over positioning of items on the page. Responsive designs need to be considerably more flexible.
While it is normally possible to take an existing website’s design and code and make it responsive with minimal visual difference for desktop users, a site which has been built with mobile usability as one of its primary goals will always generate better results.
Sometimes it’s better to build again than to renovate. Has it been a long time since you redesigned? Have your goals and priorities changed since then? Have trends changed? Have you been adding lots of features over time and things have ended up hacked together, buggy or difficult to use? Are there lots of plugins which could be removed? Is your site loading slowly?
If your answers to some of these questions are yes, redesigning may save you more time and cost in the long run than continuing to add on to your existing site.
2. What content is important on your site?
A common suggestion is to hide elements of the site for mobiles where there is less room. The intention of responsive design is to serve exactly the same content and features to every user. If something isn’t important enough for mobile users to see, why is it important for desktop users?
Delve into Google Analytics and see what’s being clicked on and what’s not. Are there things which can be removed which are no longer needed or being used? Are there features or content which are popular which you could highlight better?
3. How do you want to handle your site’s menu/header?
Ensuring a site is easy to navigate on mobile devices is important – but there’s a whole lot less space. Thinking about the mobile user experience is important: it makes you prioritize what’s needed and what’s not. What’s important to have visible when people first load your site?
The most common approach is to switch to a ‘Toggle’ menu for narrow screens. How important is your menu? Do you need to reduce the number of menu items so the full menu can display on tablets? Do you have dropdowns or submenus that are an important part of the navigation? Will hiding these inside a toggle menu require multiple taps and make the site confusing or complicated to navigate? Is it vital that your menu be accessible at all times, and should therefore be ‘sticky’ at the top of the page as people scroll down?
4. How do you want to handle your site’s sidebars?
Think about any sidebars on your site. The standard approach is to push these below the main content for narrow screens. Will this make sense for the way you’ve structured your site, or do things need to be rearranged and reorganized? For example, if a key action you’d like people to take is to subscribe to your newsletter and this sits at the top of your sidebar, you’ll need to adapt the design to promote the newsletter differently to make it work well on all screens.
5. How will you handle any ads on your site?
What is your ad network’s advice about responsive designs? What are their “above the fold” rules? What mobile ad units do they have? Will your site feel overwhelmed by ads on mobile devices, where the screen space is much less?
6. Is your current site user-friendly for people on touch devices?
These days mobiles are not the only touch devices – tablets and even some desktop computers have touch support.
Is it easy to touch icons and buttons or are they too small or too close together? Does your site rely on special hover effects that may not work properly on touch devices? Does it make sense to add other touch gestures – such as swiping through a slideshow or gallery? Do embedded maps work OK? Do videos?
7. Will your content be easy to read on a mobile device?
While content styling can be changed for different widths through responsive design code, a consistent approach is often the best. Is your text size and spacing appropriate for the screen size? Are the fonts legible? Are images too big or too small?
8. Are your graphics high definition (retina-friendly)?
With more and more devices being in high-definition display (Apple calls this “retina”), non-high-definition images and icons can appear blurry on these devices. Important images or icons like your logo may need recreating from a larger source file.
Liked this? Learn 100 more ways to market your website
Created by designer – marketer duo Rachel Cunliffe and Dianna Huff, 101 Ways is a 67-page illustrated guide packed with straight-forward information on how to market your website.
Divided into four sections, Beginner, Intermediate, Advanced, and Miscellaneous, 101 Ways covers everything you probably already know and a bunch of stuff you don’t.
Whether you’re a freelancer, consultant, blogger or small business owner, you’ll definitely find something you can use. Even we learned things writing it.
Praise for 101 Ways to Market Your Website
“I wish this guide had been around when I started. EVERYONE starting an online business should download it immediately, no question.
It is simple to follow and goes straight to what works. Plus, every single one of the 101 tips is not only capable of driving big traffic but can be done for free.
Furthermore, Rachel and Dianna have clearly put a LOT of thought into this book, and include a ton of insightful ways to use a blog more effectively to generate results. Whenever I run dry of ideas for promoting my site, I dip into this “book of secrets” and invariably come away with a powerful, ACTIONABLE idea I can actually use. Outstanding.”
“What a nifty guide! 101 Ways is chock full of valuable, practical and essential tips for companies of all sizes, but especially for us small business owners. As a marketing writer and business owner, I find the advice shared by Dianna and Rachel to be spot-on and logical. The book is a roadmap for business owners who don’t know where or how to market their websites. Everyone should read it.”
Get actionable tips to grow your website
Thoughtful weekly insights (no hype!) on improving your website