Site Launch: LG – Make Life Shine | Make Life Pop

by Mike Badgley on March 12, 2010

LG_MakeLifePopShine_Home

During the past couple of weeks, I’ve had the opportunity to work on the front-end development on a really cool project for LG. It’s a micro site called LG – Make Life Shine | Make Life Pop that promotes two of their new phones – the LG Shine Touch (KM555) and the LG Pop (GD510).

Mike and Zach - Make Life Pop! One of the more interactive parts of the site is a small application that ‘pops’ your photo. Basically, you can upload a photo from your computer and the application will ‘popify’ it, much like you see in the example on the right. At the end of the process there is the option to integrate the photo with your Twitter and Facebook accounts to encourage users to share/promote this site with others in their network.

Like any project, there are always learning experiences, but with this particular project it was more the confirmation of a new ‘best practice’ I’ve recently implemented that stood out the most. Since the start of this year, I’ve slowly been making the switch from using background images for headings and titles (that use a non-standard font) to a fairly new JavaScript-based technique called Cufon.

Why is this such a big deal? Consider the following.

  • Time: Plain and simple, it saves time. Think about how much time is wasted when using background images. First you have to open the PSD, create a slice, save the newly-created slice as a graphic file and then create the necessary CSS rules to display and position. Never mind the fact that the text for the graphic header could change – then you’re forced to repeat the whole process!
  • File size: Not a big deal on a smaller site like this, but you think of a typical (?) 20-30 page site, that is a lot of background images that would need to be created. Sure, you can use an image sprite, but the fact remains that Cufon generates a font file (JavaScript) that is smaller than the combined weight of all the background images you would normally need to generate.*
  • Accessibility: Using background images for page headings/titles are notorious for causing accessibility issues. Consider the fact that a user has images turned off, they will see nothing – just a blank rectangle where the image is being ‘displayed’. With Cufon, it obviously requires JavaScript to function properly, but in the case where a user does not have it enabled, the text will still appear with the regular font face that was defined in the CSS.

*Note: In the case of this project, the resulting JavaScript file was quite large (176KB), due to the multiple font styles (regular and bold) that were used. However, once gZip compressions was turned on at the server level, this number shrank to only 43KB.

If you’re not already incorporating a technique like Cufon in your front-end design, now may be the perfect time to make the switch!