Responsive Web Design - Part2

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.

Relative Viewport Lengths

CSS3 introduced some new relative length units, specifically related to the viewport size of the browser or device. These new units include vw, vh, vmin, and vmax. Overall support for these new units isn’t great, but it is growing. In time they look to play a large roll in building responsive websites.

• vwViewports width
• vhViewports height
• vminMinimum of the viewport’s height and width
• vmaxMaximum of the viewport’s height and width

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints. Fortunately, Ethan pointed out an easy formula to help identify the proportions of a flexible layout using relative values.

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 ofcontainer 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.

HTML

<div class="container">
  <section>...</section>
  <aside>...</aside>
</div>

CSS

.container {
  width: 660px;
}
section {
  float: left;
  margin: 10px;
  width: 420px;
}
aside {
  float: right;
  margin: 10px;
  width: 200px;
}

Fixed Grid Demo

SECTION

ASIDE

Using the flexible grid formula we can take all of the fixed units of length and turn them into relative units. In this example we’ll use percentages but em units would work equally as well. Notice, no matter how wide the parentcontainer becomes, the section and aside margins and widths scale proportionally.

.container {
  max-width: 660px;
}
section {
  float: left;
  margin: 1.51515151%;   /*  10px ÷ 660px = .01515151 */
  width: 63.63636363%;   /* 420px ÷ 660px = .63636363 */   
}
aside {
  float: right;
  margin: 1.51515151%;   /*  10px ÷ 660px = .01515151 */
  width: 30.30303030%;   /* 200px ÷ 660px = .30303030 */
}

Flexible Grid Demo

100% WIDE CONTAINER

SECTION

ASIDE

75% WIDE CONTAINER

SECTION

ASIDE

50% WIDE CONTAINER

SECTION

ASIDE

Taking the flexible layout concept, and formula, and reapplying it to all parts of a grid will create a completely dynamic website, scaling to every viewport size. For even more control within a flexible layout, you can also leverage the min-width, max-width, min-height, and max-height properties, as done with the parent container above.

The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.