The trouble with Adobe Photoshop for web design

Patrick Shannon

Patrick Shannon

February 10, 2016

Web design and development is a rapid and ever-changing industry. It honestly wasn’t THAT long ago that designing websites with a 960px width was a safe bet, and now you have to consider every desktop, laptop tablet and mobile device screen under the sun.

What hasn’t kept up with the times is the tools. Based on designs I’ve worked with across design houses, the most common program used to design websites is Adobe Photoshop. Think about this for a moment…in the world of modern browsers we are still using the same exact tool that we did when we were designing 800×600 fixed websites for IE6 many years ago.

Of ALL people, how have web designers been so behind the curve? And why shouldn’t we use Photoshop?

Photoshop: Using a screwdriver to hammer a nail

Adobe Photoshop is awesome: I’ve used it my entire career and it’s practically a friend of the family. The trouble comes when designers rely on it for more than it was intended to do.

By it’s nature, Photoshop is a raster-based image and photo editor: in a print workflow it’s best used in conjunction with other dedicated layout software like InDesign or Quark. One would argue that a single program would be more efficient, but in reality no single program can do it all and this kind of workflow allows each program to play to it’s strengths. Most importantly, it works.

Photoshop layers workaround

Can we cut this out and just admit it’s a poor workaround?

What about a web workflow? It’s easier to get away with using Photoshop here, but that doesn’t make it any more effective for web layout than print. Critical features like multiple pages, templates and layouts are lacking and designers commonly use layers or layer comps as a workaround. (I can’t tell you how many times I missed something during development because it was hidden in a layer that I wasn’t informed about.)

Adobe finally did add multiple artboards to Photoshop in a recent Creative Cloud update, but they aren’t sufficient and somewhat fidgety. I also find the practice of comping out separate desktop / tablet / phone layouts to portray the full responsive experience inefficient: it’s unable to predict behavior between the fixed sizes which often takes designers by surprise when the layout is finally coded. Designers need a modern web tool that can allow them to resize and preview a fluid layout at will as they’re working on it.

I think Adobe knows it too – they’ve tinkered with preview software such as the Edge suite of applications for responsive tasks, but they were never anything more than experimental. (The Edge suite has since been discontinued.)

So why have designers adopted Photoshop for web design in spite of it’s obvious flaws? I think it has to do with strong familiarity with the program, one that they already had access to when making the transition from print to web. Compatibility is also on Photoshop’s side: PSDs are a very safe format to pass around as you can virtually guarantee other design or production people will be able to open and work with these files.

Continued use of Photoshop for web layout demands too many compromises and workarounds of designers: certainly there is a delicious opportunity for a competitor to fill that void, right? Well…it’s not for lack of trying.

The would-be competition

Photoshop was never the only game in town for web design: for years the most viable alternative was Macromedia Fireworks.

Unlike Photoshop, Fireworks was made with the intention of designing / prototyping websites and application interfaces. Fireworks was pretty slick in many ways: offering compelling features like multiple page layouts, symbols, linking between pages and animation states. The program utilized vector graphics for elements such as logos and buttons with 9-slice scaling.

Though it had clear advantages, I wasn’t a fan of the UI and missed a few features from Photoshop, ending up right back there after giving Fireworks my best college try on several occasions. I had hoped Adobe would make major improvements on the application when they purchased Macromedia, but most of their attention went towards Flash and Fireworks was largely neglected with underwhelming updates until the program was mercifully discontinued a few years ago.

sketchiconThe race was on for third-parties to sell their software as the successor to Fireworks and offer a compelling alternative to Adobe’s subscription service. One of the closest to fill that void is Sketch, a vector graphics editor that does many of the same things that Fireworks did (and more). I know a number of designers who have been flirting with Sketch for website and application design and moving away from Photoshop.

Sketch does a lot of things right, but I feel it’s biggest weakness is external asset management. As Sketch is a decent vector editor but poor at raster and image compositing (a task better left to Photoshop), I’d like the option to roundtrip edit these files via linking imported assets in the same way desktop publishing programs like InDesign work. Sketch can import files just fine, but are required to be reimported / replaced every time a change is made to them.

