Transcending CSS

Transcending CSS

Transcending CSS: the fine art of web design by Andy Clarke is one of the best books about cascading style sheets (CSS) that I’ve read in a long time.

As a designer Andy Clarke has produced a book that’s far from the hundreds of other dull books on CSS which are packed full of dry code examples and pages and pages of text. This is a beautiful and colourful book, filled with hundreds of images, that takes a real-life approach to designing sites and writing accessible HTML and CSS code.

While this book isn’t aimed at beginners, it assumes that you have at least a good, working knowledge of XHTML and CSS, it is very easily read and if you’re looking to get into modern CSS layout methods then this book could be an inspirational introduction to the subject. Because of the design of the book it’s also more accessible than Jeffrey Zeldman‘s excellent Designing with Web Standards, now in its second edition.

The book is organized into four main sections:

  1. Discovery
  2. Process
  3. Inspiration
  4. Transcendence

Discovery

In the first part of his book Andy Clarke introduces us to what he calls Transcendent CSS, that is code that looks to the future, building on current web standards to create accessible, cross-browser-compatible websites, rather than relying on outdated layout methods such as non-semantic tables.

He argues for web standards, acknowledges that not all browsers display the same design, advocates that web designers use all available CSS selectors and semantic code, use CSS3 where possible to look to the future, avoid using hacks and filters, and to use JavaScript and the DOM to plug any gaps in CSS.

One particularly useful exercise is where he takes real-life examples and shows how he would present these in XHTML, in a section entitled “translating meaning into markup”. His examples include a horse race, marathon runners, a taxi rank, books on a shelf, and a museum display of mediaeval helmets.

Process

Having set the scene over the first 100 pages (lots of pretty pictures on the way, so don’t worry!) Clarke explores a usable process for designing with web standards. It’s quite a good introduction to certain elements of information architecture, such as wireframing/grey-boxing and usability.

Taking the example of a design for Cookr! (his made-up recipe website) he adds mark-up to the design to show you how to best mark-up and organize the XHTML and CSS code. It’s a very visual and practical approach which is strengthened by excellent explanations of what he’s doing and why.

Inspiration

In the third part of the book Clarke moves away from code and gives us an insight into where he finds inspiration for website designs. And it’s not just from other websites but newspapers, magazines, buildings, streets … anywhere really.

This section offers a good introduction to grid and layout theory, and his advice about keeping a scrapbook of inspiration examples is really helpful, either a real scrapbook or something online like Flickr. He finishes off the section exploring why design is more than just creating attractive visuals.

Transcendence

In the final section Clarke brings it all together in some practical examples of how to take particular designs and mark them up using semantic XHTML and CSS. Of particular note is his extensive and creative use of lists for marking up particular content.

This section has the best explanation of relative and absolute positioning that I’ve read in any book on CSS. It’s really worth buying it just for that.

He finishes off the section with a look ahead to what CSS3 has to offer. I’m looking forward especially to the :nth-child pseudo-class which will make creating zebra-stripes on tables easy (currently available via hand-coding and jQuery), multiple background images for elements, and multicolumn layouts (currently available in Firefox via the -moz identifier).

Conclusion

I found this a really inspiring book which got the balance between code theory and practical design application right. I’d certainly recommend it to anyone who’s looking to improve their CSS coding or simply wanting inspiration about how to take their CSS to the next level.

Available on Amazon UK.

Essential web development tools for Firefox

Firefox eats IEI was chatting with a friend online this evening (hello Steve!) about web coding, and I offered him my three favourite add-ons for Mozilla Firefox which I find absolutely essential for coding and debugging HTML, CSS and JavaScript.

Work in Firefox, debug in IE

When developing code I tend to always work with Firefox first. When I’m happy that my code is working properly, I’ll then test it in Opera and Safari and only then will I check it out in Internet Explorer 6 and 7.

And then typically I’ll spend the next fortnight debugging my nice clean code in IE, trying to find workarounds that will make my pages work properly in the world’s favourite (and most terrible) browsers.

It’s only the most popular because people are too lazy to install something better. Or don’t realise that there is something better. “But it looks okay to me…!”

Seriously, if there was a car that killed as many people as IE kills good quality web code, it would be banned in a flash.

1. Web Developer

Web Developer toolbar

Web Developer by Chris Pederick adds a toolbar and a new submenu to Tools to Firefox, which are absolutely packed with web developer tools.

There are 12 main sections on the toolbar, which give you access to all the tools and features:

  1. Disable
    Allows you to disable anything from Java to JavaScript, Cache, Meta redirects to colours.

  2. Cookies
    Disable, delete, clear or view cookie information.

  3. CSS
    Not only can you view CSS, you can also edit live CSS in the cache and see what effect your changes have.

  4. Forms
    Display form details, show passwords, change GETs to POSTs, etc.

  5. Images
    Disable or hide images, display alt attributes, image dimensions, etc.

  6. Information
    View all sorts of details about the page from ID and class information to blocks, anchors, links, tables, document size, headers and lots more.

  7. Miscellaneous
    Show comments, show hidden elements,show a ruler on the page, etc.

  8. Outline
    This is one of my favourites — here you can single out a particular page element and find out the markup, class and ID information. Essential for debugging or writing CSS.

  9. Resize
    Define preset page sizes for testing, eg 800 x 600, 1024 x 768, etc.

  10. Tools
    Validation, DOM inspector, Error and Java consoles.

  11. View Source
    View Source, Framed Source and Generated Source.

  12. Options
    Options, Help and About.

I use this add-on all the time, particularly for debugging code or learning about someone else’s code.

