Blog Post: How Responsive Web Design Works

Sunday, August 5th, 2012

In our last blog post we established why Responsive Web Design is so important to the future of how we think about web sites, which only leaves the question – how does it work? There are a number of key elements that make up effective RWD, and each are by definition extremely flexible. Each site design is different and should be considered differently, but here are the building blocks that form the basis of RWD.

Customisable Structure

This relates most directly to the “responsive” part of Responsive Web Design. A customisable layout structure is one that detects the settings of the screen that it is being viewed by, and automatically adjusts the different elements on the page to fit. This sounds complex, but it is really just a matter of keeping the layout flexible and floating. For example, instead of working in terms of absolutes (eg, this banner is 500 pixels wide), customisable layouts work in terms of floating values (eg, this banner is 80% of the page wide). This creates a page that naturally changes with the viewer, including when the device changes from portrait to landscape.

Resized Images

Images are one of the most difficult elements of a page to make flexible – they are liable to become distorted easily. A simple solution is to simply display images at their maximum size, but include a small bit of code that automatically gets them to shrink down along with the browser while still maintaining their height and width ratio. Another thing to consider – are the images really necessary for a mobile audience? Many people browsing on their phones will be using their phone service for internet, which can be slow at loading images and cost excessive data.

Hiding Information

A large part of all good design is knowing what not to show, and this is especially true for Responsive Web Design. Rather than shrinking down your website as-is, consider what elements could be cut in order to make the usage of it more simple, direct and streamlined. Consider who will be using your website from a mobile screen and ask what their needs are. Focused navigation and content are the keys to effective responsive design.

Creating a responsive web page requires a different style of thinking to traditional web design, but it needn’t be complicated. If you’re interested in getting a RWD site developed for you, get in touch with the team at Avatar who can work with the website you already have.

Found this post useful? Share it on Google+ here:


Free Expert Online Marketing Tips

Sign up to Avatar's monthly newsletter...

Katie is a lover of words and art, born and raised in Christchurch. With a BA in English and Japanese, she’s happiest tapping away at her keyboard writing copy or articles, or else working on the latest illustration. To balance the creative side, Katie is also very motivated and a bit of a perfectionist, which helps with her SEO duties. Although her hobbies could probably be described as art, art and more art, she also enjoys long walks, good friends and travel.

Avatar Blog Homepage

Get A Quick Quote

Click for a free web design or web marketing quote.