This chapter is from the book
This chapter is from the book
This chapter is from the book
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 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 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 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?