You are previewing Responsive Design Workflow.

Responsive Design Workflow

Cover of Responsive Design Workflow by Stephen Hay Published by New Riders
  1. Title Page
  2. Copyright Page
  3. Dedication Page
  4. Acknowledgements
  5. Contents
  6. Foreword by Ethan Marcotte
  7. 1. In Splendid Variety These Changes Come
    1. The birth of static hi-fi mockups
    2. The static mockup comfort zone
    3. The specialist invasion
    4. We’re all interaction designers
    5. Jump from the waterfall
    6. The straw that broke...
    7. The elephant in the room
    8. This is not gospel
    9. This is a challenge
  8. 2. From the Content Out
    1. Microstructure vs. modular structure
    2. The lazy person’s content inventory
    3. Our universal example: This book’s website
    4. Progressive enhancement as design principle: The zero interface
    5. Creating the example content inventory
    6. Try it out
  9. 3. Content Reference Wireframes
    1. Stop making this stuff so complicated
    2. Baby steps: Creating low-fi web-based wireframes
    3. Let’s bust some myths
    4. Try it out
  10. 4. Designing in Text
    1. It’s all content
    2. Marking up plain text
    3. Converting plain text to HTML
  11. 5. Linear Design
    1. Developing a design language
    2. Enhancing your structured content
  12. 6. Breakpoint Graphs
    1. Documentation for breakpoints
    2. Creating a simple breakpoint graph
    3. Major and minor breakpoints
    4. Adding more complexity
    5. What we’ve covered
  13. 7. Designing for Breakpoints
    1. First, a bit about sketching
    2. Only sweat the major breakpoints (for now)
    3. Think about your content while sketching
    4. What to do if you get stuck
  14. 8. Creating a Web-Based Design Mockup
    1. Hurdles to acceptance
    2. Let’s get to work
    3. From static page to static site generator
    4. What we’ve covered
  15. 9. Presentation, Round One: Screenshots
    1. Why not present in the browser right away?
    2. How to make screenshots
    3. Presenting screenshots
  16. 10. Presentation, Round Two: In the Browser
    1. You’ll find many bugs in your design
    2. Collaboration and communication
    3. How to present your interactive mockups
    4. Testing and client review
  17. 11. Creating Design Guidelines
    1. Design manuals and the web
    2. The content and structure of design guidelines
    3. My wish list for design guideline software
    4. Creating your design documentation
    5. Now it’s time to go
  18. Index
O'Reilly logo

2. From the Content Out

“I know many, many people who would rather stab themselves in the eye with a pencil than be responsible for a large-scale content inventory. Me, I’m weird. I love ’em.”


The first step in the responsive design workflow is to create a content inventory. Even if you’re familiar with content inventories, allow me to explain how I approach the idea of structured content. You’ll probably find that the content inventory I propose differs from what you’re accustomed to.

It’s often said that content is king. I tend to disagree. Designer Paul Rand described design as the “method of putting form and content together.” Rand’s statement confirms my opinion as a designer that content and form can either strengthen ...

The best content for your career. Discover unlimited learning on demand for around $1/day.