Device Independent: Responsive Website Design

by Brandie Knox on January 16, 2013

Responsive design is a method of designing and developing a website based on a flexible proportion-based grid that readjusts for different browser sizes. A responsive site is built to conform to the maximum width of a desktop browser, as well as the minimum width of a smart phone.

Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them. – Marcotte, Ethan. Responsive Web Design.

Responsive design also streamlines content management. Instead of maintaining both a primary and individual mobile site, only one site is managed. Although one actual site and code exits, it will be necessary to produce 2-3 layouts in the design stage to account for smart phones and tablets. With future redesigns, the overall look and feel of your site can be reworked with a single set of style sheets.

The key components of a responsive site are:

  • Flexible proportion-based grid – the layout adapts to the device
  • Flexible images & typesetting – individual page elements resize based on the device

Visit the sites below and resize your browser window from large to extremely small. What happens? Notice how the content reflows based on the size of your window. Now, open the site on your smart phone and tablet.

A responsive site requires some additional planning in the initial wireframe and design stages. How is your audience interacting with your site content? Google Analytics can tell you which pages have the most traffic. Develop your content strategy based on your findings.

For example, a user that visits your firm’s site from their smart phone might be looking specifically for contact information or attorney bios. In this instance, you may choose to position highly visited pages near the top of the main navigation for mobile/tablet viewing. Consider the immediate call-to-action and consider floating this to the top.

When starting your next website overhaul, make sure you understand your available options. Most importantly, provide the best user experience possible.

Brandie Knox is Creative Director & Principal at knox design strategy, www.knoxdesignstrategy.com. As a strategic design studio, knox design strategy focuses on professional services firms, with expertise in the legal industry. She can be reached at brandie@knoxdesignstrategy.com / follow us on twitter @knoxdesignnyc.

Previous post:

Next post: