The design is based around swooping lines and curves. The homepage features an enlarged header that shows the latest post on its own but delve deeper and the latest blog post header disappears on all inside pages to enhance readability.

Setup Instructions

Set this theme up the exact way you would any other theme and then activate it.

Once you have activated the theme I suggest you create three static pages. One for the about page, one for the contact page and then a third for the archives. The archives page will need to set to use the ‘Archives’ template and you can then customise this section to your personal preference.

Just to recap once you have activated the theme created the following pages with the exact url’s as listed below:

• About – /about
• Contact – /contact
• Archives – /archives – using the template ‘Archives’

You can change the titles and the contents of each of the three pages just as long as the url slug stays as listed above.

Download Notes

This download is 100% free with no restrictions at all. The only thing I ask is for the credit in the footer of the template to remain intact or at least a linkback from somewhere else on your site if you use this template.

Contained within the zip package you’ll find a resource folder that contains the font used for the demo site as well as any relevant image sprites that you may need to edit.

Browser Compatibility

The template has been tested and works perfectly on the following browsers:

• FF 3.0+
• Safari
• Internet Explorer 7+
• Google Chrome

If you find any issues that you want to bring to my attention feel free to drop me a line in the comments or see the about page for contact information.

Demo & Download

• Zip Package
• Live Demo (External Site)

If you use this theme, please let me know so I can link to it from here as an example.

FAQ

None to date.

Now I’m not exactly an early adopter when it comes to social tools. I have a Twitter account that I seldom use. Although the concept of Twitter interests me the lack of desire unfortunately leaves me with a sparse account page with no followers or followees.

Again my interest was aroused in a similar way yesterday when I awoke to find that the new Buzz feature had been added automatically to my Google Mail account. After poking around for a few minutes I soon discovered what it was all about. Admittedly if there was a big banner in the UI that said “Buzz is Twitter but with videos and images in line as well as integration with your inbox” the penny would have dropped sooner. I think because of the striking similarities to Twitter it actually took me longer to work out what Buzz was. I was looking around for something that wasn’t to there to be found ie. something so different it wasn’t just twitter with caveats. Note – I still haven’t got my head around the public facing profile side of Google Mail, how it ties into your Google Account etc.

So what I was looking at was a Twitter clone with bells and whistles. That’s not to say that Buzz doesn’t offer an improved service to Twitter. The promise of the precise locating and review tools Ala Foursquare are certainly exciting as are many other improvements over Twitter. I love the fact that you can follow a conversation between two users on the same page. Incidentally the improved functionality of comments in comparison to Twitter brings me to one of the little annoyances of Google Buzz. It’s messy! Surely Google could have spent a little bit of time and added a little bit of shine to the public facing profiles. I mean look at the way the comments are formatted, how much time would have really taken to have just place a dividing line between one comment and the next or alternating row colours.

I saw a great tweet on the subject, it went something like “Google Buzz just looks like a messy version of Twitter”. Is this going to be the general consensus among Twitter users? If so Google need to fix it because lets face it Buzz’s early success will depend on Twitter users jumping ship. Will Twitter users actually use two micro-blogging social networks? I can’t see it.

This brings me to the reason why I’m personally going to hang-fire on Google Buzz for the time being. People have spent time building up relationships and followings on Twitter and with no import feature and no way of carrying that over to Google Mail I don’t think many people will be interested in making a switch just yet. Nor (as I stated earlier) do I think people are going to use two services as similar as Buzz and Twitter at the same time.

It is going to be interesting to see how this one shapes up over the coming months. I think we’ll get a similar divide between the two as we did with Facebook and Myspace but who’ll come out on top is much less obvious this time around as both offer such quality services. If Google can convince the everyday email user that Buzz isn’t a waste of their time then Buzz could become the every-man’s Twitter and Twitter may become a niche community, Twitter a nice community?! Well stranger things have happened.

My ‘beef’ is not with CSS3 itself but more with the countless lists of cool stuff you can do with CSS3. As a language adds more and more features and the complexity of the code expands there needs to be some grounding. Those that know CSS and know it well will already but fully aware of the great additions CSS3 adds to the previous versions. Those that don’t know CSS too well are just being fed more and more code to copy and paste and this is where the problem starts.

CSS3 isn’t a new language that replaces the previous versions of CSS, it is merely an enhancement, an improvement of what has come before it. The original ideas and the underlying philosophies are still the same. With the limitations of CSS decreasing, the opportunity for sloppy, bloated code increases. The original premise of CSS of course being lean code that separates presentation and layout.

