Should I design PSDs for Desktop, Tablet and Mobile separately in responsive design?


I'm trying to design a responsive web site in Photoshop. But the question is should I design different PSDs for all these devices? (Desktop, Tablet, Mobile)

If yes, what page size should I choose in Photoshop for all of these devices?

6/16/2015 7:40:00 AM

Contrary to popular mem of designing "mobile first", I would recommend designing desktop-only using 12 column grid; then letting developers build all the mobile states using standard responsive CSS framework such as Bootstrap. There are a number of positives to that, as we learned in our own web development process:

  1. You cannot sell client on mobile layout alone, they will definitely want to see tablet and desktop. Once you go the route of 3+ layouts for each page (desktop, tablet, phone), creative hours will go through the roof.

On the other hand, if you prepare responsive-friendly desktop design, you keep creative hours well under control.

  1. There's no guarantee that carefully prepared mobile and tablet layouts accurately reflect default CSS framework's layout and functionality - so you might be designing pages that have potential of being very hard to code, leading to increased development budget, revised SOW, sticker shock and other pleasantries with client.

If you leave mobile and tablet repositioning to the discretion of developers and follow best practices in desktop design phase, you are guaranteed development will go the most efficient route of using framework and its modules. Time saver, cost saver, everyone happy. There will certainly be internal review between designers and developers and minor adjustment of responsive states prior to showing site to client, but it is nothing compared to the pain of designing all the responsive states for all the templates and then trying to code them with pixel-perfect fidelity for cross browser and cross platform performance. shows how responsive grid system behaves in different resolutions, and as long as desktop layout follows 12 column grid, that's what you should expect in tablet and phone layouts. There's a PSD file link at the very top of the page for downloading desktop grid template.

Hope this helps.

6/16/2015 1:43:00 PM