CSS Sculptor v.1.1 and CSS Menu Writer v.1.0

I’ve just blogged over at View from the Potting Shed about CSS Sculptor v.1.1 and CSS Menu Writer v.1.0 a couple of commercial Dreamweaver 8 and CS3 extensions (both US $99.99) from WebAssist.

Eric Meyer’s CSS Sculptor v.1.1 is an upgrade of the original version, which now allows creation of a horizontal navigation DIV when creating cross-browser compatible site layouts.

CSS Menu Writer is a new product that magically creates 100% CSS menus, both horizontal and vertical, and integrates perfectly with CSS Sculptor.

Check out the review.

Transcending CSS

Transcending CSS

A review by Gareth J M Saunders

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.

Print stylesheets

There’s an interesting thread going on just now on the Information Architecture Institute mailing list about print-specific (CSS) style sheets.

The conversation seems to be heading along two paths: Should you offer:

  1. a “print page” link or button?
  2. a print-specific CSS stylesheet?

1. Print page link or button

I remember working with a client a few years ago who insisted on my providing a “print this page” link, with appropriate printer icon. “There is absolutely no way that I can print the page otherwise!” she insisted. She didn’t realise that her browser had a print function: as she was using Windows it could be found on the menu bar at File > Print, or by pressing Ctrl+P.

I felt uneasy about adding what I regarded as an unnecessary addition to the page, duplicating as it did the browser’s functionality. It also relied on the user having JavaScript enabled on their browser, otherwise it wouldn’t work, further adding to the user’s confusion.

I argued that what was required was better education amongst users about how to use a browser.

2. Print-specific stylesheet

“Print this page” link or button or no, the question then lies about what is presented when the page is finally sent to a printer. Do you just leave it to the screen stylesheet to dictate what is shown, or should you provide a specific print-only style?

One contributor to the conversation had to say:

In research findings that I saw last year for a client, people (our target people, that is) still had an aversion to “just pushing print”, recalling pages that would cut-off content on the sides, etc. (Russ)

The great thing with print-specific stylesheets is that you can control exactly what is and what is not shown. You can remove navigation items (which are redundant on a 3D sheet of paper!), provide a print-relevant typeface (serif rather than sans-serif, for example), replace colour logos with mono equivalents, add link URLs to the end of each link so that hidden information isn’t lost on a print-out, etc.

However, you will still get people berating you for the fact that the printed version is totally unlike the screen version of the same page.

An opinion shared by Todd, a design researcher:

I can’t count the number of times I’ve tried to print a page, expecting to print what’s actually there (e.g. want the page as is) and got a completely different format from a print style sheet … I think you should use the print style sheet, but do your best to duplicate the web page as much as possible (e.g. only remove unnecessary navigation and footer elements, but leave the rest visually intact). (Todd)

Sabrina offered this compromise:

  1. Printer-friendly version: appears in a pop-up or in the same window (I notice that older audiences want to hit the back button in a new window, and it doesn’t always work) that calls the printer function, in case that doesn’t work, this page will also contain a print button. If you decide it’s a pop-up, it will also have a close button.
  2. CSS for print version of the page being viewed: for users who use the Print command in their browser and don’t care about printable versions (not me).

What are your thoughts, preferences and current practices?

Gareth