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?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
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.
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:
On the other hand, if you prepare responsive-friendly desktop design, you keep creative hours well under control.
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.
http://188.8.131.52/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.
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.
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: https://helpx.adobe.com/photoshop/how-to/design-with-artboards.html
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.
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.