Last updated on April 26th, 2019. Posted in Photoshop & Graphics.
Using Photoshop for responsive web design is certainly possible. Photoshop is an incredibly powerful tool, capable of handling a huge variety of tasks, including building mobile-friendly web layouts. However, this is one area where Photoshop does struggle. Here, let's find out of Photoshop is the right tool for your responsive design needs, if you should be looking elsewhere, and how Photoshop might fit into your web design workflows. Let's jump in!
So is Photoshop the best tool for responsive web design? In short, maybe. Depending on your needs and circumstances, Photoshop may or may not be the best choice to handle your responsive web design tasks.
Things get tricky because there are a variety of factors that come into play in determining if Photoshop's the right tool for you or not. And that's what this article's all about -- determining if Photoshop's gonna work for your responsive web design needs or not.
Let's take a closer look...
Let's get right to it. First, it's important to remember that Photoshop started life as (and remains primarily being) a photo editor. In it's early days, Photoshop was used to touch up photos and get them looking their best. This included things like handling colour correction, removing blemishes from photos, cropping, and other image editing tasks.
Over the years, more and more features began getting added to Photoshop. These days Photoshop is packed full of all sorts of different commands and features, allowing it to handle a huge array of tasks, from video editing to print design to forensics work...and yes, web design too!
In fact in another post, Is Photoshop Used For Web Design?, I narrow Photoshop's web-related capabilities down to just four tasks: Photo adjustment and manipulation, image optimization, the creation of web assets, and building web layouts. If you'd like to know more about these four areas, give that other post a look.
Here obviously, we're focused on the last of these four tasks, building web layouts. Specifically, building responsive, mobile-friendly web layouts.
And of these four web-related tasks, it's only here where we see Photoshop struggling a bit. And here's why: We have to remember that Photoshop is a pixel-based, fixed canvas size application. Using it to build fluid layouts that automatically adjust to various screen sizes can be a big challenge.
But it is possible.
When building a responsive web design layout (with Photoshop or any other web design tool), you really only need to worry about just three screen sizes, or responsive breakpoints (also sometimes called media query breakpoints): One for smartphones, one for tablet devices, and a third breakpoint for desktop computers.
Some designers go further, establishing even more breakpoints that target specific mobile devices, but that begins to get quite unwieldy and difficult to manage. Quite often, these three breakpoints are all you need.
And what are the different responsive breakpoints to use? There are different approaches and schools of thought, bot very often breakpoints would shape up as...
Some designers might use slightly different numbers, but these breakpoints are quite common. And as you might guess, Photoshop can easily handle constructing layouts for these three breakpoints or layout dimensions.
The challenge though is that Photoshop doesn't have responsive tools built in. This means that to develop a fully responsive web layout in Photoshop, you'd actually have to build it three times in three separate documents -- one for smartphones, one for tablets, and one for desktop computers.
That's a lot of work.
And in a fast-paced production environment, this is usually just not possible. As you can imagine, it would a lot of time to construct the same layout three times. So again, this is where we see Photoshop faltering as it tries to handle responsive web layouts.
That said, for many experienced Photoshop users, they've developed templates and workarounds to make the process of designing for the mobile web smoother. And often times, after the first round of rough drafts are approved, the design gets moved out of Photoshop and over to code anyway.
So in this way, Photoshop is used to establish an overall design and feel. Once that's established, then the design is moved over into HTML and CSS, where responsive breakpoints are established.
Later on, we'll talk about different web design workflows that involve Photoshop, where you'll be given some examples of how designers are using Photoshop in different ways during their production processes.
For now though, if you're feeling like building responsive layouts is going to be too much for Photoshop, then there are alternatives. There are tools that make quickly building responsive layouts visually a breeze compared to Photoshop. Let's discuss some alternatives next...
When trying to determine if Photoshop is going to be the right tool for you or not, it's important to remember what Photoshop's best at. Recall that at it's core, Photoshop isn't a layout tool or a web design tool, but an image editor. This means it shines when being used for aesthetics. It's great for developing branding, exploring colours, handling typography, and getting images looking their best.
So, it's important to get clear on what it is you want to accomplish. Each of us has different tasks to handle, and there are a variety of options to accomplish those tasks. Photoshop can handle them all, but maybe not in the most efficient way.
Here of course we're focused on building responsive, mobile-friendly layouts. But you may have other web-related tasks you need to handle, too. Do you need to build website wireframes (that is, rough structures)? Do you need to develop fully designed comps for client approval? Will you need to create engaging branding with colours, fonts, and imagery? What about resizing and adjusting images like product photography?
If you're needing to handle some or all of these tasks, maybe doing everything inside a single application, Photoshop, will be best for you.
Instead, what if all you need to do is rapidly assemble responsive wireframes? If that's the only thing you'll be doing, then there are better, more efficient tools than Photoshop -- tools that are designed specifically to handle this task.
So in this instance, a tool like Sketch would be a better alternative.
But in determining which tools to use, the other two curve balls that get thrown into the mix are, 1) Your working environment, and 2) Your experience level with Photoshop.
By working environment, I mean are you working with a team of designers and developers, or mostly by yourself? Do you need to integrate the web design tools you're using into other team mate’s workflows, or are you largely autonomous?
And as for your experience level with Photoshop, maybe like me you've been using Photoshop for years and years and you're completely comfortable using it and getting around it's limitations. And maybe the thought of switching to a new tool and learning it from scratch isn't appealing at all -- not to mention the time it would take to stop working just to learn a new tool...and then go through the huge headaches to get it functioning in your existing workflows.
And this last point about workflows is actually a pretty major one. I remember years ago working with some offset print guys. At the time, all of their software was at least a version or two back. When I asked why they were using older software, they said, "Because it works."
Elaborating, they explained the horrendous amount of work it takes to integrate a new piece of software into an existing workflow. Bugs, kinks, and incompatibilities all need to be ironed out. And all the while, production (you know, the thing that actually makes money) would have to come to a grinding halt until all these issues were resolved.
See, I think a lot of younger designers don't fully appreciate this -- I know I certainly didn't. Even though there might be better, faster, easier tools available, in a large production facility you can't simply shut production down indefinitely while new tools are being learned and workflows are being updated.
Production workflows are giant machines with a lot of moving parts. Ya can't simply turn 'em off, stick a new part in, and fire it all back up again and expect everything to run just as smoothly as before.
And the same holds true in web design workflows.
In big agencies and corporate environments, workflows and tools don't change unless they have to. This means new (even better, more efficient) tools aren't a part of the landscape. In these environments, a strong case needs to be made for making any kind of change. And the total costs (not just monetary, but learning curves, downtime, and reworking existing workflows) has to be justifiable.
Then there's the issue of dealing with years and years of archived projects and client work. That stuff will still need to be accessible.
So in bigger environments with larger work groups, change is rare and painful.
But in smaller shops, designers can be more nimble and closer to the cutting edge of new tools. Very often, designers in smaller shops can use tools of their choice -- so long as they don't cost much, and get the job done quickly.
And it's often here where younger designers are found too, who of course gravitate to newer tools. For them, they don't have twenty years of Photoshop behind them, so newer tools like Sketch are often their tools of choice.
On an even smaller scale is the individual freelance web designer. Here, the designer can use whatever tools they want. They don't have to justify expenses to managers or worry at all about overly complex workflows involving groups of other people. Here, so long as their clients are happy, designers can use whatever tools and processes they want.
So, the kind of work environment you're in is certainly a determining factor. Are you required to be a part of a team who's working together? Will you have to integrate into existing workflows? Or will you largely work alone or with just one or two other people?
Keep all of this in mind as you're exploring whether to use Photoshop for web design, or looking to alternatives.
The other factor of course is your experience level with Photoshop and how many web-related tasks you want to use it for. Earlier we touched on the four web-related tasks that Photoshop can handle -- again, photo editing, optimizing images for the web, building web assets, and page layout.
If you've been using Photoshop for a long time and you're very comfortable with it, very likely your best bet is to stick with what you know. It can sometimes be tempting to check out new, more modern approaches -- and maybe they're worth trying out.
But a concern I always have is this: I know Photoshop's not going anywhere. It's been around for thirty years, and it'll be around for a long time to come. But what about these new tools? What if they change too much, get buggy, or go defunct?
And further, as we've been discussing, what aspect of web design are you handling? Will you be primarily wireframing responsive layouts, building full comps, developing branding, or working on something else? And tied into this, will you only be focused on one of these areas, or several? How often will you need to handle these tasks?
You may discover that using just a single application to handle everything is easier than trying to wrangle between two or three different pieces of software, and get them all to play nice with one another.
If you'll be using Photoshop to build layouts, because of the responsive and mobile nature of the modern web, maybe a more flexible tool is need. And even if that's the case, Photoshop can still be a part of your creative process.
Let's explore this further...
So what's the best workflow when using Photoshop for web design? As I'm sure you can guess, there's no one-size-fits-all solution, unfortunately. We're seeing above that your work environment, your experience with Photoshop, and the web-related tasks that you want to handle are all variables in your responsive web design equation.
There are just too many factors to take into account to offer a single workflow solution.
Said another way, web design workflows that include Photoshop are very much dependent on your situation and work environment. What software you have available, the team you might be working with, and the tasks you're trying to achieve all contribute to a smooth workflow that will allow you to complete projects efficiently.
And establishing workflows can be pretty messy and chaotic. It takes a tremendous amount of effort and organization to establish reliable web design workflows and have them run smoothly. And if you're working with other teams, often times you have to advocate for what's best for you and your workgroup.
None of this is easy.
In fact, an argument could be made for modern web design workflows being the same as they were ten and even twenty years ago: A circus-like process of wrestling different pieces of software to do things they weren't necessarily designed to do...in order to provide files and support materials to people who don't understand user experience or responsive layouts...all being dictated by managers who don't know the first thing about web design!
Sadly, this is often the case.
So with Photoshop involved, and depending on what tasks it'll be used to handle, responsive web design workflows can take on a number of different forms. We'll take a look at a few example workflows in a moment. But first, a broad view of a web design workflow often looks something like this:
Wireframe > Design > Client feedback > In-browser prototype > Client feedback > Final design
And since you know Photoshop's strengths and weaknesses when it comes to web design, you can slot in different tools and approaches for each stage of the workflow. For instance, your workflow might look like this:
Sketch or XD (Wireframe) > Photoshop (Design) > PDF (Client feedback) > HTML and CSS (In-browser prototype) > PDF (Client feedback) > Final design
Or if you're an experienced Photoshop user and want to use it in your workflow as much as possible, things might shape up like this:
Photoshop (Wireframe) > Photoshop and Illustrator (Design) >PDF (Client feedback)> HTML and CSS (In-browser prototype) >PDF (Client feedback) > Final design
For many experienced web designers, Photoshop is largely all they use. They know it so well and have their processes so optimized that they can knock out designs very rapidly.
Other times, more experienced web designers do as much work as they can directly within the web browser, if you can believe it. So in other words, they're so comfortable with code, that they jump right to it. This allows them to rapidly build a prototype or early design draft directly in the web browser, in the format that the layout will ultimately wind up as -- code. Once the client approves the layout, positioning, colours, and fonts, only then is Photoshop brought into the picture for the finishing touches.
As you can see, there are a number of ways to work Photoshop into your responsive web design workflow.
On a personal note, a big problem for me over the years when trying to establish workflows has been new products coming along that work great, that are later discontinued. Adobe's done this quite a bit with products like Muse, it's Edge tools, and others. These tools try and overcome some common problems, like making web design easy for print designers, being able to rapidly prototype responsive designs, and so on. But then, Adobe will discontinue these products a few years later.
This makes establishing a reliable workflow very difficult.
And further, I don't know about you, but I don't have the time or the interest to constantly be learning, unlearning, and jumping to new tools. I have a business to run, and frankly, that's what I love doing and want to spend my time on.
From my perspective, my thinking is this: Photoshop's been around forever and it's largely the same as it's always been. I know where Curves is, I know how to integrate clipping masks, I can rock the Pen tool when I need to...you get what I mean! And over time, Photoshop is only improving it's web features.
But objectively, any web design process and workflow is very personal. What works for me and what I'm comfortable with won't work for other designers or work groups. If Photoshop works for you to handle all your web design needs, including using it to build responsive layouts, then by all means, use it!
Designers love to argue over which tools are best, but at the end of the day, all that matters is that the client is happy and that their check cleared. How you get there is largely irrelevant.
For myself, I've been using Photoshop for so long, that I couldn't imagine switching. But at the same time, my needs are few. I'm not doing wireframing or building comps for client approval. As an online business owner, I'm using Photoshop to create layout components (headers, banners, icons, etc), optimize images, and handle photography.
But for yourself, you may want to look to alternatives if you're doing a lot of rapid wireframing, prototyping and comp work.
Personally, when I do need to rapidly wireframe, my tool of choice usually Pinegrow (starting at $10 per month). Pinegrow allows me to quickly build a layout visually using Bootstrap, and then convert that to a WordPress theme with the click of a button. It's amazing!
As the web continues to evolve, we can expect more advocating for modern tools to handle tasks. There's already a big push for a move away from Photoshop and towards faster tools. But, because of it's widespread use and incredibly powerful set of tools, Photoshop will always be needed somewhere in your responsive web design workflow.
Exactly where and how Photoshop fits is largely up to you!