Embedding web fonts with @font-face kits

My first reaction on finding Font Squirrel's free @font-face kits was pure joy. Here were completely free fonts licensed for use on the web. You can embed these fonts into your site and it will show up in every major browser, including Internet Explorer 6.

What is @font-face?

For the uninitiated, @font-face is a property of CSS where you can embed a font into a webpage, which people have been trying to do properly since web design became mainstream. Before, we were limited to four or five fonts that are nearly universal to web users.

Paul Irish has the best syntactical method of embedding fonts, but Font Squirrel has actually done the work for you, supplying a stylesheet with both the IE-only and normal font files.

Putting it to the ClearType test, and Failing

I tried one of my favorite free fonts, Mido, on headings and my enthusiasm was demolished immediately. ClearType, which is enabled by default in IE7 and 8 (and Vista, and Win7), absolutely ruins the look of the font. IE6, surprisingly has the better showing. With ClearType on or off in Firefox, the font looks smashing.

This is one of those times I dread the fact that most of my employer's visitors use Internet Explorer 7 and 8.

Javascript? Flash? Anyone?

Still in gear for new web fonts, today I tried finding a suitable replacement, and came across Cufon, which displays custom fonts with Javascript. It sounded great, but the implementation is a bit clunky. The end result is a series of images, which is admittedly better than Flash (which makes scrolling difficult), but text can't be selected or resized. Unless you're using an HTML5 doctype, the line-height varies from browser to browser, which is fine for headings, but admittedly useless for body copy.

Some fonts look great across browsers

But perhaps it's Mido that needs some work. I tried Font Squirrel's Droid Sans kit, and everything has gone swimmingly. The type is clean and legible, and nearly identical in every browser I have (IE 6, 7, 8, Firefox 3 and Safari 4), with Cleartype on or off. The look surpasses Cufon by a mile.

Progress, not revolution

Assuming every font-face kit from Font-Squirrel was going to work perfectly was a bit foolish, but finding out which ones cooperate with ClearType is going to be a chore. We haven't knocked down the web fonts wall, but we're making our way over it.

Content-first HTML templates

Content first layouts can increase search engine visibility by placing your header and navigation area after the main content area in HTML. CSS can reposition the elements so they appear at the top of the page.

What is a content-first layout?

Most pages look like this to a search engine spider or screen reader:

My website home about contact links The best website ever. As you can see I am the best ever.

With CSS, we can arrange this search engine-friendly page —

The best website ever. As you can see I am the best ever. My website home about contact links

to appear the same as the above page would to a normal user.

How to build the template

The navigation follows the content, and the header follows them. Putting the navigation second is easy; you float both the content and the navigation right. Set position:relative on the wrapper, and absolutely position the header to the top. Set a height for the header and set a top margin equal to that height on the navigation and content. For more details, check the examples.

Why content first

The first thing the search engines see (after the title and meta tags) is the name of your website and the names of your pages. For usability's sake, the anchor text in my navigation is brief and easy to understand. For SEO, it's horrible. Feeding the spiders an H1 tag early in the HTML gives them more unique details about that page faster.

Accessibility of content-first HTML

There's been heated discussion about the accessibility of content-first templates. Some say it would help users with screen readers get to the content faster, not having to bypass the header & menu. Others argue it would present more difficulty because it's not the norm. I've never used a screen reader before, so I can't say.

Consequences of Content First

The biggest consequence to me is that your site will not be friendly to the other people who work on it. Not a lot of people will think to look at the bottom of the page if they want to add a link. If you use includes, most of your page will be in the footer include, which I admit has confused me a few times (even the ones I made myself).

All in all, it can be a pretty odd method, but it's fairly easy to do. Who knows, you may find some clients asking for it!

Customizing WordPress archives page

So I finally got around to customizing my archive.php page. I wanted links to single posts rather than list full posts for pages and pages. Editing the loop was easy enough — I just pared down the loop code to make a list of permalinks. The tough part was getting every post to show up in that list.

