Before I kick off my spiel, here is the link to the List of Web-safe Fonts

Typography is an important area of design, even on the web. Fonts, leading, letter-spacing, and other typographical choices say things about your site’s character and content and influence the likelihood that site visitors will actually read your content.

Typographic Choices Are Different on the Internet

It’s different getting typography right on the web. The resolution is much, much lower than print (72 dpi instead of at least 300 dpi in print). You run into problems with fractional pixels. There’s no easy method for kerning. And many typographical choices are dramatically modified or even eliminated because users can resize and reflow the text.

The CSS2 Spec Has Helped

The CSS2 Specification has controls for some of the most important typographical decisions—there are controls for leading (line-height), letter-spacing, font size, and others. Most modern browsers support these typography declarations. Web typography has moved forward a lot thanks to the acceptance and implementation of the CSS2 Spec.

Font Choice is Abysmal on the Web

Really, the most important hurdle in web typography is font choice. There is currently no universally accepted method for embedding fonts on a page or site, and thus web designers must create images with their text in them (there is a wide selection of text-image replacement techniques) or they are limited to the fonts that can be found on the majority of relatively modern Windows and Mac systems (without even thinking about the other operating systems out there, like Linux). It’s a pretty short list.

The List of Web-safe Fonts

Alberto Martinez has maintained a very good list of universally available fonts and Windows/Mac font pairs that are very good approximations of each other. Here is his List of Web-safe Fonts.

If you exclude symbols and webdings, there are 14 total fonts on the list, many of which are very similar. There aren’t many people who are going to notice a huge difference between Times New Roman and Palatino Linotype, for example. The fonts with the most character are Impact, to be used sparingly, and Comic Sans, to be used even more sparingly.

On the bright side, it doesn’t take long to learn what your font choices are, and the web is a much more consistent place because of the limited font selection. That being said, I still hope that someday soon we’ll be able to see some kind of advanced font system in place that will unlock the world of fonts to web typographers.

If you haven’t learned to do a CSS rollover effect yet, it’s time to learn—they’ve become a main-stay of modern web design and do just about everything better than a Javascript rollover (there are a few exceptions, which I will discuss briefly later)

The Basics of a CSS Sprite Rollover

The basic concept of a CSS sprite rollover is to assign a background image to a link. This image contains the possible states of the link rollover. Based on which “state” is being used, we shift the background image around to display the correct portion of the image.

For example, the Lime Blog RSS feed icon is a CSS sprite rollover. Here’s the image used to create the effect:

In the default state of the link, I display the normal version of the RSS logo. The rest is hidden beyond the borders of the link (illustrated in black) like this image illustrates:

In the highlight or selected state of the link, I use the same RSS logo as a background, I just shift it so that the hover state is displayed and the default state is hidden:

Here’s the basic HTML needed:

And here’s the important part of the CSS:

Benefits of a CSS Rollover Using Sprites

There are many benefits to using CSS sprite rollovers, especially for most simple rollover applications:

• Reduce page load time

  By reducing the number of file requests and the overhead associated with each file, you reduce the load on your server, resulting in a snappier site.

• Automatic pre-loading of alternate states

  The alternate states are included in just one image that is loaded for the initial state. Once the initial state is loaded, all of the states are loaded.

• Simple updates

  You only have one image file and one CSS file to edit.

• Clean, semantic HTML

  Most Javascript rollovers result in bloated, ugly code with behavior and presentation mixed in with the content.

• Improved accessibility

  Some people have their Javascript and/or images disabled. Rollovers based solely on Javascript would break, whereas the CSS rollovers would degrade gracefully.

Shortcomings of CSS Sprites

There are a few shortcomings to using CSS to execute rollovers:

• Lack of transition effects

  Using animated .gifs, you can create some transitions, like the tabs at the bottom of the page on Corda.com, but you have to use separate images and they get big quickly.

• Limited states

  For some complex applications, it’s nice to have multiple states to an object, and CSS is limited to link, visited, hover, and active.

For most intents and purposes, however, CSS is lighter, faster, and cleaner for a rollover, and a sprite-based rollover is one of the best CSS rollover methods.

Vector graphics could be one of the best things to happen to the web. Think about it—any user of any device could scale the entire site, including graphics, text, and rendered HTML elements to the size he or she wants without mucking up how it looks. Only photographs and other images that don’t convert well to vector formats would remain a problem.

Scalable Vector Graphics

The .svg file format is based on the recommendations from the W3C for scalable vector graphics. It’s basically an .xml format for describing two-dimensional objects.

So far this open-source .xml file format works very well. It produces sharp images that can be scaled as necessary. Unfortunately, support for the .svg file format by browsers is spotty at best. You can’t count on .svg support even as much as you can count on universal .png support (although .png files are supported by most modern browsers, IE 6 being a notable exception). We’re gonna have to wait, for the time being, before .svg support is universal enough to start changing how we look at web design.

Other Uses for .svg Files

