Why You Need Responsive Web Design

Print design is fixed. If you and I buy the same magazine we will be looking at the same layout, fonts and colours in identical dimensions. But on the web, even if we sit in the same room viewing the same website, we will see different things.

The site’s appearance will vary according to the colour settings and resolution of our monitors. The browsers we use (probably some version of Internet Explorer, Firefox, Chrome or Safari) will show up parts of the site, such as fonts, quite differently. It’s unlikely that we will have our browsers stretched to the same widths and heights.

And what if one of us is actually on a smartphone? And the other on a tablet? Or a reading device? Or … you get the picture. Different devices display websites differently, depending on how the site has been coded.

Fluid versus Fixed

How a site appears is shaped by the end user’s screen, device and browser. That’s why you can never truly fix a web design. Fixed-width and fixed image sizes might look great on your desktop, but will likely be the wrong arrangement and size on a mobile screen.

With more and more people accessing the Internet through their phones, the alternative is to design websites to adapt to the device on which they are eventually viewed. This also addresses another problem of fixed websites: that they are fine until you try to change any of the content.

Responsive versus Fluid

Fluid design has been with us for some time. Fluid elements can resize with the browser window. Rather than lines of text being stuck at 20 words, say, they can fill the width of the window as it is made bigger or smaller.

But with desktop monitors wider than ever, people might be viewing lines of text 40 words long – nigh on impossible to track. Why do you think newspapers divide text into columns? At the small end, fluid columns of text will appear as minimalist poems – again, awkward to read.

The answer, thanks to CSS3 and HTML5, is to employ what Ethan Marcotte has coined responsive web design.

Responsive design adapts to the media that renders it. The components of the page adjust within set parameters so that the overall assembly still looks good and is readable, no matter which browser or device you are using. And no matter what new content you add to it.

This website is responsive. If you are reading this on your desktop, go ahead and resize your browser window and see what happens. You’ll notice that images and words stretch or shrink to a point, before jumping to a new layout at certain thresholds. These layouts are optimised for standard sized devices – from smartphone up to widescreen desktop.

This photo of Edale should look lovely whatever device you are using. Responsive design means we can upload content of varying sizes and the assembly will still come together well.

Web pages versus apps

There is a place for mobile apps. But sometimes we are asked to make an app because a company’s website does not work or look good on mobile phones. An app is not the answer.

If your website is responsively designed, it will work and look beautiful at any size. This makes more sense than designing an app or new website for each individual device, given that there are hundreds now and will be hundreds more in the future. Quite a job if you want to change any of the content on your site.

Responsive design is a technical and content-centred solution to designing websites for multiple devices and browsers. That’s why we’re doing it. If you want responsive get in touch – we’ll be responsive to you.