Introducing query_posts()

If you're unfamiliar with it, the function called query_posts() will alter what shows up in the WordPress loop. You can choose categories, show a certain number of posts, exclude posts, etc. I'm used to modifying it for my blog's home page, but I needed to know how to use it for archive.php.

My first instinct was to have just 1000 posts show up, but then the WordPress Codex came through for me.

You can show every post if you set showposts=-1.

Now if I just used 

<?php query_posts(showposts=-1); ?>

I would get every post I've ever made, in every category, month — everything in my blog.

Show every post in the chosen category

But I want to show every post in the category my user clicked:

<?php query_posts($query_string . '&showposts=-1'); ?>

The big Q is: what is $query_string? Archive.php gets fed a request depending on what link you clicked on, e.g. a date (February 2009), category, or author. WordPress was generous enough to deliver that request in $query_string. That way you don't have to try and divine what your user clicked on.

Integrate WordPress in existing site without copying anything

WordPress does something strange with the php include() statement. I don't exactly know why, but I get a lengthy error if I try to use it in a WordPress theme. The popular solution is to sit down and carefully copy and paste chunks from your website into a new wordpress theme. I'm here to fix that.

Every page on my website basically looks like this: 

<?php include('header.php'); ?>
<h1>My Page title here</h1>
<p>My Content here</p>
<?php include('footer.php'); ?>

If this structure looks familiar, keep reading. We're good to go.

The code

Add this to your theme's header.php file:

<?php virtual("/header.php"); ?>

and this to your theme's footer.php file:

<?php virtual("/footer.php"); ?>

Easy enough. I'm sure the nomenclature could get confusing. If you prefer, you can rename your root header files. No file not found errors for files that exist like what happens when you try to use include().

Your new header file

Your header needs to be dynamic now. The bits in your header that load WordPress and alert browsers to your RSS feed's location are probably not relevant on other parts of your site. My solution to this was to set a variable in my theme's header.php file, before the virtual() statement. Header.php then checks if that variable is true before loading up WordPress and the feed location.

No rewriting, no maintenance

With this method, you maintain your same header and footer.php files like you would usually. Other bloggers advise you to recreate your entire site as a WordPress theme. That way, every link you add to your global navigation would have to be added to your WordPress theme's header as well. This way requires minimal changes to your existing header to work, and you only maintain one file.

Immune to upgrades

I had an old workaround for this problem before I discovered the virtual include. It involved setting constants in the index.php in the main wordpress directory, and referencing them in the theme. The trouble with editing the WordPress source is that it gets wiped if you upgrade.

Why not SSI?

The virtual command is basically equivalent to using server side includes. However, WordPress throws up the same error when you try using SSI.

Stop reading this

A trend keeps popping up that irks the usability geek in me: instructions on where users should be looking. Here's an example from Yahoo News:

Screenshot reads: To see local news and weather click Set Location

Basically here they're saying "you're looking in the wrong place. What you need is up there." This kind of execution wouldn't fly in print, why do it online, where you can put a link anywhere you want?

I understand why this happens. We build a content-focused interface, and one small section gets left blank for one reason or another. Rather than leaving the space empty, we add directions.

Consider it this way. Your users are already looking there. Add a copy of the link there and save them half a second. You'll also save yourself the five minutes working up a little arrow graphic.

Don't click here

This is an odd one from ExtremeTech.com:

Screenshot reads: click on image for full view

This is a particularly good example. I've noticed it on a few blogs, except the directions are in plain text. This way is a bit more usable and thus a bit weird. Despite providing a link to enlarge the image, it tells you "don't click me, click on the image."

Just saying "enlarge image" would be a lot more efficient. If it's not obvious the image is a link, this is not the best way to make it clear.

Avoid instructions

If your design doesn't make sense, instructions aren't the best solution. Adding unnecessary text leads to clutter and wastes the user's time. When your design hits a stumbling block, make sure your changes make sense and contribute to a better interface.

« Older Entries