Responsive web design is the name used to describe a way to build websites where the text and images make it easily accessible and viewable on a variety of devices regardless of screen size. This design standard offers many benefits for users across multiple devices (both desktop and mobile) and is the standard highly recommended by Google.
Google favours mobile friendly sites
Search engine results on mobile devices now clearly mark sites that are optimised for mobile search. According to Google data, 61% of visitors will return to Google search if a website is not mobile friendly. With Google’s planned update that’s strongly hinted at favouring mobile optimised sites, mobile-friendliness will become more prevalent for site owners. Data also indicates that 71% of mobile users will leave after waiting five seconds for a page to load. It would make sense that users on a mobile device are more likely to click on a relevant result if it is optimised for their phone or tablet. That said, if the user intent is to visit a specific site, it’s mobile friendliness is almost irrelevant and from that point, mobile friendliness becomes a usability issue.
Improved rankings on mobile devices
Google’s Hummingbird algorithm gives priority rankings to mobile optimised sites for users that search via non-desktop devices. It takes into account data that search engines gather about bounce rates and users returning to search results from sites. There is also a potential negative impact for users that provide a bad mobile user experience.
From a technical SEO perspective, responsive design offers a number of benefits over alternative mobile solutions, e.g. dynamic content serving. These include:
- Download speed
The combined absence of device detection and subsequent redirection helps to speed up the user experience and download times for users on potentially slower mobile devices.
- A single URL for each page of content
As opposed to m.example.com or example.com/mobile, which helps focus inbound and internal link equity on pages which can rank equally on all devices.
- Consistent user experience
Design and layout elements remain consistent between devices, allowing users to become more familiar with a site’s structure and navigation cues, compared to different desktop and mobile designs.
- Avoiding duplicate content
Dynamic content serving via duplicate mobile sites create duplicate content issues (content available on multiple URLs) and subsequent coding required to fix these, i.e. canonical HTML tags. Google’s Panda algorithm targeted duplicate content for penalties so responsive design helps avoid these issues.
- Link development and content sharing
Sites often have issues with users sharing content socially from mobile devices and a mobile only URL being shared, which can cause issues for users on different devices. Responsive design avoids this issue as a single URL can be used. Similarly when building links, a single URL can be used and link equity is given a laser focus on a single page.
- Robust coding
Mobile devices have a much wider variety of screen resolutions than desktop machines and responsive design adapts regardless of the device which allows for not only current devices, but future technology without having to create alternative versions of a site to cope with them.
These are just some of the reasons to consider moving to a mobile friendly responsive design. Even if the costs involved in building a responsive design template are higher, Croud would highly recommend making sure responsiveness is built into the spec for any future site rebuilds. To help with that process, we’ve provided a few pointers below for building a site that’ll work across all devices.[/text_output][text_output]
Best practice responsive design for SEO
Google itself provides guidance for developers within its Webmaster Tools page on mobile design.
A number of responsive design and testing tools are available, including the following:
- A mobile-friendly testing tool is provided by Google that should be used to confirm the coding of all sites, in particular responsively coded pages.
- Firefox also provides a Responsive Design View tool for developers available here
It’s highly recommended that responsive site developers review this information whilst building templates to work with. Much of the following checklist is based on Google’s advice.
Responsive Design – SEO Checklist
- As with all mobile site design, ensure that site navigation elements are designed for touch-screen devices. Tiny links or navigation that becomes layered by CSS and therefore unusable are common frustrations for users.
- It’s important to cater for different user behaviour between desktop and mobile users. Desktop users generally display ‘browsing’ behaviour (a ‘lean back’ experience) whereas mobile users are often impatient and are browsing to achieve a task. Whilst this is less relevant for eCommerce, it’s still important to optimise the user experience for the minimum number of clicks (i.e. server requests) for mobile users.
- Test the responsible design on as wider a variety of devices as possible pre-launch to avoid any potential issues on specific devices. Reviewing data in Google Analytics at Standard Reports > Mobile > Overview can help prioritise this testing process around those devices most commonly used to a site. A list of the most common browsers is provided at the end of this document.
- Scrolling can become an issue when rendering long pages of desktop content on a mobile device, therefore it’s important to minimise unnecessary design elements that necessitate scrolling or screen “pinching”.
Blocked page elements
- When updating a site to use responsive design, wherever possible keep the existing URL structure to retain existing rankings.
- Check the sites’ robots.txt file post-launch periodically to ensure on-page elements are accessible to all search engines. Webmaster Tools provides a robots.txt testing tool at https://www.google.com/webmasters/tools/robots-testing-tool for this purpose.
- Some types of media aren’t accessible via mobile devices, such as Flash video players on Apple devices. These should be avoided or alternative ways of embedding should be provided.
- HTML 5 players are available which can be accessed across the majority of devices and Google provides a Google Web Designer service for creating these.
- Post-launch of a responsive design, monitor 404 errors on the site in Google Webmaster Tools to identify and rectify any errors that have occurred during the build phase.
- Similarly monitor the Crawl Errors report in Webmaster Tools to check for unusual behaviour or indexing patterns that might have been created during the rebuild, e.g. infinite redirect loops.
- Whilst the nature of responsive design provides a similar experience for users on all devices, avoid mobile online error pages where possible, e.g. historic pages that may have been built to serve content dynamically which are no longer available. Redirect these to their new location for a consistent user experience.
- One key element when designing for mobile users is optimisation of download times. Google’s PageSpeed tool provides mobile insights as well as recommendations. It’s highly recommended that this tool is used during the site build phase to ensure best practice is implemented.
- Refer to the efficiency recommendations provided by Google at https://developers.google.com/web/fundamentals/performance/
- Use compressed images wherever possible, ensuring the optimum download speed over image quality. This would ideally be implemented on an image-by-image basis but if not, an acceptable level of compression should be used and implemented universally.
- Ensure tracking codes are migrated across to the new site templates to ensure consistency during the migration.
- Take advantage of the opportunity to upgrade to the latest version of analytics tracking codes (e.g. Google Universal
Analytics) or implement Google Tag Manager to allow future flexibility.
- When moving to a responsive site design, ensure that any URL changes that impact on the purchase process are reflected in Google Analytics (or other analytics tools) so that goals and e-commerce tracking remains consistent.
- Retain existing key elements such as title tags, Meta descriptions and internal links to minimise the disruption to existing rankings.
- Avoid hiding content for mobile visitors, i.e. display all content for all devices. Users being unable to find content or details they’d previously seen on a desktop (or vice versa) is a common frustration. However, this does need to be balanced against other considerations such as download speed and repetitive navigation elements.
Here is a list of most common browsers:-
- IE9 for Windows 7
- IE10 for Windows 8 (which doesn’t run Flash)
- Default Android browser
- Chrome beta