Prototyping Responsive Websites - Part 1

A finished design prototype is the end-result of a conversation between the web designer and the client. It needs to communicate what the built website will look like and how it will work. It establishes the following aspects of a web design:

• Layout
• Interface components
• Color palette
• Fonts & typography
• Graphical elements

The traditional web design process goes something like this:

1. Create wireframes.
2. Refine wireframes (multiple iterations) & finalize.
3. Create design alternates as JPEG mockups (using Photoshop).
4. Select one alternative, refine it, creating mockups for different pages (multiple iterations) and finalize design.
5. Build Drupal website & theme based on design mockups.

This traditional process has several drawbacks when used for designing responsive websites:

• Creating the deliverables – wireframes & mockups – is a labor-intensive task. But when it is time to build a Drupal theme after a mockup has been finalized, additional effort is required to convert the visual design to HTML markup and CSS.
• The process and the deliverables makes it difficult to incorporate new ideas that may come up later on in the design process. When the design changes in the mockup process, the wireframes that preceeded the mockups become obsolete.
• It is difficult to represent user interface and responsive properties of a design in wireframes and static JPEG mockups. To express how a website adapts to different device sizes, multiple mockups may need to be created for one page on the website. Wireframes and mockups will require annotations to indicate user experience and interface behavior. But the client may still have difficultly visualizing what the final user experience is going to be.

For defining a new prototyping process for our team I started with three ideas:

Instead of creating static wireframes & static JPEG mockup, this approach calls for building prototypes directly in HTML and CSS. This has several advantages:

• If built correctly, the HTML prototype can more accurately represent the intended behavior of the user interface and its responsive qualities.
• Client review and testing can be done on actual mobile devices as well as on computers.
• The resulting deliverable is HTML markup and CSS which can be more easily converted into a Drupal theme; the markup and CSS has already been defined as part of the prototyping process.

Instead of designing for the desktop and then refining the site for mobile access, this approach calls for designing for the mobile device first. The idea is to start designing the mobile experience for the smallest mobile device first and then progressively add extra features for larger devices and computers.

This may seem like a radical idea that would limit what your responsive website could do and look like. Actually the opposite may be true and the mobile-first approach may lead to better designs for both mobile and the desktop. Luke Wroblewski argues that Mobile forces you to focus :

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.

So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business.

When designing a house layout, an architect can position a kitchen anywhere. But it probably makes most sense to place it near a dining area. While a design problem can have many possible solutions, certain solutions are better and can be thought of as design patterns. In a seminal book titled A Pattern Language, architect Christopher Alexander and his co-authors outlined many such design patterns as a language that can be used to create good architecture and urban design.

This idea of defining design patterns has found into many disciplines including software and interaction design. Over the years, web developers and designers have evolved web design patterns that work well either because they are better in terms of usability, implement best practices, or if they are based on familiar conventions that have evolved over time.

We are now seeing new design patterns evolving for responsive websites:

• Multi-Device Layout Patterns by Luke Wroblewski
• 5 Really Useful Responsive Web Design Patterns by Joshua Johnson
• Responsive Navigation Patterns by Brad Frost
• A Multi-Device Web Layout Pattern by Jason Weaver

Incorporating the above ideas I outlined a new process for our projects for building responsive websites:

1. Define website objectives, use scenarios, & user experience starting with the smallest devices and working up to desktop computers.
2. Build HTML prototype demonstrating layout & interface components.
3. Test on desktop & mobile devices & refine incrementally to finalize layout & interface components.
4. Experiment with color palettes and font-stacks on HTML prototype. Refine and finalize.
5. Add graphical design elements to create final desig.
6. Build Drupal website and theme.

In my next post I will write about the tools and techniques we used and how this process worked in practice.