We here at OSWC are students of the newest design trends in the biz. We love shiny new things. If there is a new toy out, we have GOT to get our hands on it. We don’t know why, but that’s how it works with us. The same goes with web design trends. jQuery is very hot right now, and we’re getting our hands on it and playing with it like it’s the newest smart phone. We already employed some of the hippest CSS2 trends when we built this site, like image sprites, background image hover effects, and purely CSS drop down menus. Since then, we’ve leveraged a lot of the newest jQuery techniques too, beginning with the Twitter plugin, continuing with a validated AJAX contact form, adding in some nifty portfolio sliders, and rounding it out with some cool quote rotators (e.g. the Outer Spice Buzz panel on the Services and Portfolio pages, as well as the bottom-right panel on every page). So, we’re continuing that trend today with a few more features.
Our shiniest, most notable new feature is the star animation in the header. Undoubtedly you’ve already noticed, but just in case you missed it, scroll to the top of the page and check it out – Outer Spice is now flying through space! There is a subtle animated image made up of stars that slides across the original image in the header, making it seem as though we’re meandering through space on a galactic quest of domination and adventure. Those are indeed strong words, but once day you’ll see – we will take over the universe. The animation is done using jQuery (no flash here!), specifically by leveraging a plugin called Spritely. Check it out for yourself, it’s pretty awesome. And we’re only using about 20% of what it can actually do (we’re not actually using the “sprite” feature – just the “pan” feature for now, but we’re planning to implement some sprite animation in the future).
The other feature we just implemented is the brand new Google Font Directory via the Google Font API to produce awesome fonts that render in any browser without the use of jQuery or images. That means the page loads faster and is much more SEO friendly. We were previously heavily using a font called Yanone Kaffeesatz in images as headers and text all over the site. However, Google just added that font to their directory of free fonts, so we were able to do away with all those images and lighten up the site a bit.
Check out this awesome font – it’s really a font – no image or jQuery is used!
Cool, huh? We were going to employ the cufon font replacement technique, which uses jQuery to transform embedded fonts into images on the fly, but thanks to the Google Font API we were able to go one step further and put our special font directly on our page. Natural. Pure. Indexable. Gracefully downgrading. That’s what we like to hear at OSWC. Stay tuned for changes to our portfolio and services pages!
