An Introduction to Responsive Design

Published on , in Front-end with no comments .

Responsive design is a technique that allows developers to maintain a single code-base for their site and alter how the pages look by using Media Queries. This means each page is represented by a single URL and with the same HTML code regardless of the device accessing it. This has a number of advantages.

Firstly, the single code-base cuts down on maintenance and development effort since you would no longer have a separate version of your site specifically for mobile.

It also means that since the content is accessible from a single URL then it’s easier for users to share and find your content. This also has advantages for search engines and SEO. Search engines will now be able to find your content quickly and more easily since they wouldn’t need to crawl pages with different user agents to access all of your content. Responsive sites also have more links to key pages since all the links point to a single URL instead of being spread between the desktop and mobile versions of a page which would lower the power of those links.

Responsive Design Solutions

There are two options when considering a responsive website — fluid and fixed/adaptive.

An adaptive design still uses fixed widths as with a normal site and uses media queries at targeted resolutions to alter the layout. This can make it difficult to provide an optimal experience across a large range of devices because of the differing resolutions and pixel densities, and may still result in horizontal scrolling or pinching and zooming. One solution which can help with this is to switch to a percentage based layout at smaller sizes which would then allow the page to scale to fit the viewport.

Adaptive design allows designers and developers to maintain pixel perfect control over every element on a page since they would be sized with pixels rather than percentages. It can be a great solution for people and organisations that can’t quite afford to start work from the ground up to create a responsive site, especially if their site was created recently. In these cases it would likely be preferable to adapt the site for targeted resolutions rather than re-building it.

Responsive design is based on a fluid grid which means the site naturally scales to fit the viewport or specified maximum and minimum sizes. This results in a more bulletproof design since we can match breakpoints to the design rather than the device as the resolutions and pixel densities are changing so quickly. It also means pages adapt beautifully to devices with portrait and landscape modes.

There is no rule as to how many breakpoints a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flows nicely regardless of the width of the viewport.

Basically, with responsive design we can accommodate all devices — from TV’s, large desktop displays, laptops, netbooks, tablets to smartphones regardless of resolution, pixel density and orientation.

Naturally, because responsive design is based on a fluid grid, designers lose the pixel perfect control they crave. It’s not all bad though, since this minor loss of control is sacrificed for the greater good of the site. It may no longer be pixel perfect, but now it’s well tempered.

Responsive & Adaptive Design Examples

In the next post I’ll introduce you to the Media Query and how to achieve a responsive site by building a basic page. For now though, here are some good examples of sites using adaptive and responsive design.

Adaptive Design

Head London

Head London screenshot
The Head London site works very well but the site is still too wide for small viewports.

Fork CMS

Fork CMS screenshot
The Fork CMS site works very well even on small screens where it fits the viewport better than Head London.

Food Sense

Food Sense screenshot
Food Sense is another very good example of adaptive design.

Responsive Design

MacDonald Hotels

MacDonald Hotels screenshot
MacDonald Hotels is a great example of a responsive site, featuring responsive forms and sliders. The main nav bar contracts to an expandable box on small viewports.

Bitfoundry

Bitfoundry screenshot
Bitfoundry is a good example of responsive design although the contact page does have some problems with the form and header.

Forefathers

Forefathers Group screenshot
The Forefathers Group site is very graphical and detailed, and works very well across a range of viewport sizes.

Leave a Comment