There may be some argument over whether responsive or adaptive designs are better, but in many cases responsive design is going to be chosen for budgetary purposes (at least today). That means designers need to become familiar with the concepts and some basic guidelines for their responsive designs.

Before delving into this article, you might want to learn about the differences between adaptive design and responsive design, check this article: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design.

In the early days of the internet a website had to work on a monitor. As long as it performed reasonably well on a laptop screen it would work on every other PC to a reasonable extent. Then mobile computing arrived and things changed. Devices today range from those with tiny screens (like a smartphone) right through to huge monitors. The user experience needs to be catered for on each of these and that’s where responsive design comes in.

What is Responsive Design?

Responsive design is a way of developing web properties so that the device they are used on determines the way that the site will be displayed. It’s normally done using the principle “mobile first” – i.e. the experience is defined on mobile platforms such as smartphones and tablets and then scaled up to larger screens.

The need for this approach is being driven by the understanding that more and more people are accessing the mobile web and in many markets now – smartphone access to the net is much greater than traditional PC access. Mobile devices offer different capabilities to desktop/laptop environments too, such as touchscreens, GPS data, accelerometers, etc.

Finally, mobile forces designers to think simply. The experience on mobile is very limited thanks to the screen real estate. Sidebars, adverts, social media inputs, etc. are difficult, if not impossible to accommodate, so the mobile experience needs to be an exercise in simplicity with complexity only being allowed when the screen real estate allows for it.

The Three Major Principles of Responsive Design

There are three main principles that drive responsive design. Of course, there are other principles that come into play in certain designs but these are three that bind all responsive sites:

Fluid Grid Systems

Fluid Image Use

Media Queries

Fluid Grid System

In the days before the internet there was print. In print they determined the size of what would be displayed (and where) in absolute measures. When the internet arrived this trend was continued and websites were defined in terms of pixel sizes.

For the responsive web this absolute size won’t work. So we use the idea of relative sizes rather than absolute ones.

Let’s take a look at an example of how this works, using a mathematical formula:

Target size / context = relative size

So let’s say you’re working on a website with a wrapper that is designed to display the site at a maximum wide of 960 pixels and the device uses a maximum browser window width of 1280 pixels.

The 960 pixels is our target size. The context is the 1280 pixels.

So:

960/1280 = 75%

This principle will also apply to any child elements within your wrapper. So let’s say that you’re using a two column approach to your layout. The columns are intended to be of equal size with a margin of 20 pixels between them (making each column 470 pixels wide). We use the same formula again for the columns and the margin:

470/960 = 48.9% (for each column)

20/960 = 2.2% (for the margin)

In your CSS script you then take these percentages and apply them to the appropriate properties (width, margin, etc.)

Author/Copyright holder: Michael Gauthier. Copyright terms and licence: CC BY-SA 3.0

Fluid Images

The easiest way to handle fluid images (images that scale to fit their container) is using the CSS command:

img { max-width: 100%;}

This tells the browser that the image should be a maximum 100% of its pixel value and that it should scale according to its container. The idea is that this prevents an image from being stretched when the container becomes larger than the image – and thus eliminates degradation of the image – and ensures that it will shrink to the container when needed (this also maintains the original aspect ratio of the image).

You may find that you want to use multiple pixel densities as there are now substantial differences in the pixel density of certain screens (particularly on phones and tablets but also on certain laptops and desktops). To make this work – you can set the image to be larger than the container (typically twice as wide). The use of SVG files can make this easier as they are the smallest image files and can usually be scaled to any resolution.

For more complexity (lots of images) the responsive images organization offers the following approach:

You can declare multiple sources for an image using the picture element:

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

Combined with the scrset and sizes attributes to provide the list of image sources and sizes to allow a browser to select the best image:

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw"alt="A rad wolf">

Media Queries

Media queries are designed to alter the layout of the site when certain conditions are met. For example, the two column approach detailed above might not be practical in the screen real estate of a smartphone.

Author/Copyright holder: Tomáš Procházka. Copyright terms and licence: CC0 1.0 .

The idea is that you can then use a media query to specify when the screen real estate should be rearranged. You will find that this works best with a “mobile first” approach where you define what you want on mobile and then scale up from there.

The CSS might look like this:

@media screen and (min-width: 480px) { /* ..larger screen sizes here.. */ }

You could then define a series of these CSS commands for each “breakpoint”. That’s when each layout becomes broken on a specific screen size. You’ll need to test content to see where breakpoints occur and plan them. Eventually, you may find you can predict breakpoints based on the screen resolution of a device.

One More Thing – Frameworks

It can be useful to adopt an existing framework for responsive design rather than “reinventing the wheel”. For example; Bootstrap is one of the most popular “mobile first” frameworks available online and you can download it from their website for nothing.

The Take Away

Responsive web design takes a bit of practice to get right. The three core principles described in this piece will get you a long way towards getting your responsive designs right. Like it or not – catering for multiple devices is here to stay and designers need to be able to do this at the drop of a hat.

References

You can find the Bootstrap framework for responsive designs here - http://getbootstrap.com/

The responsive images community group can be found here: http://responsiveimages.org/

The W3 standard for the @media rule is here - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Luke Wroblewski proposed the mobile first rule back in 2009, here’s what he had to say: http://www.lukew.com/ff/entry.asp?933

Hero Image: Author/Copyright holder: Muhammad Rafizeldi. Copyright terms and licence: CC BY-SA 3.0