Responsive design is becoming increasingly popular in the world of web design and development, and this not a coincidence, as I will explain. But first what is ‘responsive design’?
Whilst it may sound obvious to some, a responsive design has the ability to respond to environmental changes and adapt accordingly. By environmental, I mean a variety of parameters characterising a device such as a phone, a tablet or a computer screen (you guessed it, I wasn’t talking about the weather).
The key to responsive design is therefore the ability to adapt to multiple devices, rather than creating a design for each device respectively.
How is this possible?
Cascading Style Sheets (CSS) is the ruler in the web design kindgom. It’s a programming language that dictates how things should be placed and what they look like. Recent improvements in the language (mainly in version 3), have opened the door to many responsiveness parameters.
CSS is now able to tell you how wide or high the computer screen is or the device screen, its aspect-ratio, the colours available, the resolution and more (www.w3.org/TR/css3-mediaqueries).
Consequently, designers and developers have been able to use these new parameters and make their design react in different ways, depending on the device characteristics, making it responsive.
Here’s an example of a responsive grid system: cssgrid.net (change your browser window size to see the effect).
How useful is it?
Well, in our gadget saturated world, very. We can design a website or an app that will adapt to almost any device, making sure that the user experience is maintained.
It is also cost effective since only one design has to be created. Though, a responsive design may be a bit more onerous than a standard one, since more will be required to plan and code a layout that will support structural changes.
Even though it is a great solution for a global user experience, it can detrimental to the way devices have been designed to be used. It is great for content based websites or mobile sites, where the text and images can be moved and resized accordingly.
In the case of an app, which is both aimed at computer screens and touchscreen devices, where buttons, forms and menus are essentials in its use, the adaptability hang on a thin line. Yet, some responsive CSS frameworks (a set of codes, to be used like a toolbox for example), will transform text links into big buttons for touchscreens. A good example has been developed by Twitter engineers: twitter.github.com/bootstrap.
As web designer, I try to embrace the responsive route as much as we can for our digital projects. Typically, a third of a website’s traffic comes from mobile devices, so they are not to be neglected.
Ensuring a great user experience is fundamental to any website or application, and thankfully languages and browsers are catching up with the ever growing modern device market, where we must adapt quickly and efficiently.