I suppose the point I’m trying to get at is that as a community we should still be encouraging people to go back and understand the basics of CSS before writing up another list of ‘cool’ techniques using CSS3. Les’ we forget that CSS3 is still a good few years away from being a viable language that is usable cross browser. Progressive enhancement you say? Folk concerned with progressive enhancement don’t need another ‘cool’ list, they’re already there, they aren’t reading these ‘cool’ lists posts because they don’t need to.

Over the years I’ve been ‘at the helm’ of a fair few web sites, some good, some bad but most returning revenue in some form.

I’m genuinely un-fussed as a visitor if I arrive at a site with tasteful advertisements tucked away in the sidebar. Even sites that are completely loaded with advertisements that have great content don’t particularly bother me.

Obviously I would consider myself a little more clued-up than an average visitor but then this post is directed at design or development blog owners looking to monetize their content.

How, when, where and why you should display advertisements on your design or development blog are decisions entirely down to you. My opinion on the subject is simple, if done tastefully and with the right motives your audience will respect the decision to monetize the content you’ve worked hard to bring them.

Below I’ve produced a write-up of each advertisement network or revenue source I’ve come across that are applicable to design or development resource and blog sites. With each write-up I’ll give you my experience with the network, what type of advertisements they offer, likeliness of being accepted and payout information that may help you get a better return from the network or revenue source.

Note: A few, if not, all of the links outgoing to networks and revenue sources from this post will be referal links. To those who are unaware, these links mean that if you go on start earning with the sites I’ve recommended I’ll receive a nice bonus from them myself for refering you. If you think this is unreasonable and I’m a greedy so and so then I’m sure you can find a way to the sites directly.

Sponsored Tweets
Type of ads : Tweets
An extremely interesting network especially for the designers and developers of the web. This network does exactly what it says on the tin. It allows to you sell sponsored tweets to advertisers. Heck! you don’t even need to have a web site to use Sponsored Tweets. They have a lot of celebrities on their books at present and the more followers you have on twitter, the better payouts you are likely to receive. The price per tweet is extremely good for this network. You will need to have 100 tweets, 100 followers and have an account over 60 days old to be publicized in the advertiser directory but you can still sign up if you don’t meet these requirements for possible direct offers. Highly recommended.

Amazon.co.uk & Amazon.com
Type of ads : Commission based referrals
An ol’ cornerstone of the web, Amazon.com and the co.uk variant allow you to sign up to their associates program and promote products they have in stock for a percentage of any sale that is made from said promotion. Its quick and easy to get started with them and the acceptance criteria is very low. Where Amazon come in pretty handy for design and development web sites is their great range of books related to the subject of design and development. The referral fee per product varies slightly but it usually sits between 5 and 10% of the sold product value.

Peerfly.com
Type of ads : CPA
A personal favourite of mine – Peerfly are starting to gain a big reputation amongst web site owners. Their payment model maybe a little different from what most design and development blog and site owners are used too. With that said the potential rewards for your visitors and indeed yourself as the site owner are good. Peerfly are a Cost Per Action network which means that their advertisers will pay you when one of your visitors fulfill a predefined action on their web site. This can be a simple as one of your visitors entering their email address for a macbook competition (which is an offer available right now). Payouts vary depending on the types of offer but if your looking for a different type of ad network than the crowd Peerfly are very much recommended.

Google Adsense
Type of ads : CPC (mainly)
Google Adsense are second to none the in the advertisement network stakes. The acceptance criteria is also one that 99% of web sites should fulfill with ease. They offer a range of advertising types to help monetize your design or development sites but by far their most popular are the Cost Per Click adverts. Google Adsense have also recently added mobile phone specific advertisements and advertisements for feeds, which are perfect for design or development web sites with a big readership. Your earning power with Google Adsense will vary from page to page as it is completely dependant on which keywords Google find in each of your pages. All in all with the low acceptance barrier and not forgetting the highly customizable adverts Adsense is a good choice for any web design or development site. Google Adsense offer a variety of payment options.

Type of ads : Text Links
Text Link Ads are a great network I’ve used on a number of occasions. They allow you to drop a block of Javascript code into your pages and then they will broker for you in getting advertisers to purchase text links on these pages. The higher pagerank your web site has the better the going rate will be for your text link real estate. Page rank really is the key with this network to getting the best price for your advertisements. A nice bonus is the extremely usable interface that Text Link Ads provide for publishers, that not only allows you to switch between Advertiser or Publisher but also allows you to manage multiple web sites from one account. Payment options are cheque or paypal.

