Web Directions: Comic book inspiration and the CSS Eleven

Matthew Magain

Andy Clarke captivated the audience in true Malarkey style this morning, with his keynote presentation Think Like A Mountain at Web Directions South.

Drawing upon one of his childhood loves, comic book art, Andy pointed out the numerous parallels between comic books and web page layout.

Bandying around references to and artwork by comic artists both celebrated and obscure (Frank Miller, Paul Chadwick, Dave Gibbon) Andy highlighted the progression between panels in a comic book (some follow an obvious order; others require a lot more deductive reasoning). As it does in the movies, this technique adds drama by not explicitly showing every detail.

In addition, following an established convention to build trust and familiarity, then busting out of that convention occasionally, is an effective way to create timing for a story, or for a user scanning a page.

Andy also mentioned the rhythm of a page, as defined by its layout. On the Web, similar rhythm can be created by using borders, background images/colours, contrast (font weight). It’s useful to think about the amount of time we want someone to look at our content when laying it out.

While it might not be appropriate to splash exaggerated sound effect captions across our sites, we can still use conventions for drawing a reader’s eye across the page too — for example, by using contrast, images, headings or slightly rotating a container that the user would normally expect to be perfectly aligned. In comics, bigger panels translate to slow storytelling, and small, thin panels can create a much faster, more frantic pace. Thinking about a product page, it’s easy to see how a user is likely to spend more time dwelling on a larger picture than a collection of much smaller images.

Andy touched on the topic colour, and suggested that in comics and on the Web, colour doesn’t always add something. e.g. Sin City is mostly monochrome, but the splashes of colour really stand out.

He concluded by comparing the evolution of the Web as a medium to that of comic books, which originally had limitations on the stock used, and therefore, the colours that could be applied. On the Web, we’ve now evolved from the web-safe colour palette and the lowest common denominator, so this should give us more freedom to take advantage of the medium and explore it to its full potential.

After his presentation, Andy also introduced the CSS Eleven, a collection of standards-based designers whose goal it is to help the W3C’s CSS Working Group evolve the CSS3 specification. Great to see three SitePoint authors, Cameron Adams, Jina Bolton and Jonathan Snook, on the team!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • santouras

    interesting that this doesn’t mention his comments about css11, the new working group he is a part of to push along the w3c with its css3 specification.

    I’m a bit mixed on this really. Whilst css3 is coming along slow, not all vendors have adopted css2 and css2.1. If css3 comes out tomorrow, why should we believe that MS will impliment it in less then 10years, given the time they have taken to impliment (and no impliment) the existing css specification?

    Surely the pressure to push the specifications should be at the vendor, to first impliment the existing specification, not on the working group to publish a new specification that Opera/FF/KHTML will impliment overnight, yet no-one is able to use because 70% of the market are using a browser that doesn’t even support pseudo selectors on all elements.

    I admire his passion and dedication to get these standards pushed through, but surely the effort could be directed in a more helpful direction.

  • http://www.sitepoint.com/ mattymcg

    interesting that this doesn’t mention his comments about css11

    I added this immediately after posting — you’ve gotta be quick! Thanks!

  • http://www.tyssendesign.com.au Tyssen

    Seems they need to sort their website out.

  • http://www.torkiljohnsen.com/cv torkil

    Psst: The rythm of a page-link isn’t working. Lacks the “s” in “blogs”.

  • http://www.sitepoint.com/ mattymcg

    Thanks torkil, link fixed.

  • SmartFolio

    yes i agree, well said, great website

  • Nick

    He has a lot of good points about the comic book layout similarities, but I don’t see what’s wrong with making a “POW!!!!!” bubble flash onto the screen whenever you click a link :)

  • Anonymous

    <roots>

  • Web Design Blogger

    I think that its the old case of finding a middles ground / fine balance between usability and and the flashiness that clients like.