Presentations from April 2009 gathering

At last! the presentations from the last Scottish Web Folk meeting in Glasgow on Friday 17 April 2009.

Flickr

Robert Morrison’s presentation about building “an institutional image request interface on Flickr’s API with PHP”.

Microsoft SharePoint

Frank MacDonald’s presentation about whether Microsoft SharePoint is suitable as an intranet CMS.

CSS Frameworks

Gareth Saunders’ presentation about using CSS Frameworks, with a particular focus on Blueprint CSS.

Advertisements

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

Eric Meyer’s CSS Sculptor

Eric Meyer’s CSS Sculptor

This is my latest favourite ‘toy’ that I’m playing with just now. Eric Meyer’s CSS Sculptor is a Dreamweaver Extension (for DW8 or DW CS3) from WebAssist developed in collaboration with the CSS guru himself. It’s not cheap, though: normal price is US $149.99, although I got it on special offer via .net magazine for US $104.99.

This extension allows you to quickly create a standards-compliant, CSS-based layout in minutes, rather than hours, in six simple steps:

  1. Choose one of the 30 built-in layouts (e.g. 1 Column, Fixed, Centered; 2 Column Elastic, Left Sidebar; 3 Column Fixed, Header and Footer, etc.)
  2. Customize widths and heights, margins and padding
  3. Set basic typography (text, h-tags and links)
  4. Style each div with background colours and/or images
  5. Define which layout components to show or hide in a print style sheet
  6. Once you’ve decided on a Doctype and whether to include the CSS in a separate file or within the document head click Finish to allow the extension build the code — it will build with or without explanatory comments, which are really useful for understanding what it’s done and why

Output code supports Internet Explorer 5.5 – 7.x, Firefox 2.x, Safari 2, Opera 9; earlier versions of Netscape and Firefox are notably absent from this list but all code that I’ve created with this extension so far have worked fine in Netscape 7.2 and Firefox 1.x.

Obviously, this isn’t a replacement for knowing CSS inside out — everyone does, right? 😉 — but it’s a great tool to add to the arsenal, and a great way to learn CSS, or simply to knock up a CSS-based design very quickly.