Responsive Web Design

There was a time when it was straight forward to design a website because everyone was looking at it from the same type of device: a desktop computer. You could safely design your pages to fit a fixed screen size.

In the early days of mobile devices that could connect to the internet a number of mobile technologies were developed (anyone remember WAP – However very few of these worked well because people just wanted to access the internet and all the sites and data already on it.

The next evolution was to make a different version of your main website that would load when viewed on a mobile device. This was mainly called a mobile version of the site and it is still being used today. However does not recommend such a solution.

The two main limitations of this approach were that you were maintaining two independent websites, doubling your work, and the mobile version was designed with a particular device’s screen dimensions in mind.

But there is now a great variety of hand-held device, from Android tablets to iPads and iPhones with great variation in screen size. This means that having a desktop version of your site and a separate mobile version is no long a workable solution. This is why the Responsive Website Design was developed.

Responsive Design is an approach to website design and coding which takes into account that you cannot predict what the size or orientation of the device on which a website will be viewed. So you have to use methods that will adjust your design to the screen size it encounters. The advent of HTML5 and CCS3 has made Responsive Design that much easier to achieve.

Responsive Design is based on a fluid grid system which adjusts the overall layout of the website to the screen size. In this sense the design “responds” to its viewing device. Certain conventions have already been established with this approach to design, for instance a multi-columned desktop layout will normally collapse to one single column when viewed on a mobile device.

Since the Responsive approach is meant to address all possible screen sizes, you may set up rules for sizes in between a desktop and a mobile. So, a four column site might collapse to a two column site on a tablet or mobile device held in landscape orientation but to a single column on a mobile held in portrait orientation.

But a lot more goes into Responsive Design than columns. Images must adjust to the screen size as well, and the resolution of the images may come into play on devices with hi resolution Retina displays. If you want to accommodate these devices with your design, you may have two copies of your logo: one that is display on lower resolution devices and a hi-res copy for Retina displays.

Font size will also need to be addressed as a font size of 30 pixels might look well and in proportion on a desktop but on a mobile device it might overpower the screen and look incongruous with the rest of the text.

Responsive Design must also address which elements are best suited for which devices. Some features that work well on a desktop or tablet, like a slideshow, are only a distraction on a mobile. So these items might need to be removed when viewing the site on a mobile. Likewise, when you hover your mouse over an object in desktop view it works well to have something happen.

An example of this is when you hover over a main menu choice and a list of submenu choices drops down. But you can’t hover with a device where you are interacting via a touch-screen. For this reason, menu drop-downs need to correspond to a finger press and shouldn’t disappear when you move your finger off the screen. In fact the very layout of the menu will most likely need to change when viewing the site on a hand-held device. have begun to approach our website design and layout from the mobile version first and we work our way up to the desktop. We have found this to be a better way to address the issues that accompany designing a website that will work on any screen resolution, as we are moving from the simplest to the complex.

When working with our clients in coming up with a design for their website, we always encourage them to adopt a Responsive Design, whether we are designing the site layout ourselves or they are opting for a pre-packaged theme or template.

Responsive Design doesn’t mean coming up with different designs for different devices; it just means that you must be aware of the variation in screen size when you come with a design. It may take a little more time at the outset and there may be more steps in actually coding the site, but the end result will be a functional and user-friendly website that will be accessible to anyone.