Although vector image files can’t be directly applied to web sites today, they are very useful for other web design tasks. For example, have you ever needed a slightly larger or smaller version of a web graphic, such as a button, icon, arrow, or logo? If you have created your image as a vector, it’s relatively easy to scale your image to the size you need.

Many vector graphics programs cost a pretty penny. Adobe® Illustrator™ costs $599 or comes as part of an $1199 bundle. However, for .svg work, there is an open source program called Inkscape that I have found to work rather well. I’m no graphics pro by any means, but I have been able to create some cool stuff for web sites already. If you compare the different versions of an RSS feed I made for DiamondLime, you can see how the image quality is preserved whether my final image is 32 or 256 pixels wide:

Even if .svg images can’t be directly applied to a site today, they are very useful for design related tasks where resizing, transparency, opacity, gradients, and more are important.

People are the most decisive factor in your company.

Think about it: without people, who would be running the computers, operating the machines, or answering the phones? Who would be buying anything that you sell?

I know that this is definitely an obvious observation, but I thought I would take the time to make you think about it again. It’s so obvious, and we have often thought through who is involved in our business, and thus we tend to forget that the human element is the most important element.

How Can People Be More Decisive?

What can you do to make the people involved with your company happier and more effective?

What are your customers asking for? What need can you fill for them? What pain or irritation can you remove from their lives?

What do your employees need to work more efficiently? What hampers them from meeting (or even setting!) goals? How can you help your employees to be more motivated?

Just remember to periodically look at how each part of your company affects the people involved. People will thank you.

Web accessibility, in a nut shell, is making your web site as usable as possible to as large a group of people as possible. One of the major parts of web accessibility is text size—each person has a text size that they are more comfortable reading. Unfortunately, one of the biggest complaints about many modern web designs is that the text size is too small.

Resizable Web Site Text

Most web browsers allow you to set your default text at different sizes, and most allow you to resize the text on a web site. In order to be usable to the largest possible group, web sites should have resizable web site text. If you can’t read the text, simply make it bigger, right?

IE’s Text Size Bug

Internet Explorer 6 has a well-known limitation—it can’t resize text that is set in points or pixels. What this means is that a site needs to have font sizes coded in percentages or ems in order for Internet Explorer 6 users to be able to resize the text.

Text Resizing on the Web

I performed a little research to see how well the web is doing with resizable web site text. The results were very interesting.

I went to Alexa.com to find my sample of web sites. I visited each of the top 100 sites in the U.S. using Internet Explorer 6. I tried to resize the text on each site, and if a significant portion of the text (75% or more) changed sizes with my settings, the site was labeled as a site with resizable text. If less than 25% of the text changed, the site was labeled as a site with a fixed text size.

Here are my results:

The blue bars are for sites with resizable text, and green is for fixed text sizes. The four columns are for ranks 1-25, 26-50, 51-75, and 76-100.

Click to Enlarge

Top Web Sites

The top web sites mostly utilize resizable text—7 out of the top 10 and 16 out of the top 25 sites have resizable text.

Bottom Web Sites

30 out of the last 50 sites have fixed text sizes.

Overall Text Results

Overall, 53 out of the top 100 sites have fixed text sizes. This means two things for the web design industry—first, it’s great that so many sites have recognized (or at least not messed up) this issue. Second, we have a ways to go until the majority of the web is easily accessible to vision impaired users.

I’ve spoken about the virtues of clean, semantic, valid markup before, and lots of designers recommend that you validate your code. What doesn’t seem to get addressed, however, is how one goes about validating the HTML of a web page.

A Major Hassle

It used to be that you would have to validate pages one by one using the W3C’s free validator tool. This method works, but it sure can be time consuming, especially if you have a large site or a site that is mostly valid already. Getting through a lot of pages or finding the few that have problems is very difficult this way.

Validation on the Fly

Luckily, Marc Gueury decided to do something about this important but difficult process. He wrote an HTML Validator Extension for Firefox. It’s based on HTML Tidy—basically, you install a validator in your browser.

The validator extension for Firefox is great because all you have to do is browse from page to page to see which are valid and which are not—an icon in the corner of your browser tells you whether your page is valid, contains warnings, or contains one of two kinds of errors (errors that the extension knows how to fix and errors that it doesn’t). To see the warnings and errors, you simply need to view your page source. This all takes place on your machine, so there is no external server to fiddle with or wait for.

Accessibility Evaluation, Too

The HTML Validator extension also has accessibility evaluation built in—if you want to see how accessible your site is, you can turn on evaluation for one of 4 different levels. This part of the tool is helpful for a quick look at how accessible your site is.

Not Quite Perfect, But Close Enough

The validator extension isn’t quite perfect—occasionally it will make mistakes (especially with heavily nested elements) and it seems a little bit “touchy” at times, but for the most part it is a powerful and convenient way to validate your website. I used it to make my site valid, and I wasn’t even sure I was going to validate it at all before I found the HTML Validator extension.

