Responsive web design

What is responsive web design?

A responsive web site is a website which responds and adapts to its environment. The most obvious example is the width of a web page - while most web pages used to be designed for a single window width (say, 960 pixels), they are now often designed to fit the browser window width, whatever it may be: from just under 320px on an older phone, to over 1920 px on large desktop monitors.

We're often asked if a non-responsive website can be viewed on a mobile device. The answer is that it can (with a few exceptions). Let us show you an example of how a non-reponsive website behaves. The images below are of our old website shown on a desktop monitor (1366px) and a mobile (640px):

So the web page didn't completely fall apart on a mobile device. In fact, it looks very much the same on both screens, except it's smaller on a mobile. What happened is that the mobile browser, seeing as how the web page isn't responsive, simply scaled it to fit on its screen. This is what mobile browsers do by default; because, in the beginning of mobile era, the websites were mostly non-responsive and over 900 pixels wide, the browsers were made to display around 1000px (980 for iPhone) on a screen, say, 480px wide. They just zoomed the pages out; everything looked way smaller than on a desktop monitor, but it gave the user a more expansive view of the page. These days, when we code a responsive website, we need to explicitly order the mobile browser NOT to zoom out by default, because we're creating a page that will adjust to its screen, not the other way around.

Now, just for comparison, we have whipped up a quick responsive version of this page. Here's what you'd get with a responsive design:

On a mobile, the large black menu is gone, replaced with a large button user can tap to open the menu; we're saving on space. Text and navigation buttons below are larger and easier to tap on; human fingers need larger targets than a mouse pointer does. The basic content - thumbnails showing off logos for the projects we've worked on - takes up most of the space and the images are larger than they showed on a zoomed-out page for better viewing. There's a lot going on in the background too - we're serving only critical content and smaller images for the mobile version, to save on user's bandwidth in case the users are on a slow connection or are paying per amount of data transferred. We've also rearranged our content subtly to better suit the kind of users we expect will be viewing it on small screen devices.

(Looking for more examples? Try this showcase of responsive websites. Or just do a search for 'responsive websites examples' and take your pick. You can resize your browser window to see how a responsive website adapts to the changes. And by the way, this website is also humbly responsive.)

Is it more expensive to create a responsive website?

It is. It can be just slightly more (say 10%) or it can be as expensive as having several non-reponsive websites made; a lot depends on your needs and requirements.

Here's a few reasons why it may take more resources (cost AND time) to create a responsive website:

A responsive website is more work - for the client and for us. So the obvious question becomes - is it worth it?

Should your website be responsive?

There's people who'll recommend that every website is responsive right from its creation. And we agree - it'd be wonderful if it were possible. We want to make all the websites we create responsive. It'd look great on our folio.

Realistically though, we know our clients want most worth out of least investment needed; while in some cases responsive will be well worth it to them, there are websites which can get away with old-fashioned zooming and scrolling. What would we recommend then? Choose to have a responsive website when:

Why might you chose not to go responsive (at least for the time being)? Here are a few possible reasons:

Can you create a non-responsive website now and make it responsive later on?

Absolutely. It's not more difficult to turn a non-responsive into a responsive website than create it responsive from the beginning, so long as it's well planned from the design phase. If you are unsure if going responsive is an investment that makes sense, you can hold off until you know more without losing anything in terms of cost and time. We tend to have a long-term relationships with most our clients to make sure their websites are growing with their needs, and responsive is just one more aspect we can talk about at any point down the line.

Can you create a responsive website that doesn't cost much more than a non-responsive one?

It can be done - it's actually the option most of our clients chose. If you think you can trust us with it, you can chose not to have layouts created for any specific breakpoints; it's better to let the optimal layout be 'decided' by the content of your web pages anyway. You can chose not to have us create detailed mockups for every screen size imaginable - we can make do with wireframes instead. You can chose to have the same content served up regardless of the screen size (with all the different devices out there and better bandwidths available, it might even be a better idea than restricting your users to only parts of content or grainy images).

What are breakpoints?

Breakpoints are browser window sizes for which layouts are switched. For instance, on a large screen, a blog page might display a blog post in a column to the left of the web page; and an archive of posts could be displayed in a right-hand side column. On a smaller screen, the two would be displayed one after the other - first the blog post, then the archive UNDERNEATH it. The width of browser window screen for which one layout is replaced with the other is a breakpoint.

Some commonly used breakpoints:

This list can be further complicated - and is bound to grow, as new devices are released to the markets. Then there's the fact that browser window will usually be less wide than the actual device screen; even if it's maximised, its borders and toolbars will take up space. For these reasons, we believe sticking to a generic list of devices isn't the best approach; we always try to create layouts that best fit the content the client want on their website and let the breakpoints fall where they might depending on design and content. However, if you are concerned with specific devices, let us know in your client brief and we'll plan, design, develop and test for it.