Home / Articles / Adobe Photoshop / A Plea for Photoshop–Browser Harmony

A Plea for Photoshop–Browser Harmony

Chapter Description

When it comes to responsive web design, using the right tool, at the right time, for the right purpose, helps us extract more out of said tool than normal. Knowing when to use Photoshop is the only thing that can logically keep it in our workflows. Using it too often, too early, or for the wrong purpose produces frustration, wasted time, and potentially wasted money, as Dan Rose explains in this chapter from Responsive Web Design with Adobe Photoshop.

From the Book

Responsive Web Design with Adobe Photoshop

Responsive Web Design with Adobe Photoshop

$35.99 (Save 20%)

The Path of Least Resistance

Even though we have the tools to pull off Photoshop-like effects in CSS, I don’t think we always approach using them the same way.

Check out the audience navigation in Figure 4.3 (on the next page). This low-fidelity prototype was built in HTML & CSS, and now it’s ready for styling. My first impulse was to apply the button styles I was already toying with elsewhere and use them accordingly.

Figure 4.3

Figure 4.3 A styling-ready, low-fidelity prototype built in HTML & CSS

Objectively, there’s nothing wrong with this approach, and certainly it communicates that these are five areas you can visit. When I showed the client, they were quite underwhelmed. The feedback I received was that the section didn’t have adequate emphasis relative to the importance of the content.

My reaction was to fill the containing divs with the button color (see Figure 4.4 on the next page). Bigger = more important, right?

Figure 4.4

Figure 4.4 Bigger buttons. Don’t laugh—you would have done the same thing.

Again, the clients were underwhelmed. They expected to have buttons and appreciated the increased size, but they thought it was a missed opportunity to tell more of the story behind the content. It’s a high school, and these portals are all part of the journey.

It wasn’t until I toyed around with that section in Photoshop that I started to layer some new elements in, like screened photos and sideways text. The point isn’t that those techniques are exclusive to Photoshop (because they’re not: adding a simple background image and “transform: rotate” in an HTML & CSS editor is just as easy), but the idea came more naturally in Photoshop.

Sarah Parmenter had a similar assessment of designing in the browser.

  • “It’s a guilty secret I’ve been harboring for about a year: I cannot design directly into the browser. My creative brain switches at the point when I open my HTML/CSS editor (Espresso) and starts thinking in terms of structure and how to achieve the look of my design using as much native CSS as possible. If I don’t have my design to follow, the whole process breaks down for me. I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland, and uninspiring.”
  • —SARAH PARMENTER (www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/)

While I won’t advocate for having your entire design predetermined before HTML & CSS, the example shown in Figure 4.5 is a case where taking one small section or component into Photoshop makes a world of difference.

Figure 4.5

Figure 4.5 A much more robust and considered direction

As unpopular as the idea may be, I think it’s easier to take the path of least resistance in the browser than in Photoshop; working in an HTML & CSS editor makes you more inclined to think in terms of boxes, containers, and the styles you usually employ than ones you don’t. Heavy layering, offsetting only a single element and not others, and breaking convention usually mean tweaking more than just a few HTML tags and CSS properties. Sometimes, that amount of trial isn’t worth the inevitable error. Suffice it to say, for whatever reason, I’m more inclined to play it safe in the design techniques I use in code than in Photoshop.

Is it possible that lack of courage in our code-exclusive designs is the reason that all RWD sites look so similar?

5. Responsive Design Sameness | Next Section Previous Section