DrupalCon Sydney 2013: Improving your responsive workflow with style guides
Channel: Drupal Association
Date: 29/03/2013

Whether it be responsive web design or new emerging techniques that allow us to create experiences for multitudes of new devices, one thing is certain... our workflows need to change.

Many of us have started adapting our processes by doing things like scrapping mockups and designing in the browser, but there is one step in the process often left unconsidered. Style guides.

Traditionally style guides have been considered time consuming "nice to haves" only delegated to the biggest of projects. But as we shift from designing "pages" to designing systems, the way we communicate our designs need to make this shift too. By designing with living html/css style guides we can present all the elements of our systems, without creating multitudes of time consuming mockups. They not only help clients visualise the components of their systems but also help designers and developers to work together in creating truly future friendly experiences. You may be thinking "this all sounds all well and good, but that's an extra tedious, costly step in my workflow". Don't worry, these days they can be automated.

In this session we'll look at:

How style guides can improve your workflow
What are the different uses of style guides
The difference between style guides and pattern libraries and what we can learn from projects like Bootstrap and Foundation.
How your current workflow may need to adapt to make the most efficient use of style guides
How designers and developers can work together using style guides (hint: it involves acronyms like OOCSS/SMACSS/BEM)
How this can mostly all be automated and add no extra time to your projects (it might even save time).
This will be based on previous work I have talked about including:
Future Friendly Style Guides: Blog Post
Future Friendly Style Guides: Presentation from "What Do You Know"

It will be updated for the current state of the industry and go into more detail.