It wasn’t too long ago that Google announced changes to their SEO ranking algorithm to improve the experience of mobile users. Simply put, if your website hasn’t been optimized for small screens and tablets, it will take a hit in the SERPs. So how can you make sure that your site takes advantage of these new changes and stays atop the SERPs? Here is a quick guide to get you started.
Responsive Design is the Wave of the Future
Have you ever experienced having someone share a link to you while you’re using your desktop and it turns out that it’s a link to a mobile version of the site? Those things tend to be displayed in simplified formatting on a desktop and it’s horrible when the mobile site doesn’t automatically detect your screen size and redirect you to the desktop version.
Surprisingly enough, some of the most popular sites are guilty of this. I’ve often encountered a friend who shared a YouTube link through their smartphone and trying to click it on my desktop would have YouTube giving me fits about not using the right-sized screen for the link. That’s annoying.
Advantages of Responsive Design
Well, Google recently announced that it prefers sites with responsive designs:
Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices.
This eliminates the need to create a mobile-only site and having to redirect to that site if a user is on a mobile device. You would have to cross-reference content from the mobile site and the desktop site to make sure desktop and mobile users have access to the same content and can take the same path to get there.
Besides, redirects are slow. According to Moz.com:
Visitors coming in from organic search typically land on the desktop website and must then be redirected to the mobile or tablet sites. The length of the redirect delay depends on your connectivity.
This lengthens the load time of your site and impacts user experience. Google has confirmed that site load times are a ranking factor, and according to KISSmetrics:
A 1 second delay in page response can result in a 7% reduction in conversions. If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.
Also, responsive sites tend to be more user-friendly, with the interface being optimized for the screen that it’s being viewed on. For example, the navigation menu might appear as tabs on top of a responsive site when being viewed on a desktop, but changes into a drop-down menu on a mobile device.
Finally, an overlooked benefit is that it’s low maintenance and keeps the look and branding of the site consistent. WebDesignerDepot.com says:
No more style guides that need to be communicated between multiple parties, such as different agencies for the desktop and mobile versions of your site.
This makes it very easy for people to recognize the website, no matter where and how they visit.
Some Challenges of Responsive Design
Of course, it isn’t all rainbows and unicorns. Switching to a responsive web design has its challenges. One aspect that is impacted is development time. Responsive sites take longer to develop since they have to be optimized when viewed on different screens. Also, because of the number of test devices you have to have, it can actually become expensive! James Young of NetMagazine.com says:
For many designers, especially freelancers and very small businesses, it’s difficult to build up a test suite much beyond the devices you own personally. This came across loud and clear in the survey. Many people are making do with browser inspection and window dragging, along with testing on a personal handset and maybe a tablet. Obviously, this isn’t ideal. Building even a modest collection of devices is now a necessary business expense.
Testing time is also an issue. Although the time needed to test a site has certainly risen, I do feel that some of this is offset by better prototyping, designing in the browser and less reliance on static, fixed-size visuals.
Also, even if a responsive site adapts to any screen, the user experience will still depend on the device they are viewing the site from. James gives a perfect example. He says:
Imagine, you are responsible for a public transportation website. One user might visit the desktop version, browsing patiently, hoping to find a special bargain for his weekend trip. At the same time, someone else might be checking the mobile version, hoping to find out which platform he should run to before his train leaves in less than a minute.
Despite it being the same site, you have two people on different devices and different goals. To make sure that users have a great experience on the site, you need to consider that different people will use different devices in different situations with different goals.
A nightmare of any developer is converting an old fixed-width site to a responsive design. It’s always about how to update the code to make it responsive. Given a choice, most developers will prefer to rebuild the site from the ground up, with only a few being forced to re-engineer the old code because of factors involved that left them with no choice.
Another problem that you unfortunately have to deal with when converting to a responsive design are users of older versions of Internet Explorer. The reason is that versions 8 and older don’t recognize media queries and, as such, won’t display the correct layout. What happens is that these users end up with a small screen layout on their larger screens. And you can’t just ignore them since they represent 14% of web users worldwide.
One solution is conditionally including the respond.js polyfill from Scott Jehl in your pages. Scott says:
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well.
You might also consider not bothering about it at all. If all your content remains accessible, despite the less than optimal layout, you can get away with not bothering to optimize for older versions of IE. Then there’s the option of creating a simple conditional stylesheet for IE to at least make your site look prettier than the linear view that users of older versions of IE tend to end up with.