Site Launch: Snowberry Beauty

Posted by & filed under Articles, Portfolio.

Snowberry Beauty is a fantastic looking site and it’s made all the more impressive by adding animation to key components with jQuery.

Snowberry Beauty originally had their website designed and built entirely in flash. The only problem was that it was horrendously difficult to manage and their original flash developer was no longer available.

They were in a bit of a bind so I suggested that they rebuild their website with HTML, that way any web developer worth his salt should be able to maintain it. It would also be more searchable and quite simple to develop an administration interface so that they could add new items and articles as required.

They were very particular about the look of the site, and rightfully so as I am guessing they paid a fair amount for it originally, so what about all the gorgeous animation that was done in flash? Well … We can do that in HTML these days. Enter jQuery.

I was the sole developer on this project it presented a number of challenges. I like challenges and two of them I will mention here were the animation and the custom typeface.

Animation with jQuery

The Snowberry Beauty website has panels that slide open and fade in. Galleries with scrolling thumbnails. Opacity changes and lots more. Traditionally this has been why people would use flash. But many of these effects can be accomplished with javascript. The only tricky part with javascript is getting it to work properly across multiple browsers and that’s why we use a library like jQuery.

jQuery has numerous effects and options built right in so it makes it relatively simple for us to animate objects.

Lets say we want to animate the opacity of an object called ‘panel’. We can just use the instruction:

$('#panel').fadeIn(500, 1);

This tells the object called panel to fade in to 100% opacity over 500 milliseconds.

You use a very similar syntax for slideUp, slideDown etc.

It’s pretty straight forward stuff once you get the hang of it and if you haven’t used jQuery yet then you would certainly do well to invest some time into it.

Note: there is still some flash animation in Snowberrybeauty.com .. just the introduction animation and the background for each page. All the rest is jQuery.

Custom typeface

There are only a handful of typefaces available to web browsers and more often than not, the client uses a particular font in their branding that isn’t supported by the browser. Such was the case in this situation.

The common solution to this problem is to render the font as an image. And while that works its really not a very good option. You don’t want to have to make images of your type if you can avoid it as it leads to huge problems when one day you decide to change the colour or style. It’s also not easily searchable.

The answer is to use some font replacement technology until css3 is fully supported. There are a number of options out there but for this website I chose to use cufon.

Cufon is extremely hassle free to get up and running and it works very well indeed. It basically looks at an html tag and renders the contents of that tag into the typeface that you desire. I’m not sure about all the nuts and bolts of it .. all I know is that it works really well and is dead simple to integrate.

It supports css, hover states and pretty much all the usual things that regular text supports.

End result

I am very happy with the way the snowberrybeauty.com website looks and works.

To view the Snowberrybeauty website click here.

It presented a number of challenges to me which required that I learn a few new techniques and, most importantly, the client has a website which is virtually identical in look, feel and action to their original … except they can now manage it themselves and are no longer reliant on a high end flash specialist.

 

2 Comments

  1. digitalove

    some cool tips here. I think i might have a look into jQuery a bit more and veer away from flash.

    And that Snowberry Beauty website looks awesome.

  2. Markos

    Thanks for the feedback. Yes definitely check out jQuery .. once you get the hang of it there will be no stopping you 🙂

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>