01795 255 600
Posted 9 years ago by Kris Jeary

An introduction to responsive web design

So what is responsive web design? To put it bluntly, the future. 

The long running headache for web designers is designing without knowing the size of the canvas you are working on, this has only been exacerbated in the last few years with the introduction of truly smart phones.

Issues & Considerations

The earliest method deployed, to deal with this newcomer, was to create a separate mobile site, increasing development costs as well as time spent maintaining two websites.

Then we had the tablet explosion which blurred the lines between the traditional desktop machine and mobile devices. Add in to the mix the increase in people being able to browse the web on their televisions and it gives us a huge range to cater for.

But also consider how users interact with these devices and it becomes apparent size isn't the only consideration, the distance the user is from the device is also vital.

Mobiles are held in front of faces, tablets on laps, desktop machines are further away and televisions can be on a wall many feet away.

There is also the connection consideration and catering for devices potentially being used over slower public connections (such as 3G) and with a data usage limit.

The Responsive Solution

So there's the problem, the solution is beautiful in its simplicity, create a single site which will adjust and scale depending on the device it's being viewed on.

Try resizing your browser on this site, or better still take a look on a mobile, or a tablet and see how the content readjusts itself to best fit and make sense on the various devices.

On larger devices the site displays with all it's bells and whistle, in full glorious Technicolor™.

When we get to tablet size the portfolio images reduce and we put fewer in each row to ensure they can still be visible and large enough to tap.

Mobile is the biggest change as we reduce the number of highlighted portfolio pieces and also go to a single column approach. The font size is also larger and the menu redesigned.

This is still the same page, with the same code behind it, just displayed differently.

Have a play around adjusting the size of your browser right now and you'll see it in action.

A note on "mobile first"

There are a notable number of designers advocating a "mobile first" approach. This means designing at a mobile size to ensure the site contains everything on smaller devices and there are no big compromises for mobile visitors.

It's certainly a philosophy which has its merits and is a valid way to ensure the smallest devices can access everything core to a site and deliver a beautiful experience, which isn't the poor relation.

No matter the approach, the results need to be beautiful and appropriate for the device. Don't accept boring, templated, mobile designs. 21% of recent visitors to my website (January 2013) used mobile size devices, a huge chuck which simply can't be ignored.

Let's get used to this now, the web isn't only accessed from desktop machines and this is a trend which isn't going away. Let's not tell visitors how they can access your site, they are the customer. 

About the author

A digital designer first and business development expert second, that's the approach Kris takes with his work. Kris ran his own agency (Squiders) for 10 years before it was acquired by Kayo Digital and he became Head of Design. Born and raised in Kent, his pastimes include cricket, cricket and more cricket.

Share on social media

Stay up to date with our latest articles

Stay up to date with our latest articles and recent project information, enter your details below to subscribe. We promise not to sell your data. 

Solving complex digital problems other agencies can't handle.

Request a callback

Let us contact you

Please leave your name and email address behind and we will be in touch shortly. If you have a time preference please also select from that field.

01795 255 600
Need some help?

Call us on

01795 255 600


Find us

The Innovation Building,
Kent Science Park,
ME9 8HL.