The Responsive Web Design Strategy

It seems like everyone is pushing forward towards Responsive Web Design(RWD) as a savior for the Mobile compatible website development in 2013. Now for the past few years mobile growth has exploded onto the scene.

Along with the growth in the usage of the Mobile Internet comes the question of to build up a websites suitable for all users.

Responsive Overview

Responsive Web Design is build keeping in mind of making compatible on every device and every screen size, no matter how large or small, mobile or desktop. Responsive Web Design is focused around providing an intuitive and gratifying experience to everyone.

Flexible Layouts

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

target ÷ context = result

Flexible Grid

Let’s see how this formula works inside of a two column layout. Below we have a parent division with the class of container wrapping both the section and aside elements. The goal is to have have the section on the left and the aside on the right, with equal margins between the two. Normally the markup and styles for this layout would look a bit like the following.