Responsive design began back in 2010 as a mere theory, and today it is implemented on virtually every website you visit.
Instead of one single webpage being created which is a pre-defined number of pixels wide centred on the screen, responsive designs are made of several different elements, the sizes, shapes and placement of which vary depending on the width of your screen. This is made possible with CSS media queries which take the size of the screen and use this value to modify a website’s various elements.
For example, you could have four elements on your website—A, B, C and D—which, on a normal computer screen, display as a square, with each element occupying 25% of the screen’s real estate.
On a smartphone—say an iPhone 8—it would not be possible to display these elements as one large square split into four, with each element occupying 25% of your phone’s screen in a way which wouldn’t require lots of zooming in and out in-order to read content.
Nobody wants to do this, so instead responsive design comes into play. Your website’s code recognises that it’s being visited from an iPhone 8 and your website’s elements—A, B, C and D—are displayed in a way which better fits the screen.
On an iPhone, for example, where the screen is narrower these elements would likely be stacked on top one another with each one occupying the entire screen, switching from A to B to C to D as the user scrolls down the page. In contrast, on an iPad or tablet where the screen is wider, the elements would be spread out next to each other.
Why not try this out for yourself? Visit a website such as Business Insider from your laptop or PC, and then visit from your phone. You will easily notice a difference straight away.
Alternatives to Responsive Design
Most people view responsive design as the best way to improve the mobile and tablet user experience, however, this isn’t always the case (most of the time, it is, though.) The two alternatives are: mobile websites, and mobile applications.
Mobile websites are duplicates of your original website, usually with the same content and elements, which are hosted on the m. sub-domain. Most of the time, these have to be developed from scratch and users will be re-directed to this iteration of your website when your server detects that they are using a smartphone through something called a User Agent. Mobile sites are viable alternatives and are still used, however, the User Agent can sometimes get it wrong which leads to mobile users being redirected to your regular site and vice-versa.
Mobile applications on the other hand are the best way aside from responsive design to control the user experience for mobile users. Why? Because with a mobile application, you can leverage the power from smartphone hardware capabilities. They can be expensive to make, however, and they do not appear on the open web and thus cannot be ranked by search engines.
What Makes Responsive Design Better than the Alternatives?
Aside from the fact that your website can be visited seamlessly from any type of device which improves the overall user experience, responsive designs are far better for SEO purposes. Google prioritises websites using responsive designs and places them higher up in search engine results pages because:
They are easier to use
Google only wants to send users to websites which are easy to use and are relevant. When people visit your site and spend five seconds there before hitting backspace and returning to Google, Google notices. If this happens a lot, Google will take the view that your website isn’t a good choice for whatever search term is being used and you’ll rank lower as a result.
This is terrible news if people are using the search terms you want to rank highly for and are simply leaving your website because it’s not using a responsive design. People now expect to be able to use websites across all their devices and not having a responsive design causes frustration and lost conversions.
You don’t need to create duplicate content
This is the main concern for people moving to a responsive design—they think that a mobile site with the same content as their regular website will be penalised by Google.
This simply isn’t the case; a responsive design takes content from one source and displays it in the best possible way for whichever device your site is being accessed from. You don’t have any duplicate content and you don’t run the risk of sending visitors to the wrong version of your website.
Responsive design makes SEO easier
Having a responsive design means that you will only ever have one website which you need to look after—prior to responsive design, sites would often have their regular website and then a second mobile-friendly one, such as m.facebook.com—which makes maintenance and SEO campaigns a whole lot easier.
Instead of trying to rank two different iterations of your website, you only need to work on having one ranked—this immediately cuts your work in half.
There are several reasons why having a responsive design implemented on your website is beneficial, however, one is more important than any other: they are now the “industry standard” when it comes to website design and customers expect to have a seamless browsing experience on any website they visit.
How Does Google Rank Responsive Websites?
In early 2012, Google introduced a new crawler called Google Mobile Bot (now known as Googlebot User Agents) which look at how user-friendly your website it is. Whilst there is no one single method which is guaranteed to get your responsive site ranked, Google helpfully suggests certain steps:
- First, you should read Google’s guide to mobile-friendly sites which provides information about how you can make your own site mobile-friendly.
- After this, take Google’s mobile-friendly test to see if your website is optimised enough for mobile devices. You can test either your entire site or single pages.
- If you want to go one step further, you can use Google’s Webmaster Tools to generate a Mobile Usability Report to identify any issues your website has on mobile devices.
Other ways you can stand a better chance of being ranked highly is to minimize JavaScript use, enable browser cashing, compress images and make sure that you use Google’s AMP pages.
