At the end of April, my employer, Wall Street On Demand, hosted speaker and former Yahoo! performance evangelist Nicole “Stubbornella” Sullivan for an all-day workshop on high-performance websites and Object Oriented CSS.

Here at Wall St., we host some of the largest financial websites on the Internet. From The New York Times to E*TRADE and Barclays to Charles Schwab, our data centers serve content to millions and millions of users per week. It’s imperative our websites provide accurate market data, look good, are easy to use, and are fast. With so much information to relay, we’re pushing a lot of data (including scripts, CSS, images, etc.) through the pipe. So Nicole’s presentation was perfect fodder for our design and development teams.

A few highlights from her talk, with some links for your consumption follow.

• Nine best practices for designing and building faster websites:
  1. Create a component library of smart objects.
  2. Use consistent semantic styles.
  3. Design modules to be transparent on the inside.
  4. Optimize images and sprites.
  5. Avoid non-standard browser fonts.
  6. Use columns rather than rows.
  7. Choose your bling carefully.
  8. Be flexible.
  9. Learn to love grids.
• Watch her presentation on the YDN.
• PNG8 is the clear winner for images on any website. They’re smaller in file size than GIFs (I didn’t believe it until I saw it), and they support transparency in IE5.5 and IE6. No CSS filter hacks needed. If you’ve got a copy of Fireworks, you’re in business because Photoshop doesn’t help create PNG8′s transparency. If you don’t have Fireworks and are comfy with the command line, see this guide to making alpha transparency in PNG8.
• Embrace Smush.it — a web service and Firefox plugin created by Nicole and former co-worker Stoyan Stefanov. The tool allows web developers to upload images of any kind while Smush.it runs through a long list of compression algorithms stripping meta data and needless information from them before spitting them back to you in a Zip file. It all happens in seconds and a few tests we ran here — 15 images reduced in size by 320kb (99.18% compression rate) — yielded impressive results. Evidently, Smush.it is in the process of being adopted by Yahoo! which has immediately interrupted the service (but hopefully not permanently).
• Consider Object Oriented CSS, or OO CSS. Much of OO CSS is in the 9 best practices mentioned above. But it’s not what you think. It’s not object oriented in the traditional programming sense of the term. It’s object — as in a virtual thing: a module, a header, a sidebar bucket, etc. I had a hard time with this one in the beginning. Most of OO CSS is pure common sense — at least it is here at Wall St. Sit down, evaluate your designs before you start building, and determine a baseline for common elements across the site. Then piece together your CSS efficiently. Three really useful tips for page layout:
  1. Don’t use height-specific modules. Let the content determine the height. This is genius and must be recognized by designers. Vertical grids, not horizontal.
  2. If you have two or three modules with rounded corners that are different but look similar, just pick one and move on. “Users aren’t that sophisticated,” she said.
  3. Use grids to determine layout, and let the content fill 100% of the available space. This way two columns becomes three columns or becomes 6 columns and the content continues to just fit.
• Set aside a few minutes to watch her presentation on OO CSS. It’s not earth-shattering stuff, but she does make some interesting points that convinced us to approach web dev from a slightly different angle.

Thanks Nicole. Safe travels in India.

This entry was posted on Tuesday, May 5th, 2009 at 6 pm and is filed under code, css, design, developing, links, websites.