Typefaces and sIFR

I received an e-mail from Wil who wanted to pass along some quirks he found with the gargoyles layout. It seems that when using sIFR inside the masthead area, any padding on that element needs to be removed. He also mentioned a bug relating to sIFR and possibly percentage values.

Anyways, first thing that crossed my mind was what the hell is sIFR? A quick search led me here and here.

Essentially, sIFR is a package used to replace HTML elements with Flash (the FR in sIFR standing for Flash Replacement).

The (original) reason behind this is to provide a richer set of fonts to the user without having to worry whether or not the user has that font installed on their system. By creating a Flash movie with the font embedded in it, you can give the user the visual experience of the font.

The way it works is you first create an element, say a H1 element, which acts as the title for your page. When the page loads up, that H1 element is rendered. Then the javascript kicks in and calculates the dimensions that H1 element contains. It then inserts a Flash movie over the targetted H1 element, giving the movie the same dimensions as the H1 element. Flash users get the rich text, non-flash users get the usual H1 text.

Very cool stuff. A couple of comments on this.

The first thing I like about this is that all of the information presented to the user is contained within the HTML document. The headline is there in H1 format which allows screen readers, search engines, and any non-flash users to access the information. This is very important. A lot of sites that use Flash, especially for minor parts of the page such as a heading, don’t provide an alternative source (such as text) for the information presented in the movie.

Another thing I like about this approach is that the replacement is done inline, without requiring user interaction. A lot of Flash-based sites require the user to select a non-flash link before being presented with the text-alternative for the site (if one even exists!)

I like that the HTML document can stand on its own. Remove the Flash and you’ve still got a complete document. You’re building on top of a complete document rather than taking a bit of information, sticking it into a Flash movie, and then creating a text-alternative as an afterthought.

It’s building on-top of an HTML document, rather than breaking an HTML document.


Now. My brief sIFR research pointed me towards an article titled The Scourge of Arial. It talks about how Arial is a pervasive font, found everywhere, and how the author dislikes the font.

Here’s my opinion: I like Arial. It’s functional, ubiquitous, easy to read. It looks clean without any aliasing of any kind. One of my big gripes with a lot of the more fancy fonts is that you’re going to need to alias them in order to make them look good. But aliasing, especially within Flash, creates very fuzzy edges that make the text look almost out of focus.

In website management, my top priority is the delivery of information to the user. Design is a very distant second. It would seem that the two should coinside; design will help determine how the information is delivered to the user. And this is absolutely true, but I much prefer to under-design than over-design an interface used for delivering information.

I’m old enough to remember the earlier days of the internet (think 1990ish) when all we had were flat pages made up of just paragraphs, lists, and headings. Very, very boring stuff, but also very efficient at delivering information. Afterall, if your user is busy looking at the rotating image element on your page, then they aren’t reading your content (assuming your content is text and not, say, an art gallery displayed primarily with images.)

I like CSS in that it allows additional visual structure to the layout of a page. You can provide implicit relationships between various pieces of your page, such as a sidebar which is not the main content and could be skipped by a reader who needs to pick through the page quickly. You identify this sidebar by having a literal bar on the side of the page, maybe with a different colored background, that identifies that block of information as a sidebar. You can also break key information blocks down into columns for easier access to headlines (3 story titles on the top of the page without needing to scroll. Nifty.)

Once we get into typeface, graphical elements (that serve no purpose other than to be visually interesting) and such, I start to lose interest as they belong to this distant secondary priority when it comes to website design. Which is why all the layouts you see here are pretty blocky and plain looking. But then again, I’m not a graphical designer, I’m just a guy who plays around with CSS.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s