Why do I need ‘responsive design’ for my website ?

Because websites now have to work with smartphones and tablets and these have massively different screen sizes and resolutions. If your website appears with tiny (illegible) text then you will have broken the don’t make me think rule for the visitor.

This website has a responsive design and if you change its size on a desktop or large tablet you will see elements shuffle about and menus appear/disappear according to browser window size.

Example

Some years ago we did a website for a flying school and here's how we did the responsiveness.

Desktop

This is the ‘big daddy’ with the navigation on the left, the main content in the middle and the checklist in the sidebar rotated by a few degrees on the right.

Desktop view image

Because desktop screens can get very big (30”) these days, the overall width of the content area has been constrained and the lined blue background fills the non-content area.

Tablet

Apple iPads have very high resolution displays but browsers structure the page so that you can still read the text.

Tablet view image

The checklist has now been moved underneath the main content, but the navigation hasn’t moved.

Smartphone

The menu has been brought to the top so that it’s visible so we put the image, smaller this time, on the right. The content is now in a single vertical column.

Smartphone upper view image

Lower down the page we straightened up the checklist.

Smartphone lower view image

Incidentally on a smartphone, the font size is frequently increased.

Design considerations

A range of alternative renderings

It’s all the same basic HTML website code underneath, but the designer has to employ CSS (cascading style sheets) that are enabled or disabled by media queries to change the page according to the device being used.

Each different range of devices (desktop, tablet, smartphone) needs its own rendering and it’s not getting easier because there are more types of devices on the way – think watches, TV, HD TV and Ultra HD TV. You have to think about what devices your market is likely to use and the designer will have to work to at least three (fluid) layouts.

Links and menus

For smaller screens links have to be discretely touchable, so buttons may have to be bigger and perhaps fonts too.

If there are a lot of menu items, then you may have to fall back on the ‘hamburger’– the three line menu button that has become ubiquitous, though frequently it isn’t labelled. You’re supposed to know.

Hamburger menu closed image Hamburger menu open image

On the left, before the hamburger has been touched and on the right, after.

Information hiding

Some people like to reduce the amount of information on a small screen. If you’re going to do this, it’s as well to let the visitor know there is more available on a tablet or desktop as appropriate.

Large tables of data are not going to work on a small screen. One method for rendering large tables is to freeze the first column and let the user scroll the remainder. Of course this becomes harder if the table is deep as well as wide.

Finally

We’ve noticed that some of our clients’ websites are more popular with smartphones than desktops with tablets coming last – though this may change over time. For most owners it looks like having a responsive design is mandatory.

Think carefully about your particular market and its needs. Think too whether you should consider ‘mobile first’ as a strategy for your website design. Whatever you do, ensure that you have implemented the minimum for mobile.