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

1. In Splendid Variety These Changes Come

“Not everything is design. But design is about everything. So do yourself a favor: be ready for anything.”


The web is a place of constant change, innovation, and well, wonder. The things we can do on, with, and because of the web are absolutely amazing, particularly when you remember what the early days of the commercial web were like. Thinking about the early days, the way we built websites in 1995 and what design possibilities were available to us then—it all seems laughable now.

In some ways, the web design process is completely different today, but in others, it’s exactly the same.

Designers have scrambled since the beginning of the commercial web to translate the ideas in their heads ...

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