Responsive Web Design – Go with the Workflow

In the second post of our series on Responsive Web Design (RWD), we are taking a look at workflows and process. How do you go about executing a successful RWD process and in what ways will this differ from the approaches we are used to?

What Does a RWD Workflow Look Like?

As RWD is an evolving approach, there is no one standard work flow. However, as RWD differs in approach from a Waterfall-style workflow, the process for a successful project looks quite different. RWD is a truly holistic approach that requires content, UX, visual design and development to work closely together. We have done a survey of some of the suggested workflows from around the web (see links at the bottom of this post), and consolidated them with insights from our experiences working on responsive projects. Commonalities in suggested workflows include:

  • Content First – a clear content strategy and hierarchy
  • Mobile First – determine hierarchy based on a mobile layout as this is the most limited and constrained
  • Visual Design at Larger Size – this is where creative has most room to play – ensure that ideas are tested at smaller scale before going too far
  • Collaboration – frequent collaboration and breaking down of silos will help a RWD project run smoothly – get everyone into a room to work together!
  • Prototyping and Testing – prototyping the design early and testing it
  • Iterating – multiple iterations and adaptations

 A Word About Mobile First

What does mobile first really mean? Jeremy Keith sums it up nicely – “Progressive enhancement isn’t about designing for the lowest common denominator. It’s just about starting there.” The idea with mobile first is that you think very carefully about the crucial information and the content strategy at the most constrained screen real estate. From there you build up to a larger display canvas – at all sizes in between your carefully curated content has room to shine in an appropriate layout. In the Mobile Book by Smashing Magazine Trent Walton talks about designing for a larger screen size like the desktop as an acceptable first stab at visual design, while still taking a mobile first approach to content and information hierarchy. In the end, it’s all about how your team works best, and ‘Mobile First’ should be a guiding principle, not a de facto rule to be followed unquestioningly.

What Not to Do

A RWD project will require some shifts in approach and thinking. This means that ways of working and deliverables may shift. Some practices that may no longer be appropriate in RWD projects include:

  • Approval handcuffs – RWD projects need to expect and allow for change. Flexibility in sign offs is crucial
  • Pixel perfect comps – these no longer tell us what we need to know, as we are designing flexible systems of content
  • Designing without actual content – content will guide design decisions, so it must be available during the design phase
  • Silos and handoffs – there is more blurring of roles and more need for direct communication between departments
  • Wireframing every single page of a site at multiple breakpoints – this is costly and time consuming

Potential RWD Deliverables

Deliverables that are suited to a RWD project include:

  • Design tenets/principles – to inform the content strategy
  • Content hierarchy – a numbered list of the most important messaging
  • Style Tiles – to inform visual direction/concepts
  • Paper prototypes – fast, lo-fi and cheap way to prototype/test
  • Documented whiteboard sketching
  • HTML wireframes
  • Front-End style guides – Starbucks has shared a great example of one
  • Production code

Process is What You Make It!

In summary, adapting workflows and processes will help your RWD project run smoothly. It can be a very different way of working to adapt to, as the world of RWD is still being figured out and can feel messy and ambiguous at times. Being open to new approaches and deliverables is key when building a responsive website. There are lots of great resources and tools out there, but ultimately it is about taking them and making them your own in a way that best serves your needs.

References