Type of ads : Inline Text Links
A different type of advertisement offered to any of the other networks featured in this post. inLinks allow you to sell individual words and sentences in your posts to advertisers. They allow a high level of customization and control over what you sell and what it looks like so the advertisements are less likely to make a pig’s ear of your valuable content. Used correctly inLinks can be a constant yet subtle source of income for your design or development blog. Payment is via Paypal or Cheque.

Buysellads.com
Type of ads : CPM
Buysellads.com are relatively new in comparison with some of the other networks listed here. They are responsible for some, if not most of the side image advertisements across design and development web sites. At the time of writing I’d take a punt and say they were the leaders in design and development blog and web site advertising. They have a very high standard of sites under their control and you may find it hard to become an accepted publisher if you are new or have low traffic numbers. Using their administration area you can designate specific ad areas that you would like to offer potential advertisers. Buysellads.com then act as a broker for setting up the relationship between yourself and the advertiser. They do take a slightly larger cut of your agreed price with any advertiser but are fast becoming the most reputable design and development advertising network.

Adbrite.com
Type of ads : CPC, CPM
Adbrite are a Buysellads.com alternative that do a very good job of selling advertisements for their members. Again the return for your site will be dependant on the size but if you need a network similar to Buysellads.com that doesn’t have as higher acceptance barrier then Adbrite will serve you well. Adbrite also have a wider range of advertising options such as Pay Per Click as opposed to the set time periods of Buysellads.com.

AdToll
Type of ads : CPC, CPM and more
Adtoll are seen as a viable alternative to Buysellads.com and there high acceptance standard. They are also similar to Adbrite. Site owners signing up to Adtoll can expect to be accepted 99% of the time but may find it harder to sell space on there site that they would on Buysellads.com. Payout rates will again depend on the size and popularity of your site. Adtoll offer a range of options for you as a site owner so head over now and take a look.

Pay Per Post
Type of ads : Pay Per Post
This is one more for the bloggers. Pay Per Post should be pretty self explanatory, you sign up and get paid to make postings on your blog that either review or link to a company or product. The payouts really do differ based on a number of factors such as pagerank and readership. Payments are made via Pay Pal and quite honestly I’ve had mixed experiences with Pay Per Post but would definitely recommend you give it a try.

If you have any experiences with the above networks or would like to suggest one of your own that would be useful to design or development web site owners please leave them in the comments.

My original fix, like many, was born out of pure necessisity. I needed a solution to allow me to present smoother embedded type faces for Internet Explorer. What I found, I shared and hopefully it’s been of much to use to people.

On Firefox & Safari

Despite being able to disable ClearType in Internet Explorer it would seem there is no way to do the same in Firefox or Safari. This leaves an issue in Windows Vista and Windows 7 as they have ClearType forced on system wide by default unlike Windows XP. Dependant on your Firefox/Safari visitor percentage this may not be an issue. Some fonts do however fare better …

Hinting

A major factor in how well your font face will render under ClearType is to do with how well the font is hinted. Some are good, some are bad and some just aren’t ready or were never intended to be rendered on screen using embedding techniques. Again the only real way to determine this is by thorough testing. Font Dragr is a fantastic tool for quick testing of fonts and how well they embed. Also be sure to take a look at Front Friend.

Current Solutions

Unfortunately there isn’t anything that can be done right now for Firefox and Safari in terms of disabling ClearType. The key at the moment is selecting a well hinted font face and tireless testing. Experimenting with text-shadow has produced mixed results for me but I’d definitely recommend you give it a try. It may help alleviate some of the jagged nastiness should you come across it. For this you may also want to look into detecting if font smoothing is actually being applied on your visitors machines. There’s a great piece of Javascript that you can use for this here.

Future Solutions

As always there are people and organisations already working towards fixing these issues. More and more fonts are being reworked and properly hinted for embedding purposes. Below I’ve outlined two other solutions/advancements that may be of interest.

CSS 3 – font-smooth

A little known part of the CSS 3 specification and as of now completely unsupported by any browser is the CSS font-smooth property. Reasons why this is unsupported could and probably are complex and varied. This being implemented even just in Firefox could be a godsend for front end developers dealing with the issues mentioned in this post. See more about font-smooth here. As yet there hasn’t be any news of when and indeed if this will ever be supported by browser makers.