Choosing the color palette for a site used to be entirely up to the graphic designer and maybe management, based on current fashion or a whim. Well, no longer—colors, and specifically the contrast between colors, is actually an accessibility issue. Graphic and web designers need to learn which color combinations are accessible and which are not as they work on sites.

Color Contrast Standards

The World Wide Web Consortium (W3C) has researched and established some recommendations that will help to ensure that the contrast between background and foreground (text) colors is enough to ensure legibility for the visually impaired. Its recommendations require that there be a sufficient color (hue) and brightness (lightness/saturation) difference between the text and the background. More about color contrast standards can be found here: W3C Color Recommendations.

A Tool That Helps You Meet Color Contrast Standards

Luckily, you don’t have to dive into the W3C’s recommendation on this issue. www.snook.ca has a tool that takes two colors as input and computes whether they are suitable for a background/foreground color combination: Snook Color Contrast Tool. Using this tool, you can quickly determine whether the color combinations of your next site design will be suitable for a general audience. For example, I discovered that the color of my links is too light against a white background to be legible to those who are visually impaired or using a greyscale monitor/device. Since I’m not 100% happy with the design as it currently is anyway, I will probably be changing the color of my links to improve legibility and accessibility, and I encourage you to follow the W3C’s recommendations as well.

Like most heated debates, it is hard to come up with a definitive answer to the debate about whether or not it is still ok to use tables for web site layout. I don’t intend to provide a definitive answer in this post, but I would like to present another way of looking at the problem.

Evaluating Code

It can be very instructive to view the source code of web pages—pretend that you are a web spider, and that it is your job to ignore HTML, CSS, and Javascript in the search of pure content.

Look at some different sites, some laid out with tables, others with HTML and CSS, and see what the difference is. Which makes content more available? I’m not going to say what my opinion on the matter is here. Go do it yourself. Be honest and open-minded about what you find.

Web Site Visualization

Another way to compare table- vs. CSS-based pages is to use this web site visualization applet. The program takes a URL as input and then creates a visual map of that page. Each node is a different color and represents a different HTML tag or element.

Comparing Tables to CSS

Site Laid out with Tables

Click to Enlarge

Let’s first examine a site laid out with tables.

The table site has many, many red nodes (table cells) and pink nodes (images used for site design purposes, not as inline information). If you examine the tree image carefully, these nodes appear to be out on their own, unattached to content, and simply weighing the site down. You could snip them right off the tree without missing them!

Content areas are represented by heavy clusterings of orange nodes. For this site, there are three different orange clusters, meaning the content is split into three different areas.

CSS-based Site

Click to Enlarge

Next, let’s examine the CSS-based site. I selected this page to have about the same amount of content and a similar visual appearance to the table-based page.

First, notice how many fewer nodes there are period. Next, there are two images on the whole page—the site logo and a 1px image used for site stats tracking! Finally, all of the content is in one, accessible area.

Visual Path of the Blind

What these visualizations of web pages really are is a map of the visual path of the blind—both blind humans and blind spiders. The results say to me that it is worth pruning the trees of our sites in order to make them easier to get around!

I feel like my existence has been validated.

Well, at least my web site’s existence. You see, two very awesome things have happened in the last week. First, Google indexed my site for the first time in months since I had to move and then redirect a lot of pages. Second, after lots of careful scrutiny, the Lime Blog now validates as XHTML 1.0 Transitional.

Indexed by Google

Being indexed by Google (and ranked for some key terms) validates my site’s existence because Google knows where it is, and, by indexing my site, states that I have followed some basic rules of good web site development and content creation.

Valid XHTML 1.0 Transitional

This is exciting because it means that my site’s XHTML is written according to web standards. It is and will be more accessible and usable than a site that does not follow web standards. My site is more likely to require less maintenance to display correctly in current and future browsers. Valid code is one of the basic standards of web design, and now I know for sure that I can do it, even with multiple external solutions and plugins.

Is This All There Is?

Of course not. Being indexed by search engines and having valid code are only two parts of a huge range of important factors that determine how successful a site is. For example, DiamondLime could use a few more visitors, and I’m still working on the graphical presentation. But at least I’m making progress.

How’s your site coming along?

What web character are you? What level have you attained? If you’ve ever wondered where you stack up in the world of web design, what you need to work on, or how to improve your skills, then you need a ratings guide. Like a role playing game, you can now “level up” to earn respect and acquire new powers. Here’s how you establish your level:

Rate Your HTML Strength

Visit 456 Berea Street to determine your HTML level

Rate Your CSS Wizardry

Go to FriendlyBit to determine your CSS level

Rate Your JavaScript Power

See Dean Edward’s blog to determine your JavaScript level

Rate Your Accessibility Dexterity

Finally, visit the Fawny blog to determine your Accessibility level

Determine Your Overall Web Design Level

The possible levels of HTML, CSS, JavaScript, and Accessibility sum up to a total of 25. Add each of your ratings together and find your overall web design level in the chart below:

I got a 17, and thus I am a lower code mage. I must hone my skills and increase my powers!