One of the biggest challenges of thinking in a more future friendly way (acknowledging and embracing unpredictability), and building responsive web sites (sites that respond to the devices viewing it) is the change in workflow.
Here's an outline of the shape of my workflow these days.
- User Research
- Content Strategy, Information Architecture
- Style Tiles, Style Guides
- Structured Content in Markdown, produce HTML
Traditionally, web sites have been made using a Waterfall model: after the planning phase, flat Photoshop comps are produced and signed off. These are then used to build the web pages or Theme.
Given the large and rapidly increasing number of connected devices, it doesn't make sense to produce just one static comp for each web page. However, producing a range of comps for each page is impractical and inappropriate: doing so would be time-consuming, and couldn't fully represent the wide range of screen sizes and resolutions that the site will be viewed on.
So, coding starts early in the process. Prototypes are built so that the there's something fluid to review. The design becomes more focused towards chunks: small pieces of structured content. These chunks are then fed into the prototypes and, using a Mobile First approach, the layout is designed as increasingly larger screen sizes and device features are considered. Then, a back and forth between designers and developers begins, tweaking and refining the layout and the chunks. The workflow process is starting to look more like Agile development.
Here are some great articles and presentations about Responsive workflow.
- Stephen Hay's Responsive Design Workflow on slideshare;
- Design process in the responsive age by Pon Kattera.
- Mark Boulton's Responsive Summit: Workflow;
- Viljami Salminen's Responsive Workflow;
- Luke W's notes from Sarah Parmenter's talk at the recent An Event Apart;
- Yellow Pencil's very detailed Responsive Process.
If you want to know more, or want to discuss in more detail, I'd love to hear from you. Sound off in the comments, or drop me a mail to [email protected].