Azzcat Blast

Design stories & tips, peppered with life's little tidbits

Hardboiled Web Design

November 29th, 2010

Hardboiled Web Design cover

…or how I spent my sick days.

A couple weeks ago (before the Thanksgiving cooking flurry) I was felled by an awful virus. Thankfully, I had a light project load and could indulge myself for a few days of tea, DayQuil and sleeping on the sofa. Back when I was a kid, such a sick day would be spent watching old movies of Bogie & Bacall on Chicago’s WGN. These days, trying to figure out our Roku device + receiver + speaker settings ± cable box proved too much for my brain to handle.

I opted for laptop + heating pad. Simple geek sick. ;-)

And I ordered myself the PDF version of Andy Clarke’s brand new book: Hardboiled Web Design. (You gotta love instant gratification and shopping in your jammies!)

First off, let me say that I really do prefer reading an old fashioned, in my hand, no plug ins necessary, can dog-ear the pages book. However, when it comes to web technical books, I’ve found that the PDF version offers distinct advantages:

  1. clickable links to live examples or relevant sites
  2. updateable content when revised
  3. super-sized text when your eyes are all blurry and tired.

Film Noir Geek

In any case, given Andy’s love of detective lore and my fondness for old movies, this was a perfect combo of geek speak wrapped in detective analogies—fun to read, easy to understand, and inciting to implement. So many technical articles/books are incredibly boring—the perfect sleeping aids. Those are the types of books to buy in print—so when you fall asleep while reading, you don’t drool on your computer. ;-)

I have to say that for the most part, I’ve been on board with HTML5 and CSS3 for ~1 year. Felt like I was back in high school—the ‘good’ kid, bending, not quite breaking the rules—it was all good, because I never got ‘caught’. I’ve been using bleeding edge technology (that’s what my husband calls it) and haven’t been ‘caught’. Still, I’ve felt sort of naughty. Well…Hardboiled just blows that naughtiness away and replaces it with a proud…“Hell, YES! I’m a rule-breaker!”

Validation sure feels good. (and I’m not talking W3C) ;-)

‘Standards’ are Postscripts

Basically, “…the reality is that a standard is formed only when there’s consensus on what’s already been implemented.” (Andy Clarke’s words, my emphasis.) The browser vendors implement experimental features and then they try to reach agreement. Implementation comes before standards are defined (via use of CSS vendor prefixes). So…waiting for all CSS3 modules to be supported by all browsers with one standard is…silly.

Vendor Prefixes are Good

-webkit-the-property {}, -moz-the-property {}, -o-the-property {}, -khtml-the-property {}, the-property {}
…all that typing…sheesh! How can that be good?

Because it allows for current use of new properties and bullet-proofs our code for when the laggards catch up and the-property {} becomes standard. Just make sure you always list the-property {} last in your CSS. That way, when -webkit is no longer necessary, webkit browsers will default to the last rule, ignoring the -webkit prefixed one.

But It Looks Different in IE!!!

So? That’s a problem? Because…? If I open up a shiny new site in IE7 on an old desktop, what happens? Assuming I can navigate the site and complete the task I came to do, all is well and good. As a user, did I feel cheated that there weren’t text-shadows or rounded corners or alpha transparencies or box rotations? Hell, no! I have no idea what sort of eye candy was tucked into the site. Ignorance is bliss and I’m there…blissfully unaware. Roll with it. And when some dimwit says it needs to look the same in every browser, you can send them here.

Radical Idea

Now, let’s talk radical. We all hate IE6, right? Some of us don’t even bother going there (my hand emphatically raised). But Andy Clarke has a more elegant solution than IE6 bashing…he serves up a simple typographic style sheet for IE6 and put the client’s money into time developing the design for modern browsers.

Don’t forget to clarify in your contract:

The landscape of web browsers and devices changes regularly and our approach is to look forward, not back. With that in mind we will test all our markup and CSS in current versions of all major desktop browsers to ensure that we make the most from them. Users of older or less capable browsers or devices will experience a design that is appropriate to the capabilities of their software. For people using Microsoft Internet Explorer 6, this means a universal, typographically focussed [sic] design but no layout.

Wow…that’s liberating!

Be Responsive

This is where I took in the most new information. I’ve used Modernizr, but didn’t really understand it (as it comes with HTML5 Boilerplate). Andy’s explanation is an eye opener. In a nutshell, Modernizr detects individual browser support of CSS3 features and adds a ‘js’ or ‘no-js’ prefix to classes.

This allows us to easily serve a style for capable browsers and an alternate style for non-capable browsers—within the same style sheet. Booyah!

Really…this was the bestest, most fascinating part of the book. Couple this with media queries, and we’ve got an elegant responsive design for mobile devices, too!

Presentation via Photoshop? NOT!

Presentation of website comprehensives has been undergoing a transition. I’ve seen more and more web companies writing about prototyping vs. comping. And I’m totally with them. Basic premise: do you want to present your clients with a static picture of a web site? One that won’t do anything? Nor even appear the same as the comp in some browsers as mentioned above? Ever?

Or do you want to present your client with…wait for ita live website? One that the user can really navigate. One that shows off those hover effects. Or web fonts? Or liquid layout? Or gallery magic? Or focus states on input buttons? Or…

‘nuff said. Thank you, Andy!

Give Me a 5!

Next up, Andy writes about using HTML5. Which I already have been doing for some time—using the basic elements, anyway. Love it! Now I’m ready to embrace form elements, microformats, and WAI-ARIA roles. Cool stuff. Super geeky and I won’t bore you here.

CSS3 and Beyond

The rest of Hardboiled Web Design delved deep into using CSS3. Lots that I already utilize, and a bit more education for the advanced stuff, like box-sizing, cover and contain. These are the things I’ll most likely put to use right away as they’re especially tied to responsive design and layouts for multiple browser sizes. I’ve played with simple transforms, you can see in my site’s main menu. But honestly, skewing, elaborate 3-D transforms, and keyframe animations can wait for a bit…

I’m still wrapping my head around border-image. I find that property most confusing!

The Takeaway

Great read! Radical thinking and approach for some. Liberating for others. I find the book to be very pragmatic: do it because it works and will continue to work in future.

Go get HardBoiled and make some deviled eggs!

One Response to “Hardboiled Web Design”