Responsive Design: Where does Photoshop fit in?

With the latest release of Adobe Photoshop CC, yes, you can create a comp for a website design like in previous versions, but does it have workflow in mind? From a comp, you can generate an Adobe Edge Reflow CC project complete with the image assets, HTML, and CSS, which will allow you to finish creating a responsive website layout more easily and efficiently. But what was one the top choice in tools a designer would use to create a website layout may now be replaced with other applications suited for the responsive concept.

Technically speaking, Photoshop is best known as an application used to manipulate imagery but it's also packed with tools for building graphics from scratch. Shape, vector, type, fills and effects, all of these (and more) lend themselves very well to constructing graphic layouts.


The web is a different place these days and Photoshop's role in the process of designing for that web is also changing. 


In May 2010, a brilliant idea was conceived. Ethan Marcotte envisioned taking existing technologies and methods in web design and he proposed an approach "Responsive Web Design". This concept utilized fluid layouts (not fixed), flexible images (which grow and shrink with the layout) and CSS Media Queries (which allow layouts to change depending on the screen size and other factors).


With these ideas the web and the integration of Photoshop in the design workflow changed, irreversibly.


Responsive design helped us realize that the web has no edges, no fixed canvas, and that we don’t have as much control over what our users see as we used to think. The web is fluid and so our design process should be too, but the workflow in Photoshop assumes the exact opposite of all these things. Responsive design in Photoshop is a painful process.


While it still makes sense to include Photoshop in some stages of your web design process, like editing photos or creating more complex visuals, there are great tools around with features better suited for designing a modern digital experience. 


Relevant Courses offered by 1337 Institute of Technology: