Em Dash and Hyphen

Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers.

"Are you twins? You all look so much alike!"

At this, they roll their eyes. Sure, they look similar, but it's obvious — to them, at least — that they're each completely unique.

The em dash is the eldest. She’s taller than her sister, more graceful, and a bit more aloof. She needs her space — specifically, one space on either side. Some people misinterpret her attitude as snobby because of her near-encyclopedic knowledge of famous quotes. However, since em dashes are used to indicate attribution, ("The mass of men lead lives of quiet desperation." — Henry David Thoreau) she’ll demurely credit her knowledge to her job.

No, the real reason she's distant at times is that she's insecure about her place in punctuation society. She has two main jobs, one as a sort of watered down parenthesis (see the third paragraph in this section), and one as a sort of watered down semicolon (see the fourth paragraph in this section), and sometimes she wonders if she's even necessary at all.

The hyphen doesn't have this problem. She's the baby, and like most younger siblings, she's a total ham — and a total copycat. Whereas em dashes link a phrase to the rest of a sentence, hyphens link words to other words. Far more social than her aloof older sister, the hyphen doesn't mind being right next to the words she links, and sometimes within the word itself.

One of her favorite games is jumping around a phrase and seeing how she can change the meaning. Take "three month old puppies," for instance. The hyphen might jump between "month" and "old" — three month-old puppies — and then squeal over the idea of three puppies, each of them a month old. Then she might jump between "three" and "month" — three-month-old puppies — and squeal again over the idea of a number of puppies, all three months old.

Whenever the hyphen plays this game, the em dash just smiles and pats her head.

Commas

We're not done with the sibling metaphor yet. I want you to think back to middle school, back when you thought you were the coolest person on the face of the earth. Yet nothing could shatter that illusion faster than when your obnoxious kid brother showed up and revealed some embarrassing detail — like the rocketship footie pajamas you wore to bed every night, or your huge crush on Daniel Radcliffe.

That's what commas are: obnoxious kid brothers.

Think about it. They're always getting underfoot, mucking things up, slowing things down, and changing what you meant to say. Need I remind you of that old punch line (also the title of a fabulous grammar guide I recommend to everyone I meet), "Eats, shoots and leaves"?

The thing about younger siblings that no one ever wanted to admit was that they were much, much cuter than we were. And that made them useful. Want a raise on your allowance? Have Li'l Brother ask Mom and Dad — no one can say no to his patented puppy-dog eyes. You broke Gumma's antique hurricane lamp? Little Sis knows just how to break the news to her. She's so cute that Gumma will practically be thanking her.

Commas, like little siblings, eat this stuff up. After all, the only reason they were constantly underfoot was because they actually believed that you were the coolest person on the face of the earth. All they wanted was to be your faithful sidekick. So the next time you’re mulling over a sentence that looks a little comma-heavy, remember that they're only trying to help.

Exclamation Point

You're throwing a party, and it's dying fast. Everyone stands around awkwardly, sipping beer from their red plastic cups, not talking much, occasionally stealing glances at their wristwatches.

Just then, your exclamation point buddy shows up. He's half drunk, dressed in nothing but a Speedo and an American flag, and wielding a bottle of Patron like tennis racquet. "Who wants to get this party started?!" he yells. Within a few minutes, wallflowers are doing keg stands in your bathtub, there's a heated beer pong tournament in your kitchen, Mardi Gras beads are flying left and right, and a hip jam band has materialized in your living room. The exclamation point beams. He’s done his job.

The trouble starts when he invites a few more of his friends. They trickle in one by one, until they outnumber your party guests, and then the real pandemonium ensues. The jam band has turned into a thrash punk outfit, and the mosh pit is crushing your furniture. The beer pong tournament devolves into fight club — one guy punches another in the jaw and gets thrown through a wall for his trouble. Everyone who did a keg stand is violently ill. But the exclamation points are just getting started. Just then, the house is bathed in flashing blue and white lights. "It's the cops! Cheese it!" your exclamation point buddy yells, and everyone splits. You're left with thousands of dollars worth of property damage and medical bills.

The point of this cautionary tale is that exclamation points are fun, but too many of them can land you in big trouble. Limit use of exclamation points to one per paragraph, otherwise you run the risk of your punctuation speaking louder than your words.

It's easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it's enough to make you want forego punctuation altogether.

Well, back when it was alive and kicking, the Latin language did just that — and it didn't stop there. Written Latin also omitted spaces between words or lowercase letters.

It sounds kinda nice, doesn't it? No more worrying about whether that comma is in the right place, and on the flip side, no more embarrassing urge to whip out a red pen and correct restaurant menus. What's not to love?

A lot, it turns out. The result of all this grammatical simplification looked a little something like this:

GALLIAESTOMNISDIVISAINPARTESTRESQUARUMUNAMINCOLUNTBELGAEALIAMAQUITANITERTIAMQUIIPSORUM
LINGUACELTAENOSTRAGALLIAPPELLANTUR

You don't need to be discipulae lingua Latina to understand how nightmarish that sentence is. Now let's see how it looks when we apply our modern grammatical conventions:

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Behold the power of punctuation! Interword spacing, commas, and a period have helpfully transformed a terrifying sentence-monster into five easy-to-digest compartments.

Like it or not, punctuation is necessary. So what to do about all those hard-to-remember rules? Well, the trick is to make the same allowances for punctuation that we do for people. We all blatantly contradict ourselves in one way or another. It's these little exceptions to the rules we set for ourselves that make us that much more interesting and unique. Punctuation is no different. Rather than getting frustrated by all the exceptions to the rules, try embracing "punctuationality" — the personality of punctuation.

Naturally, a comprehensive guide to all the available punctuation in the English language is a bit beyond the scope of a single article, so instead I'll concentrate on the stylistic uses of a few commonly used marks over the course of two articles.

Ellipsis

I like to think of ellipses as industrious workers who don't particularly enjoy what they do for a living, but take pride in doing a good job. But when they get home, they like to unwind Michael Phelps style — and I'm not talking about swimming laps.

Most ellipses find work in the scripts for cheesy daytime soap operas. They indicate a pause, usually weighted, punctuated with a raised eyebrow or a look of desperate longing. These pauses speak melodramatic volumes.

"I... love you, Jacob."
"But Marie... we... can never be..."
"Unless..."

All that emotion, saying so much without words, is taxing on ellipses. That's why, when they get home, they order a pizza, pop in Half Baked or Harold and Kumar Go to White Castle, and call up their best friend, Dude, to come hang out.

"Dude... I just had the funniest thought. What if..."
"What?"
"..."
"Dude?"
"Dude... I forgot what it was..."
"Dude..."

All those empty pauses signifying nothing are the ultimate in relaxation for poor, tired ellipses. They pass out around 1 a.m., wake up in time to take a shower and grab a cup, and then they're back at it, infusing our soap operas and romance novels with the right amount of over-the-top melodrama.

Join us next week for more in-depth examination of the personality you never knew punctuation had.

There certainly is! Here are the top five ways you can strengthen your site and increase your online visibility.

1. Strong Hosting

This first point is mostly important for those who don’t have their own Website yet but eagerly want to create one. After you have selected your domain name, the next step is to choose a hosting plan. There are many good, affordable alternatives, but what professionals usually recommend is specialized blog hosting. This form of Web hosting allows you to set up a professional-looking Website in no time at all. Why is this important to mention when it comes to making your site more popular? Well, without strong hosting, you won’t be able to handle a traffic to your new Website, which means you’ll have no chance at all of becoming well liked.

Of course, finding strong hosting is often easier said than done. The hosting industry has grown very popular in recent years, and this has lead to large numbers of companies offering various hosting services. But don’t be fooled by their tricky ways of making it sound as if they are the best in the industry. We would recommend you partner up with a company that has a strong reputation and experience in the business. You might start at Web Hosting Search for reviews and other information to help you find the right fit.

When it comes to hosting, you should compare the different features included with the plan. Make sure you are guaranteed at least 99.9% uptime and that customer support is easy to get hold of. You never know when you could need them. Likewise, it is also good to know exactly what kind of numbers in terms of disc space and bandwidth will you be allowed to use and manage. Some providers also forbid their clients to upload music or video files to their servers even if it is for personal use. It's important to ask customer support to resolve such issues before purchasing a plan. Some other things you might consider asking are whether your domain name registry information will be protected and how many different e-mail accounts will you be allowed to use as part of the hosting agreement.

2. Optimize Your Website

In order to be truly successful online, you will have to get a high ranking in search engines. To succeed in this, you should learn as much as you possibly can about search engine optimization (SEO). The subject of SEO is vast and can be quite daunting at first, but once you get the hang of it, you'll be able to see the benefits immediately and will probably wonder why you didn’t get started with it earlier. A few things you can do to get started are to make sure you're using the proper keywords and to write for your visitors as well as for search engines. Writing for search engines is important, since you want to get high rankings, and writing for visitors is of the essence because you want them to stick around and return to your Website.

When you are satisfied with the keywords and content on your site, it is time to start working with link building. Search engines determine much of the value of a certain page/site by looking at the number of inbound links. Link exchange is one of the most popular and successful ways to get a good rank on search engines, and it’s really easy to do. Simply visit a Website that you like and ask the Webmaster if they are interested in a link exchange — it doesn’t have to be any more complicated than that.

Having something interesting and distinctive on your page is a great way to attract potential link partners. For example, if you are running a Website about domain names, why not add a domain name availability checker to your homepage? It will most likely attract links from other sites related to the niche, and people will tend to come back again if they want to know whether a domain is available or not. Try to be extra creative to set yourself apart from competitors.

3. Take Advantage of Social Media Optimization

Even though SEO should be a big part of your site optimization, it shouldn’t end there. Social Media Optimization is probably just as important, since it’s one of the strongest marketing tools available today. A social media optimization campaign should include a few different things. First, make sure the content on your site or blog is relevant to your topic and not out of date. Visit similar sites and join the discussion in leaving comments on posts/articles — don’t be afraid to say what's on your mind. Make yourself visible on Facebook and MySpace. Three other sites that can be useful for social media optimization are Twitter, Flickr, and YouTube. The two latter ones are not always applicable. Make sure you only take advantage of them when the time is right — you might do more harm than good if you don’t.

Obviously, don’t forget to include outbound links to your Website on any social media site you utilize. Even if your link has a "nofollow" attribute attached to it (e.g. like in Facebook), you will still attract new visitors and potential customers to the site. Lastly, your campaign should be built on friendly platforms, such as CoffeeCup Flash™ Blogger, which make it easy to create and edit content.

4. Get Your Visitors Involved

A crucial point to make your site grow in the number of visitors is by getting them involved. Try to write in a personal style, and don’t be afraid to leave an open question. If this shouldn’t do it, why not hold a contest? This will most likely get people talking about your site. The prize doesn’t have to cost a fortune, since people like to compete regardless of what the award is — it's human nature.

Other easy ways of getting your visitors involved is by including a forum on your site or the possibility to comment on your posts/articles. Everyone wants to express their own personal ideas and thoughts on topics, and by allowing them doing so, you also increase the chance of visitors returning to see how was their feedback appreciated. As an added bonus, if the topic is extra popular, the discussion could attract interest from other Websites as well!

5. Emphasize Usability in Your Design

Investing in a good design is more important than some people seem to think. With a beautiful design, you will grow in trust among your readers/visitors. An important fact to remember is not over-designing the Website. It doesn’t matter how many hours you’ve put into designing the site if no one understands how to use it. Let some non-Internet-savvy friends navigate through your Website before launching it at a full scale. If they find it easy, so will the rest of your visitors.

It is difficult to say exactly what makes a beautiful and functional design. What looks good to one person might seem terrible for another. However, there are basic trends in Web design, and if you follow these, you can be sure to please most of your visitors. A few popular Web design trends for 2009 are multi-column layouts, large illustrations, and lots of white space.

If you wish to stay on the safe side, then it is a good call to make the layout and design features on the page easily accessible and simple to understand. Try to use standard coding and avoid over-the-top Flash animations. Some people may have browser settings that prevent them from viewing Flash, which means you might lose valuable visitors. Try to think how the visitor thinks, and your Website will grow more popular and respected day after day.

Even capital letters are complicated. Just throw 'em at the beginning of every sentence and use them with proper nouns, right? Yeah, right. Don't let capitalization fool you — it's just as fickle and prone to exception as commas, hyphens, and the past participle of irregular verbs. Marketing types use capitalization as An Attention-Grabbing Device. Formal titles get capitalized in some instances but not others. And don't even get me started on the many different ways to capitalize a headline.

Looming over all this is the simple truth that capitalization is one of those things that can make the difference between a mediocre Website and a good one. Even a sound layout and solid content can easily be undermined by careless — or even just inconsistent — capitalization. Like everything else on your Website, your capitalization should serve a purpose, matching your message and intent while giving the impression of professionalism. The best Web designers know that no detail is too small, and that's why the best-designed Websites have consistent, correct capitalization.

And what exactly constitutes correct capitalization? I thought you’d never ask:

• Capitalize the first word of every sentence. This includes complete sentences within parentheses.
• Capitalize proper nouns (e.g. Brooke Marshall, Vermont, Boston University).
• Adhere to the capitalization in proper nouns, even if it doesn’t follow typical conventions (iPod, CoffeeCup Software, MySQL).
• Capitalize common nouns such as north, river, and street if they’re a part of a proper name (e.g. North Carolina, Chattahoochee River, Main Street). Don’t capitalize these nouns if they aren't being used as part of the proper name or if you’re using one common noun with two proper names. (E.g. Visit the Chattahoochee if you're into swimming, because the river is calm and warm. The Winooski and Lamoille rivers are better suited for rafting.)
• Treat commonly understood nicknames the same as the proper names they stand for — that is, capitalize them (e.g. the Big Easy, the Badlands, the Series).
• Capitalize the principle words in the names of composition titles, like publications, books, works of art, movies, songs, TV shows, articles, etc. This usually means words with four or more letters, verbs, and the first and last word, although other important words may be capitalized (e.g. “World of Warcraft,” The Catcher in the Rye, “Avenue Q,” “Deal or No Deal”).
• Capitalize formal titles only if you want them to be read all as one name (e.g. President Barack Obama, Vice President Joe Biden; but Barack Obama, who is the president, and his vice president, Joe Biden, work in the White House).
• Unless you’re writing poetry, there is absolutely no grammatical reason to capitalize words not described in the previous points. There is some marketing value to capitalizing words for emphasis, but this practice is generally seen as sloppy or amateurish, and can even be interpreted as untrustworthy. Hype may sell, but it can also undercut your reputation, making you seem like a sleazy carnival barker instead of a serious Web designer. Rather than using capitalization, consider using other ways to draw attention to your text, such as color, size, and style.

Keep in mind that these are only the basics. For more information about capitalization, as well as other aspects of grammar, I’d recommend picking up copies of The Associated Press Stylebook, Read Me First! A Style Guide for the Computer Industry, and The Merriam-Webster Dictionary. There are other similar resources, but these are the cream of the crop. The AP Stylebook represents the standard in the newspaper and magazine industry; Read Me First! is an authoritative guide to the unique grammar questions that arise when dealing with software and the Internet; and Merriam-Webster is a trusted resource in the print and publishing world.