It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

2. Firebug

Firebug

Firebug offers a few similar features to Web Developer but it really comes into its own with its own separate window. Here you can explore the HTML, CSS, JavaScript, all viewable by DOM, Styles or Layout.

Two of my favourite features are the ability to point at a line of code in the Firebug source view and the corresponding section of the actual page is highlighted (check out the blue highlight in the screenshot above), showing you exactly what that code relates to on the finished page. It even shows margins and padding in different colours (yellow and purple).

It will also show you the CSS cascade: which CSS rules are being used for that section of the page, and which are being overruled.

Firebug will also allow you to edit HTML, CSS, and run live JavaScript on the cached page, making it one truly remarkable and powerful add-on to your web developing toolkit.

3. HTML Validator

0 errors / 0 warnings

HTML Validator is an add-on that shows HTML validation information within your Firefox browser window, rather than having to go to a separate site, such as http://validator.w3.org.

The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

It really is that simple. You can specify the type of validations to check, including accessibility.

Conclusion

Those are my top 3 web developer add-ons. Of course, Microsoft also has its own Internet Explorer Developer Toolbar, but to be honest compared with the polished and precise offerings for Mozilla, the IE version has the elegance of performing open-heart surgery with a wooden spoon and a spanner.

Other developer-related add-ons that I’ve used, include:

  • JavaScript Debugger – This is Mozilla’s official JavaScript debugger, code named Venkman, which aims to provide a powerful JavaScript debugging environment for all Mozilla based browsers.
  • View Source Chart (creates a colourful chart of a web page’s rendered source code, which can be very useful.
  • UrlParams – Shows you the GET and POST parameters of the current website in the sidebar, and allows you to edit and submit your own values. Useful for testing forms.
  • Operator and Tails – two add-ons for showing Microformats information .. but that’s for another blog post

I tend to keep most of these installed (apart from the Microformats add-ons) but disabled, and only enable them when I need them. That way they are close at hand, but don’t take up valuable system resources for the 99% of time that I’m not using them.

Secret Asian Man comic strip

Secret Asian Man comic strip

Spotted in my Comics.com newsletter:

Please welcome Tak Toyoshima, whose new strip, Secret Asian Man, is the first nationally syndicated comic strip featuring an Asian American as the lead character. The strip centers around Osamu “SAM” Takahashi—a struggling comic strip artist with dreams of hitting the big time—his wife Marie and son Shintaro. Through humour and wit, the strip tackles some of the unresolved issues regarding race, gender, and orientation. Secret Asian Man joined the Comics.com and United Feature Syndicate family on July 16th, 2007.

It’s awfully good too. I think I’ll be reading that every day alongside Dilbert.

One thing that has just occurred to me, however, while trying to decide what alt attribute text to include for the cartoon above is that users who rely on alt attribute text (such as those who use screen-reader software or braille displays) completely miss out on the humour in these cartoons.

The alt text for today’s Dilbert cartoon, for example, says “Today’s Comic”. I even tried tapping ‘888’ but didn’t get any cartoon subtitles.

It looks like we’ve a long way to go before the Web is completely accessible.

Literally the middle of nowhere

Jane and I were looking online to see where we might spend a couple of nights this week. So we checked out the Visit Scotland website for accommodation in the Highlands.

Location/Map

We found a nice place called Braelangwell House on The Black Isle, clicked on the “Location/Map” button and were faced with this sorry excuse for a map:

A map, showing a box in the middle of nowhere

What possible use is that?!

(What is perhaps even worse is that on my main PC I can’t even see the map, in Firefox, IE or Opera! The site is telling me that I don’t have JavaScript enabled. I clearly do! Some terrible scripting there methinks.)

Getting there

So instead we turned to the “Getting there” page. It offered two options:

  • Getting there from the Information Centre
  • Getting there by Aeroplane

We’d want to get there by car … and not from the Information Centre (wherever that is!!).

We’ve booked elsewhere.

Designing With Web Standards (Second Edition)

Spot the difference:

Designing With Web Standards (First Edition) Designing With Web Standards (Second Edition)

In the three years since Jeffrey Zeldman wrote his first edition of Designing With Web Standards his book cover has now turned green, the content has been printed in full technicolour and it appears (from the cover photo at least) that he now looks like Bob Carolgees in a beanie hat!

My copy of the new edition arrived last Saturday and I’m really looking forward to the opportunity to get into it. Not literally, I mean “read it”. I took the first edition on holiday with me, a few years back, to Tenerife. While Jane and her parents explored the island I sat on a balcony reading about the importance of Web standards. It’s not as sad as it sounds.

Well, okay, maybe it is but I certainly learned a HUGE amount from that book. I don’t think I’m exaggerating to say that that one book turned my life around entirely and helped to make me a completely different person.

Well, okay, maybe I am exaggerating a little, but that book gave me a new insight into what was possible with Web design. It gave me an insight into the importance of writing good, logically structured documents which are then displayed using Cascading Style Sheets. I’d read alot about both before but no-one had explained it to me quite so clearly and entertainingly as Mr Zeldman did on that balcony in the Canaries.

If you already have the first edition you probably don’t need this one (except for completeness) as you’re probably aware of the importance of standards and are keeping up with what’s going on (at places like A List Apart, for example). But this edition has been brought completely up to date. It even talks about Internet Explorer 7.

I thoroughly recommend this book to anyone vaguely interested in Web design and standards, and particularly if you are the kind of person who thinks that it’s okay to write Web pages with a class or div for everything and who uses H1, H3 and H4 tags without H2.