Review: Designing with web standards

This is a book review for Interface and Interaction design course.

Book cover: Designing with web standardsBased on my work experience so far most of the web UI and UE designers as well as some of the beginning front-end developers can be roughly divided into two groups – those who are aware and pay respect and those who have no idea nor pay attention to the current web standards.

Designing with web standards” (Zeldman 2010) is a book targeted mainly for the latter bunch. It explains clearly with everyday examples and practical logic, how and why site’s content and layout should be separated from its structure and behaviour. Book especially studies the mostly ignored basics of HTML, XHTML and CSS.

Web standards is something that sounds dull, complicated and for those with wild creativity, probably also claustrophobic. As name applies – standards are restrictions: programming patterns and markup rules for one to follow in order to construct a semantically correct web design with valid code and good backward compatibility.

What many are not familiar with is that following standards does not mean wasting time or creating the web site that look like it’s been done in some shade basement lab in the mid-90’s.

Reasoning and history behind current standards

In it’s first part the book spends quite a bit of chapters on convincing that learning standard rules and their variations by heart will pay off eventually for all the stake holders in the project – developers, designers, marketing department, users as well as anyone else who will continue with the site in the future.

Consisting and valid code do has a lot of advantages. Neat construction will requires less bandwidth and will be appearing more precisely on tricky and old school browsers, mobile devices and web readers.

Especially designers, working on their fancy 21” iMacs tend to forget that content might reach also those with slow connection and tiny screens or through reader programs that only scan through the written content (my previous post on visual impairment can be found here).

As an example of unconsidered tendency Zeldman reminds of an early 2000’s designing trend where almost every bit of text was converted into tiny images and pushed into correct place with tables or transparent GIF-files, of course without any descriptive ALT-tags.

In the first part, book also takes a look into history behind evolving of novel programming rules. It is tempting to skip these chapters since they sound like a yawning repetition of already rejected rules. However, I would recommend to go through them despite the prejudices: standard conclusions that are seen for example in XHTML strict and transitional, CSS3 and HTML5 scripting make a lot more sense after seeing trial and error of previous rule sets.

Modern markup

In the second part “Designing with standards” dives into more practical analysis of modern markup and programming basics. One of the studied topics is for example mystery behind the DOCTYPE – that little indicating snippet of code in the beginning of every (X)HTML-page. Though Zeldmans concentrates on ideologies behind HTML construction also HTML5 (terminology debated) is explained briefly. Book especially pays attention to new media possibilities such as canvas as well as new semantic rules – page content such as text and images is now presented via structural parts like section, nav, header, footer and aside. Book also reflects on differences between forgiving HTML5 and tighter XHTML.

In the same spirit Zeldman looks into fundamentals of CSS2 and CSS3, known bugs, workarounds and accessibility tips. Typography chapter encourages to follow simple rules: limitation of fonts to two, logic in coloring, readable measures and using grids for better readability on pages with a lot of content. And no more inline <font> -tags!

Common mistakes that even skilled designers and developers tend to do is an interesting part to read. Among others Zeldman mentions “classits” who’s bad habit is to overload the pages with unnecessary div and element classes. This code snippet quoted from the book is one of my favourites:

<div class=”leftandtopalign”>
<p class=”small”>
<span class=”blackborder”>
Shoot the developer, then shoot me. 
</span>
</p>
</div>

Conclusion

Designing with web standards is a handy guide for everyone working closely with web designing. Despite slightly unattractive title it serves well even the most artistic souls who are repulsed of any kind of rules. Knowing fundamental standard rules is like working with a tools set with years of guarantee. Doing the opposite equals scrapping with a pocketknife – works at the moment but makes ugly marks and is useless after becoming blunt.

The main message in the book is that one should acknowledge that he or she is serving a large audience and page construction should serve well as many as possible regardless their devices, connection speed or physical ability.

References

Zeldman, J. & Marcotte, E. 2010. Designing with web standards. 3rd edition. New Riders, USA.

About these ads

Tags: ,

One response to “Review: Designing with web standards”

  1. Ando says :

    In todays industry, smaller firms and freelancers (the not-so-professional-ones) often don’t have time and/or motivation to pay attention to standards. I mean, why should one care if the page displays OK in Firefox 4, even when there are 2 id tags of the same name… We all shape the web and it’s the responsibility of the writer to defend his honor.

    When I first started with HTML, I did some really stupid and ignorant things. I still do them, but not so often and not so grave. Experience has taught me that it’s better to make it right the first time around. It’s a bit like TDD.

    I didn’t find the book in any of the libraries in Tallinn, but it sounds like a book worth reading. Thank you for the review – for the next few weeks I’ll definitely be focusing more on the subject.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: