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.

When it comes to cross-browser compatibility, no browser causes more pain and suffering than Internet Explorer—no version is as standards-compliant as Firefox, Opera, or Safari, and every version has its own unique bugs and issues. The majority of CSS hacks, testing, and workarounds are for Internet Explorer. Testing has been a major pain, requiring a different computer or meddling with the registry for each version of IE.

Finally, Test IE7, IE6, IE5, IE4, and IE3 in Parallel

Yousif Al Saif built upon some others’ work to create an installation for each of the major versions of Internet Explorer since IE3. Read about it here, and download the multiple IE installer here.

Power Testing

The truth is, almost no one still uses IE 3 and IE 4, and very few people use IE 5. Most of your testing will involve IE 6 and IE 7, with an occasional nod to IE 5.5.

I installed IE 5.5, IE 6, and IE 7 on my machine. Everything is working fine, without any crashes, hanging, or strange behavior.

Testing is powerful and easy—I can open all the versions I want to test at the same time. I make a change and then hit Alt-Tab to switch through all the browsers on my machine—Firefox, Opera, and IE 5-7, thus covering about 95% of all the browser users out there and catching nearly all known (and still important) cross-browser issues.

I just need a Mac so I can test small changes on Safari (For final testing on a Mac (not incremental), see my post about testing on Safari).

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.

The page ranks on my site have been “inverted” for quite a while and only just now have they begun to shift towards what’s more normal.

Inverted Page Rank? What’s an Inverted Page Rank?

A normal web site usually has page rank concentrated on the home page, followed by the main category pages, and finally the normal content pages. So your site may have a page rank of 4 on the home page, 3 on each of the category pages, and from 2 to 0 on content pages.

DiamondLime.com had (what I consider) a rare case of page rank distribution—it was almost totally inverted from the normal hierarchy in the paragraph above. The home page had a page rank of 2, category pages had a page rank of 3, articles had page ranks anywhere from 4 to 0, and the site map had a page rank of 5!

How Did My Page Rank Get Turned Upside Down?

I’m not entirely sure how my page rank got to be so strange, but here are a few of my theories:

• Heavy Deep Linking

  My site has been linked to in an unordinary fashion—I have a few pages and blog posts that are far more popular and linked to than most of my main pages. More people link to my post on ChaCha, The BYU Blog and Web Site Directory, or The Lime Blog than the home page. All these links’ page rank is getting poured into my site further down in my navigation hierarchy.

• Page Rank Bleeding

  One page that should have had a high page rank and didn’t was my blog. I think that this is because there were many links on my blog page to other sites that were bleeding page rank like mad.

• Links Per Page

  The Lime Blog and the home page of DiamondLime.com both had many, many links to other pages, effectively distributing all of their page rank away from themselves.

How Can I Un-Invert Page Ranks?

I did a few things that have helped even my page rank out. To fix the deep linking that was turning my page rank upside down, I tried (within reason) to make sure those pages that were heavily linked to also linked to many other pages to spread their page rank around. I changed how my page rank bleeding happened by reducing the number of off-site links that were on main pages and shifting these links to a links page (I still want to link to my friends and to valuable resources, so I couldn’t just remove them. Moving these links helped make things more organized, too). Finally, I added a few links to emphasize pages that I wanted to give higher page rank to.

These efforts seem to have worked—instead of ranging from 0 to 5, my page ranks recently became 4 for all the main pages except the main page of my blog and 3 for most everything else. The lesson is that you can influence how your “Google Juice” or page rank is shared around, even if the bottle is upside down and making a sticky mess.

One of the first things I do to evaluate a client’s needs is to assess his or her existing site for strengths and weaknesses. We then work on a new site plan that compensates for the weaknesses without compromising the strengths. I’ve recently been working with a new client on a site redesign and noticed something that would be helpful for all site owners to keep in mind.

The weakness that stands out the most for this particular new client is the complete lack of a sense of place—you don’t know where you are when you arrive at the site. There is no information regarding what the company does, why it is unique, or why you should choose this site over any other. There are no separate areas to the site—all of the functionality of the site is linked to from the home page, without any explanation of what each of the items is. There is not enough content to convey the site’s personality to its visitors. There is nothing about the site that would help you to understand what it is for or to make it memorable.

This site needs some index pages—pages that categorize, highlight, and explain the parts and features of the site like a tour guide pointing out historic sites on a bus ride—”On your left you’ll see the products section of the site where our fine products have been sold since 1996…”

Index Pages Make It Memorable

By grouping the site’s functions and content into a handful of areas or categories, you can help your visitors to quickly find what they are looking for and avoid “analysis paralysis.” Visitors are more likely to remember how to navigate the site and find what they are looking for if the number of (initial) options they have is reduced to a more managable number. People remember lists of between 3 and 7 items the best. Check out iKaput.com for memorable, easy navigation.

Index Pages Tell You What It Is

Once the areas or parts of your site are defined, an index page provides you with a perfect place to explain the purpose and features of a particular section of your site. By describing each of the features, you reinforce your visitors’ sense of place—they know where there are, what they are doing, and what your site is about. A good example of this principle is the education section of WhiteCanyon.com

