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.

Witnessing Jaws for Windows

A shark, swimming towards the camera.

These days not only is there a big push for Web Accessibility it is a legal requirement in many countries, including the UK (although there is an interesting article about this on A List Apart).

It was Jeffrey Zeldman’s excellent book Designing with Web Standards (soon to be published in its second edition) that drove home to me why accessibility is important.

You see, Web accessibility is more than simply allowing blind or disabled computer users’ access to your content. It is also about allowing users who view your website on their mobile phone, or on a small screen PDA, and it is also about allowing users who haven’t upgraded their web browser from Opera 5.14, because Opera stopped developing for your chosen operating system (EPOC R5/Symbian OS v.5, since you were asking). Web Accessibility is more than simply applying real world disabled access concerns to the Web; accessibility is as much about physically able-bodied users as much as it is about users who cannot view a screen, or use a mouse.

That said, I jumped at the chance this week to watch someone from church use their PC using Jaws for Windows, one of the world’s most popular screen reading applications for the Microsoft Windows operating system.

I’ve read about screen reading software, but never seen it (or heard it) in action. I’ve been encouraged to include alt tags in image code, so that screen reading software can read out what the image is of. I’ve been encouraged to set up accesskey attributes in links so that users can access the links quickly using keyboard shortcuts (eg Alt+2). I’ve been encouraged to write pages so that the page hierarchy makes it easier for users to navigate (using different levels of headings within a page, for example).

George — a member of one of the congregations I’m working with just now, who is blind — booted up his PC and introduced me to Jaws. A few things struck me as I witnessed George navigating the Windows XP desktop and then his browser (Mozilla Firefox, I’m pleased to report).

For some reason, with screen reader software I assumed that the user would wait until the software had read the whole screen (or window) from top to bottom, starting with the window title and working its way down until he or she made their next move. But why would they? That’s not what sighted users do. Sighted users quickly scan the page, find what they are looking for and click through to the next experience.

George did exactly the same, only his was an audio scan. Using a combination of key presses (and trust me, with Jaws there are many, many, many key combinations to learn) George was able to hear what was on the screen. In Firefox, for example, he was able to immediately hear how many links were on a page (and have them read to him one by one — he could quickly skip to the next with a key press until he found what he was looking for). Or how about headers? Jaws could give George a quick overview of the structure of a page by reading out the headers in order (and their level of heading: 1, 2, 3, up to 6). The same was true with tables, lists, images and just about any screen element, or window element.

What I also found a little surprising — though not as surprising as George — was the accesskey settings on my blog. They conflicted with Jaws’ built-in shortcuts. The accesskey keyboard shortcuts use the Alt key plus a key that you can specify in your code. When George pressed Alt+3 my accesskey page setting took precedence and whisked George off to the Archives page on my blog.

“Oh! What happened there?” said George, rather surprised.

I explained that I’d set accesskeys to make the page more accessible, but that I now realised that it interfered with Jaws’ default keyboard shortcuts. I’m not sure what the way around this might be. Presumably there may be some users who would appreciate the shortcut keys who don’t use screen reader software, while the Jaws’ users who might not use the shortcuts find that it interferes with their setup. Hmmm…

I was there for over an hour, carefully watching and listening, and asking George questions about what he was doing, and why. The experience has made me realise that when I do Website usability studies in the future it would be important to include at least one study with a screen reader and/or braille keyboard user.

Sadly George’s braille keyboard was being sent back for repairs, otherwise that too would have been fascinating to watch. Seemingly the keyboard is two way: you can read the screen contents, created using on long line of interactive braille dots on the keyboard, but you can also enter text in a similar way that you can on a standard braille typewriter. You what this means? I’ll just have to go back!

All in all we’ve come along way towards making computers and the Web accessible. But there is still a long way to go.