Responsive webdesign

2013 is the year of responsive web design (RWD). But what is responsive web design and how can we use it?

Not even five years ago almost everyone was browsing the Internet with laptops or a desktop computer. The life of a web developer was relatively easy, from 800x600 till 1900x1440 screen sizes you needed to cover but not much more. You could create a totally static page with just one set of layout rules and everybody would be happy, and every browser would display the page the way you made it.

Today however, people browse from thousands of different devices, from phones to tablets, Eee pads, laptops, computers and even iPods. All of which have different screen sizes. This drastically changed the web development approach, introducing media queries and a new way of designing websites: responsive web design.

What is responsive web design?

Responsive web design is a design approach with which we try to create one website for all devices. The basic elements of responsive web design include a fluid grid concept, flexible images and media queries.

Fluid grids

A fluid grid is a grid of elements usually divs, that all have proportional sizes (percentages instead of pixels). When all the elements of the grid have their width and or height proportional to the size of the screen it scales on all devices. This is already a nice thing, though we should also make sure that the content of the grid is resizes as well.

Flexible images

​If there is something to be flexible then this is in the first place the images we use. Flexible images are images with their width in percentages instead of pixels. Usually they have their width to 100% of their container. This way the image will never run outside its boundaries. Drawbacks can be though that the image becomes too large on HD screens, resulting in a pixelated appearance. Or the image becomes so small on small screens that it becomes useless.

Media queries

With media queries in CSS you can apply specific CSS rules only when certain conditions apply. You can for example create a media query on Max-Width. 

@media screen and (max-width: 600px) { img{ width: 100%; }}

Now the image on this site will appear 100% of the container width if the screen width is smaller or equal 600px. If the screen is larger, the image will not have the 100% rule. This way we can for instance make a web page with an image and a few lines of text appear on small screens like:

And on big screens like:

This we can do with the Media query max-width, and by setting "float:left;" for the image.

We can also use media queries for a whole css stylesheet. To do so we need to add the media query declaration in the head of the html file.

<link rel="stylesheet" media="screen and (max-width: 600px)" ...

We can do many more media queries so to adapt our design for all kind of devices.

On this site from CSS-Tricks you can find a nice list.

Text in responsive designs

Text in responsive websites can give problems. For instance the text might be too big for the container that holds it. To solve those problems we can make sure that the containers height varies depending on the text, but sometimes this is not what you want. If you want to keep the restrictive height the only solution is cutting the text nicely and making sure the whole text can be seen in another way. A solution could be a "more" button for example that enlarges the container when clicked.

Clipping the text we can achieve by applying the following css rules:

overflow:hidden;

text-overflow:ellipsis;

The first rule makes sure the text is not visible outside the container, the second line makes sure that the clipping of the text is rendered like "...".

This can also be handy with titles in headers for example. If the title on a mobile phone header is too big,  it is usually not a problem whether the text is clipped. If the text is not clipped however it will run out of the header and might break the style of the page below.

Fixed Borders

Borders are a big problem in responsive web design. As long as your fluid grid contains only elements with relative sizes and relative border or no border at all everything is fine. However, if we want to put a border of 1px solid black in a table for example everything is messed up.
For instance, 3 divs with a width of 30% and a padding of 3% on the left, making a total width of 99% and so always fitting next to each other.

 Now we add a 2px solid border around the divs and the last one falls off the row. We can not fix this by putting a lower percentage for the divs width, because on small screens it would still mess up and this would be a solution with side effects we do not want.

Fortunately there are several other solutions though we can use.

Outline:

Instead of using a border, we can use the outline css rule. This rule works exactly the same like border, with the exception that it does not modify the width of the element. Outline works in all major browsers but does not work in Internet explorer version 6 and 7. If however outline is not supported, no borders will be drawn so the divs will not be moved either.

If we use outline we get this:
 outline:3px solid black;

and in low versions of Internet explorer the borders do not appear.
However, there is another problem with outline when we use Firefox and box-shadows. If we use box shadows on our divs, then the outline in Firefox will be drawn outside the shadow, instead of outside the box, making the view extremely ugly!

Outline in Firefox with box-shadows

 Box-Sizing:

 Box-Sizing is another solution to our problem, it makes sure that an element never grows bigger than its defined bounding box. In css we can use box-sizing for all browsers like:

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

Box-sizing does not give the Firefox shadow problem, but unfortunately does not work in IE6 and 7.
To make matters worse, if it fails to work the elements will still exceed their boundaries and shifting might occur.

So what is the solution?

The solution depends what you or your customer wants, do you really need borders in the first place?
If yes, and you want to support all browsers even the old Internet explorer ones than a solution might be using Javascript. With a simple Javascript script you can calculate the exact size the divs need to fill your page width.

You can use jQuery to make it even more simple. To get the width of your window use:

var windowWidth = $(window).width();

Then with simple math you can determine the width of your elements. For example you want 3 elements to fit: $("div").width( ($(window).width() / 3) - 4 );

If you cannot use javascript, then another but more painful solution would be creating your own inside border by placing images at static positions inside your elements.

Rules: Min and Max width, making choices

Responsive web design is nice, but you also need to make choices, do we really want to support this 64px screen? Do we really want to show our pictures on this very small screen? Do we really want our pictures to become huge on this Internet TV?
This is why you should use media tags, but also use the CSS rules: min-width, max-width and min,-max-height. With these rules we can specify that our image should never become bigger than the actual size of the image for instance, or that our button should never become so small that it is not clickable anymore.
Some times it is better to completely hide some elements on smaller screens than to display them in an ugly way.

Conclusion

We have a lot of tricks to make the responsive design successful. While we should always keep in mind what the target audience is and how many devices we wish to support, it is nice that we can easily support many devices by using only a small selection of extra css rules.
If you plan ahead and use a clever grid to build your website, responsive web design will not bring you a headache. Though if you already have a website that is not optimized for responsive design then this might produce a lot of problems.