Implementing Design: Bulletproof A-Z

August 19th, 2008

Dan Cederholm is in the house at An Event Apart San Francisco. He’s all about the bulletproofing.

Simplebits describe what they do as hand crafted pixels and text. This idea of craft, building something with your hands, is what Dan wants to concentrate on. It isn’t always obvious in web design how well-crafted a web site is. Dan will run through a case study that focus on three aspects of web design: being bulletproof, being adaptable and focusing on the details. Like progressive enhancement for JavaScript, Dan will be using Progressive Enrichment for CSS which really means using cool stuff that doesn’t work in IE.

The case study will be a site all about coffee called Iced or Hot (it doesn’t actually work).

• A is for anchor links with meta information. If you’re going to put data inside links, think ahead to links with really long text.
• B is for border-radius. This is progressive enrichment. Rounded corners are usually a pain in the ass. But you can do them today with namespaced webkit- and moz- border-radius declarations. Dan puts these vendor-specific properties into a separate stylesheet called enriched.css to keep them quarantined like hacks. What about other browsers? Well, they don’t get rounded corners but so what? Rounded corners just degrade gracefully to rectangles.
• C is for colour transparency with RGBa. You could use opacity but that sets the transparency for an element and all its children. Giving colour values with RGBa (background-color: rgba(0,0,0.7);) you only set the opacity of the background. A PNG would reach more users but like border-radius, RGBa is great for prototyping.
• D is for Do Websites Need To Look Exactly The Same In Every Browser? No!
• D is also for decision-makers who get that. The example of the semi-transparent menus on the Sundance Festival site (made by Airbag) demonstrates this. IE just gets flat colours and that’s fine. Dan himself used generated content on Foamee to add images to the headlines. Browsers that don’t support generated content don’t get the ornaments and that’s fine.
• E is for easy clearing of floats. There’s the classic clearfix solution but man, that’s a crappy class name to put in your markup. The alternative of creating a list of wrappers that you want to clear is as bad. Dan uses a class name of group.
• F is for frameworks. We all use our own frameworks: the code you start from for each project.
• G is for gridlasticness. From the latin Gridius Lastius Emius which means working with em-based grids. Dan shows some grid-based designs: Mark Boulton, CNN, Erskine. Then he gives a refresher in elastic layout. Em-based layouts force you to ensure ultimate flexibility. You have to think about font sizes, layout, margins and padding in ems. Richard’s 62.5% rule helps make the calculations easier. Set a max-width on elastic layouts (of 100%) you can make sure that the layout won’t go outside the viewport. On Iced or Hot, has four columns of 16em with a 2em gutter between them. The XScope tool is handy for checking your grid lines.
• H is for horizontal grid? Sure. Vertical grid? Sort of. Here, Dan is talking about that annoying habit that visual designers have of lining everything perfectly on the top and bottom of element. It looks great in Photoshop but it bears no relation to reality. It’s like those people who make the pillows look perfect on the bed. It’s a waste of time because they’re just going to get messed up. But we can uses classes for groups of content so that there are break-points in the vertical layout.
• I is for IE8 beta still refuses to resize text sized in pixels. WTF? We still need to use relative units for text sizes. Does page zoom change things? Who knows.
• J is for jQuery. Spontaneous applause from the audience. Dan hates JavaScript and he normally doesn’t talk about it in presentations but jQuery makes his life easier. It uses the familiar CSS selector syntax.
• K is for Kitty.
• L is for .last. Dan is constantly having to put a class of .last on the last item in a list (for style reasons). You can use jQuery to add the class programatically. jQuery('ul.lst li:last'),addClass('last');
• M
• N
• O
• P
• Q
• R
• S is for shifting backgrounds. Heeeeere’s Silverback! Parallax scrolling is a great example of craftmanship. Not everyone is going to see it but it’s a lovely added extra.
• T is for a testimonial for reset.css.
• U is for ur stats. When can we…? Drop support for X. Start using Y. Answer: when your site shows the stats to support that decision.

The alphabet ends with U.

1:53am

Tagged with aea aeasf aeasf08 aneventapart conference presentation simplebits liveblogging liveblog css design

Illustrations

Thanks to the magic of machine tags, you can illustrate this post by tagging a picture on Flickr with:

Related

Links

Find links I've tagged with aea, aeasf, aeasf08, aneventapart, conference, presentation, simplebits, liveblogging, liveblog, css, design, etc.

Photos