Most publications also keep a personal style guide that covers common errors they encounter that may not appear in a broader guide like The AP Stylebook, as well as what to do in situations where there are no hard-and-fast rules. If you haven’t already, it's definitely worth compiling one of your own.

Now that I've covered the rules of how to properly use capitalization, let’s look at different ways to break them. After all, any good artist knows that rules exist to be broken, and that the coolest effects can be achieved by subverting the system.

ALL CAPS

All caps get a bad rap. Sure, they’re the textual equivalent of yelling in a person's face, but if used with a little finesse and consistency, they can gracefully draw a reader's attention to certain page elements. Here are a few examples of how to use all caps to your advantage:

This American Life

The site uses caps in its headers and menu to distinguish it from the rest of the page text. And because there's plenty of padding around the text in caps, it's easy on the eyes.

Giant Creative

The chunky lettering works with all caps because it's going for visual, rather than literary, effect. In the case of larger blocks of text, however, this site reverts to the normal rules of capitalization.

You do have to be careful with this technique. Although many sites have achieved a tasteful effect with all caps, some take it too far. FOX News features a front-page graphic overlaid with text, usually with disastrous effects, as this compilation page illustrates.

The use of caps for inflammatory phrases like "UNDERAGE DINO SEX" and "ARMY OF TERROR" is sleazy, sensational, and totally tacky.

all lowercase

Lowercase letters wear a lot of hats. They can present a funky alternative to regular text, transform less important words into attractive highlights, or communicate a demure loveliness. As an added bonus, because most of the text we read is in lowercase letters, it's really easy to read.

Craigslist

Craigslist's consistent use of lowercase letters works well with the minimalist, no-frills philosophy of the site.

Inspiration Bit

Inspiration Bit’s use of a chunky font and fun colors helps its lowercase headings stand out.

The Darling Tree

The overall effect of lowercase font here is one of modest beauty.

Vito Lourenco

Lowercase letters give this site a simple, elegant feel.

Design Sponge

Here's another sophisticated, artistic use of lowercase letters.

By the Book

Just because breaking traditional rules of capitalization can yield interesting and exciting results doesn't necessarily mean that using proper capitalization looks bad. On the contrary, adhering to the rules can actually make your site look tasteful and professional. In addition, drawing attention away from the artistic value of the text can place more emphasis on its meaning.

Apple

You really can't go wrong with Apple. The text on this page is clean, tasteful, and professional.

Vann’s Spices

This site keeps its properly capitalized text from being boring by mixing it up with different font sizes and slight smudging.

Best of All Worlds

By incorporating all caps, lowercase letters, and properly formatted capitalization, you can achieve a mixture of any of the effects we’ve seen thus far.

Whitehouse.gov

Whitehouse.gov got a much-needed makeover when Barack Obama assumed the presidency. Putting "the" in lowercase italics adds a touch of elegance that ties in nicely with the powerful use of all caps in other, more important words, such as "administration" and "government."

MacAllan Ridge

This Website utilizes a similar strategy, but its choice of font makes the caps look graceful and stately instead of authoritative.

This site takes the trend we've seen thus far and flips it on its head. The name of the company is in lowercase letters, whereas the subhead is in big, blocky caps. This exudes an edgy, creative attitude.

Singularity Concepts

Another site using lowercase letters for important text and uppercase letters as accents.

Developing Your Own Style

When it comes to using capitalization for stylistic purposes, it's all about making sure your use of capital and lowercase letters reflects your Website's message and mission. All caps command attention; lowercase letters are edgy and exciting; a mixture of the two yields tons of possibilities, from the sleek and sophisticated to the edgy and experimental. Do keep in mind that consistency is key. If it looks like you've chosen at random whether to use capital or lowercase letters, the overall effect will be confusing and unprofessional — in other words, a capital offense.

The idea of a Website that excludes African-Americans or Latinos is all but unthinkable, yet Americans with disabilities are constantly faced with Websites that don't take their needs into account. Fortunately, many of the world's most popular Websites — among them Yahoo!, Google, YouTube, and Wikipedia — are working to become accessible to disabled users, but there are many, many more sites out there that still have a long way to go.

We all know that no one intentionally sets out to create an inaccessible Website. After all, the point of having a Website is to reach people — and most Web designers would do anything to reach 40 million of them. But for many designers and developers, the idea of creating an accessible Website is incredibly overwhelming, or even stifling.

I had a chance to speak with designer Dan Rubin and developer Chris Heilmann at the Webmaster Jam Session earlier this year. These guys live and breathe Web accessibility, and they were more than happy to answer my questions on the topic.

“[There are] a lot of preconceived notions that things are somehow difficult to implement, that you lose a lot of visual control, and that it has to be ugly,” Rubin said. “All those things are wrong.”

Heilmann echoed this sentiment: “Developers think, 'I can't use the cool, new technologies because they're not accessible,' rather than looking at these technologies and making them accessible. So it's like people don't see an accessible interface as an opportunity to make a cooler interface, but as something that is dumbing down what you really want to do.”

The fact is, accessibility isn't at odds with performance or attractiveness at all. An accessible Website is a well-designed Website — one that far more people than the disabled can enjoy. Websites designed with accessibility in mind also work better with dial-up connections and hand-held devices such as BlackBerries and iPhones — and as an added bonus, they're usually also better indexed by search engines like Google.

It's worth noting that there may even be negative consequences of ignoring accessibility. On August 27 of this year, Target paid out more than $6 million as part of a class-action lawsuit filed by Bruce F. Sexton, Jr. and the National Federation for the Blind. The retail heavyweight's Website was inaccessible to blind users, and the court ruled that this violated the Americans with Disabilities Act.

Naturally, it's the wrong attitude to feel strong-armed into designing an accessible Website out of fear of being sued. The lesson to be taken from the lawsuit is that Target lost a lot more than just $6 million: It also lost millions of potential customers, not to mention the respect of a lot of people, abled and disabled alike.

The right attitude is to approach Web design — particularly with the goal of accessibility — with an open mind and a passion for originality. It's also important to remember that setting boundaries can sometimes force you to be more innovative.

“As a designer, constraints are key,” Rubin said. “If you don't have constraints, you can get lost very easily, and there's no direction. ... You use the constraints to your advantage.”

Heilmann recommended I check out BBC Ouch! for an example of an attractive, successful site that works within the restrictions of accessibility. The site, which centers around everyday disability issues, is an example of the sort of strong Web design that everyone — especially the disabled — can appreciate.

At first glance, this site looks no different from most others. It's visually appealing and rich with media such as images and podcasts. Yet Ouch! also offers text-only and high-contrast versions in easy-to-locate but unobtrusive locations. These sorts of accessibility-friendly options are prevalent throughout the site. For another example, check out the option to view a transcript of “Dear Disabled Friend,” a comic that regularly appears on Ouch!:

This transcript probably took all of 30 seconds to write, and another minute or so to include in the page design. In no way does it detract from the site — it's hidden by default — but it provides a thoughtful service to blind visitors that many Websites would neglect to include. Clearly, if we take Ouch! as an example, attractive functionality and accessibility are not mutually exclusive.

When I asked Rubin and Heilmann to give me an example of a site that does a poor job of being accessible, Rubin quipped with a wry smile, “All the rest.”

“We don't have time,” Heilmann added.

“That's unfortunate,” I said.

“The more unfortunate thing is that it's not intentional,” Rubin said. “It's because of just a lack of knowledge and awareness. Ignorance, really, but people are just ignorant of just how easy it is to make it work for everybody. And that's all it takes, is a lack of thought, a lack of awareness, and things can go horribly wrong.”

In order to keep things from going horribly wrong, it's important to know who you should be designing for. Take into consideration people with vision problems, including blindness, color blindness, and weak eyesight. The blind may use screen readers or hardware that converts onscreen text to Braille, but Web users who are farsighted may simply enlarge text onscreen using their browser or screen magnification software. Enlarged text, particularly links, is also helpful for people with conditions such as cerebral palsy, Parkinson's disease, muscular dystrophy, or stroke, because they cannot use a mouse with precision. Some disabled users may not be able to use a mouse at all — instead, keyboards, speech recognition software, and single switch access devices are all viable alternatives.

Another major group to keep in mind are the hard of hearing, who rely on closed captioning, sign language, and written transcripts to fully enjoy audio and video. It's also important to remember that people susceptible to seizures may not be able to view flashing screens, and that those with dyslexia and dyscalculia may have difficulty reading the provided content.

The most helpful additions you can make to your site are high-contrast and text-only versions, as well as full transcripts of any audio, video, Flash™, and other multimedia that appears. Those who want to know the official guidelines for designing for accessibility should check out the Web Accessibility Initiative's Web Content Accessibility Guide and Section 508 of the U.S. Rehabilitation Act. The latter is only required for federal sites, but it lays out some helpful guidelines for people who want to design according to the U.S. government's accessibility standards.

Although it's helpful to understand the different kinds of disabilities your Web page may encounter, Rubin warned against thinking about designing for accessibility as “a checklist of types of disabilities.”

“It's so much more than that,” he said. “One of the important things to remember is that making a site properly accessible makes it easier to use for everybody.”

That's because accessible sites operate on the principals of proper Web design. As Heilmann explained, “it's all about structure and flexibility. If your site works without any style sheet, without JavaScript, and it gives a proper structure ... then you have a great step towards a good product.”

This means your site should use semantically correct (X)HTML for structure and content, and CSS for layout. Your (X)HTML content must be logically structured, and elements should be grouped in a coherent fashion. This is especially important for people who use screen readers, which read page text in order and get confused by bad (X)HTML such as table-based design. Screen readers also can't read Flash™ or JavaScript (neither can site spiders used by search engines), so you should make sure that all of your links and text are accessible via good, old-fashioned (X)HTML.

“If you have something that refreshes a page, have a real link that points to a real document, and not just some random JavaScript or a Flash™ movie file or whatever,” Heilmann said.

Another basic design rule that proves immensely helpful for the disabled but also tends to get lost in the fray is the use of alt tags for images and graphics. If you want to go a step above and beyond, include a description of the image à la “Dear Disabled Friend.” At the very least, you should incorporate appropriate context for your images in the text surrounding them. This isn't to say you should include a clunky description that slows down your narration, but it is good practice to make sure your pictures and text work in conjunction. Think of it like an article in a newspaper. The picture or graphic isn’t thrown in just to take up space — it serves to supplement the story.

In the same vein, you should never, ever try to compensate for weak content with superfluous visual elements. There's no substitute for clear, well-written content. Even if you're unsure of your writing abilities, there's never any excuse for spelling errors. Not only is spell checking a good idea in general, but it's also important to remember that typos can mess up screen readers, which obfuscates your meaning even more.

Perhaps the most important design tool to remember when designing for accessibility is progressive enhancement.

“When you take away the high-level interaction, the high-level layers, take away JavaScript, it should still work,” Rubin said. “Take away CSS, it should still work. That's not really a hard thing to do, but it requires thinking about it from the beginning and building it in that layered form.”

“It's looking at the depth of the pool before you jump in,” Heilmann added.

“Again, not hard,” said Rubin, “but if you don't think about it, it's easy to break your neck.”

The best Web designers know the importance of looking before they leap. This means testing their sites in multiple browsers — Firefox, Internet Explorer, Chrome, Opera, Safari, even Netscape. For the accessibility-conscious designer, it only makes sense to add a few other steps to this rigorous testing routine. This includes viewing the site in a text-only browser such as Lynx, viewing the full site in monochrome display, trying out a text-to-speech browser such as JAWS, Window-Eyes, or Fire Vox, using the site without a mouse, and disabling JavaScript and CSS to see if the site is still navigable.

If the designer has kept the principles of progressive enhancement in mind, made sure to use structurally valid (X)HTML, and provided text alternatives for multimedia — in other words, if the designer has adhered to the rules of proper Web design — the site should work just fine for everyone.

“It's not that hard,” Rubin said. “This stuff won't hurt you, and it's not difficult. It's actually really easy, and it'll make your life easier. You just have to open your mind to it.“

Screenshots taken from BBC Ouch!

Hold on tight, people: I'm about to take you way, way back.

Think back to a time before the Internet, before computers, before typewriters, back when the word “America” was still fresh on the lips of European colonists and people were still getting used to that newfangled Gregorian calendar. I'm talking about the 1600s, the Renaissance, perhaps the highest pinnacle of European art and creativity.

Back in those days, a man by the name of John Donne stunned his peers with glorious poetry that was highly clever, highly metaphysical, and highly erotic.

Yeah, I'm talking about the same John Donne you probably studied in high school. Since English teachers seem to delight in draining the fun out of the great works of literature, I'm not surprised if you're a bit skeptical about the whole eroticism thing. Let me prove you wrong.

In “The Flea,” Donne set out on the unlikely task of attempting to seduce his reticent lady-friend by explaining that, since they'd both had their blood sucked by the same flea, they'd practically already had sex. That being the case, they should just go ahead and consummate their relationship — after all, why should the flea have all the fun?

MARKE but this flea, and marke in this,
How little that which thou deniest me is;
It suck'd me first, and now sucks thee,
And in this flea our two bloods mingled bee;

As if the juxtaposition of flea infestation and sex wasn’t clever enough, Donne took an extra step and cracked a few typographical puns. Take a closer look at the third line — “It suck’d me first, and now sucks thee” — and then think back to Renaissance typography, particularly the infamous “long S.” Not familiar with what it looks like? I'll fill you in:

Replace all the S's in that third line with long S's, and you'll get this:

That's right.

And just in case you're wondering, yeah, John Donne knew exactly what he was doing. There's a reason why he's still remembered today — he was witty, unafraid of ribaldry, and a literary master beyond compare.

Now let's fast-forward to the present day. There's actually a lot Webmasters can learn about the importance of Web typography from this little exercise in Renaissance-era eroticism. The way you present your text can and does have an effect on its meaning — even if you aren't using typography that transforms a relatively innocuous word into the F-bomb.

Typeface Vs. Font

Before we get started, one thing needs to be clarified: the difference between typeface and font. Most people use these two terms interchangeably, but they actually mean two different things. A typeface is a specific design within a type family. For example, Times New Roman is a typeface within the serif type family. A font, on the other hand, is a variation of a typeface. Every time you bold, enlarge, shrink, italicize, or otherwise modify a typeface, you're working with a font.

For more information about the typeface vs. font debate, I highly recommend Jon Tan's examination of the subject.

Types of Type

When you're deciding what typeface to use, you should first figure out which type family best fits your textual intentions. Like John Donne, you should know how your text is going to look when rendered in a specific typeface, and what layers of meaning the typeface is going to add to what you're saying.

Typefaces come in many shapes and sizes, but they can all be categorized into six type families: serif, sans-serif, monospace, cursive, fantasy, and picture.

Serif typefaces got their name because they have serifs — those little decorations on the end of strokes within each character. Serifs are useful because they provide a horizontal groove that serves as a visual cue for the reader's eyes to lock into. This makes them easier to read, particularly at small sizes, which is why they're so widely used in the text of newspapers. They tend to be proportionally spaced, which means that different characters have different widths. They're great if you're trying to convey an authoritative, professional feel, but you should avoid them if you want your text to seem more personal and friendly. This isn't a hard-and-fast rule, though; for more information about using serif types, check out David Rodriguez's fabulous article on the subject. A few serif typefaces you may have seen are Times New Roman and Georgia.