DirectWrite rather than GDI

This advancement is a little more technical than a simple CSS property but does look promising. This tip comes courtesy of Charles Roper in the IE7/8 ClearType fix article comments.

From what I understand, at present ClearType is currently implemented using a GDI technology which isn’t great at anti-aliasing the Y-axis of embedded font faces. An innovate alternative which is currently planned for use in FireFox 3.7 and Internet Explorer 9 using DirectWrite improves substantially on this. Some writeups and examples are presented at the links below:

• GDI vs DirectWrite
• Better Postscript CFF font rendering with DirectWrite

Also interestingly a browser using DirectWrite over GDI can use a fix to disable ClearType. I’ll post more on that at the time. At the moment both Firefox 3.7 and IE 9 look a while off.

If you have anything to add to the above please feel free to add in the comments.

One thing however that has always bothered me is IE7 and IE8’s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have.

First off a quick recap

If you haven’t already read my previous postings on @font-face I’d like to direct you to the following two posts:

• Revisiting @font-face introduces font embedding options right now.
• Embedding fonts using @font-face is a guide to using fontsquirrel.com’s previously mention @font-face generator

Now let me illustrate the problem.

When embedding using @font-face IE6 (surprisingly) renders the type face perfectly as does Firefox and Safari but IE7 and IE8 serve up a sub-standard jagged font face that is really not pretty to look at.

Take a look at the first demo page for a simple example of a custom font-face that has been embedded. If you can, take a look at this page in both Firefox and either IE7 or 8 to see the difference.

What causes this?

After much research I discovered the problem was being caused by Microsoft’s ClearType functionality. ClearType is designed and very much works to make rendered text online and throughout the windows system clearer to read. That’s great for body text and like I say it does work but when it comes to custom fonts that have been embedded ClearType is attempting to do a job which isn’t needed. This is what gives us the sharp, jagged looking font face that we don’t want. Because we want nicely anti-aliased text like we see in Firefox, IE6 and Safari.

As a side note I’m assuming that IE6 never had the functionality to render ClearType functionality and uses some other sort of properietary technology, leading to nicely embedded fonts in IE6 in a perverse sort of way.

Update: For IE6, Windows XP does not force ClearType on in the browser and Windows Vista was shipped with IE7 pre-installed (falling into the bracket of our fix) therefore the risk of IE6 users being exposed to ClearType issues is minimal.

How to fix this

The good news is that there is a way to disable ClearType via the browser when visitors are viewing your web site. Now I’m not recommending this for any other use than what I’m demonstrating today, in general ClearType gets it right and helps visitors read your site the way it was meant to be read. Disabling ClearType in most circumstances leads to horribly rendered body text and a whole help of problems for your visitors eyes.

The process of disabling ClearType

Internet Explorer as a rule do not apply ClearType to elements using their proprietary CSS filters as they can conflict and result in wider issues for the browser so we can exploit this to make Internet Explorer leave our embedded fonts alone. Now unfortunately there a few subtle differences between the browser that mean we can’t simply apply a useless filter and move on.

Take a look at the second demo page where I’ve added a few additional fixes for IE7 and 8. Go ahead and take a look in both Firefox and IE7/8, you should now find a much nicer rendering of the font in IE. I’ll break down what’s been added below.

The crux of the fix:

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

The above snippet of CSS fixes our smoothing issues in both IE7 and IE8 as seen in the previously linked demo page. The key to this is filter CSS property and the zoom property which are only applicable to Internet Explorer.

Looking at the filter property

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);

This part is mostly for IE8, both IE7 and 8 need to have a filter present to disable ClearType but IE8 has to have this filter actual doing something to recognise it. I also noticed when testing that without a background image being present in IE8 the ClearType disable had little effect. So what this filter property does in effect is kill two birds with one stone. We add a filter which checks the required boxes for IE7 and 8 as well as adding a one by one transparent png image to satisfy IE8.

Looking at the zoom property

zoom:1;

This is solely for IE7. It fixes an issue with hasLayout. If you don’t know anything about hasLayout then not to worry. Essentially IE filters can’t be assigned to any element that doesn’t have ‘layout’ so the zoom:1 property gives our headers ‘layout’. hasLayout is only applicable to IE version 7 and lower as it was dropped from IE8 (thankfully). To learn more about hasLayout see here.

