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!
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.
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.
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.