Responsive design means that the website responds to the device it’s displayed on. It’s another word for mobile web design.

What is Responsive design?

In the old days web developers had to design different websites for different devices (and browsers) but now we design just one website that will change according to the viewer’s device width. Google thinks it’s an important indicator of website quality . . .

[blockquote photo=”” author=”Matt Cutts – Senior Google Engineer” company=”Google” link=”” target=”_blank”]Starting April 21st 2015, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.[/blockquote]

Mobile web history

While people have been experimenting with responsive code since 2010, browsers (especially the sluggish IE) have only recently caught up with the idea in the last year. Around 30% of all sites are now viewed on mobile devices such as the iPad or Android phone.

A responsive web site looks good on desktop and mobile devices including phones, phablets, tablets and small or large screens – anything that can display your website

Responsive web sites demand a flexible approach to web design, so you’re going to have to let go if you’re very specific about how you want your site to display. Responsive design is all about modular “containment”. Most back-end Content Management Systems (CMS’) treat parts of your site (such as news articles, Twitter feeds, sales banners and main pages) in a modular way. Each news item, page, post etc. is poured into its own container inside a database. How that info is poured back out (and onto a screen) is a web design issue.

Video About Mobile Web Design

This video nutshells the whole thing quite nicely.

While larger text is great for your phone, it will look like shouting when exploded up onto a 24″ desktop monitor. Text and picture sizes need to be thought of in a different and more flexible way. An ebook display has to be flexible so that people can increase text size. Elements need to expand or contract to accommodate the device window.

One can’t be too precious either when it comes to image cropping or other on-the-fly manipulation. Photographers or artists may not like to see their work cropped in random or haphazard ways by an eager thumb-nailing system. People who want modern website interfaces need to be flexible when it comes to design as every different device will probably server up a differnt version of the website.

The Responsive Image

To lie inside a responsive website, your images, gallery or slideshow also have respond to the width of the area they are contained in. You can check any website on your iPad to see if this is working. Find a slideshow – any slideshow.

Does your website photo gallery or main page slider work correctly on your touchscreen or iPad?
Can you swipe your way through a carousel of photographs with your finger?

In short, web designers are aiming for a perfect digital screen experience. It just took browser builders about 10 years to come to the party. IE is the naughtiest browser by far.

Responsive web design for the designer

Responsive Web Design on Prezi by Sonja Leix.

Responsive CSS Fameworks

Responsive websites are built using modern CSS frameworks using CSS3 media queries. Non-web designers don’t really need to know the detail but if you’re keen, this Wikipedia article gives a good overview and if you actually want to build a responsive site, this article is a great primer).

Is my website responsive?

If it was built after 2010, there’s a tiny chance that your bleeding-edge early adopting web designer made it so. More than likely it’s not.

You can tell if your site is responsive by stretching and shrinking the width of your browser window. Responsive sites shuffle and resize elements to fit the new viewing window. Since July, 2012, most Geoffrey Multimedia sites were built using a responsive framework.

The problem with mobile websites

Most websites don’t display well at all well on mobiles. Or maybe they do display, but you need a magnifying glass to read the text.

While we’re a little backwards here in Perth, since July 2012, about 90% of Geoffrey Multimedia websites were built with mobile devices in mind. Because we are small, we can be early adopters of new technology. Unlike larger companies beleaguered by process and training, we’re 100% free to use the latest techniques when building a new web site (it’s kinda why we’re not a company).

If you are about to update your own website’s look and feel – or even buy a whole new website (we recommend doing that every two years) ask your favourite website development company or developer about responsive design.

Responsive is cheaper

Web designers will kill me for saying this. Responsive websites are based on CSS frameworks which are effectively written for 5 display types, individual devices and operating systems. It’s not cheap to retrain staff or upgrade company processes, so a larger company will charge extra I’m sure.

It’s cheap for you because you pay once. Any minute now you’ll receive a barrage of emails from web designers keen to make your site responsive, but there are quick fixes to this problem that will tide you over until you do eventually bit the bullet and make your whole site responsive.

The Code Behind Resposnive Layouts

A few years back, it was normal practice to get a bit of JavaScript to detect the device-width and switch CSS stylesheets on the run. Not too long ago it was common (indeed much easier) to have several CSS stylesheets used for layout purposes alone.

  • One for the cantankerous Internet Explorer (ie.css)
  • One for play-nice browsers like Firefox and Chrome (layout.css)
  • One for mobile phones (mobile.css)
  • One for printers (print.css)

How it works

Inside the main layout stylesheet, there is a number of CSS “switches” inside it which do simple things according to the width of the browser window – be that on a phone, a desktop or a tablet;

  • Make text bigger on Mobile Phones
  • Collapse boxes to show above one another
  • Remove or replace the slideshow with a Call to Action
  • Show stuff specific to mobile users

With current advances in other areas of web development, a website developer’s job is getting easier and more fun despite the odd curve ball. A responsive website should cost you exactly the same as a boring old traditional layout, so don’t be fooled. It just depends on how progressive your web developer is.

Mobile web design used to mean that a company could effectively charge twice for just one website.

Other than slideshows and video, words in this article © copyright 2015 E.J.Lynch – All rights reserved. This article originally appeared on Geoffrey Multimedia. It was originally written in May 2013, but was revised again in April 2015.

[button title=”Get in touch” link=”” target=”_self” size=”small” background=”#990066″ color=”#fff” text_shadow=”#8d321f”]