Sans-serif typefaces are proportionately spaced and, as you may have guessed, don't have serifs. This means they're harder to read at smaller sizes; however, they work well as headings or large text. They also seem a lot friendlier and more approachable than their serif counterparts. Popular sans-serif typefaces include Arial, Helvetica, and Verdana.

Monospace typefaces may or may not contain serifs. What sets them apart is that they aren't proportionately spaced — that is, each character takes up the same amount of horizontal space. Monospace isn't the best choice for most text, but if you're looking to set certain text apart, or if you want to create a mechanical or typewriter-esque feel, typefaces like Courier and Lucida Console will work just fine.

Cursive typefaces such as Comic Sans are curvy and stylistic, and are meant to look like handwriting. As you might guess, these can be kind of cheesy and difficult to read, and as you might not have guessed, they sometimes inspire hatred. This means it's best to limit your use of them to accent text; for instance, if you’re going for a really personal look in a heading, a cursive typeface could be just what you're looking for.

Fantasy typefaces are decorative and artistic — think Impact — which means that, like cursive typefaces, they can be difficult to read. In addition, these typefaces can come with unique limitations, such as a lack of lowercase letters. These typefaces are best used as accents, not your main text.

The picture type family consists of those crazy typefaces that replace characters with symbols and illustrations, like astrological signs, shapes, and the like. I'm sure at some point you've had fun checking out what your name looks like in Wingdings or Zaph Dingbats, but it's best to avoid these typefaces altogether when designing your Website. The reason for this — besides the fact that they're completely nonsensical — is that there are no browser defaults for picture typefaces, because they don't correspond to an actual language. An A is an A no matter whether you're using Arial, Comic Sans, or Times New Roman, but if you're using a picture typeface, it could show up as anything from a flower to a pair of scissors to a Kronecker delta.

Play it Web-Safe

So, now that you know the different type families you can choose from, it's time to go wild and pick out all your favorite typefaces for your Website, right?

Unfortunately, no. Web browsers are finicky beings, and they usually don't get along very well with creative-looking typefaces. If a browser encounters a typeface that isn't installed on its computer, it will default to another typeface, which can seriously mess up your design, let alone the meaning you had in mind for your text. Your best bet is to stick to Web-safe typefaces, which are generally rendered the same in all browsers, for your main body text. This isn't necessarily a bad thing — there are enough of these typefaces to ensure that you'll be able to find something to fit the mood of your text and your Website. Here are the most common Web-safe typefaces:

Arial
Arial Black
Courier New
Times New Roman
Impact
Comic Sans MS
Georgia
Trebuchet MS
Verdana

Meanwhile, you should play up the power of creative typefaces by exclusively using them as headers and text accents. In order to do this without the browser defaulting to another, safer typeface, you can create an image of text or use a program like CoffeeCup sIFR Font Maker to create Flash™ text. You can go further with Flash™ by adding colors and effects to your typefaces using a program like CoffeeCup Website Font. I'd go into more detail about these processes here, but David Rodriguez has already written an excellent article on this topic.

Getting Choosy With CSS

When John Donne was penning poetry, he only had two options for displaying his work: handwritten pages or the relatively new technology of the printing press. That being the case, he didn't have the opportunity to choose between different typefaces that might work better with his artistic vision. Instead, he had to work within the established system. Although modern-day Web designers have to do this in a sense with Web-safe typefaces, they do have the option of choosing which Web-safe typefaces they'd like displayed. You can do this using a simple bit of CSS: the font-family property.

Say you want to use Baskerville, a stately, sophisticated serif typeface, for your Website text, but you're not sure all your users are going to have it installed on their computers. What you could do is pick another, more common serif typeface, like Georgia, and set that as a backup. You could even set “serif” as a backup for the backup, just in case your Website visitor is using some strange browser that doesn't recognize Georgia. Setting serif instructs the browser to use its default serif typeface in case it doesn’t recognize the other typeface(s). The rule would look like this:

font-family: Baskerville, Georgia, serif;

You can learn more about this technique in yet another article by the illustrious David Rodriguez.

Be Responsible

Webmasters are presented with a ton of freedom when it comes to typography. Novelists, journalists, academics, Renaissance poets, and other purveyors of the written word are pretty much limited to strict typeface conventions, but the Internet plays by a different set of rules. Big text, small text, colorful text, text that glows and explodes and reassembles — pretty much anything is possible with the powerful tools available to Web designers.

But just because you’ve got a lot of freedom doesn't mean you should abuse it. The “suck” pun only appears in “The Flea” twice — John Donne knew that if he overused it, it would lose its power and cleverness. In the same way, you should preserve the power and cleverness of your Web typography by using tasteful text and saving the creative, exciting typefaces for special occasions.

Otherwise, your Website could suck.

“The Flea” screenshot taken from http://digitaldonne.tamu.edu/.

I don't care who you are, whether you're a staunch conservative or a hardcore liberal, a Republican, a Democrat, or an Independent — we can all agree that Barack Obama's Website is freaking gorgeous. And that makes John McCain's already mediocre site seem all the more lame. I mean, I know the guy doesn't know how to use the Internet, but that's no excuse for some of the design sins committed on his site.

Sure, this may seem like a paltry issue in light of the crisis on Wall Street, the government's high-stakes bailout, astronomical gas prices, the broken health care system, the... well, you get the point. But with the polls split almost evenly, and 73 toss-up electoral votes slated to decide this election, the candidates owe it to themselves and their parties to put their best possible face forward, particularly on a medium as important as the Internet. September saw a huge spike in the number of visitors to McCain and Obama's Websites, according to Web information site Alexa.com, and if their growth over the past few months is any indication, the sites are due for a lot more in the weeks ahead.

Now, I'm not just writing this for the distinct pleasure I get from putting McCain's mediocre Web design in its place. (For the record, I'm a 22-year-old liberal/hippie with an Obama '08 sticker affixed to the bumper of my Honda Civic.) I'm also impressed with the amount of pertinent information these two very different Websites have to teach us about the principles of sound design — what to do, what to avoid, what looks great, what looks cheesy, etc. So I examined the design and functionality of the sites, looking at aspects like quality, organization, use of current design trends, ease and pleasure of navigation, provisions for alternative users (the disabled, non-English speakers, etc.), and whether the site achieves its purpose.

And all I can say is that if quality of Web design decided the election, Obama would win in a landslide.

First Impressions — Headers

Located at the top of each page, the header is often the first part of a site that visitors see. Although it doesn't need to be wildly impressive, putting some effort into it can add a nice touch of flair. The ideal header is attractive, but also says something meaningful about your site. At the very least, it should contain your site's name and logo.

Both Obama and McCain have put effort into their headers, but Obama's outshines McCain's quite a bit in terms of artistic quality.

Blurred, feathered edges, an infusion of white light, a gradient background, and a faded photograph of supporters lifting “Change” signs symbolize Obama's message of hope and growth. In addition, the header blends seamlessly into the rest of the page while still maintaining definition as its own distinct element. It achieves this through a shared gradient effect with the page background paired with strategic highlighting and a red border at the bottom that fades into a red stripe of the American flag. The only flub in this header is the “En Español” button, an ugly, blocky affair that overlaps the “W” in “Now” slightly.

Yet perhaps just as important as all this lovely artistry is one simple detail: The pictures of Obama and running mate Joe Biden are well proportioned. Minute and obvious though this may seem, it's not the case in McCain's header.

The pictures of him and running mate Sarah Palin fall victim to what looks like a bad Photoshop job — if you look closely, you'll notice that Palin is slightly larger than McCain. You don't need to look closely to see that the tops of both candidates' heads are chopped off. This looks sloppy and a bit amateurish.

Of course, McCain's header is not without its strengths. Like Obama's, it employs an artistic gradient background with a faded picture of supporters waving American flags. McCain and Palin, rendered in solid colors, stand out in stark contrast to the soft background. Had the pictures of the two candidates been better proportioned, this could have been an above-average header. As it stands, it looks like something that was slapped together without much of an eye for detail.

Finding Your Way — Menus and Search Tools

The importance of a well designed, easy-to-navigate menu cannot be understated when dealing with information-heavy Websites like McCain's and Obama's. Great care should be taken to make sure that the menu helps people browse the site effectively. Key things to keep in mind are readability and functionality.

From the text to the design to the details, Obama's menu is an ideal navigational tool. The dark blue sans-serif font over a white background is easy to read, and the use of an italicized serif font for words like “the” accents the text nicely. Also important is the format — namely that he condenses long lists of information in his drop-down menus into two columns. This means that users with smaller screens or browser windows don't have to scroll down to see the full host of menu options. In addition, his drop-down menus appear in full on mouseover and disappear instantly when the mouse is moved away. Several popular Websites like Google, Yahoo!, Facebook, and The New York Times online employ this professional-looking technique because it doesn't waste the visitor's time or clutter the screen with unnecessary animation.

McCain's menu eschews the solid design principles on which Obama's is built in favor of the exact opposite. Instead of a clearly defined main menu, there are bold words against the site background. Instead of dark text against a white background, there is bold white text on a dark background. Although this can be an eye-catching technique, it is notoriously difficult to read, so it should be kept brief and limited to special situations.

The poor menu construction doesn't stop there. On mouseover, his menus slide down, and they slide back up when the mouse is removed. This unnecessary effect not only wastes time and clutters the screen, but it also looks cheesy. The options listed on the drop-down are kept to one long list, which means those with browsers not expanded to full screen may have to scroll down or change their screen size to see all the options. This is the kind of thing that annoys and frustrates visitors — and that can drive them away.

McCain's final major error is neglecting to include alt text in his menu. This is important because it allows people using text-only or voice browsers to access the information. Luckily for alternative users, Obama's menu does utilize this essential tool.

However, Obama's Website falters by omitting one crucial element: a search function. No matter how great a menu is, there is still going to be some information that's hidden away somewhere that can only be accessed easily through a search. It's almost embarrassing that McCain's site beat Obama's on this one. Hidden though it may be — it's tucked away at the very bottom right-hand corner of the page — McCain's site does indeed feature a search function. I grudgingly tip my cap to you, Mr. McCain.

Creating A Palette-able Site — Color Scheme

Use of color in a Website should never be haphazard. At the very least, the design should feature a matching color scheme; however, neglecting to take full advantage of this useful tool can be a big mistake. When used well, color can draw attention to or away from page elements or even symbolize an idea — which is exactly what Obama's strategic color scheme does.

The site utilizes a tasteful, consistent scheme, with certain areas appearing brighter or more faded for variety and emphasis. The page is drenched in a deep, lovely blue, with white typically used as a text background or highlight, and splashes of red accenting important elements. The symbolism of this color scheme, while clear, isn't overstated or obnoxious.

The use of color in McCain's site, while certainly sound, lacks in strategy and vision. Strong colors placed almost indiscriminately around the page make it difficult to determine where the eye should be led. In addition, the solid color background is a bit boring. Ultimately, this scheme pales in comparison to Obama's clever use of color.

Lookin' Good (Or Not) — Design

Of course, what is a color scheme without a design to go with it? The ideal site looks good and functions better. Navigation should be easy and intuitive, presenting — but not pushing — cool but useful features to visitors. Ultimately, people want to feel like they're in control of the Website they're visiting — and if they don't, they're likely to leave as quickly as they came.

Flash™ is one of those things that can drive users away as easily as it can keep them around. The most important thing keep in mind is whether Flash™ is actually necessary for what you're trying to accomplish. If it doesn't make the experience of your Website easier and more pleasant for your visitors, don't use it.

I'm talking to you, John McCain.

The front page of McCain's Website features a clunky Flash™ animation containing three screens that alternate with a rolling animated effect every few seconds — kind of like a slot machine, only with opportunities to volunteer with McCain's campaign instead of pictures of fruit. If you want to shift to a different set of screens, you can click some arrows at the bottom of the animation, but you have to wait and watch while the new screens roll into place.

This clumsy bit of Flash™ animation ultimately gives the impression of someone who's severely out of touch trying to impress people with what he thinks of as “sophisticated technology.”

The rest of McCain's site design isn't much better. The separate elements in his page are kept in neat boxes, but loud colors and unnecessary use of large text size make for a cluttered, almost chaotic feel.

Even though Obama's front page features quite a bit more content than McCain's, it avoids clutter through a clean, cohesive design. The site is exquisitely woven together using a series of color fades and brightening, an excellent balance of text and graphics, plenty of breathing room between elements, and strategic variety of text size, style, and color. He also includes an excellent graphic that utilizes Silverlight, Microsoft's Flash™ alternative — a series of four tabbed screens that switch every few seconds with a brief, tasteful fade as a transition.

This motion makes it clear that these screens, which contain information about the campaign and current events, are the main emphasis of the front page. Visitors who want to view a specific screen simply click one of the clearly labeled tabs, and the chosen screen is automatically displayed without the fade transition.

But the attention to detail on Obama's site doesn't stop with Silverlight animation. Right-clicking the page background and selecting View Image reveals an intricate emblem that appears in the center of every page, but that's usually covered by the content.

Special attention is also paid to his People page. The name of each featured group is accompanied by a graphic of the eminently clever Obama logo with tasteful, attractive accents that pertain to that culture. As if that weren't enough, his Issues page contains unique graphics produced in a similar style for each different topic.

Curious to see if McCain's Website utilized a similar technique, I checked out his Issues page. He opted to use reliable but uninspired stock photos. Clicking the Coalitions menu button returned me to the main page, which is a definite no-no in Web design. Links should always lead to the place they claim to lead to. Remember: If you don't have a place for a link to go, don't link anywhere at all.

Yes, I'm still talking to you, John McCain.

Music, Pictures, and Vids, Oh My! — Multimedia

With sites like MySpace, YouTube, and Facebook ranking 3rd, 4th, and 5th on Alexa.com's list of the top 100 most visited sites in the U.S., it's no surprise that incorporating multimedia can boost a Website's popularity. Videos, pictures, music, and the like can make a site look modern and interesting, but they also carry with them the threat of seeming cheesy, inexpert, and even frustrating for visitors.

Obama deftly avoids the perils of including multimedia with a Photos page that utilizes a clean, intuitive design. Thumbnails give the user the option of choosing which photos to view, and a brisk but not-too-quick slide show allows them to relax and watch without getting frustrated or bored.

His videos page, Barack TV, exudes a trendy, scrabook-y, down-home kind of feel. Weathered gray boards with the Obama logo in flaking paint form the backdrop for a cluttered assortment of framed pictures, faded photographs, tattered campaign posters, and license plates from four of the battleground states. Mousing over these different images reveals titles of different videos. This is a distinct departure from the original Barack TV page, which featured a sleek, modern player with a neatly consolidated list of videos, but it makes for a much more interesting and artistic layout.

In addition to photos and video, Obama offers several other multimedia options on his site, including downloads like desktop wallpaper, instant messenger buddy icons, materials for assisting with his campaign, cell phone ring tones, iPhone apps, and even music.