By organizing, highlighting, and explaining the features of your site, your visitors will understand and remember your site better—just like tourists who have had a tour guide show them the sites of a city that make it unique and memorable.

When you are redesigning your web site, first take stock of the goals and functionality that you want your site to meet or have. When you know your goals and necessary functionality, you can then determine the structure of your site—the navigational structure, various site paths, and links between pages.

Think About Conversions

A conversion occurs when your site visitor takes one of the actions that you want him or her to take. These conversions, and the multiple steps (mini-conversions) that lead to them, are the whole purpose of your site. If you run an e-commerce site, the main goal is for your customers to add products to your cart and complete the entire checkout process. A forum wants users to sign up, read and make posts, and return frequently. Informational web sites want people to return and read or listen often. Some sites are designed to generate leads for salespeople.

You want to structure your site so that it is as easy and as desirable as possible for visitors to complete the desired actions—to be converted.

Think About Spiders

The easier you make it for a search engine spider to get around your site, the more pages it is going to find, index, and (hopefully) rank. If you make the link “tree” simple and easy to follow, you stand a better chance of pleasing a search engine spider.

Think About Confused People

No one is going to know your site as well as you do—click paths for actual visitors can make it seem like your visitors are drunk, lost, or just plain silly. Trust me, though, they usually (and hopefully) aren’t any of those things. They just won’t know your site very well from their initial visit. You need to make the structure or your site intuitive enough that your visitors can understand it quickly without hand-holding.

Another major problem I have seen as I have designed or redesigned web sites is that often the navigation structure is inconsistent. Inconsistency is worse than complexity. Imagine, you land on a site, click to go to a product description, click to the features page, and then want to go back to the product description. Now, though, instead of being first on the list of navigation links, it’s 4th and it’s called “product outline” or “product overview.” Huh? You will lose and confuse your visitors if navigation paths aren’t consistent.

My Basic Process

After designing many sites, I have a basic process that I follow for designing a site. Here are the main steps that I follow:

1. Define Main Areas

   Luckily, you’re not starting from scratch when you start to define the main areas of your site. In fact, there will usually be at least one area for each of the main functions of your site.

   For example, KindredLearning.com has five main functions that it’s supposed to have: store, newsletter, articles, company news, and general company information. After looking at all the different pages that we wanted to include on KindredLearning.com, we decided on six main areas: Four Year Plan (the main selling point for Kindred Learning’s entire business), Products, Newsletter, Articles, News/Updates, and About Us. We added only one area, and we did it in order to make certain educational materials on the site more prominent.

   These main areas make up the “main level” navigation of your site. Your visitors can see the main things they can do or learn about on the site in a glance from anywhere on the site.

2. Assign Pages to Areas

   The next step is to make a list of all of the pages that need to be on your site and then assign each page to one of the areas. Most of the time, it will be clear in which area a page belongs, although you will occasionally have a page that seems to belong in more than one area. It can be really tough to decide where to finally assign this page. You can make every page accessible from many places on the site, but you need to assign every page a “home.” These associations can be changed, but changes need to be made with GREAT care—changes to associations and navigation menus are the number one way to introduce navigational inconsistency into a site.

3. Set Up Levels

   Once you have all your pages assigned to the different areas, you’re ready to impose a little further structure on your site. Some pages will naturally belong to certain sub-areas or categories. You can group these pages together and then create a new “index” type of page to link to each of these pages. You can also link to pages right from the main area page. These groupings, indexes, and assignments create a hierarchy for your site, one which is hopefully clear, natural, and easy to follow.

I usually perform the task of structuring my site on a white board, a large piece of paper (the same way that Carolynn Duncan solves big problems), or an Excel spreadsheet. It usually ends up looking something like this:

Click to Enlarge

You can see the areas along the top (I really like tabbed navigation at the main level), the pages and indexes below them, and the sub pages below them. The hierarchy has worked out clearly and is usually no more than about three levels deep.

At this point, you’ve succeeded in determining the goals of your site, deciding on the functionality necessary to achieve these goals, and mapping the functions and information to a navigational wireframe.

Finally, go through the structure of your site and think about conversions, spiders, and confused people again. If your structure satisfies these needs, then you’re good to go.

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.

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.

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?

Have you ever come across text that is littered with acronyms and jargon, that is just incomprehensible and dense?

Acronyms and abbreviations can be especially difficult to decipher when you are reading text that is specific to a field or niche that you aren’t very familiar with.

HTML Abbreviations

Luckily, HTML allows you to specify the definition of a word without messing up your presentation.

Abbreviation tags are very simple; there’s the tag, <abbr>, the definition, title=”meaning of the term goes here,” the word you are defining, and the closing tag, </abbr>. Here are some examples:

And the results:

SCUBA diving lets you dive to much deeper levels than snorkeling.

NASA announced a new space capsule today.

So now you can scrub your XHTML + XML with SOAP and AJAX and people will actually know what you’re talking about!