What is responsive design and why do we need it?

Responsive design means the web page responds to the device screen size. Resulting in dynamic layout and appearance changes to suit the screen size of the device viewing the website. So you might get different layouts on each of a desktop, tablet and mobile.

Some history

If we go back a while web design was closer to print design in that you would layout your content to fit nicely on your one size canvas. Then computer screen started getting bigger and wider particularly. So web designers faced the challenge of designing for a range of large screen sizes.

• Some decided to just fix the layout based on the smallest common screen size thereby side-stepping the issue and leaving the extra screen width as white space.
• Others opted for a fluid approach where the content basically fitted the width of the screen. This led to simpler web page layouts as they were no longer fixed, they had to flow.

There were so many problems to be overcome to get a single website to work across computers and mobiles that the early solution was a separate website for mobiles. The big screen computer version was the main site and the mobile version was a grossly simplified version.

The main technical issues of mobiles are variable screen sizes and touch screen navigation which can lead to problems with:

• text may be too small and too closely packed on small screens
• large screen menus may not fit on small screens
• images may not be clear or fit well on small screens
• slideshows are intended for large screen and tend to be problematic on small screens
• pop-ups tend to be even more intrusive on small screens
• data tables may not fit on small screens

So how does responsive design deal with these problems?

The responsive design technique offered a flexible layout system which was based on:

• Fluid layout (so content flowed or resized to fill available space).
• A flexible Grid to devide up the height of the screen into rows and within the rows the width of the screen into 12 columns.

12 is a magic number for design layouts

12 devides by 2, 3, 4 and 6. So you can have blocks that are full width, 2 columns of half width, 3 columns of third width, 4 columns of quarter width and 6 columns.

• Say on screens wider than 1280 then 4 columns are displayed as 4 columns, 3 columns as 3 columns.
• At 1024 wide, 3 columns remains at 3 columns but 4 columns becomes 2 columns (2 stacked on top of 2).
• At 768 it all become 1 column.

With the most modern techniques web design starts with the mobile first and works up. The grid and breakpoints still work the same way, its just the focus is on getting the best design for the mobile first.

There are a vast number of screen sizes with new mobile phones being introduced all the time with some screens now being as large as tablets. Breakpoints are inevitably a compromise with no perfect solution.

What is responsive design: Other considerations include:

Content flow:

The flow of content has to work on multiple columns and in one column. The columns will rearrange naturally from left to right, and rows top to bottom. It is possible to reverse the stacking order on a block by block basis.

It means you need to be more careful about the layout content so that it still makes sense as columns are rearranged.

Text size and readability:

Clearly text needs to be easy to read regardless of the screen size.

This has led to larger text much more spaced out and more white space around blocks of content generally.

Touch screen navigation:

Links need to be easy to click so big buttons. In line text links mean that text needs to be well spaced out and clearly labelled.

Menus need to be simple. Traditionally websites have had lots of menu items, perhaps with 3 levels, which works fine on the big screens. But small screens requires menus items to be large to click on but preferrably not large in number.

So we need to cut menus down to size and give priority to the more important items.

Loading speed:

Site loading speed has always been important to maintain the attention of users. Websites (or more specifically web pages) with a longer load time tend to put visitors off.

Mobile networks are slower than broadband and google now uses loading speed as a search ranking measure.

So it is important for users (particularly mobile users) and for site owners that web pages load as fast as possible.

Images floating in text:

On large screens it was common for small images to be included within the text and allow text to flow around the image. But as the screen gets smaller the image stayed the same size but the space for text got smaller. This results in some quirky layouts.

So Images and text now need to be separated into their own parts of the grid so they can be responsive. This usually means you need larger images to work when everything is stacked into one column.

Data tables:

Displaying data tables on your web pages has become far more problematic as small screens cannot fit many readable columns of data.

So more imaginative ways of displaying your data information is required.

Sliders and Popups:

These just do not work well on mobiles so they should be avoided if possible.

Testing Responsive Design Websites

Web site testing is now also far more challenging. Test test and test across lots of devices.