McCain's site doesn't take advantage of the many rich multimedia options available — and judging from how the pictures and videos on his site are treated, this is probably for the best. There's no slide show for the photos on the front page; to view a picture, the user must click the thumbnail and then wait for the photo to grow to full size. Clicking the Photos of the Week link brings the user to an impressive-looking but difficult-to-navigate album. Although it seems like quite a bit of time went into its creation, it ultimately comes off as impractical and flashy for the sake of being flashy.

McCain blunders on his Multimedia page with a video that begins playing automatically. Anyone who's spent more than 10 minutes on the Internet knows this is annoying — if your visitors are listening to music, they have to scramble to turn it off, and then rewind the video to the beginning so they can catch what they missed. And — surprise, surprise — the mistakes don't stop there.

The list of videos doesn't include any more information than the title and a tiny, extremely pixilated thumbnail, which makes it difficult to figure out which video you want to watch. Finally, there's no easy access to closed-captioning or Spanish. That's just insensitive.

Keeping In Touch — Networking

Networking and interactivity can help keep users connected to the Web pages they frequent. Knowing that their input is valued can make visitors feel special, welcome, a part of their favorite sites. Most sites would do well to include an easy-to-find contact page and perhaps a discussion board. There's also the option of getting involved with established social networking sites like MySpace and Facebook. However, trying to create your own online community can be fraught with peril.

Don't believe me? Check out McCainSpace.

The ambition behind McCain's networking page is admirable, but its execution is an utter failure. The cluttered page opens with a pixilated video of a profoundly uncomfortable-looking McCain, who delivers a stilted speech about the importance of social networking sites. I have to give him credit for trying, but he really would have been better off not filming this almost amusingly embarrassing video. He sounds as anachronistic as, well, a 72-year-old talking about the importance of social networking sites. McCainSpace is a key example of why most sites are better off leaving the social networking to Facebook.

But then there are the exceptions that prove the rule. Sure, Obama has taken advantage of the myriad social networking options out there, including links to 16 popular sites for networking and photo and video sharing. But he also created a savvy, successful social networking space of his own.

MyBO's sleek, exciting design allows supporters to create events, get involved, meet other Obama fanatics, blog about their experiences, and much more. There's even a handy tutorial that appears when a new user logs on for the first time. MyBO is designed far better than it has any right to be.

Whoops! — Errors

Broken links, misspelled words, pixilated photos — errors like these can make your site look amateurish and even untrustworthy. It's imperative for Web designers to check, double-check, and triple-check their sites for errors.

Although their sites are cleaner than most, even Obama and McCain, men whose Websites will play a part in deciding whether they'll be elected president of the United States, have errors on their Web pages. Frankly, this is inexcusable — particularly in McCain's case, since there are not one, but two errors on his front page.

Lessons Learned

Despite a few minor flubs, Barack Obama's site is a shining example of the amazing things that can be achieved through the art of Web design. Even so, it doesn't have that much to teach us, except maybe to pay attention to detail. No, the true lessons lie in John McCain's attempt.

Now, don't get me wrong: I'm not saying you shouldn't vote for McCain because of shoddy Web design. Clearly the man has a lot to offer the American public — experience, intelligence, an impressive record of service, all that good stuff.

But what if McCain wasn't running for president? What if he was running a small business instead? If that were the case, a lot fewer people would tolerate the mistakes he made on his Website. And that's the lesson to take from this. McCain's Website commits two grievous errors: Trying too hard and not trying hard enough. Instead of wasting time with McCainSpace — a doomed enterprise if ever there was one — he should have concentrated on picking color more wisely. Instead of trying to impress his visitors with hackneyed animations, he should have checked his site for errors. Instead of creating a mediocre site plagued by the same basic design mistakes people have been making since the days of animated GIFs and embedded MIDI players, he should have done his homework on current design trends.

In a way, his site almost mirrors his politics. The self-proclaimed maverick who votes with the current administration the vast majority of the time has created a blasé site that fails to step outside the safe boundaries of Web design, and even repeats a few obvious mistakes. Meanwhile, Obama's site is poised at the frontier of innovative design, incorporating relevant trends with solid principles and a spirit for experimentation and evolution, all while keeping in mind the most important aspect of any Website — the user.

As far as I'm concerned, that's the change we need.

Screenshots taken from www.barackobama.com and www.johnmccain.com.

We all love Web design. Looking at a blank white box on a computer screen and using only your mind's eye, a mouse, and a keyboard to transform it into a living, breathing Website is no minor feat, and there is undoubtedly a creative rush when it comes to doing something like this. Web design can be a strong artistic outlet and it inevitably brings with it the joy that comes with looking at your finished work and presenting it to others.

Yes, in a word, Web design is fun. But let's face it: if you plan to make money off of Web design, then it also becomes a business.

If Web design is your business, then you must make certain you are in the right mindset and you use the right process when it comes to your work. You don't want your designs to fail, but, unfortunately, there is a strong chance that they will do exactly that. Lets take a step back for a minute and define what a failing design is, and why it fails.

Failing Design

Failing design is not necessarily poor design. This means that a "failing design" is not necessarily an ugly Website. Rather, a failing design is one that fails to function properly for the site where it's used. A design can be very beautiful, but be terrible for its purpose.

