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:

• more work is required to understand client's requirements;
• the client may need guidance in learning to understand how it all works on a technical level;
• we usually have to help the client sort out issues with content strategy (sometimes desktop and mobile versions of the website require different content);
• in the design phase, we might need to create not one, but multiple mockups for each page layout;
• in the coding phase, each of these layouts need to be produced, along with transitions between them;
• a more costly testing environment could be required.

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:

• You have a comfortable budget, relaxed timeline, and you want a website that will last without major redesigns for years;
• Your users need to check out your web pages on the go - say, you are a restaurant owner, and your visitors want to check your work hours or location, or make a quick reservation;
• SEO and sharing links is important and you want a single link pointing to certain sections of your website;
• You want to brag about it to all your friends.

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

• Tight deadline and/or limited budget;
• You're planning on having a separate website created for users on mobile and small-screen devices;
• Support for old/bad browsers is important (some Internet Explorer browsers don't support some mechanisms that are important for responsive design);
• Performance is of utmost importance (a responsive website might be slightly less efficient, although not to the extent which matters for most websites);
• You can't be bothered. Going responsive is not always all about the layout; if you want to optimise for mobile and low bandwidth, you'll probably need to work with us on deciding if some of your web pages could do without some non-critical content. Do you absolutely need that huge image? Can a single image do instead of a slider with five images? Can we get rid of some of that text, place it behind a button that will load it only when necessary? Responsive done right requires more from you as well; if you're too busy to devote time to it, best leave it alone until you can do it properly.

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:

• less than 320px - older small, low res phones;
• less than 480px - older, smaller smartphones;
• less than 768px - larger smartphones and smaller tablets;
• wider than 768px - everything bigger such as large tablet screens and desktops screens;
• wider than 1024px - wide desktop screens.

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.