But, let’s not get carried away just yet. We’re still very much aware of the existence of pre-historic browsers such as IE6 and 7. Unfortunately, we can’t ignore them just yet but thankfully there are tools out there that will make these browsers play nicely.

A good starting point with any web design project is to scope out the existing audience for that particular site. Google Analytics does a great job of supplying us with the browsers that users to that particular site are operating on. Keeping an eye on the latest browser stats are also a must.

For instance, if you find that no users are accessing your site with IE6 then there’s no need for a PNG fix. Likewise, if nobody is accessing your site with IE7 then lets not hold back using more pseudo elements in our CSS. Good research into the habits of your users will ultimately mean less of a workload (and less costs) when it comes to development time.

With the emergence of degradable CSS3 techniques it’s now possible to get creative with code. One thing that has always been difficult in the design process is illustrating interactions in Photoshop or Illustrator. Yes we can create animated Gifs but when showing interactions on a full mock up of a homepage too much quality is lost and ultimately we’re not doing our designs justice.

We’ve considered leaving the interactions until the development phase, giving our clients that extra something they weren’t expecting. Hopefully they’re already over-the-moon with the outcome of the design process, and once they start interacting with their site they might find themselves left without words!

Typekit

Typekit is a very simple method to implement alternative type as it is provided via a web service. Typekit has a library of fonts which you can license by purchasing an annual subscription to the service (there is a free plan but this is restricted for use on one website with Typekit badge visible on the site). There’s a wide range of typefaces available and the Typekit website allows you to completely configure fonts, font weights and styles using an intuitive interface. However it’s not all plain sailing…

The fonts available on the Typekit Library rarely match with fonts you might have locally for use in Photoshop or Illustrator. Quite often you have to settle for a close match, and this is not good practice with regards to brand guidelines etc. Often takes a fair amount of explaining to the client which is never ideal.

Another issue is that although the fonts render smoothly in modern browsers on Mac OSX, rendering on Windows falls way short with most fonts options. The fonts end up rendering badly and anti-aliased. Although Typekit does provide a good comparison tool to view the fonts using the various operating systems and browsers, this doesn’t help when you’ve designed with a font that Typekit renders badly for the majority of your site users.

The major benefit of Typekit is the freedom to use the font sets available without worrying about licensing. The major drawbacks are the lack of availability of certain ‘standard’ fonts and the render failures in Windows which really let it down. If it wasn’t for these issues it would almost certainly be the perfect choice for most web designers and developers.

Cufon

The beauty of Cufon is it’s limitations, or lack thereof, when it comes to which fonts it can render. The system works by rendering any specified text configured on the Cufon site. When the page loads the text is transformed using ‘Canvas’, a cross-browser element that looks and acts exactly as you specify in the website’s stylesheet. So far it sounds great doesn’t it.

Unfortunately – like most systems – there is a major drawback. It’s not a technical issue, it’s greyer than that and raises serious concerns over the legitimacy of using Cufon. Although Cufon can render any font using the Cufon configuration tool, site owners need to be assured that they have the right to use the font for this purpose (font embedding without Adobe Flash). Certain fonts require an extended license for this purpose, however it’s important to identify whether you can legitimately use the font or whether you would have to seek an additional license first.

@font-face

@font-face is a system which actually permits the render of any font from your webserver. Simply add the font files and reference them using ‘@font-face’ syntax and the font will render as expected. There are issues with regard to cross browser compliance, however all the major browsers appear to be addressing this with Safari, Firefox and Chrome having already adopted this method natively. There are other issues around licensing, but these appear to have become less prevalent with the birth of freely available @font-face kits. Such kits can be found at Font Squirrel.

Although not perfect, the @font-face method is a pretty solid solution. Fonts render perfectly, the nature of it’s delivery means there is far more choice regards font selection AND rendering speeds are faster than the Javascript or Flash™ based alternatives.

Conclusion

All the libraries mentioned here have their merits and all have their issues. There is, however, one clear winner. As the browser software companies adopt it, the @font-face method is likely to become the norm. That’s why we use it now and will continue until we find a reason not to.

Here are 5 techniques which we love to use:

Content Carousels

Presenting information in a linear way presents problems. It takes up website real estate (page space to me and you) and can often make content look dreary and text heavy. Using a javascript carousel is a great way to combat this. You can present multiple slides of content which rotate automatically and can be controlled from the user interface. A good example of this is our own homepage hero banner. This is a great device for drawing attention to new content or new goals, it solves a number of layout issues and looks great!

Parallax Backgrounds

Background images and illustrations positioned behind your site are great if they are used properly. They provide depth, creativity and a visual richness that a pattern or colour will never achieve. But why not take them one step further. Using a technique known as Parallax you can make the background interact with user controls. Backgrounds can move on top of one another or seem to follow you down the page when the user scrolls or simply moves his/her mouse. It’s an excellent way to provide a subtle but sophisticated effect.

Web Font Rendering

Using a variety of different methods  we can now use many more fonts (in a web safe way) than have been previously available, meaning that sites can be ‘on-brand’, more original and less ‘standard’ in appearance. There are very few web safe fonts (Arial, Verdana, Georgia, Times New Roman, Courier to name most of them) which has limited the typography used on websites considerably. Before web font rendering services like Typekit became available if you wanted web safe fonts then you used these. Now we can utilise thousands of fonts and get creative with Typography in a similar manner to that of print designers.

Text Shadows

There are a multitude of new styles available with CSS3, however one of the best and useful is ‘text-shadow’. This allows you to specify a drop shadow on system text. Most browsers support it (notably Internet Explorer does not yet support it – even with IE8) and it provides the ability to add extra depth and creativity to site typography. No more flat fonts with boring contrast…

CSS Image Manipulation

Much of the time in order to make you website look fantastic we rely on well thought out and manipulated imagery. however by using techniques with transparent PNGs and new CSS3 values such as gradients we can now perform a lot of the visual ‘rules’ to imagery within the site templates. A typical example would be on a hero image (an attention seeking leaderboard type banner at the top of the page). You could spend your time in photoshop applying whatever effects you like to that image – but more than likely you won’t, so we apply the rules such as any gradients or floating, transparent text areas using images and CSS. It means less work for the content editor and more consistency from the designer’s perspective.

If you like what we are saying here and feel we could help with your web project then please do get in touch..