Responsive Layout Documentation

Description

Introduction

Responsive designs are web pages that adjust in size and layout to accommodate resolutions and platforms from desktop widescreen to mobile portrait. Following the trend of responsive design I have put together the following which serves as a basic template of a responsive layout. This guide follows the convention of having 4 main visible elements on any webpage including header, navigation, content, and footer containers.

Download

The complete Responsive Layout template can be downloaded Here. Preview Here.

The Secret Sauce

Its easy to forget that HTML is naturally responsive. There are few cases where a well structured HTML document won't automatically adjust the placement of elements for the current browser width. Whenever possible widths and heights should be specified in percents relative to the parent container. HTML should be written to take advantage of built in elements like anchors, lists, paragraphs, and yes even tables. This is advantageous since these elements will have default formatting that is picked up in various browsers that allow them to render pages according to the w3c specs. The secret sauce is a combination of fluid design and media queries that fill in the rest.

Desktop View

Mobile View

Logical Flow Model

Starting a new responsive design from scratch starts as any other site does, with a blank folder. The difference below are key points to remember while setting up elements that are compatible with responsive design.

  1. Start with a blank folder, create "images", "js", and "css" directories, this gives your project an easy to understand directory structure.
  2. Next you will need to start with the HTML5 tag, next your head and includes for your stylesheet "style.css" and a script that implements media queries in legacy browsers. I recommend "respond.min.js" (included in the template).
  3. In the body tag create a single div that will wrap all visible content on your page. This wrapper should be given a max-width equal to the size of your layout, generally this is the width of your header image. By also giving the wrapper a width of 95% and margin 0 auto this creates a naturally responsive container that centers on large widths and adjusts for smaller devices with a small 2.5% gutter on either side.
  4. The logo is assumed to be in the upper left of the header. An easy to way to make this responsive is to do some math, the logo's width is set to 36% the width of the header container. This is calculated by dividing the logo image width by the header containers max width like so: (347 / 960) = 0.3614 or 36%. By giving the logo a minimum width and height we can ensure that the graphic won't shrink below a legible size.
  5. Depending on the setup of your design's header there are two main routes which can be taken to determine the size and placement of other elements.
    • Scalable Background Image - This method uses a single image for the header and is the method chosen by the template, the header image is set to 100% width and auto height, this means as the layout decreases in width the graphic will automatically scale proportionally. There's nothing stopping you from using columns here to place two images side by side that scale.
    • Fixed Height Bar - This method is simple generally using a single image that tiles horizontally and represents the design of the header bar. This is an instance where setting a background image is acceptable, set the height of your header to the height of your tiling background image.
  6. Now setup your navigation links, this one's easy. There are a few school's of thought when approaching this subject.
    • Single Expandable Bar - This is a single row of links, when the layout's width decreases past the point where all the links can display a "more" link appears, in the template this shows a button as "..." on the right side of the menu bar. When clicked it expands the navigation bar's height to accommodate the necessary height to show all the links.
    • Links Mobile Select - This comes in one of two flavors that differ slightly in presentation but are logically similar. When the layout reaches a certain point of display the navigation links are hidden and shown as either a dropdown select or a more icon (think Chrome's menu icon).
    • Allow Float Break - Easiest of the bunch this just allows the height of the menu to adjust for links that break down to the next line(s). This is the css equivalent of the Single Expandable Bar minus javascript code and showing a more button.
  7. The first step is to write in plain html the elements for the respective page. Included in the template are a few default styles for margins and paddings on items like paragraph and unordered list tags. Body content varies wildly and providing styles for every element for you is beyond the scope of this tutorial but following a few simple conventions goes a long way.
    • The FRED (Finding Right Exact Dimensions) Test - Using your browser resize your page slowly in and out. HTML is naturally responsive and css should only be used to adjust styles on elements that are not showing up properly. This is where your media queries come into play. This is an especially important test for working out what happens when mobile and tablet users tilt their devices or when your page is maximized on desktop.
    • Use the Chrome plugin Window Resizer which provides a tooltip at the lower right hand corner of your browser window showing you the current browser dimensions and the viewable area. This helps when setting up custom media queries that engage at precise resolutions (use the viewable dimensions). This plugin also includes a list of common resolutions which can be managed to create your own.
    • Choosing natural HTML elements like paragraph tags for text and unordered lists for... lists. Yea, it seems obvious and it is the real point is not to over use div's, it decreases legibility of elements and decreases the accessibility of the disabled to your content.
    • The template comes with 3 default media query classes: Tablet Portrait, Mobile Landscape, and Mobile Portrait. Since the main wrapper is 960px wide this fits within a Tablet's 1024px wide screen there is not a class for that one included in this example. These allow you to create logical breakpoints where elements are positioned in an optimal format for these devices. In the template the Mobile Landscape media query turns the columns in the body from 50% to 100% width creating a simple two column layout that goes single column for mobile.
  8. Setup your footer links, generally copying your anchor tags from the navigation will suffice otherwise make your own links. In the template these are centered with the individual anchors set with white-space nowrap to ensure text does not break within these individual tags.

General Do's and Don'ts

  • Unless absolutely necessary and/or noted on this page never use images as backgrounds for items like rollover buttons if you intend to have this item scale. Background images are fine generally for tiling background images only.
  • The use of sprites otherwise known as a large image that is a collection of other images accessed by pixel coordinates can only be used for elements that will not change in size. This is due to legacy browsers not supporting properly background-size and background-position CSS properties.
  • Image maps are incompatible with responsive design unless the size of the image is fixed. Using my own jQuery plugin called Remap its a snap to create a responsive scalable image map.

Resources to make your life easier

  • Ultimate CSS Gradient Generator - This tool creates cross browser compatible gradients for buttons to backgrounds and more in a wide range of styles. These gradients makes a great alternative to using images as rollovers using the reverse option of the gradient selected.
  • Using RGBA in IE - This page includes a tool that converts css rgba (color with opacity) to the necessary IE filter code.
  • Responsinator - Test your page in all the common platform resolutions all on one page using this excellent tool great for quick visual reviews.
  • Window Resizer - A Chrome extension useful for web designers and developers by helping them test their layouts on different browser resolutions.
  • jQuery Remap - Simply call .remap() on your image and now no matter what size the image is scaled to the image map is also scaled proportionally.

HTML Explained

The HTML structure of a responsive page is much like any other with a few important differences outlined below.

First we tell the browser that there is no need to scale or zoom the incoming page. The following meta tags are specifically targeted at mobile browsers. Without these lines mobile browsers such as Mobile Safari on iPhone would attempt to render the page at a desktop resolution instead of at the mobile browsing resolution (320 x 480).

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Below are standard meta tags for setting the page's content type and meta keyword and description tags to help describe your page to search engines.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Responsive Template, HTML5, CSS3" />
<meta name="description" content="I'm a responsive template with support for legacy browsers" />

Here we include our CSS, any additional style sheets should be placed above the one below so that "style.css" takes precedence over any other styles setup.

<link rel="stylesheet" type="text/css" href="css/style.css" />

Lastly we include our JavaScript files. "respond.min.js" implements media queries in legacy browsers, the only caveat being the media queries must be in external CSS files like the ones in template which are in "style.css". Next we include jQuery, it's not a requirement here though it greatly simplifies attaching events to various selectors. Lastly we include "functions.js" and includes the additional JavaScript necessary to setup the expand option on the navigation menu and main body expandable sections.

<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

The header here is very simple and consists of a simple background and logo shown in the top left. The background image class renders the image at 100% the width of the header container, with height auto the image will automatically scale proportionally causing the header container to resize accordingly.

<div id="header">
  <img class="background" src="images/header.png" alt="My Background" />
  <a href="" title="Home">
    <img class="logo" src="images/logo.png" alt="My Logo" />
  </a>
</div>

Here we wrap the navigation links in an inner div and set a fixed height on the outer container, the result is that as the layout decreases in size links will break down to the line(s) below and become invisible. With JavaScript we detect if the inner container is larger than what the parent container allows and if so display a more icon. Clicking that icon will allow the parent container to adjust in size to accommodate the hidden links.

<div id="nav">
  <div class="inner">
    <a href="#" title="Link 1">Home</a>
    <a href="#" title="Link 2">Contact Us</a>
    <a href="#" title="Link 3">About</a>
    <a href="#" title="Link 4">Promotion</a>
    <a href="#" title="Link 5">Support</a>
    <a href="http://xodustech.com/" title="Link 6">XodusTech</a>
  </div>
  <div class="more">...</div>
</div>

The main section contains all of the main content on the page. Here is where the usage of natural HTML will be most important. A few default classes are setup with the template giving paragraphs and headings proper margins relative to each other, additionally provided is a class for creating columns.

<div id="main">
  <h1>Hi! I'm an h1 tag</h1>
  <p>I'm some body content but you can call me Lorem ipsum dolor sit amet, consectetur.</p>
  <div class="expand">
    <h2 class="link">Click me to expand something else</h2>
    <div class="content">
      <h3>I don't have a light background</h3>
      <p>Pellentesque id sapien diam. Etiam tempus dolor posuere ipsum commodo scelerisque.</p>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <h2>This is a column</h2>
    </div>
    <div class="column">
      <h2>This is another column</h2>
    </div>
  </div>
</div>

Lastly we have the footer, here we allow paragraph tags that can appear above or below the links or omitted entirely. The links and text center at the bottom of the page in the traditional style of page footers.

<div id="footer">
  <p>&copy; My Company 2013 - Responsive Template by Travis Brown</p>
  <a href="#" title="Link 1">Home</a>
  <a href="#" title="Link 2">Contact Us</a>
  <a href="#" title="Link 3">About</a>
  <a href="#" title="Link 4">Promotion</a>
  <a href="#" title="Link 5">Support</a>
  <a href="http://xodustech.com/" title="Link 6">XodusTech</a>
</div>

CSS Explained

The stylesheet is responsible for setting up wrappers and containers with padding and margins that will help the HTML space and place elements according to your design. It's important to choose HTML that naturally represents the content being displayed to prevent an over use of divs and overriding styles.

This div "wraps" the entire visible document and creates a centering effect when the browser is greater than 960px wide. When the browser is less than 960px wide a 2.5% gutter is applied to either side to prevent content from bunching up on the sides.

#wrapper {
  width: 95%;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

The first visible element on the page is generally a header or banner image of some type with a logo placed in the upper left hand corner. The background image is set to 100% width and auto height so it fills the available size of the header container. As the page gets smaller the header shrinks in width and height proportionally with the image. Percents play an important role here as the logo's width is set to 36% the width of the header container. This is calculated by dividing the logo image width by the header containers max width like so: (347 / 960) = 0.3614 or 36%. By giving the logo a minimum width and height we can ensure that the graphic won't shrink below a legible size.

#header {
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
  background-color: #E5F5AF;
  position: relative;
  line-height: 0;
}

