Category Archives: Image

Smush.it finds a home at Yahoo!

Things are changing around here.

When Stoyan and I created Smush.it we were scratching our own itch. As web developers we had spent way too much time optimizing images by hand, and we thought there must be a better solution. Optimizing images was far more important to overall site performance than people were giving it credit for being. Stoyan found that on average 50% of page weight was comprised of images, and that often those images were 30-40% larger than they needed to be. That translated to a lot of image bloat dragging down the web.

When we released Smush it at The Ajax Experience last year we were really excited to see what people did with it; building on the APIs to create a WordPress extension and other cool tools. Since the release we’ve smushed millions of images and put the web on a much needed diet.

Today is a great day for Smush it because Yahoo! decided to accept it into their family of tools. This will allow the tool to run on fanatically maintained servers, with the Yahoo! style quality of service. It doesn’t get any better than that. I feel like my baby is all grown up and going off to college! :)

Want to Optimize Images like a Pro?

Stoyan and I have contributed a chapter to Even Faster Web Sites, that outlines all the fantastic tricks you can use to make your sites smaller. We hope you find it useful, and of course we welcome feedback! It will show you how to make image optimization part of your own system, and give you all the information you need to make images as small as possible.

What’s changed?

They’ve been doing all the quiet background work to get things set up at Yahoo!. In addition, Smush.it functionality has been included in YSlow 2.0 (now in beta!), so you can get all of your performance information in one place. You’ll start seeing changes in look at feel, but Yahoo! assures us the APIs and functionality won’t change. We are proud that this tool has helped so many people improve their site performance. Thank you all for supporting us and using Smush.it.

You can help Yahoo! by providing feedback for Smush.it on their mailing list.

My favorite Smush it story

Jaydee, a web developer in Singapore, came to my two-day boot camp. On day one, he heard about optimizing images, when he came back on day two he had already smushed all the images on his site and pushed the changes live. He showed a fantastic commitment to making the Yahoo user experience even faster.

Object Oriented CSS video on YDN

Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow.

Object Oriented CSS: for high performance websites and web applications.

Find out more about object oriented css

  1. Open source project on github (GIT is having some DNS issues, be patient)
  2. Follow along with the slides on slideshare
  3. Join the OOCSS google group

Thanks to Havi, Julie, Ricky, Yahoo! Developer Network, and the whole Web Directions North team for their hard work putting this together!

Object Oriented CSS, Grids on Github

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. If you didn’t attend my talk, you are probably asking yourself “what in the world is OO-CSS?”

Object Oriented CSS: Two main principles

1. Separate structure and skin
2. Separate container and content

I’m writing a framework to demonstrate the technique, but more than anything, Object Oriented CSS is a different way of approaching CSS and the cascade. It draws on traditional software engineering concepts like extending objects, modularity, and predictability. Solutions are judged based on their complexity, in other words, “what happens to the size of the CSS file as more pages and modules are added?”

The answer, for most sites, is that it grows out of control and becomes an unmaintainable tangle of spaghetti code. People often complain about CSS, and rightly so — even though it inspired a rant, I understand their frustration.

Current methods for writing CSS require expert level ability just to get started. To become a CSS expert, you need to spend couple years coding away in your basement by yourself before you are remotely useful. Front-end engineering needs to accomodate entry level, mid level, and architect level developers, but our sites are too brittle. You may have a perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.

We don’t trust each others code

Imagine a JavaScript developer wrote a function to return area, and every now and then it randomly returned the diameter instead. The function would never make it through a code review, and yet we tolerate the same thing from CSS, as if it were immune from normal programming best-practices. This is why CSS code reuse is almost nonexistent. An object should behave predictably no matter where you place it on the page, which is why Object Oriented CSS avoids location dependent styles.

What not to do

#myModule h2{...}
#myModule span{...}
#myModule #saleModule{...}
#myOtherModule h3{...}
#myOtherModule span{...}

Developers have tried to sandbox their CSS into individual modules, to protect against the cascade. But in doing so we’ve ended up with a mess.

Object Oriented CSS Grids on github

My Object Oriented CSS grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features.

  • Only 4kb, half the size of YUI grids. (I was totally happy when I checked the final size!)
  • They allow infinite nesting and stacking.
  • The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.
  • Solution for sub-pixel rounding errors.

http://wiki.github.com/stubbornella/oocss

Check out template.css and grids.css and the docs on the github wiki.

My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

What’s up next?

Template and grids are ready for rock and roll. Please be my alpha testers, put them through their paces. Let me know if you find bugs or want additional functionality. I’m also hoping to contribute some of this back to YUI since they now have a github repository. How cool is that?

Rounded Corner Boxes and Tabs

Next up, modules. There are a million cool ways to create rounded corner boxes. I’m going to take several of my favorites (like CSS Mojo and Arnaud Gueras blocks) and convert them to OO-CSS. This will make it super easy for newbies to create their own modules, without needing to understand the minutiae of browser differences.

Video / Podcasts

YDN will publish a video of my talk and Web Directions North is putting out podcasts. I’ll tweet and post when that happens. The audio contains a lot more detail than the slides, so check it out as they become available.

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.

ParisWeb Performance Web Videos et slides disponible

80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.

Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l’expérience de l’équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.

Video de la presentation (dailymotion)

Slides de la presentation Pourquoi le Performance Web?