Done and dusted

So in future when embedding fonts using @font-face you can use two simple IE only CSS properties and a 1 by 1 transparent png to give your fonts that anti-alias effect in IE7/8. You can even place these two properties in a separate IE only stylesheet as we are doing nothing else apart from tweaking the styles.

Just to note that as with any workaround you’ll need to test this on a site by site basis to ensure the fix is giving you the results you want. Even with this tweak font rendering in IE can still be unpredictable so testing and constant tweaking is a must!

File Summary

• First Demo Page – Showing an untouched @font-face embedding example.
• Second Demo Page – Showing a @font-face embedding example including the CSS fix.
• ZIP package – Containing both example pages and source files.
• jQuery plugin – Quick and easy jQuery plugin to achieve this fix.

Your viewing this article on allcreatives.net – the web design focused blog.

Update : Follow up post on ClearType issues in Firefox and Safari.

You can see the article that this plugin originates from here. If you can also interested in a little more back story see this post and this post.

This plugin will work in jQuery version 1.3+ and will automatically detect the user’s browser to ensure the plugin is only applied in IE 7 and 8.

Demo

Take a look at the following two demo pages in either IE7 or IE8, one is using the ClearType plugin and one is not to show the difference this plugin can make to rendering:

• Demo One – Embedding without plugin.
• Demo Two – Embedding with the plugin.

Downloading and Using the plugin

Download

• Download IE @font-face ClearType fix V0.1 here

Usage

First you need to have a copy of jQuery (V1.3+) included within the page you want to use IE @font-face ClearType fix on, then you need to call the ClearType fix Javascript file included within the download.

Including jQuery and ClearType fix

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="IEffembedfix.jQuery.js"></script>

Next you need to call the function of any page you want to apply the ClearType and also tell the plugin which elements you want to apply the fix.

Calling the ClearType fix and setting elements

<script type="text/javascript">
    $(document).ready(function(){

		$("h2, p").ieffembedfix();

	});
    </script>

Change the h2, p selectors in the above snippet to whichever elements you wish the ClearType fix to be applied to.

Configuarion

There is only one configuration option in the current version of the IE ClearType fix. This is for the location of the hIEfix.png file included with the plugin. If you have moved this file into your image folder for example you will need to let the plugin know its location.

Open IEffembedfix.jQuery.js and look for the following lines

// CONFIGURE THE PATH TO YOUR 1BY1 PNG HERE, RELATIVE TO THE LOCATION OF THIS JS FILE.
var pngimgurl = "hIEfix.png";

You will need to replace the default hIEfix.png to match the location of your image file.

For example if hIEfix.png was in a folder named images

// CONFIGURE THE PATH TO YOUR 1BY1 PNG HERE, RELATIVE TO THE LOCATION OF THIS JS FILE.
var pngimgurl = "images/hIEfix.png";

FAQ

None yet, if you have a question please feel free to get in touch and I’ll add your question here for the benefit of other users if its relevant.

Change Log

V0.1 – First Release

License

The IE font-face ClearType fix plugin is dual licensed under the MIT and GPL licenses.

File recap

• Demo One – Embedding without plugin.
• Demo Two – Embedding with the plugin.
• Complete Package

Whilst working on another web site recently I noticed that after installing the plugin and testing the form the success or warning message was appearing below the form on submit. This wasn’t ideal on longer forms as the messages would go completely unnoticed. So the idea was to get the message to appear above the form it was validating.

After a bit of research I couldn’t find a quick and easy way to configure this so I decided to go into the plugin and found it quite easy to change myself.

Changing this yourself …

After installing the plugin follow this path to get to open the file that will need editing.

Admin Home > Plugins > Editor > Contact Form 7 > Open – contact-form-7/includes/classes.php

Now look for this block of PHP code.

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

The lines that outputs the validation are …

if ( ! $this->responses_count )
			$form .= $this->form_response_output();

So if you cut this line and paste it anywhere else in the code block you can change the position of the validation block.

Here is my example of this which outputs the validation block before the form begins …

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

And that’s it! Any question, feel free to ask away in the comments.

So with that said what I am going to demonstrate here is a Javascript based work around for IE6 selector issues using jQuery’s powerful selector options.

