Why should I make reponsive templates in Photoshop?

Question

I am a designer and currently working on responsive web templates in Photoshop. I started to learn responsive designs just now after seeing its market need. As I am a designer so I started to try in Photoshop, but a developer told me that it's a developing thing and it can easily be managed using software like Bootstrap (etc).

Now I am a little bit confused.

Do I need to learn this or should I keep designing only Adaptive templates? Is the market REALLY in need of responsive PSDs?

Answer 1

Responsive Photoshop web templates do not exist. Usually if someone is creating Photoshop templates for a responsive site they are based on the CSS media queries. If you are developing for each media query that is going to be a nightmare if you target up to four devices (mobile, tablet, laptop, desktop, soon to be an addition with Mac's 5k).

I would suggest using Illustrator artboard for mockups/wireframes based on the media query and learning how to use either Bootstrap or Foundation for developing the code. There are plenty of tutorials and videos on how to create a full page site in Bootstrap. Based on what you've stated in your question it would appear you are designing and creating the entire site in Photoshop then sending it to be written in code. This is a waste of time. If you are going to survive in the web market you need to learn how to code and should be designing in the environment the site will live in and that's the browser.

Reference:

• Why use Photoshop for Web Design
• What are the steps in designing a website?
• What is the PSD to HTML best practices with HTML5?

If you are going to make a template make it in Illustrator and label the arboards:

Learn to use character and paragraph styles in Illustrator then you could always navigate to Window -> CSS Properties and export the styles into a CSS document:

Answer 2

Short answer: No Photoshop can’t create responsive templates.

Long answer: To understand why, you need to understand the difference between normal, static designs (like you do in Photoshop) and what is needed for a responsive designs.

Lets take a portrait of someone that is in portrait format 4✕6. Now someone cuts of the upper half of the image, making it 4✕3 (landscape format). In a physical painting you would obviously loose the head of the portrait. On a computer there are two more things you could do, giving you three options:

1. Crop it of (like with the painting, loosing part of the image)
2. Scale it unproportionally (thereby loosing the aspect ratio)
3. Scale it proportionally (thereby not meeting the given aspect ratio of the whole image and creating a border around it (the canvas is still there))

Except for altering the actual image there is not much else that can be done. While this might sound obvious and unsolveable, this is exactly the kind of problem that needs to be solved for responsive layouts:

Design something and when you are done I tell you which size it should be.

I actually like to think of responsive layouts as resolution independent layouts. Think of the size and aspect ratio of your image as an unknown value. Users today have a wide range of different sized devices (can also be turned/browser windows can be resized), giving you almost endless possibilities for final output sizes.

The reason why this can’t be solved be traditional paintings (or fixed, static layouts like you create with Photoshop/Illustrator/InDesign etc.) is, that they contain no information how the single elements in those designs relate to the size of the whole image.

Here is another example: Lets you assume you have this very simple image:

Now what would happen if you would keep the height of this image but make it 10 times as wide. Here are just 6 different things that could happen:

1. The blue borders keep their width, changing the width and aspect ratio of the red field.
2. The blue borders and the red fields keep relative width to each other, making both wider and changing the aspect ratio of both
3. The red field keeps its aspect ratio, making the blue border wider
4. the initial pattern ist just repeated
5. the rest of the image is just filled with blue
6. something completely weird

All of these would be logical changes when transitioning from the initial image to a wider version. The problem with static programms like Photoshop or physical paintings is: there is no way you can tell from one image what it is supposed to look like with a different size and there is no way to specify it either.

Since the possible screen sizes can be considered to be almost infinite (not really but still quite a lot) just providing two or three images won’t do either. There would still be a lot of interpolation to be done, for all screen sizes that don’t exactly match your three designs.

To create responsive designs you need to specify if the size of an element is absolute (like 10px wide) or relative (like 10% of the total screen width) or ideally even a mixture of both (10% of the screen + 10px, but to a maximum of 500px or something like that). All normal graphic programms handle all sizes just as absolute (px, centimeter, inch etc.). When the image is resized they are all handled as relative, making no difference (because there is no way for you to specify.

Unlike Photostohp, the technology that is used to create websites (HTML, CSS, Javascript mainly) allows you to make such specifications, therefor allowing designs to responsive.

For you as a designer this means the following:

1. Be aware of the gap between your design (idea) and the medium into which it needs to converted to work as a website.
2. The final output size of your design is unknown to you, while you design
3. Be aware that you not just need to choose what color the square is and which size it is, but also how it relates to the image size
4. The size in which your design will be viewed WILL change, therefor your design MUST change, in one way or the other — the question is just: will you control how it changes or will it be just random.
5. Don’t even try to do pixel perfect layouts

My honest recommendation would be: learn at least basic skills in HTML, CSS and Javascript and create your layouts in the actual medium in which they will later be viewed. In my opinion a hard seperation between design and technology can’t stand. Imagine a table-designer who has absolutely know idea about the structure and properties of wood and has never carpented in his live.

If this is not possible try to get your head around the idea that the final size of your layout can be seen as unknown and give your programmer instructions that are as clear as possible, whether you send him an HTML mockup or several annotated Photoshop/Illustrator/Indesign files.

And whats most important: If you want to stay in the web-/screen design business, be aware the responsive layouts won’t be a nice feature. They will be the way to go. There is no way on earth, that screen design will go back to a state where you can safely assume that everybody is using the same screen size and won’t resize their browser window.

Answer 3

You can't do responsive design in Photohop.

You can merely design two (or more) different layouts for two (or more) different screen sizes.

The catch is that unless you are really familiar with the responsive framework being used, you are more likely to design a coding nightmare rather than an easily buildable responsive layout.

Ideally, I'd suggest this workflow:

• Design the mobile view
• have the developers work on that using the framework of their choice
• now work with them to reflow things for the other viewports.
• you may jump back into photoshop a bit for this as you learn what can and can't be done with the framework.

If you are really familiar with the framework, then this can work, but it still tricky. Even when I'm the one building the HTML, I can still design myself into a corner if I'm not constantly trying to think through things carefully.

Answer 4

Generally, I use Illustrator or Sketch for responsive comps, but with the latest updates to Adobe CC, there's something you could look into to make your life easier. If you have an iPhone or iPad, this might be something worth trying:

https://helpx.adobe.com/mobile-apps/how-to/app-prototyping-photoshop-preview.html

Personally, I use an Android device, but I do use CC. There are many different ways to approach creating responsive comps. You can use Illustrator, Photoshop, Sketch, whatever you feel comfortable working in. Search Dribbble for free wireframe and responsive device kits (vector or PSD) – or search around the web for free wireframe kits. There are tons of freebies that can help get you moving in the right direction!

Adding to what Darth_Vader said, try to include a grid overlay as a guide, and stick to few layouts. The most you'll probably ever need: desktop, tablet and phone. From there, a developer who knows responsive design will get the idea.

Lastly, be sure to check out UXPin for their free ebooks. They have a lot of great information on designing UI and creating wireframes/mockups.