The what and why of responsive web design

Since browsing the internet is no longer done only on the classic computer screen, all websites have to both look and work well on any type of device, regardless of shape and resolution. This is where responsive web design comes in.

Responsive web design has been around in one form or another even since before the term was coined in 2010 but it’s only very recently that it’s become an indispensable practice for web designers. Smartphone and tablet usage is exploding and the internet plays a part in many of the things we do every day, big and small.

Walking instead of sitting

I’ll admit, even I’m fazed by how many people use their handheld for things we’ve always associated with desktop PCs. Every 2 seconds, someone makes a purchase on eBay using a mobile phone. That almost makes me feel silly calling it a mobile phone. It makes about as much sense to call a desktop PC a stationary phone. But I digress.

Browsing the web has become so easy that it’s no longer safe for web designers to rely on users having any single type of screen. Not long ago, I reckon that most of us thought doing something on the internet was a task that often had to wait for when we got home. WiFi hot-spots weren’t more prevalent than restrooms and handheld devices that could actually use it were as expensive as they are today but not worth paying for.

Nowadays, accessibility has increased so much that we have become comfortable with the web as just a thing rather than something new and special. We can access it anywhere using many different devices, so it only makes sense that we would do it with the same kind of affable indifference we use to watch TV — wherever we are, sitting, lying down or standing, and with an object the size of a remote in our hands.

Enter responsive web design

You know, I’ve always thought the word “responsive” isn’t as appropriate as “adaptive.” Then again, I’m the type of person that’ll blithely disagree with any established convention for no particular reason. Nevertheless, the core principle of responsive web design can be summed up as follows:

To create a single design that actively adapts its layout to suit the size and proportions of any screen used to view it.

This is ideal, as it doesn’t restrict your web presence based on device; anyone who’s on the internet can fully experience what you have to offer.

It’s not a hard thing to sell. People use handheld devices to browse the internet. Hence, let’s design for handheld devices. Within reason, of course, if you carry a tablet PC shaped like a hockey club, you’re on your own.

Design as dynamic instead of static

Websites are arguably the children of news media and magazines (which might explain why some of them are full of drivel) and they started out in the same way. Every page was designed with a single layout, and, obviously, it didn’t make sense to expect a magazine to change its appearance depending on the size and shape of the paper.

With responsive design, each website is made up of either a single layout that’s flexible in both height and width or (more likely) multiple layouts, each of which is employed for a different screen size. The latter is dynamic design; to create a website that delivers the same content using different layouts.

Doing it wrong

I mention dynamic design because responsiveness implies a significant change in workflow for web designers. It’s tempting to create only the largest layout (i.e. the one for computer screens) and then jerry-rig it to work with smaller screens using media queries. This, however, results almost invariably in a design with shoddy code and inferior layouts for handheld devices.

The HTML mark-up must be flexible enough to enable the CSS to shift the layout around and the best way of accomplishing this is to code it in a way that allows for all the layouts. This means that the web designer has to make all the layouts right from the beginning and keep each of them in mind as they go along.

It’s not as hard as it sounds, especially if you make use of negative margins and positioning, but that’s a topic for another day.

Mobile-only site

An alternative to having a responsive design is to create a separate site dedicated to smaller devices. A script is used to redirect any visitor with a certain type or size of screen to a different URL, commonly a sub-domain named M for mobile (i.e. m.website.com).

The only time you should consider making a mobile-only site is when you require very specific control over how mobile users will see it. This is almost exclusive to highly interactive sites such as social media networks and even they all have apps intended for the purpose.

Should you use an app or a website?

In all likelihood, both. There is overlap between the two but it’s important to note that an app is primarily intended to serve a particular set of functions that are not more conveniently offered in the web browser. This is often done to offer customers a short-cut to a particular service and to circumvent the lack of an acceptable web browser on some entertainment systems, such as video game consoles.

For example, Netflix allows subscribers to stream films both in the browser and using an app, on, for instance, the PlayStation 3. Many take-out restaurants have apps people can use to place orders without having to browse to their website, effectively serving as a button labelled “pizza to my house, please.” Easy, quick and dedicated to one or more functions.

Rule of thumb is to have a website as your primary presence and an app if you offer a service that customers may want easier access to.

Also, keep in mind that if you get one of your customers to install your app, they may see it several times a day in their handheld’s dashboard. That sound you just heard was every marketer on the planet nodding their heads and winking.

To summarise

• Handheld devices have joined desktop PCs as a common way of browsing the Internet.
• Responsive web design is currently the best way to make a website accessible to all screen sizes.
• An app is an excellent addition to a website but should not be used as a substitute.