If your (or your client's) goal with a Website is to sell something or generate excitement over a specific idea or campaign, you'll want to design accordingly. For a site like this, you don't want to use a calm ocean picture as your header with deep ocean blues and blacks in your design. Sure, you may be able to make a very pretty design this way, but it's a failing design because it doesn't supplement the site's goal or message.

The above example is a gross exaggeration, but it serves to show why so many designs fail. The problem lies in the misunderstanding of the process of design.

The Process of Web Design

So many designers, especially newer, freelance workers, jumble up the process of design. What's worse is that this is a direct path to failure and they don't even know it. We'll be focusing on each of the aspects of the process of design in just a bit, but first, let's look at an overview. This, at its most basic, is the process of design:

• Planning
  Before you even get a single idea in your head about what your latest Web design is going to look like, you need to do all the appropriate planning. Mostly, this includes knowing the answers to important questions.
• Content Building
  You need to build all of the content of your site after you have a clear plan. This doesn't necessarily mean getting every detail down, but you need to know what your content will be and where it will go.
• Designing
  Now you'll design the Web site. This is a crucial step, of course, but if you've done the planning and content building first, this part will be the most fun, and most likely the most profitable! But keep in mind that there are several key considerations you'll be taking into account, so you won't be getting wild with your digital paintbrushes here.
• Development
  Once you've finalized your design, you'll turn it into XHTML/CSS/PHP/MySQL and whatever else your site needs. Development typically refers to the technical side of Web design: the coding and backend stuff.

As you can see (pay attention to this part, it's important!), designing the site comes late in the game. Many designers make the mistake of wanting to jump right into the design step, because that's where a designer's talents shine. But if you avoid or simplify the planning and content building steps, you will end up with a design that probably fits the site pretty well, but will ultimately fail in helping the site achieve its goals.

Therefore, it's important that you know and follow this process in your professional work. Let's take a look at the process in greater detail.

Step 1: Planning

There's a lot of work ahead of you before you actually get to start drawing, coloring, laying out, and generally designing your Website. First, you need the answers to these questions. You will know these answers if you are designing a site for yourself, or your client will know them.

You need to know the answers to these:

• What is your goal with this site?
  Are you trying to sell something? Deliver a message? Share information? Keep in touch? Etc.
• Who are your site's visitors?
  In other words, who is your target audience? This can sometimes be as vague as, "students" or as specific as "restaurant review publication advertisers."
• What do you want your visitors to do?
  Usually, if you're getting visitors to your site, you want them to actually do something. Some answers to this question could be, "buy a product," "sign up for a newsletter," or "learn how to build better Websites." This is an important question; make sure you have a good, clear answer for it.
• Why should they do it?
  Look at this site from the viewer's perspective. Why should they be interested in your site? What's in it for them?

If you or your client don't have clear answers for the above questions, it's time to do some research. Find some of your customers and get these answers or make some calls. Visit other sites that are similar to yours in idea and find out what kind of crowd they're drawing. If this is the type of crowd you'll be working with, then you'll have some answers.

Once you have good, clear answers to all of these questions, you can start building content for your site and start making some actual design decisions. With just these answers, you can determine the basics, like:

• Color
• Layout
• Font family
• Font size

Colors? Layouts? Fonts? Ah, here we go; this is starting to sound more like Web design! If you know, for example, that your goal is to provide wildlife safety tips to new campers, you will want a layout that allows you to provide clear, readable text. Because your tips will come mostly in the form of text and illustrations, you'll want plenty of body space and a font that looks good on screen and spaced well with CSS (Arial is a good default for something like this). Since you're dealing with wildlife-related material, your colors might mimic those of the woods, with deep greens, sandy and earthen tones, and dark wood colors.

But don't jump the gun and open Photoshop just yet! You're still not quite ready to start drawing and coloring. Next, you want to build the content of your site.

Step 2: Content Building

There's a phrase that's often thrown around in the Web development world: "content is king." This is true for most Websites out there. Most Websites want to be found and one key way sites are discovered is through search queries. Search engines frequently "spider" their database of Websites for new, clear, up-to-date, and original content, and Websites that have good content are rewarded with higher ranking and thus they are found more often.

It's no wonder, then, that content building is such an important step in Web design. With the answers you got from Step 1: Planning, you should know what kind of content you will want to start building. If your goal is to sell music and electronics, and your target audience is college students looking to buy things like iPods and digital cameras, then you'll want to write some content that's light-hearted, down-to-earth, and to the point while still building on the popular "lifestyle" trend that sells gadgets like these so well.

Or, as another example, if your target audience is a group of professionals in the medical research field and your goal is to pose challenging new ideas for collaboration or discussion, you'll want to write content that comes off as something of a technical blog.

Ultimately, though, the most important thing you want to do in this step is get all your ideas for content down on paper or in a text file. You don't need to write the ads for your music and electronics right now, for example, and of course you wouldn't want to spend the time in this step to write a long medical journal entry. For now, it's enough just to get all of your content down in shorthand. Just be sure you get it all.

Once you have all your content in a place where you can look at it, you'll want to build your sitemap. This is the final step before you actually start designing the site. You can use a computer program to draw your sitemap like I did below, but most of the time a pencil and paper works best for this part.

Let's take a look at a small sample sitemap for the music and electronics store we talked about earlier.

Here we can see that our homepage links to four other pages: Store Locations, Music, Electronics, and Contact Us. The Music and Electronics pages each link to different subsections. The Music page lets you choose a genre of music to buy, and the Electronics page lets you browse through different gadgets.

When designing your sitemap, it's important to remember the 3-click rule. Simply, the 3-click rule states that a visitor should never have to click more than three times on your site to do anything. In our sample sitemap, we can see that if a visitor wanted to get our other store locations, they would just need 1 click on the homepage. Or, if they wanted to browse through rock music to buy, they would just need to click Music on the homepage, then Rock on the Music page. Just 2 clicks.

While building your sitemap, you should make sure that every box (or page) on the sitemap will hold some of the content you outlined earlier. All of your content should have a place on your site, and you need to be able to visually see on what pages you'll put each bit of your content.

And now that we have our planning and content building done, let's get designing!

Step 3: Design

Many designers make the mistake of skipping steps 1 and 2, jumping instead right here to Step 3: Design. But if you got here after having done the necessary work beforehand, then you're on the right track!

In Step 1: Planning, you probably already got a good idea about what types of layouts and design you want to use. Let your creativity flow here. Remember, there are multiple layouts you will probably need for your design. You'll want a layout for your homepage, which, according to your sitemap, will just contain some introductory information or highlights, some links, and, depending on your goals, maybe some exciting imagery.

You'll also want a layout for your transitional pages. Transitional pages are pages that just shuttle the user to more important things. In the sample sitemap above, the Music and Electronics pages are just transitional pages. The Music page would be small, and contain links to the different genres of music below (Country, Hip Hop, Classical, and Rock). The Electronics page would also be small, and just contain small bits of information while it links to the more important stuff, like the DVD Players, TVs, MP3 Players, and Digital Cameras pages. Transitional page layouts should match the whole site, but also be simple so users can spend as little time on them as possible.

You probably don't want to hear this, but even at this point, you might consider leaving Photoshop closed for a bit. Instead, try drawing several layouts for your site on paper first. It's a good idea to build multiple layouts just to see how they "feel" with the site you're building, and using Photoshop to build lots of layouts that you might not even use is time consuming. It's much faster to draw some quick and dirty layouts on paper to get a rough feel for which way you want to go with the design.

By this point, you probably have a twitchy trigger finger right about now when it comes to firing your design gun. But take it slow. Here's something to consider about design.

Did you know that Apple, the company behind the designs of the wildly successful iPhone, iPod, and iMac computers and Macbooks, uses a design process they call "10-3-1?" It's true; at the 2008 South By Southwest Interactive Festival, I attended a presentation by Michael Lopp, Apple's senior engineering manager, where he revealed this small little bit of information to a packed room filled with designers.

Here's how it works. Apple designers must adhere to the 10-3-1 rule, where designers first give themselves plenty of creative freedom and come up with 10 good, wholesome designs for something. This could be for a site or a product, among other things. Then, after coming up with 10 good designs, they must go through the painful and often difficult task of eliminating 7 of them, leaving them with 3 really good designs to work with.

Then, the Apple designers will spend some months on these 3 designs improving them and bringing them up to Apple's game. Finally, after all this work, the designers must again eliminate 2 of the designs, until they're left with just 1 powerful design which gets the final work done and is given the well-known Apple brand and polish.

In recent years this type of thinking has been very good to Apple, and their designs have met with some big success. If you want your designs to be successful as well, then it's here in this step, Step 3: Design, that you should take the time before opening Photoshop to really plan out your design, taking into account everything you learned from Step 1 and knowing what the site will flow like from Step 2.

Make sure you finalize your design. Once you have your design ready, there's no going back.

Step 4: Development

If you've finalized your design (either to yourself or with your client), then you can begin developing the site. Depending on how you want the site to work, this could involve such complexities as PHP and MySQL backend programming, or it could just be as simple as some basic HTML and CSS. Either way, this step involves the actual coding of the site.

Some designers are solely designers and deal with only the basics of XHTML and CSS, opting to work with a partner or hire someone to do the coding of a site. Other designers know the development and coding side just as well as the design side, but these designers aren't altogether too common.

Either way, we won't go into the development of the site here. For the purposes of this article, it's enough to say that this is the final step, after the design is done, in the creation of a Website.

So, as you can see....

So, as you can see, actually designing a Website comes almost completely last in the process of Web design. If you want your designs to be successful, you will take the necessary steps to work up to the design.

It's easy to work with the mindset of, "I'd like to get this design done so I can add it to my portfolio." Yes, your portfolio is an important part of being a Web designer. But it's also key to produce a product that actually works for your clients (and for yourself). If your work is high quality and successful, then you can expect a great deal of success for yourself, as well.

Sometimes I get the same feeling when I'm surfing the web. Everyone feels this sensation to some degree, and it triggers the "fight or flight" response hard-wired into our brains (stay here and fight through this mess, or get out as fast as you can). It's no wonder most web pages are abandoned within a few seconds of viewing.

Whether intended or not, a person's home and the way he presents it are physical manifestations of his personality just as the design and content of a corporate web site are virtual manifestations of a brand. Environments, both real and virtual, affect human perception and behavior.

Clutter comes mostly from a couple of sources. As a natural progression, a home and a web site seem to accumulate things. At the same time, they are rarely purged of non-essentials. There is also the "design by committee" effect where everyone from every department wants their information front and center. It's better to decide what is most crucial and provide easy access to the rest. In a living room, the kids' toys should be contained in a designated basket or toy chest, while on a typical corporate web site, the HR information should be kept on the HR page. Most people are not coming to the home page to look for employment.

In someone's home, a quick escape is not always easy, but on a homepage, the "back" button is just a click away. If a web site is like a house, and its pages are like rooms, and people want visitors at their homes, how do they make visitors feel comfortable enough to stay? And come back again? How do we as designers create environments to attract, comfort and retain visitors? These are the things both interior and web designers stew over.

Visual Elements: On a web site, color, typography, iconography and other imagery should be considered as carefully as an interior designer considers surfaces, furnishings and art. Are they appropriate for the target user? A site targeting "metal heads" will not appeal to its market if it is bathed in soft pastels and cutesy typefaces.

Color: There are appropriate uses of color for specific messages targeted at specific end users. Once an appropriate color palette is defined, a designer can use it to direct users to specific content, organize that content, and create an appropriate environment. Too many colors, colors that clash, or use of too much strong color can make a space feel cramped and cluttered.

Typography: Too many typefaces in one place is like cramming a room with furnishings from different eras. Stick to a theme, and visitors will be more comfortable and get a better sense of the message the type is sending.

Imagery: We have all seen web pages with the cheerful customer service woman, or the close-up of the two hands shaking - "closing the deal." This is clutter, just like the faded Matisse prints we hung on our walls in college with scotch tape. Imagery (photos, illustrations, icons) should enhance an environment by promoting a message or feeling. Imagery becomes clutter when it serves no purpose, lacks quality, or is poorly presented.

Content: A clearly defined hierarchy of information is crucial to helping users understand what a site has to offer and finding the information they seek. If too many elements are shouting at visitors (flashing, bold, large, bright....), they are likely to be overwhelmed and move on. Sites that have a clear focus and logically organize less critical messages and elements provide a more approachable environment. Information that is presented with one voice and sticks to message is more likely to keep viewers engaged and confident.

Navigation/User Feedback: A house is generally set up with its rooms in logical locations; the entry way generally does not lead to a bedroom. The same is true for a well-designed web site. If a visitor has to think about where they can click to get more information, or click through multiple pages to get to specific information, they are not likely to stick around. The best web sites clearly map out what information is available where, and lead viewers to critical content via subtle feedback, like buttons or text that highlight when the mouse travels over them.

The bottom line is "web clutter" affects a business' bottom line. It has been well documented how clutter can drain us of time, energy, and trigger stress. When considered in the realm of the Internet, cluttered web pages make finding information difficult and lead to abandonment. Web sites that are "sticky" present viewers with a comfortable and organized environment and logical organization of content that helps viewers understand what is available and where to find it. The goal is to create an organized "home" with only the necessary things in their logical places to allow customers to find what they're seeking.

Ahhh. Peace at home and on the homepage through good design.

By: Kyle Mueller
Creative Director at MUELLER design
www.muellerdesign.com

What are Web safe fonts?

Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own.

However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn't have, that font will render differently (and often unattractively) on the visitor's machine.

So, how do you make sure that your fonts will look good on the largest number of computers out there? Easy: use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there. Some (really) older computers may not have a few of the fonts that we consider Web safe today, but they are a minority.

Who should use Web Safe Fonts?

Every Web designer should use Web safe fonts. There are some cases where you will want to use a special, non-Web-safe font, but these cases are rare (and we'll discuss cases like this in a bit). You want to make sure your fonts are always easily read by your users. By keeping your fonts readable with Web safe fonts, you retain readership and make your site more accessible to a wider range of people.

I guess the best answer to the question "who should use Web safe fonts" can be summed up in one word: "you."

Why use web safe fonts?

As explained above, if you use a font on your page that your visitor doesn't have installed, their browser will pick a fallback font that you may not intend to appear on your page. Often, the result is ugly text that is not at all pleasing to read.

If a visitor can't fluidly read your site, then he or she can't get the information you provided, and this is the whole reason your visitors are at your site! Even if the text on your site is ugly and someone decides to trudge through it for your content, it will still look displeasing and you will retain fewer readers. A Website with no readers is a waste.

Using Web safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don't strain a reader's eyes, don't make information difficult to find, and make sure they can progress through your site and content without having to think about it. (You can read a detailed article about building your typography here.) If at any point someone looks at your site and takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web safe font is a big part of attaining that goal.

When to use Web safe fonts?

As a general rule, always use Web safe fonts for your page's content.

Where are web safe fonts applicable?

Your plain text headers, links, and content should all use Web safe fonts. If you plan to use normal text for your logo, you should also use a Web safe font for that. In fact, one of the few exceptions to using Web safe fonts is if you decide to use text in your images. If you plan to use images for some of your text, then it's safe to use other fonts because images will appear the same on the visitor's computer as it does on your own. However, you should never use images for all of your text. Images for text should be used sparingly. Logos and some headers may use images. Everything that's content or otherwise normal text, though, should use a Web safe font.

How do I use Web safe fonts, and which ones are safe?

Include Web safe fonts in your CSS with font or font-family rules. (I've included the most useful ones below for you.)

There are a good number of Web safe fonts. Many of them look very similar to other Web safe fonts, and in practice they are essentially the same. A CSS rule for your font family, for example, may look like this:

font-family: Arial, Helvetica, sans-serif;

The first font listed, Arial, is an extremely common font available on most computers, so you can safely bet that it will show up properly on a visitor's screen when they visit your site. In rare cases, a computer may not have Arial installed, however. Older Apple computers, for example, may not have Arial, as well as several other fonts. Helvetica, though, is widely installed among Apple computers, and it looks very similar to Arial, so Helvetica is listed second. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.

And in extremely rare cases, some computers may not have Arial or Helvetica installed. In this case, "sans-serif" is used. This is a fallback, default font that the Web browser will use if it cannot find any of the previously listed fonts.

There are four types (or families) of Web safe fonts: serif, sans serif, cursive, and monospace. Each of these has their own fallback font (like sans-serif above). The fallbacks for each family, respectively, are: serif, sans-serif, cursive, and monospace. You will find that font rules almost always include one of these fallbacks, and always last.

The fonts are listed in CSS format so you can easily copy and paste them if you don't feel like typing them out. This is likely how you will be seeing the fonts most of the time, anyway.

Serif Web Safe Fonts

The art of Web design has many general guidelines that have taken hold as the Web has become more firmly rooted in the Web 2.0 setting. We have other articles that discuss when to use serif and sans serif fonts, so all I will say here is that, in general, serifs have generally been used mainly for headings. Below are the Web safe fonts that you can use for your serifs.

Sans Serif Web Safe Fonts

Sans serifs are typically used for the bulk of the content on a Web site.

Monospace Web Safe Fonts

Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts.

"Cursive" Web Safe Fonts

Currently, there aren't many Web safe cursive fonts. There is a "cursive" fallback, like sans-serif, serif, and monospace, but for the most part this is highly unused. There's some debate whether Comic Sans MS is a compatible match with the cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts, and others say it's the closest font to a normal "cursive"-like feel that you can currently get in a Web safe font.

In any case, cursive and Comic Sans MS are typically avoided. Personally, my opinion is that you should avoid both of these altogether.

In some cases, can I use other fonts?

Yes, there are some exceptions to the "always use Web safe fonts" rule. Sometimes due to circumstances out of your control, you simply must use a font that is not considered Web safe. A client, for example, may have a business that has used the same font for their company's signs, trademarks, and logos for over a century. Bringing a business like that to the Web without losing its long-standing integrity and brand recognition would likely be impossible with a Web safe font.

Or, perhaps you, as a designer, want to experiment with design and take things to the bleeding edge. I've always believed that true artistry and experimentation lies in the artist's ability to see beyond the normal scope and step away from standard practices. If you share this idea, then undoubtedly at some point you're going to look for ways to tinker with non-Web-safe fonts in your pages.

Below are the best ways to use non-Web-safe fonts in your page, and still have them render properly on most computers out there.

Provide downloads for your users

If you want to use a very specific font for your site, you can include a link to the font file on your page. In this way, visitors can download and install the font, then visit your page and see the font rendered properly with no real drawbacks.

This is a lot of work to expect the visitor to do, though, just to view your site as you want them to see it. The visitor doesn't usually want to do anything special just to view a Webpage. Requiring that someone go through the trouble of downloading and installing a font just to view your site is a great way to lose visitors. Odds are, most of your visitors won't even know where to begin installing the font, anyway.

There are also some potential legal issues if you take this route. If you are not the person who created the font, then most likely you do not have the legal rights to distribute it.

Because of these major flaws, this method is widely avoided.

Use images

When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page and it will look the same on a visitor's computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.

Whether you, as this site's visitor, are on a Mac, a Windows PC, in your favorite flavor of Linux, or even surfing on something else like a PDA or iPhone, the fonts above show up properly. This is true even if your PC doesn't have these fonts installed.

This is a great way to display any font you like for your logo, advertisements, or some of your headers. However, you cannot rely on images for actual content. A visitor cannot highlight text with the mouse, meaning that if they want to copy and paste your text somewhere (say, to send your business name to a friend), they can't do it. Also, text in images cannot be read by screen readers, which some handicapped people use to browse the web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or have their images blocked by a third party, like in some corporate offices that use a proxy server. Finally, search engines cannot properly read and catalogue text within images.

All in all, any text you use in your images should primarily serve as purposeful decoration. There is an alternative though: use an image replacement technique.

Image replacement techniques

There are techniques you can use in your CSS and (X)HTML that will let you use images in place of regular text while maintaining your site's accessibility and search engine friendliness. Notice the header above that reads "Image replacement techniques" is an image. It uses a font called Rockwell (which also came installed on my Macbook) and the font is green rather than the typical black we've been using.

This header utilizes an image replacement technique called Single Pixel <img> Replacement. It uses CSS and (X)HTML to display the image, but if someone has CSS turned off, the image will not show. To solve this problem, there is a hidden span element that will still neatly display the text "Image replacement techniques" for this header.

As for screen readers and other situations where images might not be accessible, there is a 1-pixel image with alt text that reads "Image replacement techniques." This way, we aren't harming accessibility and screen readers will still pick up the text as we intend it.

One of the only disadvantages to using this technique is that it adds some extraneous elements to your (X)HTML. They don't harm anything, but they do add more bulk to your work and the filesize of your document. It also makes it more difficult to follow when reading your site's code. Even still, it's a fantastic way to add rich typography to your site.

The astute reader may have already taken a peek at this section of the article to get a look at the CSS I used here. Please note that I had to modify the technique a bit for use on WPDFD since it already has pre-existing styles. If you want to try out this image replacement technique on your site, let me provide you the better code to work with.

I'll even give you he images to work with. First, download and save these. (Right-click and save.)

• spacer.gif — yes, I know the general feelings about spacer.gif. Let's keep it between us, just this once.
• irt.gif. This is the header image.

Second, add this code to your CSS file.

	#header {
	    width: 250px;
	    height: 30px;
	    background-image: url(irt.gif);
	    }
	#header span {
	    display: none;
	    }

Finally, implement the image replacement with this in your (X)HTML:

	<h3 id="header">
	    <img src="spacer.gif" alt="Image replacement techniques" />
	    <span>Image replacement techniques</span>
	</h3>

View it in a browser, and you should see the effect at work. You can find a list of image replacement techniques over at mezzoblue, which is where I was introduced to this particular image replacement technique.

Use sIFR

sIFR (Scalable Inman Flash Replacement) is perhaps the most popular way of using rich, beautiful fonts on your page. Indeed, you can see an example of it at the top of every WPDFD article. This article's title, "Knowing About Web Safe Fonts," is displayed for most users in a font called Interstate, which is not typically a Web safe font.

There are only a few steps to setting up sIFR, including a process called "font tuning" (don't worry, it's not tough), but it still generally takes even an experienced Web designer/developer roughly 10 minutes to set it up across a site that didn't previously use it.

It is easy to set up, however, and its benefits are many. It provides scalable, accessible text in a font of your choosing by dropping a Flash element with a transparent background in place of your original text. If a visitor to your site doesn't have javascript, Flash, or either installed, then your text is still displayed on your page in a CSS-styled, normal header.

Personally, sIFR is the method I would recommend if you want to really strengthen your site's typography. It's important to note, though, that sIFR should not be used for the main content of your site. Use it for headers, quotes, slogans, and other small, but significant, bits of text.

Currently, sIFR 2 is the standard, but sIFR 3 is in beta testing. When sIFR 3 is out of beta and I've had some time to play with it, I fully intend on covering this topic in more detail. In the meantime, if sIFR interests you but you don't want to go through all the setup, you might want to take a look at a tool that does it all for you.

So there you have it!

Well, you came upon this page and read through this article so you can stay informed on Web safe fonts, and now you know all the most important aspects of them. It's probably a good idea to bookmark this page so you can have a list of Web safe fonts handy at all times.

If you'd like more information on how big of an effect readable text has on your page, feel free to read a previous article of ours, Simple CSS: Creating More Readable Text.

A few things to keep in mind before we continue. It doesn't matter if a web design is bland and tasteless or grand and stunning; only designs that are functional and coherent are in this article. For the bland web designs, I didn't want to show designs that are obviously terrible. Instead, I wanted to show designs that serve as websites with some actual merit, but could stand some improvement on the visual, functional, or coding side of things. It's easy to find designs that are just completely bad, so I won't be covering them here. But, if you'd like to see some, there's a site that focuses on them.

Likewise, it's fairly easy to find designs that look beautiful. But this doesn't always mean they are functional or well-coded, or even have anything else going for them besides good looks. Instead of focusing on these purely beautiful sites, then, in this article I hope to showcase some that are pleasing visually and elegantly handled in both functionality and coding, and try to point out why they're grand.

Bland Web Designs

Click one of the designs below to view it. You'll find what's to like about the design, what's not to like, and some ways that particular design can be improved. If you want, you can start with the first one and view them in order.

View the bland designs in order »

Grand Web Designs

Here are some of the better designs out there. Thanks to everyone who submitted a design! If your design didn't make it here, don't worry; I'm still taking a look at all of them! If there are articles like this one in the future, I'll definitely be considering all the designs that didn't make it.

You can choose a design below, or you can start at the top of the list and work your way through them all.

View the grand designs in order »

Keeping Things in Line

As stated above, each of these designs has their own merit. The bland designs could stand to use some improvement, and the grand designs are great examples of good web design. I received quite a number of submissions from my request for designs and I saw some very good stuff in there.

There are a number of articles and sites out there that show you what bad design is, and others show you what good design is. Not many places deal with sites that are "just at the line," though, and I hope with this article I've helped demonstrate the differences between design that fits the bill and design that goes above and beyond.

What are reset stylesheets?

For those that don't know, a default reset stylesheet is a .css file that you use in your HTML documents. The file has CSS rules that effectively neutralize a browser's default rendering of HTML elements and positioning. It sets all margins and padding to 0 and removes text decoration, size, and weight from HTML tags that normally have these by default, like the header tags (h1 - h6), em, and strong.

To use a reset stylesheet, you link it in your header like any other stylesheet. Then, when you're writing your own CSS, you can choose exactly how each element is to look. You can turn the bold text back on for the headers, and set the exact amount of padding you want, for example. Set your font faces and spacing however you like. The idea behind this extra work is that when a browser is reset to this zeroed-out state, you can specify exactly what you want your elements to look like, and practically all browsers will have an easier time rendering your design as you intended it rather than how the browser's defaults want to display it. The reset stylesheet removes the browser's defaults, so you don't have to worry about them.

If you want to try out a reset stylesheet, you can get Eric Meyer's reset stylesheet here, or you can try out YUI's Reset.

Keep in mind: resetting in web design, like many other things, has its pluses and it has its minuses.

Reset stylesheet advantages

Resetting greatly helps a designer build designs that look most similar (sometimes, identical) cross-browsers.
Because a reset will "zero out" a browser's formatting of your HTML, you get total control in your own CSS to declare exactly what you want, without the worry of whether or not a specific browser is going to tamper with your design.

Reset stylesheets can be modified to suit your tastes. A reset doesn't always have to zero out absolutely everything. Maybe you're comfortable with how the different browsers handle some things, or maybe you have a different idea for what the baseline for most of your projects should be. You can modify a reset stylesheet to suit your needs and create a uniformity amongst your work that is unique to you.

An experienced designer who resets can save time. It's true that learning to use a reset stylesheet can take some time to get used to, but once you've learned the ins and outs of your reset, and have your own modifications that you've built over time, you can pop your reset and modifications into a design and just start designing.

Simply put: your HTML document becomes a blank canvas and you can work with whatever CSS you wish.

Reset stylesheet disadvantages

The "clean slate" effect takes some getting used to. This adds a bit of a learning curve to your web design, which you're probably already nice and familiar with. Most likely, you've built up your methods and workflow over time, and something as drastic as a reset stylesheet can slow you down again.

Because resetting takes everything down to basics, you have to re-add things that you might think should just be included, like bold text in headers. You'll also need to pay special attention to where exactly you want all your design elements to appear, and how. Things you used to let the browser take care of, you now have to code for. This leaves you writing more CSS than you probably want to, or even need to.

Even through all this extra work when using a reset stylesheet, the reset still doesn't guarantee that your designs will look identical in various browsers. In fact, in some extreme cases, your design may end up looking no different across browsers than if you hadn't used a reset stylesheet. YUI's reset stylesheet, for example, works best with just what they consider "Grade-A" browsers, and some parts of the reset don't affect browsers not on this list. Granted, the Grade A list is the list of browsers we all design for primarily, anyway.

Differing points of view on reset stylesheets

Eric Meyer released his stylesheet, and people picked it up then seemingly immediately split into groups: those who like it, those who hate it, those who don't use it but can see its usefulness, and those who use it if the job calls for it. Want to see some people who fall into these various groups?

Jonathan Snook is one who falls into the "those who don't use it but can see its usefulness" group. He posted on his site his thoughts on reset stylesheets, and why he doesn't use them. In a nutshell, he states that reset style sheets take things overboard, and while he doesn't necessarily have anything against them, they just don't suit his tastes. In his opinion, they require too much work to go about re-declaring things in your own CSS that should just be there, which reset style sheets take away.

Eric Meyer obviously falls into the "those who like it" group. After Jonathan's post above, Eric felt that people were getting the wrong idea about his thoughts on reset stylesheets, so he cleared things up on his site. He never intended reset stylesheets to become a "be-all, end-all" solution to cross-browser compatibility, and in fact, wants and actively encourages users you take his reset and modify to fit their tastes, or even not to use it at all if they don't want to.

Jens Meiert (grouped in "those who hate it") states pretty strongly Why Reset Style Sheets are Bad. Jens says that "novices should not use them, [and] experts would not use them," then goes on to list the reasons why (load time increases and accessibility concerns, among others) and lists alternatives to resetting.

If you'll read through the above links, you'll find that many of the comments on those sites are made by users who fall into the last category: "those who use it if the job calls for it."

What do I think?

When it comes to resetting in my web design, I fall somewhere between "don't use it but can see its usefulness" and "use it if the job calls for it." When I've played with it for my own local pet projects, I found it adding time to the project that I could have avoided. I can see, though, that if I spent some more time with it and made my own tweaks, which is what Eric intended with the idea of a reset sheet anyway, it might speed up my work in the future and help my designs. For right now, though, for anything serious, I won't use it, but I'll still recommend others give it a shot.

It's a tool.

Everyone has their own method of designing and they have their own tools. These tools include your text editor of choice, your operating system of choice, what graphics editors you use, palette generators if you choose to use them, and now, reset stylesheets. If you prefer to draw your design on paper, scan it into Photoshop and add color, then cut the design into divs, that's what you do. If you prefer to mark up the HTML of your site first, then tack on a reset stylesheet and build your CSS before adding your images, great. Everybody does things differently.

I think it's best to view a reset stylesheet as a tool in your toolbox. It's in mine, and while I'm not too good with that tool yet, I know some people can use it masterfully, while others choose not to use it at all. Either way, the craft is yours to do with what you wish, how you wish to do it. I don't think the inclusion or non-inclusion of a reset stylesheet says anything more than, "Hey, this designer used/didn't use a reset stylesheet."

I'd like to encourage users who are thinking of using a reset stylesheet to give it a shot in their next project. Maybe you'll like it, and if you don't, then no harm done; you can always just not use it.

As part of an upcoming article for WPDFD, I'm going to showcase and discuss some good-looking, functional, and well-coded designs. If your design can match any of these three primary descriptors, a screenshot of your design and a link to your site might make it into the article.

Just drop me a line at drodriguez@wpdfd.com with links to any of your designs that you think should make it. I'm not yet sure how many designs I will be displaying in the article, but if the article is well-received and readers seem to enjoy it, I'll probably do more articles like it later. So, even if you don't make it into the first article there's a chance you'll make it into a later one.

In addition, the best designs have a good chance of ending up on our Featured Designs page. Sweet!

Feel free to submit your design by e-mailing me directly.

For your design to make it into the first article, please submit it before Wednesday, May 7, 2008. Don't worry if you can't make it by that time, though; you can still submit your design after May 7. Hopefully, if there are more articles like this later, you'll have a chance at getting into one of those, and there's always a chance at ending up in the Featured Designs.

Here's looking forward to seeing all your beautiful works!

Typography in your Web design is undoubtedly important. For some time now, it's been taught and practiced that using a sans-serif font is the best choice for page content and large blocks of text in Web design, while serif fonts should be reserved for use in small doses or as the style of choice for your headings. WPDFD even has a very recent article that states this. Some other places you can find this teaching:

• About.com
• Urban Fonts
• Web Design Reference

In a nutshell, here are some of the key points in using sans-serif fonts.

• Sans-serif fonts look good at most sizes.
• They tend to have a more contemporary or business feel.
• Most operating systems render them neatly.
• Serif fonts tend to lose readability at smaller sizes.
• Serif fonts, when viewed on a Windows computer, may look terrible. This is because Windows has a ClearType ability that smoothes the edges of screen fonts, which would make the serif fonts look good, but many Windows computers don't have this option turned on by default.
• Sans-serif fonts, on the other hand, can look good with or without Windows' ClearType turned on.

Overall, designing with sans-serif fonts for your main content is a good general typography rule for your Web design. Many often-visited sites use sans-serif fonts for viewing on the web, and it certainly works well for them. Google is an obvious example. Also, Microsoft and Yahoo follow this convention. Especially prominent sites in our own field, like A List Apart use it to very good effect. And if you'll take a quick look around, you'll notice WPDFD sticks mainly to sans-serif fonts, as well.

But. (You knew that was coming, didn't you?)

I fired up my RSS reader recently and came across a fairly attractive page with an entry about designing with type characters. This particular page doesn't touch directly on using serifs in Web design, but I found it easy to read.

It was also fairly refreshing. Seeing so many sans-serif fonts used in only so many ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm to serif fonts when you seem them executed well in Web design.

That same page above also has links to a few other pages that use serif fonts well. For your convenience, I'll link them here, too, and include my thoughts:

• Twisted Intellect
  I like this page. It reads well and it's a very elegant design. The typography here is very nice.
• The 3rd SEED Conference
  While Twisted Intellect uses serif fonts, it doesn't use them for lots of content. The 3rd SEED Conference does exactly the opposite: the entire design is serif fonts; no images. It's just layout, placement, and typography. This is executed beautifully and I really like what's been done here.

There are some other sites I've come across while just browsing leisurely, too, that caught my eye with their use of serifs.

• Jens Meiert: Why Reset Style Sheets are Bad
  This is a good-looking, minimalistic blog that uses serif fonts to good effect. And hey, the page even touches on an interesting topic.
• Fun With Fonts
  This is not only a cute short story about a robot; it's also a good use of typography. The serif font here accomplishes its job very well.

The examples of good-looking pages above were all delightful to look at and to read. As opposed to sans-serif fonts, it seems that serif fonts do take a bit more skill for a Web designer to wield effectively, but the payoffs can be quite impressive.

Things to keep in mind

From what I can see, there are numerous advantages and disadvantages to using a serif font.

Benefits of using a serif font:

• Thanks to the vast majority of web sites using sans-serif fonts, using a serif font can lend your page a refreshing, personal, warmer, and more visually attractive appeal. Any or all of these effects can be accomplished with the right styling.
• A page using serif fonts is different, and helps you stand out.
• Serif fonts tend to give a web designer more to "work with." Their shapes can range from rigid and stoic to elegant and understated.
• I think serif fonts benefit more from color and experimenting with color, though this is just personal opinion on this one.

Things to watch out for when designing with serif fonts:

• This is one of the biggest points against using a serif font, so pay close attention: Serif fonts, especially when italicized, usually look terrible in Windows! The ClearType preference must be turned on for the fonts to look nice, and many Windows users do not know where to turn ClearType on or what ClearType even is.
• Serif fonts lose readability at smaller font sizes. A medium to large font size works best.
• See here for an example of how serifs can break down and make the eye struggle at too small a size.
• Serif fonts tend not to have a "business" feel about them, so it's probably still best to avoid them when designing a commercial site. They lend themselves better to "personal" or "informative" content.

When you really look at the points against serif fonts, though, you can see that generally they break down into two main problems: readability in Windows and text size concerns. Both of these problems aren't as big a trouble as you might think.

For one, Internet Explorer 7, while not the best browser around, uses its own ClearType rendering, whether or not ClearType is turned on in a user's Windows settings. Most Windows users still use Internet Explorer to browse, so serifs for these users will seamlessly look as you, the designer, intend them. The widespread use of Internet Explorer 7 alone significantly reduces the concern for how serif fonts will look in Windows.

Secondly, if a user does use Firefox or another browser in Windows, your concern for how your serifs will look can drop a bit more. It's safe to think that most (or at least some) users who have another browser installed also have enough knowledge of Windows preferences that they'll have ClearType turned on, or have the knowledge of how to do so.

As far as text size is concerned: that's totally up to you. This is a non-concern as far as many Web designers consider it, since you are the designer and can choose to use a decent-sized serif font. This leads to a third point against serifs that is focused more on you than on technicality: serifs are a bit tougher to use in Web design than sans-serifs.

That's not a terribly large issue, though, because it's one that you can get around with your design. In fact, as is the case with the sites I've listed above, it may not even be something to "get around," but instead an intentional tool to work with in your design.

Keeping the "design" in Web design

I would like to see more modern Web designs using serif fonts for their content. They look really nice when used well, and it's a scary thought to think that we may be running into design clichés with the whole sans-serif-for-content "rule." The Web is a great canvas, and I hope designers can continue to do great and beautiful things with it, especially when those beautiful things step outside the lines and manage to remain functional.

A sample page

Let's begin with a small sample Webpage. You can view it here. This page uses a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the "content is king" category (and most sites do), especially if your content consists of articles or other long blocks of text, like a blog.

The thing to notice here is that the text does its job: it communicates a message and the user can walk away having consumed your content. But the text is the same across the whole page, with the exception of a color change in the small subheading below the header text and the positioning of it. Here's the CSS that's being used in the sample page.

body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

#container {
	margin: 15px auto;
	text-align: left;
	background-color: #D8CAA8;
	border: 1px solid #4B1E18;
	padding: 0px;
	width: 850px;
}

#header {
	height: 80px;
	border-bottom: 1px solid #284907;
	margin-bottom: 15px;
	padding: 15px;
}

#header h1 {
	position: relative;
	vertical-align: center;
	color: #382513;
	margin-bottom: -10px;
}

