: 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

@Nimeshi706

If you're looking for an easier way to manage responsive designs and you have an Adobe CC subscription, Adobe has a product called Edge Reflow that makes designing for various resolutions much easier. Here is a video from adobe about it. But esentially you can import your PSDs and manipulate them so that they'll change on different resolutions.

Edge Reflow can export your work as a working website. It makes for a good demo and developers can go in there, see it all work and pull what they need directly out of it.

By using this you don't have to worry about managing multiple PSDs or what sizes you're exactly set to in Photoshop.

Vote Up Vote Down

@Holmes874

Design the mobile layout only. Then work with the developers to reflow things as needed for other views.

The reason for mobile first is that it forces you to prioritize content and functionality down to the necessities. It gives you a streamlined design that, more often than not, is also perfect for desktop, albeit perhaps laid out differently.

The reason to work with developers to design the different views in code is because the code will dictate what can move where and how. More often than not, when I get multiple PSD files for each viewport, I actually end up with 3 designs that actually require 3 different code bases--rather than one code base that can accommodate the reflow. Sometimes this can be 'fixed' with copious amounts of JavaScript and DOM re-arranging but that, as you can imagine, lead to other big problems.

Vote Up Vote Down

@Pierce403

There's a new (a few days ago) way for you to do this. I was just updating Photoshop and you may be happy to learn that you can now create multiple art boards in one Photoshop document. This will allow you to have all 3 of your layouts in one file. Here's the video of how this new feature: helpx.adobe.com/photoshop/how-to/design-with-artboards.html

Vote Up Vote Down

@Kimberly620

I agree with Max Tokman above and would add that being a coder and designer for my company, I've fallen into the trap of creating a mobile layout that was very difficult to replicate in code.

That said, you also need to take into account who the target audience will be. If this is a site that will primarily be used on a phone, then attention should be paid to that design more than others. Most sites are not going to be equally used across platforms despite the hopes of the owners who's concepts you are trying to bring to life. There are always exceptions to that rule, of course.

I tend to create the desktop version first, then decide what elements will be important for the mobile design. A giant hero image, for instance, can be left off the phone version.

Vote Up Vote Down

@Sent7350415

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:


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.


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.
184.72.251.109/oss/dev/WP_core/master/grid-system/ 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.

Vote Up Vote Down

@Chiappetta793

It is a good idea to make a design example of how the page should look like on the target devices. But as there are too many screen sizes it's not practical to make a separate design for all of them.

As a web developer, I would suggest making the responsive version of the designs for the homepage only, for the following screen sizes:

Desktop : (about 992px, or according to your design)
Tablets : (768px)
Mobile : (480px)

Note that the screen sizes recommended above is in par with a popular responsive front end development framework, Twitter Bootstrap 3.

Vote Up Vote Down