What Are Adaptive and Responsive Web Design?

By John Eberhard

The subject of adaptive and responsive web design have been in the news a lot lately with Google’s announcement that after April 21 they have instituted changes to penalize web sites that are not mobile friendly.

So before I get into explaining what adaptive and responsive web design are, I’ll explain what “mobile friendly” means. Mobile friendly means that a web site is set up in such a way that it displays correctly on a mobile phone’s web browser. The text will be big enough to read, and things will not be cut off on the right side. So you won’t have to scroll from left to right to see all the content.

If you have a smart phone such as an iPhone or Android, you can bring up your web site on the web browser on the phone, and see if it displays correctly, with text that is readable and content that does not require scrolling left to right. You can also go to this Google page and enter your site address in to see if it passes Google’s test:
https://www.google.com/webmasters/tools/mobile-friendly/

Adaptive Web Design

Adaptive web design is a way of creating a separate version of a web site that will fit and look good on a mobile device. Usually an adaptive mobile design has fewer pages than the regular version of the site, especially if the site is large. And often the home page will be re-designed to look good on a smart phone.

Here is an example showing what happens with an adaptive design. To the left this is the desktop version of the site for one of my clients.

If you viewed that on a mobile, the text would be too small to read. But I have done an adaptive design for this client, and there is code on the site that recognizes when someone is on a mobile device, and redirects them over to the mobile version, which looks like this to the right:

As you scroll down that page all the text is readable on the small screen. Notice that there is a button underneath the logo that says “Menu.” You tap that with your finger and a menu drops down under that, allowing you to navigate around the site.

There are two big advantages to adaptive web design: 1) It tends to be cheaper to have done than responsive, and 2) It’s good to go this way if your site has pages that end in *.html and the currently ranks on search engines now. So doing an adaptive web design means you won’t lose the rankings you currently have. See my other article on this.

Responsive Web Design

Responsive web design is a type of web design that moves things around on the screen based on the size of the browser window. It will reflow the text to fit into the smaller window, and if your page has multiple columns of text, it will push the right hand column down below the left hand column. Typically, a responsive design will make the sidebar, if there is one, move down the page to be below the main page content.

If the site has a slide show on the home page, there are some slide show software programs or plugins that will make the slide show responsive. That means that if you go to a tablet or smart phone, the slide show will resize to fit on the smaller screen without being cut off on the right.

You can see how this works by taking the browser on your desktop or laptop computer and hitting the square button in the upper right to make the browser not fill the whole screen, then grabbing the edge of the browser and bringing it in to the left, making the browser screen smaller.

Notice as the browser gets smaller, the middle and right column get pushed below the left column. So on a smart phone you will only have to scroll up and down.

I started using a plugin recently that allows you to create squares or “tiles” in a pattern on a page, which pulls in the pictures to fill the tiles from other pages. You can see this at the top of my home page:

Note that since this plugin is responsive, when you decrease the browser size it reformats the tiles, in this case making them each into squares.

The benefit of a responsive design is that it is the method Google prefers, and you will have all your content on the mobile site, rather than a pared down version. This is important if you have a blog on the site with a lot of content, or a lot of other content that you want people to have access to on mobiles. But a responsive design tends to be more expensive than an adaptive design, as there is more work involved.

What is the Penalty Anyway?

So what is the penalty that Google put into place on April 21 for sites that are not mobile friendly? It means that your site will be penalized by Google in its rankings. So the site will not rank as highly for specific keywords that it was ranking for before. This is especially important if you have a site that was getting a lot of traffic from organic search on Google. You will be seeing less now if your site is not mobile friendly. So it’s time to handle that and get your site to be mobile friendly.