Different websites have different needs and therefore will require different features in order for them to be successful. The needs of an e-commerce site compared with that of an accounting firm are far and few between, for example, where a clothing brand is selling a range of T shirts, they need to have a feature to let customers know when a particular size or colour is out of stock. This necessity would be obsolete in an accounting firm where they are offering their services rather then a physical product. Regardless of a particular site’s needs, however, there is one feature that is critical to the success of all sites – mobile-friendliness and responsive design support.

What Are The Basics?

Responsive Web Design or RWD is the technique of designing and coding a website so that it provides an optimal viewing experience for the user – easy reading and navigation with as little resizing, panning and scrolling as possible – across a whole host of devices (ranging from desktop computer monitors to mobile phone screens).

The designer who is responsible for creating the Responsive Design has to ensure that the websites navigation elements, screen-layouts, text, images, audio/video players and all other UI (User Interface) elements readjust themselves on a variety of devices. This means that you do not have to waste time developing two separate sites – one for desktop and one of mobile – and can therefore save yourself a lot of money and hassle!

More people in the UK now use their phone to browse the Internet then with their computers or laptops. This shift in device usage outlines the importance of incorporating a Responsive Design in your plan. In fact, Mashable even dubbed 2013 the Year of Responsive Web Design. Pete Cashmore wrote,  “For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”

What Does Responsive Web Design Look Like?

The purpose of Responsive Design is to have one site, but with different elements that respond differently when viewed on different sized devices.

For example lets use a traditionally ‘fixed’ website. When viewed on a desktop computer, the website might show four columns, but when viewed on a tablet screen you might be forced to scroll horizontally through these – which is something that users aren’t too fond of. Other times elements might be hidden or images appear distorted. This is often complicated by the fact that mobile and tablet users can view websites in both landscape and portrait orientation.

On an even smaller smartphone screen, there are often even more challenges. Largely sized images may break the layout, and if the graphics are too heavy, the pages can take a long time to load.

With Responsive Design, however, the tablet version could automatically adjust to display just two columns – making the content readable and much easier to navigate. On a smaller smartphone screen, the content could appear in just a single column, stacked vertically – therefore having the same beneficial effects as the tablet. Previously distorted or cut off images would have automatically resized to the screens dimensions.

Basically the content on your website automatically adjusts to whatever device it is being viewed on!

How Does Responsive Web Design Work?

Responsive websites use something called fluid grids. All the elements on a page are sized by proportion rather then by pixels. For example, if you have three columns you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

To Round Up

Got the basics of Responsive Web Design, or still a little lost? Every website, regardless of that particular site’s goals or the audience that it serves, will benefit from a display that works great across different screen sizes. As a consumer it is now expected that a website is responsive when they access it from a device other then their computers – when the website isn’t, they will immediately be aware of this factor, and ultimately it can and will affect how they engage with your business.