First of all I should mention that a ‘do all’ script does already exist, authored by Dean Edwards the IE7 script includes a range of Javascript functions aiming to improve the experience of IE6 visitors viewing your site. The reason I tend to write a custom piece of Javascript rather than use Dean Edward’s script is simply down to control, I like to be in complete control rather than at the mercy of a third party script and the potential bugs that come along with third party scripts. I also find that the IE7 script contains I little bit more than I need and therefore adds excess weight to my pages.

The Setup

What you’ll need to implement this technique are three files, two you may have already if your site is already established. Firstly a copy of the jQuery framework, a IE6 specific stylesheet and an IE6 specific Javascript file. Of course the IE6 stylesheet and Javascript file will only be executed if the visitor’s browser is IE6. We achieve this using Microsoft lifesaving conditional browser comments.

An example of how this would look in your page head

<script type="text/javascript" src="/path/to/js/jquery.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="/path/to/js/ie6.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/js/ie6.css" />
<![endif]-->

Now what you’ll need is the selectors page of the jQuery documentation open and ready. It is almost identical to select an element in jQuery as it is in CSS but always check the documentation when in doubt.

Also take a look at some of the more advanced and 2.1 specification CSS selectors that are compatible with IE7. You’ll now able to use these and simply work around them in your ie6 Javascript/CSS technique.

In Practice

An nice piece of CSS that needs fixing in IE6

