RESPONSIVE AND MOBILE DESIGNBY: CHRIS PASQUARETTE

APRIL, 2013

WHAT IS THIS DOCUMENT?

New technologies lead to new jargon, and miscommunications can easily occur. This document is meant to define the terms Responsive Design and Mobile Design, so that Developers, Clients, and Client-facing staff are communicating clearly.

This is also designed to be a training document for Client-facing staff to explain to clients why our company is moving to prefer Responsive Design, to set client expectations about the look and behavior of their sites.

WHAT IS RESPONSIVE DESIGN?

With a large variety of viewing devices for websites (phones, tablets, computers), traditional fixed width pages are no longer ideal solutions. We need to create designs/code that can adjust and display differently depending on the size of the display (viewport).

WHAT IS RESPONSIVE DESIGN?

From Wikipedia (http://en.wikipedia.org/wiki/Responsive_web_design):

“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

In redesigns and site builds, we need to get ahead of the Clients and Design Agencies and explain the difference between the traditional fixed-width (“pixel-perfect”) designs, Responsive Design, and Mobile Optimization.

HOW IS IT DIFFERENT FROM FIXED-WIDTH AND MOBILE?

Fixed-Width Design is built for consistent look and feel for computer screens, and are often based on print design theories. We often call this “pixel-perfect”.

Responsive Design is built for flexibility, based on screen-widths and not dependent on Device Detection.

Mobile-Optimized Design use Device Detection to specify certain Themes to be used. Often these Themes look more like a mobile phone app than a website.

FIXED-WIDTH DESIGNS

Fixed-width designs are those where columns, images, gutters, etc. have been specified in pixels or other non-scaling measurements.

Clients expect the finished site to be pixel-perfect to the design.

Some sites, such as B2B sites with expensive software, may never expect to be used on phones or other mobile platforms. However most clients will want responsive eventually.

FIXED-WIDTH DESIGNS

These sites will look fine on a full screen – desktop, laptop, or even a larger tablet.

FIXED-WIDTH DESIGNS

However, if viewed on a phone, will either be reduced in size (Android) or clipped (iPhone), requiring the user to zoom, pan and manipulate the site just to use it.

For most clients and end-users this is a bad experience.

RESPONSIVE DESIGN

Responsive Design is not an enhancement to a site, but rather a philosophy of coding – rather than exacting pixel measurements, some of that control is given up to enable flexibility of layout.

Scalable measurements such as percentages and “em”s are used, as are separate “mini-stylesheets” within the Advanced CSS for certain screen widths to change floating elements and even hide images and navigation.

An excellent emulator for phones is at http://www.mobilephoneemulator.com/, which incorporates iPhone and Android phones.

RESPONSIVE DESIGN

Ideally, for a new site, client Design Firms would give examples of at least three different widths:

Full computer screen

Tablet size

Phone size

Photoshop has a utility called “Save for Web and Devices” that can aid Designers in developing Responsive guidelines for their sites.

RESPONSIVE DESIGN

By providing flexible guidelines, we can code easily to match different displays.

RESPONSIVE DESIGN

If a site is already built, but the client now wants Responsive Design, there are two main options:

1. Redesign – the entire CSS (and Layouts if Self-Service) is rebuilt along with a redesign. This is the most thorough method, and carousels, offers and navigation can be tailored to the various display sizes.

2. Retrofit – modifications of the CSS preserve most of the standard look and feel, but will change items if the screen size is reduced. This is faster, but not as clean.

Note that neither of these require Device Detection – the display will change based solely on screen width.

The Web Developer will need to set styles for reduced widths (max-width) not on devices, but on when the columns or images appear crowded and hard to read. The Web Developer may have to make some design decisions independent of the Design Agency.

MOBILE-OPTIMIZED DESIGN

Mobile-Optimized Design differs from Responsive Design in that it focuses on a specific device (iPhone, iPad, Android phone, MS Phone, etc.) via Device Detection.

Usually Mobile Design offers an “App” look and feel, as opposed to a Responsive site.

Often this necessitates additional javascript to detect which device/browser is being used, and can add weight to the page.

Responsive Design Mobile-Optimized

SUMMARY

Unless there is specific need, we want to encourage clients and Design Agencies to switch from pixel-perfect Fixed-Width designs to Responsive Design.

Could the customer base be buying via the following: Smartphone? Tablet? PC? Internet TV?

Responsive Design doesn’t take much extra work if defined at the beginning of a site build or redesign.

Responsive Design doesn’t rely on Device Detection and doesn’t demand the creation of a new site. It should work equally well on Eddy and Self-Service Templates.

If the client wants a specific look and feel for a specific device, then we would create extra code to target that device.