#header .background {
  width: 100%;
  height: auto;
}

#header .logo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 36%;
  min-width: 250px;
  min-height: 54px;
}

These styles setup content blocks that are normally hidden with a clickable title that expands the content using jQuery.

#main .expand {
  width: 100%;
  overflow: hidden;
}

#main .expand .link {
  cursor: pointer;
}

#main .expand .content {
  display: none;
  overflow: hidden;
  width: 100%;
}

Many designs will need multiple columns of content that display side by side. Using these styles as a template its easy to create additional columns that are styled at 33%, 25%, 20% etc. It's possible to place columns inside one another to create two at 25% and one at 50%.

#main .columns {
  width: 100%;
  overflow: hidden;
}

#main .column {
  width: 50%;
  float: left;
}

Media queries (usually placed at the bottom of your CSS) are the life blood of any responsive design. These allow you to create styles that engage at particular resolutions. The below is designed to engage on mobile landscape (480px), the max width of the media query is set to 490, since 480 is less than 490 this ensures the style properly engages on phone landscape.

@media (max-width: 490px) {
  #main .columns .column {
    width: 100%;
    float: none;
  }
}

The footer generally shows a few links that are centered at the bottom of the page. Here we setup the footer container and then the links to not break text inside the anchor tag but allow anchor tags to break down individually as the page decreases in size.

