Responsive Web Design with Adobe Photoshop

For a couple of decades now, designers have used Photoshop to mock up Web page designs. However, that work generally results in a static graphic of the page, which has to be translated by a developer into the components of a Web page: HTML files and Web-compatible image files.

Our multi-device world has shown us that this approach to web design, including full-page comps done in Photoshop, is increasingly problematic. Modern web designers are adopting a new approach: creating flexible web pages whose layout can adapt to suit the screen on which they are displayed. This is “Responsive Web Design” [RWD].

Until now, books on designing responsive Web sites have focused on HTML and CSS – in other words, they’ve been very code-centric, and visual creativity seems to take a back seat.
This new book is aimed at the visual Web designer who’s accustomed to working in Photoshop. Adobe Photoshop CC contains many new features that help streamline the process of converting a static page design to a set of components for a responsive web page.

Dan Rose is one of the best-known advocates of this new way of working in Photoshop. He’s observed that only a few people are talking about Photoshop for RWD constructively, yet a majority (63% as of his last informal poll) of web designers are using Photoshop for more than simple asset creation. This transition is a pain point for many designers.

His new book will balance coverage of conceptual issues (how to fit tools like Photoshop to the design workflow rather than fitting a workflow to the tools) with practical design exercises tailored to help communicate the overall design direction of the page while respecting the needs of the fluid Web. In addition, he will introduce methods for taking HTML back into Photoshop for further refinement.

Table of Contents

Chapter 1 Photoshop’S New Groove
Chapter 2 How Did We Get Here?
Chapter 3 The Case For Designing In The Browser
Chapter 4 A Plea For Photoshop–Browser Harmony
Chapter 5 Vetting Direction
Chapter 6 Establishing Style
Chapter 7 Establishing The System
Chapter 8 Getting Back Into Photoshop With Page Layers
Chapter 9 Extracting Your Way Out Of Photoshop
Chapter 10 Extending Photoshop
Chapter 11 Remembering Etiquette
Chapter 12 Adopting A Completely New Workflow