February 4

2013 – The Year of Responsive Web Designs

Responsive Design

With more than 6000 different competing types of mobile devices in the world today, the need to understand designing for the mobile environment has become an increasingly difficult task for marketers. Creating websites for mobile has traditionally been to choose one of two paths – create a single website and acknowledge that your content will be scaled to a small format or create a separate mobile site which will have limited content/functionality for the mobile user.

Responsive Design could be the answer and an “easier” approach to mobile for organizations. This article tries to explain what it is and how it could be used.

Responsive Web Design is an approach to a flexible website foundation — the ability for content to adjust (or respond) to hardware and resolutions. To understand the full responsive approach, it is important to understand the following terms and how they fit into the complete marketing solution.

Responsive Website Design

Responsive design is a subset of Adaptive Design. It manages the layout of the site. Using layout techniques and flexible images, it scales with the browser size that it is displayed within. Imagine 100 people in a room that is filled to capacity. As additional people walk into the room, the walls scale in proportion. It ensures that  each HTML page will conform to any device based on the settings of the device. To accomplish this, a feature called CSS Media Queries is used. It does not filter content until the entire page is loaded. Then, based on definitions in the style sheets, the content is adjusted to the device.

Here is a recent example of a responsive website design we at ForceFive Media did: http://wdesign.com/

Adaptive Design

Adaptive Design changes the functionality of the website experience based on the device’s capabilities. This doesn’t apply only to layout and general look and feel but also to content. It takes into consideration the abilities of the mobile device. Is this device capable of making phone calls? Does this device have touchscreen? Can this device access a user’s location via GPS? If so, enhance the experience to exploit these mobile capabilities. This approach to design analyzes a user’s mobile device and displays the best possible experience.

Adaptive Layout

Adaptive Layout is very similar to Responsive Design except that it scales to a set of widths. Using the same analogy of the room from above, if 100 people are in a room and one additional person is added, the room’s walls scale to fit 200. Adaptive layout is mainly concerned with the layout of a design and not the personalization of the website content.

Taking advantage of a responsive web design approach allows for the ability to make changes once and have those changes reflected across all platforms, saving time and additional development costs. Ongoing maintenance across several platforms can be a large and expensive task. Using a common language across all those platforms allows for easier maintenance and faster updates.

As the mobile market becomes larger and more fragmented, mobile website consistency becomes increasingly important and invaluable requiring firms to utilize some form of Responsive Design to be effective.

What are the Cons?

While Responsive Design offers some great possibilities for marketers in the online space, one thing still holds true – as soon as you think you have it figured out, it will change. And, like everything else, you still need to do some planning.

Specifically think about your website navigation. Navigation decisions are going to be made on your sites architectures complexity. If nothing else, make you get this one right, because messing this one item up will ruin your plans.

Additionally, consider if Internet Explorer is being used on the desktop or by a lot of your customers. IE8 and earlier will lack support for CSS media queries, which in turn messes up your responsive layout.

You may also like

Robin Hetherington – Owner, Fireplace West

Tina Plett – Realtor

Kyle Running, Owner – Running Irrigation

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}