.subheading {
	color: #284907;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
}

#content {
	padding: 0 15px;
}

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	margin-top: 15px;
}

Choosing your fonts

To improve readability, we'll want to choose a font that looks good with the colors you've chosen and at the size you plan on making your text. Typically, a non-serif font is advisable for the main content, while headers benefit from the added noticeability of serif fonts. If you come from a print background, this may sound backward. Usually, in the print world, serifs are preferred for blocks of text because the serifs help the eye distinguish each line. However, modern operating systems have options to smooth the edges of screen fonts automatically, so non-serif fonts come out looking better as main content and serif fonts look good in small doses.

With this in mind, I'm going to use one of my favorite lines when it comes to CSS and fonts:

font-family: Arial, Helvetica, sans-serif;

These fonts are some of the safest you can use in your design, and if cross-browser compatibility is a concern, memorize them. They're good to use on their own, or you can use them as a starting point for your non-serif text. In this case, for simplicity's sake, I'm going to stick with just these three for the content. The body section of the CSS now looks like this:

body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

And with that small change, the overall readability of the page has changed slightly for the better: see for yourself.

The slight change is good, but all of the font is still the same family and this creates a bad sort of uniformity. We want some distinction going on here, so let's set our headings and subheading apart from the rest of the content. We'll ignore the h1 at the very top for a bit, since we'll want to do something a little different with that in a second.

For the subheading and the heading in the content, I'll be using a serif font. Just like above, this next line is probably one of my favorites:

font-family: Georgia, "Times New Roman", Times, serif;

Again, these are some of the safest fonts you can use in Web Design, even if it's just for a starting point and you plan to expand your typography a bit later. Reserve this line for headers and other places where it would look good in small doses; the eye has a tougher time reading serif fonts on a screen than non-serif fonts so whole blocks of serif text can be jarring.

So now, our subheading class looks like this:

.subheading {
	color: #284907;
	font-family: Georgia, "Times New Roman", Times, serif;
}

And we need to create a new rule for h2 tags in the content section. We do so like this:

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
}

Alright, now the header information is more separated from the content, which is good. Take a look here.

Now, what about that h1 header we have at the top of the page? We're going to make it larger and give it less contrast to its background. This is so that users will know what site they're on, but won't be distracted by the header.

We'll do this with this code:

color: #6B5846;
font-size: 48px;

And the full header h1 rule now reads:

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
}

You can view the modified header here.

