0

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?

Improve this question
1

6 Answers 6

Reset to default
2

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.

Improve this answer
3
  • 2
    Also, in my opinion I would try to think mobile first. This can sometimes be easier than trying to squish all the desktop elements down to a smaller size.
    – Eddie Adolf
    Jun 16, 2015 at 11:43
  • Could you explain why you are suggesting to use 480px instead of 360px for mobile design? When I'm testing a device for its viewport, the result is always ~360px.
    – Ruslan
    Jun 16, 2015 at 11:46
  • 1
    @ZZZ when it comes to design a common approach is to design for 480px and then shrink down the design all the way till 320px. This is done because of the varying screen sizes in the handheld devices e.g. iphone 6: 375px, iphone 6 plus: 414px and iphone 5 - 320px. Therefore the range for mobile screen sizes is between 480px and 320px which both the designer and developer have to keep in mind
    – Alex Zahir
    Jun 16, 2015 at 12:26
2

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.

http://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.

Improve this answer
1
  • While I agree with point 1, that's exactly the reason to start mobile first. Mobile first allows you to distill the content and functionality down to the core necessities. By all means, show off a desktop version of that, but it's usually a good idea to start with the mobile. #2 is a excellent point, though.
    – DA01
    Jun 17, 2015 at 3:43
1

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.

Improve this answer
1

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

Improve this answer
3
  • This doesn't really address the issue of accommodating the responsive framework. Responsive web design isn't about different designs for different screens, but one design, that reflows properly across all screens.
    – DA01
    Jun 17, 2015 at 3:41
  • I disagree as elements change priority and shift with screen size, clients want to see what designs will look like at different breakpoints. Also not all webpages are percentage based with a fluid layout, but rather, "reactive" and snap in place at certain breakpoints.
    – Eddie Adolf
    Jun 17, 2015 at 11:33
  • I agree that elements change priority and shift. That's actually my point. The page has to be built that way, not simply laid out in Photoshop. Flipping the order of two items in Photoshop is trivial, but that can cause a lot of complicated coding overhead to achieve and that could have been remedied by accommodating the framework during the design process, rather than doing all the design prior. For RWD to work, it has to be a collaborative and iterative process with the development.
    – DA01
    Jun 17, 2015 at 11:37
0

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.

Improve this answer
4
  • It's been a while, but I don't think it reflows based on any particular CSS framework, does it?
    – DA01
    Jun 17, 2015 at 3:46
  • I'm sure it just goes off of media queries. Or did I not understand the question?
    – Hanna
    Jun 17, 2015 at 21:52
  • Let me rephrase, does it use actual CSS or is it a tool to just swap out PSD files? If it actually creates CSS, then one could (at least in theory) use that as the framework, I suppose. If it doesn't, though, you still have the problem where the design may not mesh with the particular RWD framework that will be used.
    – DA01
    Jun 18, 2015 at 3:13
  • Yes, it does actual HTML and CSS and not just swap out PSD files.
    – Hanna
    Jun 18, 2015 at 18:37
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.