#footer {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 15px;
  background-color: #BDD567;
  text-align: center;
}

#footer a {
  white-space: nowrap;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 10px;
  line-height: 200%;
}

JavaScript Explained

Scripts can play a large role in responsive design when your design requires advanced placement of elements not achievable through CSS alone. This is also where you attach actions to the various events of your page. With the bit of script below we attach a function to the titles of expandable content areas.

This part of the code runs every time the window is resized, its important to note that it if possible it will run for every pixel difference as the window resizes. So if you decrease the window by 100 pixels horizontally for instance you should expect this to run 100 times, possibly once, not at all, or slightly more than 100 tims. The code below is simple enough that it can be run this quickly and not drain the browser resources however more complex scripts should be setup using a clearTimeout/setTimeout routine that encapsulates the resize code.

Here we setup a statement that checks if the links are breaking down to the next line(s) of the inner container in the navigation. If they are then show the more button if not reset the height back to the original.

$(window).on('resize', function() {
  // Check if the navigation bar is cutting off links and show more button
  if ($('#nav').height() < $('#nav .inner').height()) {
    $('#nav .more').show();
  } else {
    // Reset the navigation bar height back to normal
    $('#nav').height($('#nav .inner').height());
    $('#nav .more').hide();
  }
});

The below is run on body load, this means after the HTML DOM has been initialized. Images will be loading asynchronously while this code is run. The below first calls the above window resize function so that if the page is loaded while smaller than the menu the more button is shown. Next we attach two simple functions, the first on the more button which expands the nav container to the size of the inner container. The second attaches to expandable containers setup in the main content area.

$(function() {
  // Call window resize on body load
  $(window).trigger('resize');

  // Attach expand function to navigation menu more button
  $('#nav .more').click(function() {
    $(this).hide();
    $('#nav').animate({ height: $('#nav .inner').height() });
  });

  // Attach expand function to sections in main
  $('#main .expand .link').on('click', function() {
    $(this).parent().find('.content').slideToggle();
  });
});

Creator

Responsive Layout was created by Travis Brown, email: WarriorRocker@gmail.com.