Whilst creating our new home page at Striker Digital we had to deal with couple of things everyone developing websites will face sooner or later. Get ready, here are some tips and tricks how to tackle those issues with ease!
Header
Big animated header is a trend that has been evolving throughout the industry over the last couple of years. You almost can’t create a modern website without one. There are literally hundreds of tutorials and plug-ins that will help you create an appealing header within minutes. As Flash is on its retreat from the battlefield of animated widgets on the web, most of them will be JavaScript based. If you decide not to go with the flow and create something that hasn’t been seen before you want to consider couple of things before you start implementing your brilliant idea.
Backward compatibility
Unless your target audience isn’t likely to be viewing the website in older browsers you should use backward compatible techniques or create an alternative for browsers that don’t support your features. If you’re not sure how to go about this, tools like Modernizr will be a good starting point.
Performance
You can create stunning experiences but if you’re only able to enjoy them fully on state of the art machines all the effort will go in vain. Performance of Flash Player varies on different machines and different browsers but it is nothing compared to the differences you get with JavaScript based animations. Note that every browser interprets DOM a little differently so one thing animated in Firefox might run smoother than in IE whilst second thing runs better in IE. Be aware however that in most cases, both DOM and canvas based animations will be smoothest in IE(9), ok in Chrome and Firefox hand in hand with Safari will simply make you cry (at least on Windows that is). Therefore, to avoid frustration test all your animations in Firefox.
Fonts
Even today, you can still use built in fonts – until recently the building stone of all text on the web but if you’re serious about developing websites and appealing experiences you probably want to have more than just handful of fonts at your disposal. Typefaces on the web are as important as ever and with CSS3 and services like Cufon, Flir, Sifr and Typekit web designers and developers have finally means to express themselves the way they always wanted. If you actually want to be better off than few years ago when you would have to replace every text written using a “non-standard” font with an image, you must choose the right way to embed your fonts to the web page first. Let’s discard Flir and Sifr right at the start as they need both JavaScript and Flash Player to be enabled (Sifr) or use images to replace text (Flir). If you or your client don’t insist on everything looking exactly the same in all browsers, the fastest and easiest way to go about font embedding is the new CSS3 @font-face property. Main disadvantage of @font-face is the fact that different browsers interpret most fonts differently and also that IE for instance isn’t a big fan of .ttf format (unless the file has been converted to web format).
That leaves us two options to choose from. Cufon is a service that uses HTML5 canvas to render text in the font you specify. The big proof Cufon is the fact that the text looks exactly the same in all browsers (which support canvas, although Cufon takes care of the older browsers too the text looks slightly different). Although your Cufon text will not be selectable, you don’t need to worry about SEO. Cufon doesn’t affect it at all.
Another alternative is Typekit. Developed by Adobe, Typekit is not just a library of web fonts, it is highly sophisticated service giving you wide range of tools for easy font embedding. As much as Typekit tries to minimize browsers impact on the fonts, there still are slight differences. Another fact that might help you to decide whether to use Typekit or not is that the service isn’t free.
Choosing the right tool for font embedding isn’t as easy task as it might first look but essentially it all comes to how important good looking and accurate typography is for your project.
Sprites
One of the techniques you might want to consider to use is grouping images into sprites. Depending on the size of the project and few other factors, sprites can considerably reduce the loading time of your pages, difficulty of editing the images and last but not least – nightmares of creating image folder hierarchies. The only thing you really need to consider when creating sprites is the naming conventions. Everyone have their own system of naming assets and once you find yours, sprites will reward you greatly. The main pro of sprites everyone seems to be mentioning these days is the reduced number of HTTP requests on the server. This of course is a valid reason for using sprites and especially on devices with high internet connection latency this makes a huge difference in comparison with the traditional one HTTP request per image approach but for myself the biggest advantage of using sprites lies in giving designers the free hand in changing and editing assets on the fly without the developers having to touch the CSS whatsoever.
How to achieve this? As mentioned earlier find yourself a comfortable way of naming individual images within the sprite so that you don’t have to alter the CSS of the sprite (most programs for making sprites give you the option to export a CSS file together with your sprite). You simply embed this CSS into your HTML and you are set. Now whenever the designer needs to do something with the images in sprites he just update the sprite image and the associated CSS file and you don’t have to worry about a thing.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we’re publishing. Also, it’s highly recommended to follow us on Twitter!