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

3. Content Reference Wireframes

“A journey of a thousand li starts beneath one’s feet.”


In the early days of web design, wireframes—sometimes called schematics—were simple drawings with boxes indicating where page components would go on the page. They were the precursors to mockups, a way to quickly try out content placement to get a feel for the general skeleton of the page. Nowadays, wireframes are often exceedingly detailed. They often contain actual content. Some actually look like almost-finished websites, devoid only of color, imagery, and typography. The layout is done. Decisions have been made about the content and the placement of this content.

At the risk of sounding like a grumpy old man saying, “Back in my day...,” ...

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