Now we turn our attention toward the sidebar and footer. The text in the these places is the same as the body text in main content area. The sidebar and footer typically play secondary roles, so we'll give them smaller text and a different font family with a single font rule:

font: 12px Verdana;

Now, our sidebar and footer divs have the following CSS:

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	font: 12px Verdana;
	margin-top: 15px;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	color: #5A4735;
}

Right now, the content text feels a bit overwhelming. We'll reduce its size with this:

font-size: 15px;

And we'll put it in the content rule, so now it reads:

#content {
	padding: 0 15px;
	font-size: 15px;
}

And now we have our fifth iteration of the CMRT page. We've taken some good steps in making sure the different sections of our site each have their own look and feel while still feeling unified. Now, we can take it a step further with the line-height property.

line-height — Be good to your visitors!

Your visitors are there to see whatever content you have up on your site. They've come to see you and they're your guests! Treat them well. You don't want to strain their eyes when they view your page. Use line-height to make your text more readable. Adding more line height to your text increases the amount of space between each line, and it helps the eye make that jump as it moves down your content.

We'll give the content div a line height of 160%, which basically gives it 60% more line height than it normally has, based on font size. This is a decent amount of line height and gives the text some room to breathe. For the sidebar, since the text is smaller, we'll only give it a line height of 140%. So, now our content and sidebar CSS are as follows:

#content {
	padding: 0 15px;
	font-size: 15px;
	line-height: 160%;
}
	
#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	line-height: 140%;
	color: #5A4735;
}

And with this, the text takes on a much more pleasant look. See here. The eyes don't have to work as hard to read the text now, so it's easier for your visitors to consume your content.

Adjusting letter spacing

There are only a couple of places where letter spacing comes into play with this page, but it too can play a part in increasing your site's readability and help make each element on the page more distinct. Headers and headings are usually good candidates for letter spacing. From a design point of view, you can use letter spacing on your header text to add some improved visuals to your page, like we're going to do in the header div with this:

letter-spacing: 20px;

This increases the space between the letters of your text by 20px. 20px is a big number for ordinary text, but for the header at the top of the page, which is just 4 letters, it helps it stretch to be just about as wide as the subheading beneath it, giving it more of a header feel.

For the headings (the h2 tags) in the content of the page, we're going to increase the letter spacing by just 2px. This will lend the headings a more prominent feel and separate them further from the text, and the adjustment is minor enough that it will not distract from reading:

letter-spacing: 2px;

So our header's h1 CSS and our content's h2 CSS now look like this:

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
	letter-spacing: 20px;
}

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: 2px;
}

You can see what it all looks like when done right here.

Expanding on this CSS

There are a lot of different ways you can apply these properties, too. For the design of the page I purposely used a simple, rather unintuitive design so I could focus on the text as it changed during the above steps, but applying this kind of CSS to a much more vibrant and elegant design can drastically improve its effect on your visitors. I don't intend to "pretty up" the CMRT sample page, and if I do, it will be for a totally separate article, but if you'd like to take a crack at making it look prettier while preserving the font and text adjustments, hit me up and we'll talk about it.

Stay tuned for more of the Simple CSS series!

Original design; strict, valid XHTML; top-level page:

Original design; strict, valid XHTML; interior page:

My project was to take four programs: CoffeeCup Visual Site Designer, Microsoft Expression Web, Adobe Dreamweaver, and Microsoft Frontpage 2003 and attempt to recreate the two designs above. Here's the catch: I could only use the WYSIWYG (what you see is what you get) features of each program. I could not edit the code directly at all.

Why do this?

I went to this year's South by Southwest Interactive Festival and attended a panel there titled, "Does Tomorrow's World Need Designers?" The entire purpose behind the panel was to get some meta thinking going on. The focus and general idea was that in the (possibly near) future, individuals would have the tools to easily create and "design" unique visuals for all things — Websites, shoes, cars, you name it — without the need of a professional designer. It was even brought up that in a worst-case scenario, even artificial intelligence could get so advanced that it would "learn" design and create things like unique, appealing Websites on the fly.

I'm not so sure about that last part. But the part about the everyday Joe having the tools he needs to design his site without the skills and knowledge of a designer (that is to say, without knowing HTML, CSS, or having the trained eye of someone who has been working with the Web for years and has seen its trends) interested me. So, arming myself with a series of the most popular WYSIWYG editors, I set out to see how close to this reality we have come.

First up: Frontpage 2003

I went into this application knowing full well that this thing is old. Old though it may be, it's still in good circulation and still one of the most-used programs for butchering the Web with bloated code and table-based layouts building Websites.