I’ve contacted Sketch developers to suggest adding this feature, but they stated to the effect that it was not a highly requested feature (which I think is short-sighted and a big mistake). Third party developers have tried to come to the rescue with plugins, but I’ve never gotten them to work sufficiently.

Other issues I’ve run into in the past with Sketch files involves bugs, missing fonts automatically being replaced on open without notice, and backwards compatibility: I had to buy a new version of Sketch just to view another designer’s files they sent over.

There are countless other third-party options such as Macaw, RapidWeaver, Freeway and Sparkle, but many of them are hit or miss or simply flavors of the week with no long term viability. And that’s kind of the problem: the landscape is highly fragmented and not a lot of these programs are widely adopted. Amongst other challenges, many of these programs aren’t available on both Mac and PC and I think that is essential if they want to increase their marketshare and offer a viable alternative to Adobe.

Realistically, these programs may be the products of individuals or small companies that lack the resources to dedicate on a cross-platform version. Acquisition from larger companies or consolidation of programs may be the only way for them to gain a foothold in the market, and there are other risks in that to consider.

Adobe’s latest muse

Up to this point you might have noticed that I have yet to mention one other recent web design offering from Adobe, and honestly this program might come the closest to satisfying most of my needs in a web design program.

Adobe Muse layout view

Adobe Muse’s layout view

When I first played with Adobe Muse, I immediately dismissed the program as simplistic, clunky, slow and non-native: everything you expect of apps built in cross-platform frameworks like Adobe AIR. If you felt the same way I did, you might want to give it another look: Adobe wisely ditched AIR and overhauled Muse as a native 64-bit app that plays good citizen alongside it’s Creative Suite brethren.

Feeling very familiar to InDesign, Muse is a dedicated website layout program that allows multiple pages and master templates set up in a sitemap structure that makes sense. Separate layouts for mobile and tablet can be added, and there is an assets panel that works much like Links in InDesign that can manage and update external assets, warning users if edits are made to those files. Like many programs of this nature, sites can be generated and previewed in the browser to get an idea of how it will look.

The intention of Muse is to enable designers to create websites without knowing code, but I’ve heard the same song and dance before. As always with these kinds of editors, the underlying code in the result is arbitrary, messy and not something developers will be able to work with easily for advanced jobs. Realistically the output is only useful for the simplest of static HTML websites or client requests.

That’s okay, because I feel Muse’s emphasis should be on prototyping to allow designers to better communicate with developers on typography styles and layout scenarios without having to guess what happens at different breakpoints and sizes. Muse is available for both Mac and Windows and accessible to a large number of designers and design houses that already have Photoshop and Creative Cloud subscriptions. (Those eschewing a CC subscription and/or holding on to perpetual licenses are unfortunately out of luck.)

There is one major thing that was still holding Muse back: the lack of true responsive layouts. As promised by Adobe last fall, this was rectified in a major update to Muse that was made available this week. Now Muse allows the designer to define breakpoints, fluidly resize their layout and move/show/hide elements at will. I had been playing with this feature since the beta and need time to go through the nuances of the most recent release, so I will save my opinions on the new Muse release for an upcoming article.

It’s time for a web-design renaissance

Regardless of who ultimately offers the best solution, I think it’s high time that web designers gets a modern tool for web work. I think Adobe Muse has the best shot at it, but I also would like to see a viable alternative offering from a third-party that offers a lot more and improves on the shortcomings of what’s already out there.

Either way, the greatest challenge for everyone is weening users off Photoshop and their old workflow. Old habits die hard, but I think it’s essential that web design tools keep up with the times. Tomorrow, it could be a whole new ballgame.


About Patrick Shannon

As a user experience (UX) designer / researcher based in St. Louis, I've worked with technology partners across the country to study end-users and create fictionless products and solutions that today's audiences connect with. In my spare time, I enjoy photography and building ideas out of anything from electronics to wood...still determined to build a life-sized replica of Optimus Prime someday.