Example Responsive Design Workflow

This is just an idea more than anything, you can use this as a start point, or not at all if you have your own workflow, but we felt it helpful to say how we're trying things out atm.

The following can be done in a some what iterative manor, so you could do a basic review of what's needed, get the basics working, then redo this process for in-particular modules of the page.

  1. Content Inventory

    Create lists of the pages needed, and content needed on them.
    Working this way you have a reference for what's needed where in order to then work on the presentation of it.

  2. Sketch

    Just quick little throw away sketches, no-one even ever needs to see these apart from you.
    Based on the content collected in the Content Inventory.

  3. Design mock-up / Prototype

    Either by designing up in your favourite image editor, or designing a prototype in the browser (outside REC often helps you create quick prototypes of ideas, without worry of other styling conflicting)

  4. Review with the client

  5. Build

    Time to get your hands dirty in the templates

  6. Test

    Browser test, review with client again etc.