Overall, building the design in WYSIWYG-only mode with Frontpage was a clunky pain in the rear. I was forced to draw table layout cells and "style" them with Microsoft Office-style tools, like, "Format Cell..." and "Cell Properties." It was pretty clunky is all I can say, and many times, the cells didn't want to stay where I put them. When you add a new layout cell, all the others try to guess where they're supposed to go in relation, leaving you to manually drag them back to their intended spots, or using the annoying eraser tool (which sometimes erases in the right spots, and sometimes doesn't) to erase borders and cells that the layout added on its own when you added your intended cell.

There were some things I simply couldn't do, like add the background image to the header, without manually coding. So the background had to stay out. In the end though, the product came out looking pretty neat in the designer:

Frontpage 2003, in the design view:

Unfortunately, though, in a Web browser, the design didn't look quite the same:

Frontpage 2003, top-level page, viewed in a real browser (Firefox 2):

The interior page design came pretty close, though:

Frontpage 2003, interior page, viewed in a real browser (Firefox 2):

Frontpage 2003 Pros:

• Lots and lots of features
• Decent help system

Frontpage 2003 Cons:

• Way outdated software
• Still prefers to use tables for layout
• Lots of features, but most you will never use
• The sheer number of features thrown at you can be overwhelming
• Not newbie friendly
• Not veteran friendly
• Barely intermediate friendly
• A page can look one way in the design view, but drastically different in production, and because the design view looks fine, how are you supposed to fix it?

And in this corner: Adobe Dreamweaver CS3! (Mac version)

I knew Frontpage would be a nightmare, which is why I decided to work with it first. I didn't really know what to expect with Dreamweaver. I'd heard good things; I'd heard bad things.

I have to say, it was a nice change of pace from Frontpage. Drawing a layout in a similar manner as I did in Frontpage was much easier, because I could actually use divs instead of tables for the layout. The easiest way to do it was to use the AP (absolutely positioned) divs rather than the normal divs, because to get the most out of a non-AP divs I'd have to do some manual coding.

Drawing the layout was a snap. I drew it up in matter of seconds, and it only took a few minutes to tweak it so the positions were nearly pixel-perfect. You can select a div and move it pixel-by-pixel with the arrow keys on your keyboard, so that was nice. I then filled each div with the content I wanted before I styled the divs.

This is where things got a little clunky. There are very few WYSIWYG tools for adding background colors, changing text (except the size and face), adding margins/padding, aligning a background image, etc. I searched for quite a while for ways to style my page without having to type my own CSS, but it was futile. Eventually I broke down and used the "CSS" button, which seemed to be the only way to style these divs to the point that they would be able to mimic the original design I was working on. The CSS button brought up a semi-intuitive dialogue that let me add some styling to the selected object, and when I was done, the style went over to the pane on the right side of the window.

It was in this little pane that I did almost all of my styling, using almost hand-coded CSS. I say "almost" because there are drop-down boxes that let you choose from a list of elements, like "body," "h1," "a," "a:hover," etc. Since I was not actually in the raw HTML file and typing my styles manually, I figured this was something that could "squeak by" as WYSIWYG. Though in reality, someone who didn't know CSS would have a hard time building an attractively modern site this way.

Having said that, I do think Dreamweaver CS3 is a great program in a professional sense. If I was not limited by this project to just the WYSIWYG mode and could actually use the code editor, I can see Dreamweaver being pretty useful to those who like professional applications for this sort of thing. (I still personally prefer a text editor and a local version of Apache/PHP/MySQL). Though, it is a little overly-technical; the wording for some of the options and the methods of styling they use could be more intuitive and streamlined.

In the end, this is what the site looked like in Dreamweaver's design view:

Dreamweaver CS3, top-level page, in designer view:

And here's what the end result looks like in a browser:

Dreamweaver CS3, top-level page, in a browser (Firefox 2):

Dreamweaver CS3, interior page, in a browser (Firefox 2):

Notice in the top-level page how Dreamweaver had a bit of trouble converting some of the symbols when text was pasted into it. All in all, though, the end result was pleasing and it came close to the original design. Unfortunately, though, I can't say that Dreamweaver CS3 is a tool to quickly-and-easily build a site if you have little knowledge of CSS.

Dreamweaver CS3 Pros:

• Can do some advanced things with the visual editor if you know the CSS
• Adding basic CSS properties to divs with a CSS button is fast on creation
• Drawing a layout with AP divs is a good quick start

Dreamweaver CS3 Cons:

• Not very newbie friendly
• Minimal styling can be done without knowledge of CSS
• Managing your styles and divs can be a pain once you've already created them
• Many features and tools are in illogical places, forcing you to hunt around for them
• You need to know HTML and CSS if you plan to just jump in and use the program; there are no tools for beginners

Ah, Expression Web. Let's see what you've got.

Microsoft's successor to the very dated Frontpage next took the stage. Here's how it went down.

I was presented with Expression Web's interface and, while there was definitely a lot going on there, it was organized pretty well. Just scanning the interface with my eyes, I almost immediately saw the <div> tag just sitting there on the right side of the window; in a neat little pane. Knowing that I needed five divs for the site, and seeing how much time I had to send tweaking the position and styles in Dreamweaver when I used absolutely-positioned divs, I double-clicked the <div> tag five times. Five divs were dropped into my design window, indicated by a small "div" tab and a dotted outline, one on top of the other in block format.

Inside each div I could type and edit text or add images/tables/lists/whatever, as if each div was its own little Word document, using all the familiar Microsoft Word tools. This made adding the divs and their contents easy. So in just a few minutes, I had five divs on my page in blocks, all filled with all their content in 12-point Times New Roman font. Now came the hard part: styling everything. If this was going to be anything like the other WYSIWYG programs I've used (see above), this would be an exercise in stumbling about aimlessly until I found what I needed.

Thankfully, Expression Web is not those other programs. I noticed a “New Style” link on the right side of Expression Web’s window. I clicked it. A dialogue popped up with a menu on the left side with the most commonly-used CSS modifications. Sections like “Box” for the box model (padding and margins), “Layout” for positioning and floating, “List” (for lists when you want to style them; I didn’t make much use of this but it made it easy to change the bullet type when I needed to, and I could see it being easy to create a floated-list navbar with this), and others like “Background,” “Font,” and so on. This dialogue was pretty intuitive, and as long as you know the basics of CSS, you can stumble around in it as an intermediate user and accomplish what you’re looking for. I was able to use this dialogue to assign backgrounds, margins and padding, floating, and positioning to all my divs, because there’s a neat little checkmark at the top of the dialogue that says “Apply to the selected page object.” So if you select an entire div, it gets the CSS. Select just a single word or li element, and only that gets the style. And I didn't have to hand-code a bit of it.

As I added styles to all my divs, they jumped around the page to fit in their proper places. Things (like the footer) that were set to “clear: both” (via the designer mode) jumped to the bottom of the page and filled the entire width of the window, as intended. Text that should wrap wrapped in all the right places; Expression Web handled it pretty well.

At this point, my page was essentially done. I just needed to make a few tweaks to the page. This is where things started to get a little more difficult. Intuitively, I would be able to select any of my divs or other elements within those divs and right-click it, then edit the CSS in the same dialogue I created it in. Instead, when you try something like this, Expression Web throws you into Split view, showing you the raw HTML/CSS of the page in a top pane and your design view in the bottom pane. This was jarring; I didn’t want to edit the code (that wasn’t the point of my project), I wanted to change the CSS in the designer.

It turns out there’s a “Manage Styles” pane on the right side that has a list of all the styles you’ve created. If you mouseover any element on your page, it tells you what style it is using. You then find that style in the Styles manager, right-click it, and then click Modify Style. I think “Edit Style” would have been better wording, and secondly, finding this feature was jarring. Everything had gone so smoothly up until that point.

In any case, using Modify Style brought up that same dialogue and making tweaks was simple enough. However, I needed to make several tweaks (I wanted to go back to some divs and add a bottom border; I also wanted to go back to a couple of the lists and apply custom bullet images; plus, I wanted to change the link colors in only one div). Making several tweaks was too time-consuming, because for each tweak, I had to mouseover the element I wanted to change, find out what style name Expression Web had given it, and then go into the Styles Manager, right-click the style, and click Modify Style, then click Apply/OK before the tweak was done. When you need to make several tweaks, this is not the most intuitive way.

After making all the necessary tweaks, the page came out almost exactly as I wanted it in the designer.

Expression Web, top-level page, in designer view:

And the results in a browser were good too.

Expression Web, top-level page, in a browser (Firefox 2):

Expression Web, interior page, in a browser (Firefox 2):

Expression Web pros:

• If you know a little about HTML/CSS, you can jump right in.
• Easy to get the layout of the page set up with several divs.
• Great styles dialogue to help you style a whole page or just an individual object.
• Just about everything was self-explanatory.
• Easy to scan the program with your eye to find the tool you need.
• Each div you create feels like a mini Word document, with all the familiar text formatting tools.
• Easiest software for someone with a little knowledge of HTML/CSS to just pick up and run with.
• Pages created in this software looked practically perfect in the major browsers I tested them in (IE7, Firefox 2, Safari, Webkit, Opera).
• Of all the programs, Expression Web and Visual Site Designer came the closest to reproducing the subject page exactly. (More on VSD in a bit).

Expression Web cons:

• Making minor tweaks is quick... if you want to make one minor tweak. You have to follow a series of steps to change some of the smallest things, and if you want to change a lot of little things it takes more time than it should.
• The right-click menu is semi-useful in design view, but an "Edit Style" option would do wonders for this program, making it run smooth as silk instead of just "really well."
• Great program; a bit of a steep price. Not good for complete beginners.

Truly WYSIWYG: Visual Site Designer

I've already stated it above: Expression Web and Visual Site Designer came the closest to exactly reproducing the subject page exactly. But how does Visual Site Designer perform?

If I may express the answer in one word: "really well." (Okay, two words.) Upon opening the program, I'm presented with three options: New Website, Open Website, and Use Template. Tempted as I was to browse the templates, this was not my goal. I clicked New Website, and I got a small dialogue asking me for the basics of my design. Title, height, width, background color, and link/visited link colors. After filling out these settings, I clicked OK and the designer view popped up. A blank white screen with tools on the left side and along the top of the window.

It only took a quick moment to familiarize myself with the tools that were there, and it was easy to tell what each tool did at a glance thanks for the colorful icons. Any tools that weren't labeled directly (like the Page, Fill, Effects, Link, and Styles tools) had mouseover tooltips and a handy dialogue explaining what they do when you use them the first few times that you can disable via a "do not display this dialogue next time" checkbox.

There were no divs, no HTML tags, no CSS styles; the entire designer is truly WYSIWYG. Creating the layout of my page was braindead simple: pick the rectangle shape tool, give it a color, draw. I drew the header, sidebars, and footer in a matter of seconds, and was able to adjust their shapes, colors, and sizes in the object window. The object window was a neat little feature; it floats as a separate little window, and it changes to depict the settings of whatever tool you have selected. This way, you never have to look around for your tool settings; they're always in the object window so you always know where to look.

After drawing the layout of the page, it was time to add the text. Clicking the text tool changed the object window to let me change the font family and size, and I could see that there were other options that would let me do things like add drop shadows or even rotate text if I wanted to. Unfortunately, this design did not call for these fun-looking features so I had to dismiss them for now and just type normal, colored text.

When I clicked on my page with the text tool, a red text box popped up with a little handle on top that I could use to drag it, and left/right arrows on either side of the box so I could widen/shrink it. I stretched the box to a decent size and typed in the content, then highlighted the text and formatted it with the correct colors/sizes in the object window. Repeating this process for each section of my page, I was done with the page content in minutes.

Similarly, dropping in images was a breeze. Click the image tool, browse for the image, click OK. Now you can freely drag it anywhere on your page. Again, in the object tool, I saw more features than I required, like adding a glow/shadow or shaping the image (rounded corners, pentagon, circle, etc.), but again my design did not call for this so I had to play with those later.

By the time I had my page laid out the whole thing was 95% done, I had lots of objects on the page. Sidebars, a header, a footer, a background image for the header, a few textboxes, a couple of images... none of these by themselves was any problem at all to create. However, when I needed to go back and change something, I found myself having to watch carefully where I clicked my mouse. There's no way to "lock" objects in place in Visual Site Designer, so when I wanted to select the text in a sidebar, for example, I had to be careful to select the text instead of the sidebar, or else I might end up dragging the sidebar accidentally or worse, changing some of its attributes. This was not a major flaw, because there is a multi-step Undo in case you accidentally do something like this, but the entire operation in Visual Site Designer seemed designed to be fast and smooth, and for the most part, it was; but this little bit of technicality hindered the "carefree smooth design" feeling I got when using the software.

A really big time-saving feature in Visual Site Designer was its "copy page" function. When you click the "Add Page" button to create a second page (which I needed to do for the interior design), I was given the option to copy an existing page. I copied the homepage, and it created an exact replica of the page I had just created. Now, all I had to do was adjust the left sidebar and remove the sidebar on the right, then change the content and I was done with the second page. If I wanted to create more pages, I would definitely be using the copy page function to keep my design intact and keep all pages uniform.

I never once had to type a line of HTML or CSS to do this. In fact, I couldn't: Visual Site Designer is completely WYSIWYG; you don't get direct access to the page's HTML/CSS. Visual Site Designer handles it all for you in the background. However, this is not to say that if you want to use HTML you can't; Visual Site Designer has an HTML Tool that will let you insert an HTML object. Basically, this creates a div of any size/shape/position you want, and you can insert hand-written HTML, CSS, Javascripts, whatever. Unfortunately, for the sake of this project, I could not use that.

So, in the end, here's what the page looked like in Visual Site Designer:

Visual Site Designer, top-level page, in design view:

And in a browser, the designs look pretty close to the original page.

Visual Site Designer, top-level page, in a browser (Firefox 2):

Visual Site Designer, interior page, in a browser (Firefox 2):

Visual Site Designer pros:

• Really cost-effective. A mere $49.00 USD, compared to $399 (Dreamweaver), $299 (Expression Web) or $129 (Frontpage, through Amazon.com).
• Really easy to use.
• Of all the programs, Visual Site Designer and Expression Web came the closest to reproducing the page exactly.
• Truly WYSIWYG; no need to know HTML or CSS. Extremely beginner friendly.
• Fastest of all the Web editors to complete the job.
• Built-in one-click upload.
• Manages all your files for you.
• All the tools feel unified; they share the same properties window so you always know where to look to change settings.
• Many shapes to choose from, and placeable guides with X Y coordinates make it easy to design a layout.
• Creating new pages for your site while keeping the same layout is easy; just create a new page, and select the "copy page" function to copy an already-existing page and just change the content.

Visual Site Designer cons:

• No code view; you can't edit the HTML directly (however, there is an HTML Tool that will let you use advanced HTML and scripts on your page in an object-based manner).
• Cannot edit pages that already exist. VSD can only create new sites, or edit sites it created.
• Click carefully; you don't want to accidentally move some of your page elements if you have multiple stacked on top of each other. This isn't a major flaw because you can always Undo, but if you're in a hurry you could accidentally select an object you don't want selected.

So, does tomorrow's world need designers?

Heck yes. In a nutshell, I wouldn't recommend Frontpage 2003 to anybody for any purpose, to be perfectly honest. Dreamweaver CS3, though, could be a good application for serious web development for those who already know the technical side of things, and I really think it could be good for web developers in a professional environment, but because of its high "techy-ness," it's definitely not a tool that could let the average Joe create a "Web 2.0" site.

Expression Web and Visual Site Designer, though, are steps in the right direction if providing easy-to-use WYSIWYG tools is the future of Web design. In a reality check, though, in most of these programs, I could not have created anything near the designs I did above if I wasn't already familiar with Web design. If I was to challenge the average Joe with the project above (to exactly copy an already-existing design from scratch), he'd have to sit down and do some research first, and I imagine it's reasonable to think it would take him days to accomplish the task.

The only exception is Visual Site Designer, in which you can basically just draw your page. But even with software this intuitive and quick-to-master, the tools are no replacement for knowledge and skill in the field of design.

Expression Web and Visual Site Designer are both Grade A tools, but professional and even hobbyist Web designers are a long way off from being replaced by such tools, though beginners, intermediates, and veterans can find something to like in both of those programs.

The ominous, impending uprising of maniacal artificial intelligence that designs Websites, on the other hand, may be something to worry about...

For many front-end developers, HTML remains mostly an excuse. It is viewed as a language of hooks, constructed for adding javascript, css and other enhancements to web documents. In recent events, this kick-started a small semantics debate again, where people were reminded about the semantic value of HTML. A reminder voiced by raging standardista, still fired up from previously fought debates and awareness battles.

HTML != Semantics

Everyone with a passion for front-end development will recognize the importance of the standardista when it comes to HTML awareness. Yet this doesn't mean that their methods should go totally uncriticized. With all the attention they raised for the semantic function of HTML, some people have started to see HTML as a purely semantic language. Which it is not.

Evidence of this can be seen in the "divitis" issue that followed the early rise of web standards. When front-end developers were urged to switch from table-based layouts to div-based layouts, some took the advice a bit too literally. They turned everything into divs, ignoring the semantic purpose of the elements at hand. This triggered an ever bigger reaction of the standardistas and led to demonization of the div element. Divitis was considered the AIDS of front-end development and using divs became almost taboo. Only when absolutely necessary were they allowed.

Enter Minimal HTML

The fear of purely structural elements (divs and spans) branched off a new movement. A group of people that didn't believe in the absolute need for structural elements and tried to build pages with purely semantic elements as much as possible. They banished extra divs when used for styling but forgot about the original function of the div and span along the way. In the end, they made HTML a poorer language than it was supposed to be.

Consider the following two basic page layouts. A simple layout consisting of four main areas. The context area gives contextual information on the main content area. A layout like this (not considering any graphical design enhancements) could easily be made with four divs. This is setup A, preferred by minimalists. Setup B shows a situation where the layout is build using five divs. Take a moment to think which setup you prefer, purely on a structural basis.

HTML = Semantics + Structure

HTML is more than just semantics, it's also about structuring your document. The main difference between both type of elements is that semantic elements explain the purpose of an element, while structural elements explain the relation of its content to the content of other elements within a document.

In setup A we have four separate divs, structurally all on the same level. This tells us all divs are related in the same way, only the order of appearance will indicate some sort of relationship. In setup B the main content and context area are grouped in a content div. This is an indication that the relation between context and main content is a lot stronger or at least different than the relation to the other element. And on the other hand, the content area shares a similar relation with header and footer.

Structurally, setup B not only holds more information about the relationship between the separate areas, it's also more correct. This makes it the better implementation of the two. The extra div used to group main content and context is not useless, but adds useful meaning to the document.

Enter Minimalitis

Minimalitis is the disease formed by the aversion of divitis, and is equally dangerous as divitis. People who suffer from minimalitis will write badly structured documents and will often incorrectly use (or simply abuse) elements to avoid the use of divs (often they use a p tag) and spans (em, strong and even the b tag are popular). Another sign is the merge of block and inline elements on the same level. While this is not exactly illegal, it's a serious warning of possible minimalitis and bad structuring.

And yet, the cure for this disease is simple. Reinstate the power of the div and span, but use it for its intended purpose. Use divs and spans to bring structure to your document. Contain elements that share a similar relationship within the same level. Use it to separate elements from others that share a different relationship. And use them together with a meaningful class or id whenever you don't have a valid semantic element to describe your content.

The Future of Structuring

Luckily, the people working on HTML5 have understood this and added a couple of extra structural elements to the language. Instead of leaving us with a simple div and span, two elements with a simple structural meaning, they added elements like footer, header, article, section and aside to help us better define structures in HTML documents.

The fun thing about these elements is that they not only hold structural meaning but also semantic meaning. Instead of simply structuring a document they hint at the relationship elements bear to other elements or the page in general. Tags like footer and header not only contain a section of a document, they also hint at the function of the contained elements and the relation to the other elements on the page.

Hopefully this will give the opportunity to those suffering from divitis or minimalitis to write better structured code while keeping the document as semantic as possible. Until then, just know that a div has more power than simply adding a rounded corner or border to the graphical design. Structural elements are there to reveal relations between elements, a sometimes forgotten power of HTML.

Personal Promo

Niels Matthijs spends his spare time combining the luxury life of having no kids and a wonderful girlfriend with the agonizing pressure of blogging under his Onderhond monicker. As a front-end developer he is raised and nurtured at Internet Architects, a Belgian company investing a lot of time in making the web a more accessible and more pleasant place.

7. A Usable Page Weight

Ironically I used to hate the Web. I started with dial-up and it was a miserable experience. Moreover, back in the day it seemed that every site I visited required some sort of plugin or add-on to make it work. Frankly, the Internet was a pain in the butt. This has changed on some levels. The need for plugins or add-ons is greatly reduced what with operating systems pre-loaded with all the necessary support. But some people still have dial-up. For the last six years I’ve had cable broadband and it’s a dream. I’m spoiled. And it’s very easy to forget the less fortunate and go hog wild, loading my pages with heavy graphics. It’s easy to forget how doing this will make for a less-than-happy experience to traditional dial-up and distant DSL users. Gotta keep the weight down.

I’m not saying the Web isn’t a place for heavyweights, it is, but with due consideration. If you want to offer heavyweight graphics and whatnot, let visitors navigate to them, instead of offering them on the initial page load. And warn users if something big is coming up. It’s only fair to allow those who want to opt out the opportunity to do so.

I suggest aiming for an upper limit of 100kb per page of combined background and embedded images (this is testable). You can buy a lot for a 100kb. To get the most bang for the buck, reduce the over all number of images, optimize them exporting only flattened, compressed files, and please pre-size embedded images for their location (being sure to add the height and width attributes to the img element). I’ve seen thumbnail-sizes that were really 900kb monsters with styles off! That’s just wrong.

8. A Helpful Error Page

If you’ve ever been lost, it’s always nice to see some helpful soul willing to give directions (assuming you are willing to admit you’re lost). On the Web you can be that helpful soul. Not only, as mentioned in the last installment, can you offer a site map to proactively guide your visitors, you can offer a friendly, styled “404” error page (or pages if you want to cover more errors). Your error page should offer at the very minimum offer a link home, a navigation menu, and at least a link to the site map. If you want to be a really helpful soul, though, try combing most if not all your nav tools and putting them on one page. Make a perfect 404 page offering a site map on the page (easy with dynamic site maps), search, even contact info, and more.

This is not hard to do. Ask your Web host for starters. Specifically ask them about custom error pages since you’ll want to provide something useful and most default server error pages, even styled ones, aren’t really very helpful at all.

9. Good Headings

In the last installment I spoke of the importance of using the right mark-up for the purpose at hand. I mentioned headings but didn’t go into detail. That’s because headings are so important they, well… they deserve a heading of their own. The use of headings is logical, and styling them is wide open, just use your imagination.

What good are they? They offer section demarcation, semantics and ordering, beauty in the right hands, a search indexing benefit, greater accessibility, and even a navigation source for some users of assistive technologies like screen readers. What more incentive could you possibly need to act on this recommendation?

10. Jump Links Provided

You may have detected by my suggestions so far that I’m big on helping Website users. I feel that the easier my sites are to use, the better their experience will be. I want them to not only find the goods, being supported along the way as needed, passively and on demand if at all possible, but I want them to want to come back. So, one of my twelve is going to have to be offering skip or jump links. I find these are very helpful to everyone with exception to most of those who use a mouse or pointer — and that is a greater number of people than you may realize. A jump link affords users the opportunity to jump down the page to the content or navigation, by-pass redundant or lengthy sections, access help content, and jump back up the page if you consider a top link or back to menu link a jump link. I do. Some may argue that it’s a replication of browser behavior offering links like this, but I’ve not heard recently of record numbers of browser-savvy surfers if you know what I mean. Plus, they’re simply innocuously helpful.

One rule: If you’re going to offer jump links, it’s best to make them visible, but not always necessary. There are ways to hide jump links from view while still maintaining a high level of accessibility and usability to a very large percentage of users. Do note, however, that displaying them will increase that percentage to 100.

11. Focus Styles

I’m not a dedicated keyboard user, but I do use my keyboard a lot. It’s helpful at times, convenient at other times. It’s an option. Sometimes I use my keyboard on the Web, tabbing onto pages, bouncing around from link to link following the natural source order of the page. Sometimes, however, depending on the site, this can be difficult. I’ll be tabbing along, minding my own business, when all of a sudden, wham, I’m lost. I don’t know where I am on the page. The reason is invariably the developer of the site failed to offer one to the most simplistic of accommodations: link :focus. Probably due to simple ignorance. But I’m here to change that.

To offer link focus it involves nothing more than a simple style sheet entry, like this:

The a:active is for Internet Explorer, and to provide the when-activated styling on other graphical browsers. Obviously you can get more creative, but that above will help make your Web pages a lot more navigable to keyboard users and nobody will suffer a diminished experience.

12. Robots.txt File

You may be wondering why I included something so mundane as a robots.txt file in this line-up, but I feel it’s very helpful to have one. It provides instructions to honest indexing robots and spiders like the GoogleBot, telling them to stay out of certain directories you don’t really want them in anyway. Why have your bandwidth wasted needlessly?

Some people, I’ve heard, want to disable right-click on their sites thinking that they may somehow actually succeed in stopping people from copying their images (can’t be done), yet they don’t have a robots.txt file excluding their images directory. The latter would be far more worthwhile. It’s very easy to make one, there are even tools you can use to help you get the job done.

Is There More?

The short answer is, yes, of course. But if you satisfy all twelve items in this two-part article, you have done well. You’ll be offering a quality site that is a cut above many sites of the Web. And the benefits, you may find, will actually be noticeable, and perhaps even tangible. Happy coding.