Implementing Design: Bulletproof A-Z
Dan Cederholm is in the house at An Event Apart San Francisco. He’s all about the bulletproofing.
Simplebits describe what they do as
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
moz-border-radius declarations. Dan puts these vendor-specific properties into a separate stylesheet called
enriched.cssto 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
opacitybut 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
clearfixsolution 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
- 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-widthon 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.
- K is for Kitty.
- L is for
.last. Dan is constantly having to put a class of
.laston the last item in a list (for style reasons). You can use jQuery to add the class programatically.
- 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
- 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.