"css" in Weblog

On a whim, and after an off-hand suggestion from Stef, I decided to pop some of my most-used Sass mixins - the ones that I include in every new project - up on Github. There’s nothing too ground-breaking here: a straight port of Eric Meyer’s reset.css, and a few CSS3 expanders.

The CSS3 expanders are probably the most interesting. I was getting irritated with having to type and retype certain of the new rules over and over again with the now ubiquitous -moz and -webkit prefixes. So I bundled them into mixins. Mixins are Sass’ way of adding very simple scripting to your stylesheets. Let me give you an example.

This Sass snippet:

div
  width: 500px
  height: 300px
  +box-shadow(#000, 0px, 3px, 5px)

Gets rendered as:

div {
  width: 500px;
  height: 300px;
  box-shadow: #000 0px 3px 5px
  -webkit-box-shadow: #000 0px 3px 5px
}

Dead simple. I’ve wrapped up border-radius, box-shadow, gradient and box-sizing. Interested? Grab the files from Github.

Mike Davidson was the original daddy of the Flash Image Replacement technique, having invented and employed his own version in the ESPN redesign a couple of years back. More recently the technique was polished and relaunched by Shaun Inman. Now Mike has taken back FIR, now dubbed sFIR, improved it (with help from Tomas Jogin amongst others) and taken on board the advances to the method by Tom Werner and Rob Cameron… And the results sound a bit special.

The latest incarnation allows sFIR to replace html blocks as well as headings… Text can be scaled (although not without a page reload)… It’s printable… Text is selectable…

I really really like the look of this one!

Digital Web Magazine has publishied a great article by Ethan Marcotte about Producing Quality CSS in a Team Environment. Most of us that do CSS for a living are self taught and used to working alone - it’s only very recently that projects big enough to require more than one front-end developer have started coming out of the woodwork, so how should we best cope with moving into a team environment? I had the opportunity to work with two other developers on a big CSS project back at the beginning of the year and it was a real learning experience… Naming conventions, file structure and levels of knowledge all became issues. Luckily, we were all sitting together at the back of the office so any questions could be blurted out, tourettes-style, and the answers would come right back but if we’d been working remotely it would have been an absolute nightmare. Ethan’s article suggests writing a style guide to encourage a consistent approach to coding - it’s done in more established programming fields so it was only a matter of time before someone thought of applying it to CSS, and it could sasve us hours of tears and frustration.

Flash, DHTML Menus and Accessibility explains the use of the much-neglected wmode property of Flash movies. Turns out that it can be used to hide decorative movies from readers as well as allow the use of normal CSS positioning and z-index stacking. Could be handy…

The bandwidth-saving aspect of CSS is something that I’ve neglected of late when selling CSS as a technology. Mostly people are interested in the accessibility aspect and occasionally designers want to know about the interesting effects that can be achieved a la Zen Garden. Clagnut has posted a short except from an interview he gave the WSG in which he summarises the bandwidth savings that Multimap has made by migrating to a CSS-based layout: an astonishing 40,000GB per year!!! That’s after reducing page weight from 65KB to 35KB.

Doug Bowman did a CSS makeover of the Microsoft site recently as part of his Digital Design Seattle presentation in which he reduced the size of the page by 62%… That’s an estimated bandwidth saving of 329 terrabytes per year!!!

As part of some training I gave last year I was asked to work up the Oxfam website home page in CSS as a proof-of-concept case study to accompany training material. My version worked in N4 upwards and weighed in at about 50% of the table-based original. That doesn’t include added bonus of stylesheet caching on subsequent pages etc.

Savings like these, to big sites in particular, could be a real selling point for CSS…

These came up on CSS-D today and I thought it might be worth gathering these Image Replacement Methods together into one place. So which is best? Not sure.

Accessible I, Accessible I Revised, Incutio, Mr Clay, Gilder Levin Ryznar Jacoubsen

There’s been a really good discussion of web standards and their uptake going on over at asterisk over the past few days. Keith called on beginners and pros alike to say what they thought the barriers were to the widespread adoption of web standards were and it appears to be something that everyone has an opinion on! It’s great to get so many different perspectives on what the issues are and how people intend to deal with them. The audience is obviously a bit biased - asterisk is heavily linked from the WS blog community, but there’s still quite a variety of views expressed…

Wow, the Zen Garden has done it again… The latest 3 designs are possibly my 3 favourites so far. Oceans apart isn’t anything groundbreaking but it’s incredibly elegant design very well executed. Start listening is a wonderful meeting of 50s advertising, wild west typography and modern design garnish. Lush. Finally, Springtime has a great feel to it with a novel use of horizontal tiling to allow the centered page to dominate the unused space. All round, great entries.

I’d been a little unimpressed lately with the proliferation of International Compliant design in one or two designs. CSS lends itelf to commercial-style design with straight lines and flat colours. That’s great for the industry (and it means that we can earn ourselves a living) but a site like the Zen Garden should be an opportunity to really try and push the boundaries - turn out pages that are interesting as well as elegant. There are enough examples in the Garden already that show that CSS can make it in the commercial world so it’s great to see some interesting designs coming out of the woodwork.

In a fit of self-indulgence I decided to Google my Zen Garden entry, Postage Paid. And I got some quite interesting results!

There was Dave Shea’s initial post about the batch of designs that Postage Paid occurred in. Nothing too much to write about that but it seemed to be a good place to start.

The result that I’m most pleased with is Shaun Inman’s comment on Andy Budd’s blog. I saw this at the time, being an avid reader of Andy’s, but I’d forgotten about it. I absolutely love Shaun’s work and for him to say that he was influenced by Postage Paid is just incredible. I know it’s a small thing but I really appreciated it.

I have no idea what the folk over at StijlStek.nl said about Postage Paid but I think it was something nice so I’m going to include it here. Maybe something about an original theme?!

By far the funniest mention was on a college kid’s site. Apparently Postage Paid was set alongside ZunFlower and Stone Washed for a design critique! And it was slated! I’m not too bothered about that - I didn’t expect the design to appeal to everyone. I wanted to break a couple of rules and turn out something a bit different, likely alienating my audience in the process. Having said that it was slated, I’m pretty chuffed to have been discussed in class, even if I did come off badly!

Woohoo! My Zen Garden submission made it… I’m dead chuffed about that and more than a little bit relieved.

I was trying to do something a little bit different to the other hi-design submissions they’ve had lately… something organic, instead of my usual clinical/minimal layouts. I started out trying to do a hand-drawn design but as I was searching through my scans archive for hand-writing samples I found this 7” packaging I’d saved ages ago. I loved the number of labels the people at the other end had managed to stick on one small piece of cardboard! Looking at it, it occurred to me that it could make quite an interesting basis for a design. And here we are!