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

4. Designing in Text

“Plain text is the underlying content stream to which formatting can be applied. [...] Plain text is public, standardized, and universally readable.”


The world’s first web page was practically mobile ready. And that was in a time when there were no tablets or smartphones. There’s one simple reason for this: the web page consisted of plain text. Actually, it consisted of structured text with hyperlinks. This was how the web started, and the premise of structured content is still the basic foundation of the web (Figure 4.1).


Figure 4.1. The world’s first website was essentially mobile ready. ...

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