Responsive design - the changing face of interactive design

Mon 01 December 2014 Written by Evi
Evi

There are changes in computing that are so dramatic that we all have to completely alter our way of working to accommodate them. The Apple iPhone took mobile computing to the handset and now more than half of the world’s internet use is from a pretty small screen on a mobile phone.

That means any business that's serious about reaching its clients and providing an engaging online experience for them, must ensure that their web presence is tailored for mobile handsets as well as the traditional desktop and laptops. To add a little more confusion to the mix - they must also cater for tablet computers.

This is a huge challenge

If you rewind to 20 years ago, nearly everyone worked on the same screen sizes. 14”, 15” and 17” monitors were much of a muchness. If you designed with the smallest one in mind, nobody would notice that it was a little bit stretched on a bigger screen.

Today the smallest screens are 3-4 inches in size and the biggest are over 50 inches! Designers can no longer rely on easy scalability from one screen size to the next. This is where responsive design comes in to play.

Responsive design = flexible layouts

Ethan Marcotte, in 2010, came up with the concept of responsive design and the world’s first responsive layout. The idea was to design a website which would not just cater for different screen sizes, but actually adapt to them.

The amount of text, the font sizes, the number of images, displayed and how they would be displayed would be changed based on the screen size of the device the site or application was used on.

This is a very different approach for having a “mobile compatible website” (the old m.yourwebsitename.com strategy). It has the advantage that you do not need to make two versions of your website and then update them in parallel. You make one version and code for multiple devices.

This reduces error, ensures a consistent experience (there’s only one website that caters for everyone involved) and gets a whole lotta Google-love (evidence suggests that responsive websites are better ranked in Google than both mobile websites and non-responsive websites.

The only real challenge is that responsive designs may not work very well in old versions of browsers. Any browser released in the last 3 years will work fine with responsive websites, yet you may need to carry out some CSS updates if you need to support older browsers through a responsive design.

Create a design that has value

Responsive design is part of the overall design process. If you want your responsive websites to be good for your customers, they must also include valuable, useful content – because without this no one will want to stay on your website.

They must be easy to navigate and you should test this in several screen sizes to be certain of it. Make sure text is always legible on every screen too. Finally, you want to make certain that load times are reasonable - the faster your site loads the more likely it is that your users will stay and use the website.