Read More " />

96black Blog

Fresh Laundry

Responsive Design

What is Responsive design?

You don’t need to be involved in the web industry to have heard about responsive design. You’re experiencing it now. Go on, have a play with the screen size of your browser.

It’s a hot topic, as is mobile web design — and they go hand in hand. Most clients want sites that are mobile friendly these days. A responsive website is simply a site that adjusts its layout to suit the screen size it is being displayed on, rather than the user having to scroll, zoom, pinch etc to work around the size of the device they are using. This means a flexible site for desktop resolutions, as well as tablets and mobiles, with no need for a separate mobile site. In the past, we have inherited a fixed-width mentality when designing for web, when in fact the web is not fixed-width at all. This is the way modern web browsers and websites should work now. Responsive design should now be standard practice, rather than ‘a neat idea’. It is the FUTURE.

What makes it?

The two basic principles that build a responsive website are fluid grids, which uses percentages for dimensions rather than set pixels, and media queries, which detects the size of the device and calls in different styles or commands depending on device width.

Here is a site with a lot of great examples of what responsive design looks like.

Responsive design requires careful consideration in the design phase to implement properly and will mean more work overall, but the results are extremely valuable. It gives your site professionalism, credibility and style.

As nice as that is, usability is more important. Especially for mobile users. With responsive design, you can reduce image sizes, change hover states and lightbox functions, make buttons easier to tap (fat fingers!), remove clunky scroll bars and take out unneeded (though exciting) javascript functionality that would get in the way and slow down the process of navigating a site for the mobile user, making it a much better experience.

Having a responsive design minimizes the potential viewing problems on future devices such as the rumored iPad mini (and who can predict what else) as the responsive approach lets the site respond to the the user’s environment automatically.

In practice

How far to take it? This depends on the clients needs and ideas. Obviously the more work, the more cost. The ideal is to keep it simple and do it well. A media query for every possible screen resolution is not needed, though you can get into responsive sliders, responsive images, and even responsive text should it be necessary. Let the project and the client set the requirements.

It can be hard to keep responsive in mind when designing, especially in terms of banners and images. There is much talk about mobile first — designing for mobile first, then adapting the design for larger screens. You may disagree, but I believe this is not what a website is intended for. I design for desktop first as it has the most possibilities and is the most complex layout. I then keep in mind how it will translate on other devices. Perhaps ‘mobile ready’ rather than ‘mobile first’?

The more we use responsive design, the better we will get at it, and the better prepared we will be when the next development of ideas and changes comes along.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>