p:first-child { font-weight:bold; }
p > img { border:1px solid #CCC;float:right; }

So the above CSS will work in IE7, Firefox and any other browser you may care to mention. It uses the first-child selector as well as the parent > child selector. The problem is it doesn’t work at all in IE6, this is where the technique comes into play.

To work around this in IE6 you can use jQuery to select the CSS elements for IE6 that the stylesheet can’t.

As I mentioned early on the method of selecting an element in jQuery is almost identical to that of CSS so lets have a look at selecting the elements from the CSS snippet above. Once the elements have been selected they will need to be styled but doing this via Javascript is fairly messy so this script simply adds a new class that can be styled via the IE6 stylesheet on one line.

The IE6 Javascript file

$(document).ready( function(){

$("p:first-child").addClass("paragraphfirst");
$("p > img").addClass("imginp");

});

The Javascript above calls the jQuery document ready function to start. After this the jQuery selectors get the elements from the CSS code snippet further above and adds a new class to each instance.

So now in IE6 the first instance of a paragraph is accessible as well as any images contained directly in a paragraph using the class names assigned.

The beauty of this is that this file is only loaded in IE6 so does not affect the performance of your site for anyone wise enough to be using a browser other than IE6. As mentioned it also allows easy styling of these elements using one line of CSS code.

Once the classes have been added they are styled via the IE6 only stylesheet.

The IE6 stylesheet corresponding to the Javascript above

.paragraphfirst { font-weight:bold; }
.imginp { border:1px solid #CCC;float:right; }

Usage

Hopefully given this very simple demonstration of a very powerful technique you can see the benefits of using this technique over struggling with just an IE6 stylesheet on its own. As well as saving you time in IE6 hell it also sets you free to write cleaner, more forward thinking CSS in your regular stylesheets.

You can even get a little more advanced and use jQuery wraps and appends to fix more tricky bugs and add more dividers where necessary.

The key as mentioned earlier is to keep the selector page of the jQuery documents a click away and also do some research into CSS 2.1 selectors and beyond if you are not already familiar with them.

I’m going to approach this review trying to forget most of what I already know about @font-face embedding. There is a free solution available right now which would more than likely render Typekit useless for me, for personal sites at least, for the time being. I’m going to explore Typekit with an imaginary scenario that assumes I’m a design professional working on behalf of a client.

My Back Story

So I’m working on a client project and they want a lovely typeface for their spanking new web site. I’ve exhausted the free font sites and my favourite preselected free font faces that are readily embeddable. The client has done a bit of research and has found a commercial typeface that he would really love to use, so its my job to either purchase the font for static use on my local machine or try to embed it legally using @font-face.

It could also happen that the client has strict brand guidelines and the font to be used isn’t my choice.

Next step is to check the type house that produces this font and see if they themselves have any information on embedding on the web. No luck! So I take a wander over to Typekit …

Size of font library

This is where the size of Typekit’s font library comes into play. At a glance I’d estimate the library count at under 300. What are the chances of finding the typeface so precious to my client in a pool of under 300, this is of course assuming that all of the Typekit library are commercial fonts and not a mix of free and commercial which I’m pretty sure is the case. You may say that they have only just launched and therefore need a bit of time to build their library, that’s all well and good but not to forget that in this scenario I’ve only come to Typekit because my other options have fallen flat.

For me and possibly a lot of other designers it would be slightly unrealistic to start this scenario in reverse ie. offer Typekit library fonts only firstly in the proposals and then fall back on free offerings. It just isn’t an economic way of doing things given the cost implication and the massive difference in choice.

Update – Shortly after completing this review Typekit announced a partnership with FontFont which is highly encouraging for not only the quantity of the library but also the quality.

Plans, Pricing & Billing …

So making the assumption (despite the obvious issues) that my client’s selected typeface is available from Typekit, I now need to create my account and grab this font for usuage on my client’s new web site.

Now this raises a few questions for me as the designer.

You can see the pricing plans aren’t massively expensive (although there is no real base for comparison just yet) but as the designer I don’t want to be left with this bill for the lifetime of the client’s web site. Take the portfolio plan for example, its $49.00 for the first year but then $170.00 for each subsequent year.

Now I see the portfolio plan as the bare minimum entry level for a client web site seen as it is the first plan that gives you full library access and enough bandwidth to feel comfortable with for the first integration. This leaves me two options – To continually bill my client long after the development of the site is finished,  putting me in an awkward position of middleman between a third party service and my client, or, have my client signup to Typekit himself, putting me in an awkward position of Typekit support.

Also to note, the portfolio plan allows you to embed fonts within 5 different web sites. This feature may be useful in certain situation but is fairly redundant in my scenario and I guess in many. How would you measure usage from 5 different web sites sharing one account and then move them accordingly if they overuse. Placing 5 web sites under one account leaves no room for scope, even a straight upgrade to the maximum plan could cause issues if you have a real bandwidth hog. A straight upgrade to the full plan also almost trebles your outgoings. It’s down to you to pass the cost down the river when working on a clients behalf.

Moving on to administration interface …

So I find the requested font in the Typkit library and rather than endure the hassle of getting my client to sign-up, I sign-up myself under the portfolio plan. Despite my previous reservations I explain this additional cost and service to the client and he’s fine with it.

I’m not going to go into details on the admin side of the Typekit application, its simple, easy to use and in an understated way beautifully designed. It’s also been covered here, here and in a few other places.

Essentially I’ve now completed my job in this scenario. Once I have my log in details it couldn’t be easier to get the font up and running on my client’s web site and everybody is happy!

Rendering differences will occur dependant on operating system and browser but this isn’t the fault of Typekit, more the fault of the individual browser vendors and operating systems. The best way to overcome this is thorough testing and tweaking.

Last note on reliability and ongoing use …

The embedding method for Typekit is based mostly around Javascript and as you would expect CSS properties. With any external Javascript there is always the risk of reliability issues, in Typekit’s feature tour they claim infinite scalability which is great, unfortunately for a cynic like myself it takes more than words to convince me of this. I’m not saying they can not deliver but a one page claim to infinite scalability is not enough for me to be completely satisfied. What else could they do? Well they have an uptime monitor here which puts my mind at ease a tad more if  not completely.

The proof of their actual reliability will more than likely be unknown until the service grows to a stage where they need to put their architecture to the test. Without doubt they’ve tested it to within an inch of its existence before hand but no amount of testing can compare to real usage in the real world.

As a designer looking to embed fonts right now I have to decide whether the potential pitfalls outweigh the advantages of embedding. This will change on a site to site basis with the deciding factor being size and current level of exposure of the site in question.

To sum up …

I like Typekit! The review I’ve just written may seem negative but it isn’t intended to be. I’ve picked a test scenario that I think covers the biggest group of people needing to embed fonts at the moment. In my opinion Typekit isn’t the answer for designers and design studios working across multiple web sites because of the points raised above. It is, however, a viable option for designers working in-house on one web site or designers working on multiple personal projects. Portfolios and blogs are again perfect candidates. Assuming that the previous can justify the expense that is.

Niche is a word that I think just about sums up Typekit for me, I don’t think it is the ultimate answer for embedding font faces across the entire web. Typekit is a step up from SIFR and co. but just one step away from the ultimate solution that I think we are yet to meet. Exclusivity will be the key as well as proof of reliability. Its important not to forget that although the future looks great for direct embedding of commercial fonts it still isn’t here as we would like it. I think Typekit can grab a good chunk of designers still waiting for direct @font-face embedding with an enticing library and sound reliability but whether they can keep them when a more advanced solution comes along is another question for another day.