Responsive Design Workflow

Responsive Design Workflow

by Stephen Hay
Released April 2013
Publisher(s): New Riders
ISBN: 9780133257045

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Forget fixed-width Photoshop comps, bloated client requirements, and overproduced wireframes. Yesterday’s web design deliverables fail to take into account the demands of responsive solutions. Design workflow hasn’t really changed, but best practices have. This book shows you how to adapt to the new paradigm and create sites for today’s web. Some of the strategies you’ll learn include:

  • how to better manage client expectations and development requirements

  • a practical approach for designing in the browser

  • documentation methods that outperform static Photoshop comps

  • a method for visualizing the points where responsive designs change

    • After absorbing the lessons in this book, you’ll leave behind old-school workflows and start working in ways that are uniquely suited to today’s multi-platform web.

    Table of contents

    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

    Product information

    • Title: Responsive Design Workflow
    • Author(s): Stephen Hay
    • Release date: April 2013
    • Publisher(s): New Riders
    • ISBN: 9780133257045