Design Fast Websites – Don’t blame the rounded corners! on YUI Theater

Nicole at the Design Fast Websites Presentation by Eric Miraglia

I visited Yahoo! last week to record a talk I had given at the Front End Summit in October. If you are a designer or an F2E it is essential that you understand the ways in which design choices impact overall site performance. This talk establishes guidelines for High Performance Design including 9 Best Practices.

9 Best Practices

  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.

Baby Steps to a Faster Site

In honor of the video being made available on YUI theater, I’ve removed the non-standard browser fonts from my site. While the design was changed slightly it is infinitely more maintainable and I also eliminated an unnecessary HTTP request at the same time. One more step to a faster page.

Web Directions North, Denver, February 2-7

I’ll be speaking more about Design and also CSS best practices at Web Directions North in February where I’ve been invited to give both a Performance Bootcamp Workshop and a CSS Performance for Websites and Web Apps Presentation. I look forward to seeing you there!

Check out the Web Directions North Program.

They have some really amazing speakers lined up. I’m especially excited to talk to Dan Cederholm, who wrote one of my favorite books.


by

Comments

7 responses to “Design Fast Websites – Don’t blame the rounded corners! on YUI Theater”

  1. John Allsopp Avatar

    Great to have you coming to Denver, and looking forward very much to both the presentation and the workshop!

    j

  2. Brett Gilbert Avatar

    WOW! thanks so much for this. A great comprehensive list that helps bridge the gap between designers and F2Es with the data to back it all up. The focus on Modular design and development is extremely helpful. Thanks for the additional tips. Ill definitely be sharing around the office.

    I was curious your take on CSS vs CSS short hand vs CSS and compressing it using a tool or script and if there is any data to back that up.
    -BG

  3. […] http://www.stubbornella.org/content/2008/12/28/design-fast-websites-rounded-corners-yui-theater/ “If you are a designer or an F2E [Front End Engineer] it is essential that you understand the ways in which design choices impact overall site performance. This talk establishes guidelines for High Performance Design including 9 Best Practices. […]

  4. eight Avatar

    Woah, this was a pretty long but clearly very valuable presentation. The take on sprites was very interesting as I was thinking about implementing them in my next projects. Thanks for the insight!

  5. Christian Avatar

    Great presentation! I really enjoyed watching it and learnt some interesting new things. I love smushit – such an awesome tool ! thanks Nicole !

  6. […] Nicole Sullivan (Yahoo) über Amazon-Performance: Artikel 1 und Artikel 2. […]