November 13, 2012

Six Steps to Successful Responsive Design

Building a responsive design can pay big dividends, but don’t kid yourself, it’s a lot more work than designing a website. You definitely don’t want to cut corners—that would cost you later—but there are steps you can follow to streamline the process for both economy and speed.

Step 1 - Pick your responsive page sizes

Pages come in four general display configurations that need to be considered in your design. These are web page, tablet vertical (portrait), tablet horizontal (landscape), and mobile phone. Measurements in pixels are as follows:

Web page:  We recommend a 960 grid system. This is a popular standard with tons of support, assets, templates, and design tools. For information, see www.960.gs.

Tablet (portrait and landscape configuration):  600 x 992 fits most tablets. Actual sizes of some of the most popular tablets are:

  • Amazon Fire 600 x 1024
  • Apple iPad 768 x 992
  • Barnes & Noble Nook 600 x 1024
  • Galaxy Tab 600 x 1024
  • HP TouchPad 768 x 1024
  • Iconia Tab 600 x 1024, 600 x 1280, 800 x 1280
  • RIM Playbook 600 x 1024
  • Sony Tablet 800 x 1280
  • Toshiba Thrive 800 x 1280*

Mobile Phone:  320 x 480 pixels

 

Step 2 - Create a responsive design black and white wireframe

Use a layout program like InDesign, Illustrator, or Omnigraffle, all of which have available templates and assets that provide pre-dimensioned layouts. We like InDesign CS6 for its built-in ability to manage fluid design. You probably have in-house talent with knowledge of InDesign, eliminating the need to go outside for your wireframe.

Wireframe development allocates real estate to branding, navigation, content placement, and advertising. Staying in black and white eliminates the temptation to begin creative design and helps maintain focus on branding, etc. Here you will nail down the actual words you will use in navigation and menus.

A key aspect of this step is defining editorial taxonomy, the list of topics or keywords that will be used to tag content. This is used by your CMS to associate content with menu items and map tagged articles to your site navigation. Try to finalize taxonomy early in the development process, as changes later in the build can take more time and seriously impact schedules.

Wireframe your website header first, to establish branding and navigation. Then do the same for tablet and mobile views. Next, wireframe the home page, defining the content containers in which you will put editorial content, e.g., containers for breaking news, feature stories, blog, video, and so on. You can, if you wish, plan multiple views for a single container. For example, the largest container on the home page may have several formats; one for a big story with a photo, lead paragraph, and links to related content and another showing a two-column list of breaking news headlines when there is no big story. If you plan to use carousels or other content-scrolling widgets, indicate this on the wireframe.

Once the website home page is approved, wireframe the other views. The mobile view will take some extra work, as the limited screen size may force you to change navigation and display less or no content.

Then wireframe other key pages including:

  • Topic landing page
  • Article detail page
  • Video page

The last step in wireframing is to create an annotated wireframe document describing each container’s function and the source of its content. This is critical for connecting your design to your CMS. If you design for video or blog content, you will need to tag your HTML to insert the actual content, and your CMS will need to provide that content with all the fields (content objects) that you need.

Example of an annotated wireframe

Example of detailing on a content container

 

 

Step 3 - Develop creative for the responsive design

Turn your completed and approved wireframe over to the creative design folks. If you use your in-house creative department this will provide a natural extension of your print brand. They will not need to learn HTML or responsive design, but the output of this step will include important decisions about colors, header sizes, fonts, styles, and standard image sizes. Have them work in Photoshop or InDesign using layers to isolate individual creative assets including logos, buttons, and standard icons that will be used by the HTML.

(When we contract with creative firms, we always ask for several different designs of the home page, which we review with the product team to choose a final design. Since the design has not been programmed, it is easy to modify at this stage and arrive at a final design before coding.

 

Step 4 - Prototype the design in HTML5 with static content

Turn the design over to your best HTML coder. The annotated wireframes and creative design contain all of the information needed to code prototype static pages (pages that contain static content). The content is hard coded into the HTML that builds the content containers. There should be clear comments in the HTML to indicate the start and end of the content in each container so it will be easy to see where content-swapping tags must be placed to integrate with your CMS.

In spite of its static content, the prototype should demonstrate the dynamic aspects of the design. The responsive aspects of design should work, fly-out menus should work, and content scrollers and carousels should all work. The prototype should render the creative design right down to the pixel. At this point you can review and correct as needed.

 

Step 5 - Implement the HTML 5 in your CMS

Take the HTML, CSS3, and JavaScript from the prototype and implement it in your CMS infrastructure. This may require restructuring of the code to fit the CMS. Some systems put HTML in a database while others use theme and template files. Most systems will break the HTML and CSS into parts that are used on all pages, used on multiple pages, and used on unique pages.  Some shops will optimize the code for caching and delivery from a CDN.

 

Step 6 - Test with real content on actual devices

This step lets you identify and correct remaining problems in the design. Designs can easily be made to work with static content, which always has titles, lead paragraphs, and photos that are the right size. However, when you plug the design into your CMS and start sending content to the new design, things may “break.” You’ll find out how the design handles long titles, long paragraphs, and improperly sized photos. You may have to change the HTML to manage the sizes or run maintenance on the CMS data to fix things that break the design.

You will also find out where you need additional editorial resources. Too often, a sophisticated design gets dumbed down at the last minute because a container defined in the design has no editorial content. Make sure that editorial is prepared to feed the sections defined in the design.

Also, be sure you test with actual devices. This will save you headaches of having to make repairs “in flight” after your system has launched. Make sure you know the devices used by your key executives, editors, and advertisers. Make a decision about supporting IE6; we are always surprised about how much of it is still in use. 

Frankly, these steps are a lot of work. Keep in mind, however, that a change that takes minutes to make in InDesign or Photoshop can take weeks to change in a fully coded product, especially one designed to render responsive pages. And when things get rough, remind yourself that, done right, this will allow you to publish once and deliver everywhere.

 

* Source: http://www.abrennan.com/blog/journal/web-design-journal/tablet-screen-dimensions-responsive-web-design