Nov 06
An Event Apart 2008, Day 2, 11:00am – 12noon
Read the previous talk in this series, Design Lessons in Chess by Rob Weychert, or view An Event Apart’s Table of Contents
Implementing Design: Bulletproof A–Z
- Craftsmanship: Vermont is craftsmanship by nature. Why? Your impression of Vermont… “I think of a guy with a beard building something, a human behind the design, not a factory.”
- “When something is well-crafted, it reflects that a human was behind its design.”
- The browser landscape is changing – it is a time to embrace progressive enhancement (for JS) and progressive enrichment (for CSS).
- These items will be referencing his demo site, http://icedorhot.com
- A: Anchor links with meta information (a bulletproof example)
- Screenshot of popular drinks box from slide (10_populardrinks)
- a display block and use floats to keep things appropriated
- B: Border-radius (progressive enrichment)
- border-radius is promised with CSS3, yay! (in 2000 years :/)
- Vendor-specific solutions of the -webkit and -moz options
- Layer background images and border radius with clip the background image so that it does not exceed past the rounded section, maintaining the rounded corner.
- Firefox2 not as great support for that clipping of rounded corner, so it’s a little bit of aliasing, but so it goes. It looks ok in FF2 if contrast is low enough.
- He puts these things in an enriched.css, so has border-radius and the webkit and moz styles in there, and only cool browsers use them.
- What about uncool browsers?
- Well, they get square corners. Tough cookies, still workers. That’s ok and that’s good. It degrades wonderfully. It affects the design in minimal ways.
- Great for prototyping before carving the images out.
- C: Color transparency with RGBa (progressive enrichment)
- Hovering over the city makes it semi-transparent with temperature (screenshot)
- opacity sets the value for the element AND all its children, including the text, blek!
- background-color: rgba(0,0,0,.7) 0,0,0 is black, and .7 is the opacity, and there is no usage of png or any other deal. ¡Que bueno!
- Tiled png would reach more browsers, but rgba is great for prototyping before carving out final images.
- D: Do websites need to look exactly the same in every browser(.com)? No!
- D: Decision makers who get it.
- It’s not the end of the world if some browsers don’t get the opacity from rgba and if they have square corners instead of round. IE6 is still perfectly usable.
- The h1 headings in foamee.com have little flourishes right after and before the name. uses generated css content to generate the image: PERFECT USE OF CONTENT PROPERTY for :before and :after
- It’s ok: tiny visual enhancements that do not affect the layout
- E: Easy-clearing floats (reexamining past methods)
- This is not what floats were intended for, but this is what we’re dealt so we have to play it
- Dan likes the clearfix:after clearing method.
- Dan tried what I do and made a big giant list of things and not adding the clearfix class (but too unmanageable)
- So instead he changed it to .group and it doesn’t look as scary as .clearfix
- Then lists *+html .group: {min-height: 1px} and * html .group{height:1%;}
- IE8 will supposedly support generated content, wahoo!
- F: Frameworks
- He uses Meyer’s reset.css and saved himself 155 times of writing margin:0 padding:0 for mtv.com
- Also in his framework he built he includes the IE6 filter png fix (* html #selector{ filter: progid.blahblahblah}) as well the clearfix.
- G: Gridlasticusness (bulletproof)
- Dan doesn’t have a design background, so he’s been learning about web design as he’s going.
- Implemented grids on simplebits
- Each grid will have em value
- Em-based layouts force you to ensure ultimate flexibility
- Em/pixel values make more sense when using the 62.5% method – end up with a base ten emming math reference.
- Ems should also be used for margins, borders, etc as well.
- Avoid setting font-size and width on the same element – gets confusing and you throw off your base. The calculated width is going to be different once you change your font-size.
- Adjusting font size can throw off your grid too.
- Set a max-width if using ems on elastic layouts!
- Think modular – don’t get overwhelmed by so many sections. Partition your sections.
- H: Horizontal grid. sure. vertical grids? Kind of.
- Be realistic about what’s going to happen. Make lines jagged, put different lengths of content there so that it looks realistic and they know what to expect. (Screenshot of “everything is just fine here”)
- Use groupings so that things are grouped and at least sections have the same tops
- I: IE8 still refuses to resize text set in pixels (reexamining past methods)
- Say what?
- Dan logged a bug, and they closed it right away without even opening or validating it or posting a workaround.
- He’s still using ems because of that.
- Page zoom is there, does this eliminate our issue of font-size? No, because the text size is still there. Dan uses text size quite a bit and his eyesight is decent.
- J: jQuery.
- He’s never talked about Javascript in a talk before, but he’s just that excited about jQuery that he’s bringing it in here.
- He’s just expressing his love for it.
- K: Kitty (kitty screenshot)
- L: .last (bulletproof)
- Simple way? Just add the last class with jQuery $(”ul.lst li:last”).addClass(”last”);. Sooo, that may not work without JS disabled, but your site will still work and it’s just a presentational thing.
- M: Must skip a few letters if we’re going to get through this
- N, O, P, Q, R…
- S: Shifting backgrounds
- Silverback’s layered pngs and http://therissingtonpodcast.co.uk
- Position background with a -80% or other – percentage.
- http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/
- T: Today’s MacBook release… MacBook Sun(tm), in ten minutes, it’s going to be huge.
- U: Ur stats.
- “When can we ___?”
- “The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless.” – Eric Meyer
- If you’ve got all IE6 users, may not want to do border-radius and other stuff
- Etc, etc. Listen to your user stats. Don’t care what other people do, because you’ve got to look to your audience.
View the next talk in this series: The In-House Designer by Cameron Moll, or skip to An Event Apart’s Table of Contents
Popularity: 9% [?]
