Why Limit Media

Eight Rules for Effective Web Forms

If you’re look­ing to col­lect infor­ma­tion from your users, there isn’t a much eas­ier or more straight­for­ward method than a Web form. If designed well, Web forms pro­vide valu­able infor­ma­tion; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know.

All the exam­ples in this arti­cle were cre­ated with Cof­feeCup Web Form Builder.

1. Build Con­ser­v­a­tively and Design With a Purpose

Let’s face it: No one likes spend­ing a long time fill­ing out a form. Keep it short and sim­ple and elim­i­nate ele­ments that aren’t absolutely nec­es­sary or that don’t offer a tan­gi­ble ben­e­fit. Make sure every part of your form is pulling its weight, and your users will thank you.

The struc­ture of your form should serve just as much of a func­tional pur­pose as its ele­ments. When lay­ing out your form, keep in mind that, at least in the West­ern world, peo­ple read from top to bot­tom and left to right. They also often use the Tab key to move around the form. Your design should reflect this through intu­itive label­ing and nat­ural place­ment of ele­ments. And, of course, your form should never look scat­tered or hap­haz­ard — make sure every­thing is evenly spaced and neatly arranged.

Here are a few stan­dard form lay­outs that you should use as a start­ing point for more cre­ative designs:

Left-​​Aligned Labels With Ver­ti­cally Stacked Fields

This form fea­tures left-​​aligned labels with neatly ordered fields stacked on top of one another. This gives the eye an easy-​​to-​​follow path down the form, which is espe­cially help­ful if you’re ask­ing ques­tions users may not be famil­iar with. Because they’re able to read down the list of ques­tions with­out the visual inter­rup­tion of an input field, they’ll be able to con­cen­trate more on what you’re ask­ing. This lay­out does tend to make for longer form com­ple­tion times because of the amount of time it takes for the eye to move from the label to the input field.

Right-​​Aligned Labels With Ver­ti­cally Stacked Fields

Right-​​aligning your labels can help make them eas­ier to dis­tin­guish and quicker to read, and also elim­i­nates awk­ward spaces between labels and input fields. How­ever, this can be harder to read. It also looks jagged, which can be a bit unattractive.

Top-​​Aligned Labels

Top-​​aligned labels like these make for a form that’s quicker and eas­ier to fill out because the eye doesn’t have to move as far between the label and the input field. This type of lay­out also gives you the free­dom to place related fields next to each other, which can save space.

2. Tai­lor Your Form to the Situation

Every form you make should be tai­lored to the spe­cific sit­u­a­tion it addresses. When you’re plan­ning the design of your form, ask your­self the fol­low­ing ques­tions: What are you ask­ing? Why? What does your Web design look like with and with­out the form? Is the form some­thing users want to fill out, or is it some­thing they’re required to fill out? Your answers to these ques­tions should help dic­tate the lay­out and con­tent of your form.

3. Use What You Need

When decid­ing whether to add an ele­ment to your form, ask your­self if you could do with­out it. If the answer is “yes,” don’t use it.

One ele­ment that’s almost always unnec­es­sary is the Reset but­ton. These relics still make an appear­ance now and then, but they should be avoided. Think about it: When you want to change infor­ma­tion on a form, it doesn’t mat­ter if the field is already filled out or not, so why would you even need to erase all the infor­ma­tion? The only thing the Reset but­ton is good for is acci­den­tally clear­ing all the infor­ma­tion your user just entered and aggra­vat­ing them enough that they’ll go some­where else instead of tak­ing the effort to fill out the form again.

4. Use Short, Clean Descrip­tions When Necessary

You may need to explain why you are col­lect­ing cer­tain infor­ma­tion on your form, espe­cially when users are loathe to share it, like with phone num­bers or e-​​mail addresses. This not only helps reduce user con­fu­sion, but also ensures that the data is accu­rate and cor­rectly formatted.

Any descrip­tions and com­ments should be clean and con­cise. You may also want to for­mat them with dif­fer­ent col­ors, sizes, or styles to help set them apart. Just be sure not to overdo it — after all, you don’t want your descrip­tions to look tacky or drown out the rest of your form. This form, which asks for infor­ma­tion in order to pro­vide a quote for print­ing ser­vices, is a good exam­ple of a form that effec­tively uses descriptions:

5. Be the First to Communicate

Make sure the word­ing in your form is friendly and user ori­ented. Here’s a sim­ple trick for writ­ing con­ver­sa­tional copy: Pre­tend you’re actu­ally talk­ing with your user.

If you want to know someone’s name, you aren’t going to stare them in the eyes with a rigid expres­sion and demand, “Full name.” That would just be creepy. If you were look­ing to gar­ner a pos­i­tive response from this per­son, you would instead open with a smile and say, “Hi, what’s your name?”

Keep­ing this in mind, instead of prompt­ing your user with the label “Full Name,” try some­thing a lit­tle more per­son­able, like, “What’s your name?”

6. Divide the Form Into Bite-​​Sized Sections

Com­mu­ni­ca­tion involves the exchange of ideas in small, man­age­able sec­tions. You intro­duce your­self, and the other per­son does the same. You men­tion what you do for a liv­ing, and the other per­son has a com­ment or ques­tion. You remark back, or answer, and this prompts another response. In a good con­ver­sa­tion, the infor­ma­tion is a steady, back-​​and-​​forth flow.

A form, being another method of com­mu­ni­ca­tion, should be the same way. You may be ask­ing for quite a bit of infor­ma­tion, but that doesn’t mean you have to throw it all at the user in a huge block. Try using hor­i­zon­tal rules, col­ored bars, mean­ing­ful images, or head­ings that match the design of your site to sep­a­rate the infor­ma­tion into small, eas­ily under­stood chunks. If all else fails, spread your form out across mul­ti­ple pages and add a progress bar across the top so users know about how much they have left.

7. Include Mean­ing­ful Con­tex­tual Error Messages

Your error mes­sages should be help­ful and clear. Spec­ify in the mes­sage which field caused the error, and high­light the label and/​or the field itself. After all, no one likes hunt­ing through a form for an elu­sive field they over­looked the first time around.

8. Release the User

When the user clicks the Sub­mit but­ton, they think they’re done, and they’re ready to move on. They’re basi­cally say­ing, “Here’s the info you wanted. Talk to you later!”

In a real con­ver­sa­tion, you’d give them a wave, say, “Bye,” and walk off, or give them some other way of acknowl­edg­ing that the com­mu­ni­ca­tion is done. Your form should be no dif­fer­ent. Have your form pro­grammed so it sends the user to a cus­tom page that tells them some­thing like, “Thank you for your sub­mis­sion! You’ll be hear­ing from us shortly.” There should also be a link back to the main page of your Website.

And that’s it! Keep these rules in mind when design­ing your next Web form, and you may be sur­prised at the quan­tity and qual­ity of feed­back you receive as a result.

For more infor­ma­tion about Web Form Builder or to down­load the free trial, click here.

Posted in Uncategorized | Comments Off

Punctuationality (Part 2)

Part two of last week’s exam­i­na­tion of the per­son­al­ity of punc­tu­a­tion. Click here to read Part 1.

Em Dash and Hyphen

Em dashes and hyphens are sis­ters, and when­ever 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 sim­i­lar, but it’s obvi­ous — to them, at least — that they’re each com­pletely unique.

The em dash is the eldest. She’s taller than her sis­ter, more grace­ful, and a bit more aloof. She needs her space — specif­i­cally, one space on either side. Some peo­ple mis­in­ter­pret her atti­tude as snobby because of her near-​​encyclopedic knowl­edge of famous quotes. How­ever, since em dashes are used to indi­cate attri­bu­tion, (“The mass of men lead lives of quiet des­per­a­tion.” — Henry David Thoreau) she’ll demurely credit her knowl­edge to her job.

No, the real rea­son she’s dis­tant at times is that she’s inse­cure about her place in punc­tu­a­tion soci­ety. She has two main jobs, one as a sort of watered down paren­the­sis (see the third para­graph in this sec­tion), and one as a sort of watered down semi­colon (see the fourth para­graph in this sec­tion), and some­times she won­ders if she’s even nec­es­sary at all.

The hyphen doesn’t have this prob­lem. She’s the baby, and like most younger sib­lings, she’s a total ham — and a total copy­cat. Whereas em dashes link a phrase to the rest of a sen­tence, hyphens link words to other words. Far more social than her aloof older sis­ter, the hyphen doesn’t mind being right next to the words she links, and some­times within the word itself.

One of her favorite games is jump­ing around a phrase and see­ing how she can change the mean­ing. Take “three month old pup­pies,” for instance. The hyphen might jump between “month” and “old” — three month-​​old pup­pies — and then squeal over the idea of three pup­pies, each of them a month old. Then she might jump between “three” and “month” — three-​​month-​​old pup­pies — and squeal again over the idea of a num­ber of pup­pies, all three months old.

When­ever the hyphen plays this game, the em dash just smiles and pats her head.

Com­mas

We’re not done with the sib­ling metaphor yet. I want you to think back to mid­dle school, back when you thought you were the coolest per­son on the face of the earth. Yet noth­ing could shat­ter that illu­sion faster than when your obnox­ious kid brother showed up and revealed some embar­rass­ing detail — like the rock­et­ship footie paja­mas you wore to bed every night, or your huge crush on Daniel Radcliffe.

That’s what com­mas are: obnox­ious kid brothers.

Think about it. They’re always get­ting under­foot, muck­ing things up, slow­ing things down, and chang­ing what you meant to say. Need I remind you of that old punch line (also the title of a fab­u­lous gram­mar guide I rec­om­mend to every­one I meet), “Eats, shoots and leaves”?

The thing about younger sib­lings that no one ever wanted to admit was that they were much, much cuter than we were. And that made them use­ful. 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 hur­ri­cane lamp? Lit­tle Sis knows just how to break the news to her. She’s so cute that Gumma will prac­ti­cally be thank­ing her.

Com­mas, like lit­tle sib­lings, eat this stuff up. After all, the only rea­son they were con­stantly under­foot was because they actu­ally believed that you were the coolest per­son on the face of the earth. All they wanted was to be your faith­ful side­kick. So the next time you’re mulling over a sen­tence that looks a lit­tle comma-​​heavy, remem­ber that they’re only try­ing to help.

Excla­ma­tion Point

You’re throw­ing a party, and it’s dying fast. Every­one stands around awk­wardly, sip­ping beer from their red plas­tic cups, not talk­ing much, occa­sion­ally steal­ing glances at their wristwatches.

Just then, your excla­ma­tion point buddy shows up. He’s half drunk, dressed in noth­ing but a Speedo and an Amer­i­can flag, and wield­ing a bot­tle of Patron like ten­nis rac­quet. “Who wants to get this party started?!” he yells. Within a few min­utes, wall­flow­ers are doing keg stands in your bath­tub, there’s a heated beer pong tour­na­ment in your kitchen, Mardi Gras beads are fly­ing left and right, and a hip jam band has mate­ri­al­ized in your liv­ing room. The excla­ma­tion point beams. He’s done his job.

The trou­ble starts when he invites a few more of his friends. They trickle in one by one, until they out­num­ber your party guests, and then the real pan­de­mo­nium ensues. The jam band has turned into a thrash punk out­fit, and the mosh pit is crush­ing your fur­ni­ture. The beer pong tour­na­ment devolves into fight club — one guy punches another in the jaw and gets thrown through a wall for his trou­ble. Every­one who did a keg stand is vio­lently ill. But the excla­ma­tion points are just get­ting started. Just then, the house is bathed in flash­ing blue and white lights. “It’s the cops! Cheese it!” your excla­ma­tion point buddy yells, and every­one splits. You’re left with thou­sands of dol­lars worth of prop­erty dam­age and med­ical bills.

The point of this cau­tion­ary tale is that excla­ma­tion points are fun, but too many of them can land you in big trou­ble. Limit use of excla­ma­tion points to one per para­graph, oth­er­wise you run the risk of your punc­tu­a­tion speak­ing louder than your words.

Posted in Uncategorized | Comments Off

Punctuationality (Part 1)

It’s easy to resent punc­tu­a­tion. Its pur­pose is to clar­ify sen­tences, so why are the rules gov­ern­ing it so com­pli­cated? There are so many excep­tions, so many excep­tions to excep­tions — it’s enough to make you want forego punc­tu­a­tion altogether.

Well, back when it was alive and kick­ing, the Latin lan­guage did just that — and it didn’t stop there. Writ­ten Latin also omit­ted spaces between words or low­er­case letters.

It sounds kinda nice, doesn’t it? No more wor­ry­ing about whether that comma is in the right place, and on the flip side, no more embar­rass­ing urge to whip out a red pen and cor­rect restau­rant menus. What’s not to love?

A lot, it turns out. The result of all this gram­mat­i­cal sim­pli­fi­ca­tion looked a lit­tle some­thing like this:

GALLIAESTOMNISDIVISAINPARTESTRESQUARUMUNAMINCOLUNTBELGAEALIAMAQUITANITERTIAMQUIIPSORUM
LINGUACELTAENOSTRAGALLIAPPELLANTUR

You don’t need to be dis­cip­u­lae lin­gua Latina to under­stand how night­mar­ish that sen­tence is. Now let’s see how it looks when we apply our mod­ern gram­mat­i­cal conventions:

Gal­lia est omnis divisa in partes tres, quarum unam incol­unt Bel­gae, aliam Aqui­tani, ter­tiam qui ipso­rum lin­gua Celtae, nos­tra Galli appellantur.

Behold the power of punc­tu­a­tion! Inter­word spac­ing, com­mas, and a period have help­fully trans­formed a ter­ri­fy­ing sentence-​​monster into five easy-​​to-​​digest compartments.

Like it or not, punc­tu­a­tion is nec­es­sary. So what to do about all those hard-​​to-​​remember rules? Well, the trick is to make the same allowances for punc­tu­a­tion that we do for peo­ple. We all bla­tantly con­tra­dict our­selves in one way or another. It’s these lit­tle excep­tions to the rules we set for our­selves that make us that much more inter­est­ing and unique. Punc­tu­a­tion is no dif­fer­ent. Rather than get­ting frus­trated by all the excep­tions to the rules, try embrac­ing “punc­tu­a­tion­al­ity” — the per­son­al­ity of punctuation.

Nat­u­rally, a com­pre­hen­sive guide to all the avail­able punc­tu­a­tion in the Eng­lish lan­guage is a bit beyond the scope of a sin­gle arti­cle, so instead I’ll con­cen­trate on the styl­is­tic uses of a few com­monly used marks over the course of two articles.

Ellip­sis

I like to think of ellipses as indus­tri­ous work­ers who don’t par­tic­u­larly enjoy what they do for a liv­ing, but take pride in doing a good job. But when they get home, they like to unwind Michael Phelps style — and I’m not talk­ing about swim­ming laps.

Most ellipses find work in the scripts for cheesy day­time soap operas. They indi­cate a pause, usu­ally weighted, punc­tu­ated with a raised eye­brow or a look of des­per­ate long­ing. These pauses speak melo­dra­matic volumes.

“I… love you, Jacob.“
“But Marie… we… can never be…“
“Unless…”

All that emo­tion, say­ing so much with­out words, is tax­ing on ellipses. That’s why, when they get home, they order a pizza, pop in Half Baked or Harold and Kumar Go to White Cas­tle, and call up their best friend, Dude, to come hang out.

“Dude… I just had the fun­ni­est thought. What if…“
“What?“
”…“
“Dude?“
“Dude… I for­got what it was…“
“Dude…”

All those empty pauses sig­ni­fy­ing noth­ing are the ulti­mate in relax­ation 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, infus­ing our soap operas and romance nov­els with the right amount of over-​​the-​​top melodrama.

Join us next week for more in-​​depth exam­i­na­tion of the per­son­al­ity you never knew punc­tu­a­tion had.

Posted in Uncategorized | Comments Off

Top Five Ways to Make Your Site More Popular

The Web has grown into a real jun­gle, and find­ing cool new sites nowa­days isn’t always the eas­i­est thing in the world. If you have a Web­site your­self, you’re deal­ing with the other end of this issue. How do you get noticed online, and is there any­thing you can do to increase your popularity?

There cer­tainly 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 impor­tant for those who don’t have their own Web­site yet but eagerly want to cre­ate one. After you have selected your domain name, the next step is to choose a host­ing plan. There are many good, afford­able alter­na­tives, but what pro­fes­sion­als usu­ally rec­om­mend is spe­cial­ized blog host­ing. This form of Web host­ing allows you to set up a professional-​​looking Web­site in no time at all. Why is this impor­tant to men­tion when it comes to mak­ing your site more pop­u­lar? Well, with­out strong host­ing, you won’t be able to han­dle a traf­fic to your new Web­site, which means you’ll have no chance at all of becom­ing well liked.

Of course, find­ing strong host­ing is often eas­ier said than done. The host­ing indus­try has grown very pop­u­lar in recent years, and this has lead to large num­bers of com­pa­nies offer­ing var­i­ous host­ing ser­vices. But don’t be fooled by their tricky ways of mak­ing it sound as if they are the best in the indus­try. We would rec­om­mend you part­ner up with a com­pany that has a strong rep­u­ta­tion and expe­ri­ence in the busi­ness. You might start at Web Host­ing Search for reviews and other infor­ma­tion to help you find the right fit.

When it comes to host­ing, you should com­pare the dif­fer­ent fea­tures included with the plan. Make sure you are guar­an­teed at least 99.9% uptime and that cus­tomer sup­port is easy to get hold of. You never know when you could need them. Like­wise, it is also good to know exactly what kind of num­bers in terms of disc space and band­width will you be allowed to use and man­age. Some providers also for­bid their clients to upload music or video files to their servers even if it is for per­sonal use. It’s impor­tant to ask cus­tomer sup­port to resolve such issues before pur­chas­ing a plan. Some other things you might con­sider ask­ing are whether your domain name reg­istry infor­ma­tion will be pro­tected and how many dif­fer­ent e-​​mail accounts will you be allowed to use as part of the host­ing agreement.

2. Opti­mize Your Website

In order to be truly suc­cess­ful online, you will have to get a high rank­ing in search engines. To suc­ceed in this, you should learn as much as you pos­si­bly can about search engine opti­miza­tion (SEO). The sub­ject of SEO is vast and can be quite daunt­ing at first, but once you get the hang of it, you’ll be able to see the ben­e­fits imme­di­ately and will prob­a­bly won­der why you didn’t get started with it ear­lier. A few things you can do to get started are to make sure you’re using the proper key­words and to write for your vis­i­tors as well as for search engines. Writ­ing for search engines is impor­tant, since you want to get high rank­ings, and writ­ing for vis­i­tors is of the essence because you want them to stick around and return to your Website.

When you are sat­is­fied with the key­words and con­tent on your site, it is time to start work­ing with link build­ing. Search engines deter­mine much of the value of a cer­tain page/​site by look­ing at the num­ber of inbound links. Link exchange is one of the most pop­u­lar and suc­cess­ful ways to get a good rank on search engines, and it’s really easy to do. Sim­ply visit a Web­site that you like and ask the Web­mas­ter if they are inter­ested in a link exchange — it doesn’t have to be any more com­pli­cated than that.

Hav­ing some­thing inter­est­ing and dis­tinc­tive on your page is a great way to attract poten­tial link part­ners. For exam­ple, if you are run­ning a Web­site about domain names, why not add a domain name avail­abil­ity checker to your home­page? It will most likely attract links from other sites related to the niche, and peo­ple will tend to come back again if they want to know whether a domain is avail­able or not. Try to be extra cre­ative to set your­self apart from competitors.

3. Take Advan­tage of Social Media Optimization

Even though SEO should be a big part of your site opti­miza­tion, it shouldn’t end there. Social Media Opti­miza­tion is prob­a­bly just as impor­tant, since it’s one of the strongest mar­ket­ing tools avail­able today. A social media opti­miza­tion cam­paign should include a few dif­fer­ent things. First, make sure the con­tent on your site or blog is rel­e­vant to your topic and not out of date. Visit sim­i­lar sites and join the dis­cus­sion in leav­ing com­ments on posts/​articles — don’t be afraid to say what’s on your mind. Make your­self vis­i­ble on Face­book and MySpace. Three other sites that can be use­ful for social media opti­miza­tion are Twit­ter, Flickr, and YouTube. The two lat­ter ones are not always applic­a­ble. Make sure you only take advan­tage of them when the time is right — you might do more harm than good if you don’t.

Obvi­ously, don’t for­get to include out­bound links to your Web­site on any social media site you uti­lize. Even if your link has a “nofol­low” attribute attached to it (e.g. like in Face­book), you will still attract new vis­i­tors and poten­tial cus­tomers to the site. Lastly, your cam­paign should be built on friendly plat­forms, such as Cof­feeCup Flash™ Blog­ger, which make it easy to cre­ate and edit content.

4. Get Your Vis­i­tors Involved

A cru­cial point to make your site grow in the num­ber of vis­i­tors is by get­ting them involved. Try to write in a per­sonal style, and don’t be afraid to leave an open ques­tion. If this shouldn’t do it, why not hold a con­test? This will most likely get peo­ple talk­ing about your site. The prize doesn’t have to cost a for­tune, since peo­ple like to com­pete regard­less of what the award is — it’s human nature.

Other easy ways of get­ting your vis­i­tors involved is by includ­ing a forum on your site or the pos­si­bil­ity to com­ment on your posts/​articles. Every­one wants to express their own per­sonal ideas and thoughts on top­ics, and by allow­ing them doing so, you also increase the chance of vis­i­tors return­ing to see how was their feed­back appre­ci­ated. As an added bonus, if the topic is extra pop­u­lar, the dis­cus­sion could attract inter­est from other Web­sites as well!

5. Empha­size Usabil­ity in Your Design

Invest­ing in a good design is more impor­tant than some peo­ple seem to think. With a beau­ti­ful design, you will grow in trust among your readers/​visitors. An impor­tant fact to remem­ber is not over-​​designing the Web­site. It doesn’t mat­ter how many hours you’ve put into design­ing the site if no one under­stands how to use it. Let some non-​​Internet-​​savvy friends nav­i­gate through your Web­site before launch­ing it at a full scale. If they find it easy, so will the rest of your visitors.

It is dif­fi­cult to say exactly what makes a beau­ti­ful and func­tional design. What looks good to one per­son might seem ter­ri­ble for another. How­ever, there are basic trends in Web design, and if you fol­low these, you can be sure to please most of your vis­i­tors. A few pop­u­lar Web design trends for 2009 are multi-​​column lay­outs, large illus­tra­tions, and lots of white space.

If you wish to stay on the safe side, then it is a good call to make the lay­out and design fea­tures on the page eas­ily acces­si­ble and sim­ple to under­stand. Try to use stan­dard cod­ing and avoid over-​​the-​​top Flash ani­ma­tions. Some peo­ple may have browser set­tings that pre­vent them from view­ing Flash, which means you might lose valu­able vis­i­tors. Try to think how the vis­i­tor thinks, and your Web­site will grow more pop­u­lar and respected day after day.

Posted in Uncategorized | Comments Off

A Capital Idea: Setting the Record Straight on Capitalization Online

Amer­i­can Eng­lish gram­mar is fraught with peril, filled with con­struc­tions, con­ven­tions, and excep­tions seem­ingly designed to trip you up. Is it who or whom, fur­ther or far­ther, lie or lay? Should you use which or that, how­ever or while, i.e. or e.g.? And let’s not for­get about more intim­i­dat­ing mis­takes, the ones that sound like Span­ish Inquisition-​​era tor­ture devices (split infini­tive, comma splice) or gross bod­ily func­tions (dan­gling par­tici­ple, dou­ble copula).

Even cap­i­tal let­ters are com­pli­cated. Just throw ‘em at the begin­ning of every sen­tence and use them with proper nouns, right? Yeah, right. Don’t let cap­i­tal­iza­tion fool you — it’s just as fickle and prone to excep­tion as com­mas, hyphens, and the past par­tici­ple of irreg­u­lar verbs. Mar­ket­ing types use cap­i­tal­iza­tion as An Attention-​​Grabbing Device. For­mal titles get cap­i­tal­ized in some instances but not oth­ers. And don’t even get me started on the many dif­fer­ent ways to cap­i­tal­ize a headline.

Loom­ing over all this is the sim­ple truth that cap­i­tal­iza­tion is one of those things that can make the dif­fer­ence between a mediocre Web­site and a good one. Even a sound lay­out and solid con­tent can eas­ily be under­mined by care­less — or even just incon­sis­tent — cap­i­tal­iza­tion. Like every­thing else on your Web­site, your cap­i­tal­iza­tion should serve a pur­pose, match­ing your mes­sage and intent while giv­ing the impres­sion of pro­fes­sion­al­ism. The best Web design­ers know that no detail is too small, and that’s why the best-​​designed Web­sites have con­sis­tent, cor­rect capitalization.

And what exactly con­sti­tutes cor­rect cap­i­tal­iza­tion? I thought you’d never ask:

• Cap­i­tal­ize the first word of every sen­tence. This includes com­plete sen­tences within parentheses.
• Cap­i­tal­ize proper nouns (e.g. Brooke Mar­shall, Ver­mont, Boston University).
• Adhere to the cap­i­tal­iza­tion in proper nouns, even if it doesn’t fol­low typ­i­cal con­ven­tions (iPod, Cof­feeCup Soft­ware, MySQL).
• Cap­i­tal­ize com­mon nouns such as north, river, and street if they’re a part of a proper name (e.g. North Car­olina, Chat­ta­hoochee River, Main Street). Don’t cap­i­tal­ize these nouns if they aren’t being used as part of the proper name or if you’re using one com­mon noun with two proper names. (E.g. Visit the Chat­ta­hoochee if you’re into swim­ming, because the river is calm and warm. The Winooski and Lam­oille rivers are bet­ter suited for rafting.)
• Treat com­monly under­stood nick­names the same as the proper names they stand for — that is, cap­i­tal­ize them (e.g. the Big Easy, the Bad­lands, the Series).
• Cap­i­tal­ize the prin­ci­ple words in the names of com­po­si­tion titles, like pub­li­ca­tions, books, works of art, movies, songs, TV shows, arti­cles, etc. This usu­ally means words with four or more let­ters, verbs, and the first and last word, although other impor­tant words may be cap­i­tal­ized (e.g. “World of War­craft,” The Catcher in the Rye, “Avenue Q,” “Deal or No Deal”).
• Cap­i­tal­ize for­mal titles only if you want them to be read all as one name (e.g. Pres­i­dent Barack Obama, Vice Pres­i­dent Joe Biden; but Barack Obama, who is the pres­i­dent, and his vice pres­i­dent, Joe Biden, work in the White House).
• Unless you’re writ­ing poetry, there is absolutely no gram­mat­i­cal rea­son to cap­i­tal­ize words not described in the pre­vi­ous points. There is some mar­ket­ing value to cap­i­tal­iz­ing words for empha­sis, but this prac­tice is gen­er­ally seen as sloppy or ama­teur­ish, and can even be inter­preted as untrust­wor­thy. Hype may sell, but it can also under­cut your rep­u­ta­tion, mak­ing you seem like a sleazy car­ni­val barker instead of a seri­ous Web designer. Rather than using cap­i­tal­iza­tion, con­sider using other ways to draw atten­tion to your text, such as color, size, and style.

Keep in mind that these are only the basics. For more infor­ma­tion about cap­i­tal­iza­tion, as well as other aspects of gram­mar, I’d rec­om­mend pick­ing up copies of The Asso­ci­ated Press Style­book, Read Me First! A Style Guide for the Com­puter Indus­try, and The Merriam-​​Webster Dic­tio­nary. There are other sim­i­lar resources, but these are the cream of the crop. The AP Style­book rep­re­sents the stan­dard in the news­pa­per and mag­a­zine indus­try; Read Me First! is an author­i­ta­tive guide to the unique gram­mar ques­tions that arise when deal­ing with soft­ware and the Inter­net; and Merriam-​​Webster is a trusted resource in the print and pub­lish­ing world.

Most pub­li­ca­tions also keep a per­sonal style guide that cov­ers com­mon errors they encounter that may not appear in a broader guide like The AP Style­book, as well as what to do in sit­u­a­tions where there are no hard-​​and-​​fast rules. If you haven’t already, it’s def­i­nitely worth com­pil­ing one of your own.

Now that I’ve cov­ered the rules of how to prop­erly use cap­i­tal­iza­tion, let’s look at dif­fer­ent ways to break them. After all, any good artist knows that rules exist to be bro­ken, and that the coolest effects can be achieved by sub­vert­ing the system.

ALL CAPS

All caps get a bad rap. Sure, they’re the tex­tual equiv­a­lent of yelling in a person’s face, but if used with a lit­tle finesse and con­sis­tency, they can grace­fully draw a reader’s atten­tion to cer­tain page ele­ments. Here are a few exam­ples of how to use all caps to your advantage:

This Amer­i­can Life

The site uses caps in its head­ers and menu to dis­tin­guish 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 Cre­ative

The chunky let­ter­ing works with all caps because it’s going for visual, rather than lit­er­ary, effect. In the case of larger blocks of text, how­ever, this site reverts to the nor­mal rules of capitalization.

You do have to be care­ful with this tech­nique. Although many sites have achieved a taste­ful effect with all caps, some take it too far. FOX News fea­tures a front-​​page graphic over­laid with text, usu­ally with dis­as­trous effects, as this com­pi­la­tion page illustrates.

The use of caps for inflam­ma­tory phrases like “UNDERAGE DINO SEX” and “ARMY OF TERROR” is sleazy, sen­sa­tional, and totally tacky.

all low­er­case

Low­er­case let­ters wear a lot of hats. They can present a funky alter­na­tive to reg­u­lar text, trans­form less impor­tant words into attrac­tive high­lights, or com­mu­ni­cate a demure love­li­ness. As an added bonus, because most of the text we read is in low­er­case let­ters, it’s really easy to read.

Craigslist

Craigslist’s con­sis­tent use of low­er­case let­ters works well with the min­i­mal­ist, no-​​frills phi­los­o­phy of the site.

Inspi­ra­tion Bit

Inspi­ra­tion Bit’s use of a chunky font and fun col­ors helps its low­er­case head­ings stand out.

The Dar­ling Tree

The over­all effect of low­er­case font here is one of mod­est beauty.

Vito Lourenco

Low­er­case let­ters give this site a sim­ple, ele­gant feel.

Design Sponge

Here’s another sophis­ti­cated, artis­tic use of low­er­case letters.

By the Book

Just because break­ing tra­di­tional rules of cap­i­tal­iza­tion can yield inter­est­ing and excit­ing results doesn’t nec­es­sar­ily mean that using proper cap­i­tal­iza­tion looks bad. On the con­trary, adher­ing to the rules can actu­ally make your site look taste­ful and pro­fes­sional. In addi­tion, draw­ing atten­tion away from the artis­tic value of the text can place more empha­sis on its meaning.

Apple

You really can’t go wrong with Apple. The text on this page is clean, taste­ful, and professional.

Vann’s Spices

This site keeps its prop­erly cap­i­tal­ized text from being bor­ing by mix­ing it up with dif­fer­ent font sizes and slight smudging.

Best of All Worlds

By incor­po­rat­ing all caps, low­er­case let­ters, and prop­erly for­mat­ted cap­i­tal­iza­tion, you can achieve a mix­ture of any of the effects we’ve seen thus far.

White​house​.gov

White​house​.gov got a much-​​needed makeover when Barack Obama assumed the pres­i­dency. Putting “the” in low­er­case ital­ics adds a touch of ele­gance that ties in nicely with the pow­er­ful use of all caps in other, more impor­tant words, such as “admin­is­tra­tion” and “government.”

MacAllan Ridge

This Web­site uti­lizes a sim­i­lar strat­egy, but its choice of font makes the caps look grace­ful and stately instead of authoritative.

Forty­Seven Media

This site takes the trend we’ve seen thus far and flips it on its head. The name of the com­pany is in low­er­case let­ters, whereas the sub­head is in big, blocky caps. This exudes an edgy, cre­ative attitude.

Sin­gu­lar­ity Concepts

Another site using low­er­case let­ters for impor­tant text and upper­case let­ters as accents.

Devel­op­ing Your Own Style

When it comes to using cap­i­tal­iza­tion for styl­is­tic pur­poses, it’s all about mak­ing sure your use of cap­i­tal and low­er­case let­ters reflects your Website’s mes­sage and mis­sion. All caps com­mand atten­tion; low­er­case let­ters are edgy and excit­ing; a mix­ture of the two yields tons of pos­si­bil­i­ties, from the sleek and sophis­ti­cated to the edgy and exper­i­men­tal. Do keep in mind that con­sis­tency is key. If it looks like you’ve cho­sen at ran­dom whether to use cap­i­tal or low­er­case let­ters, the over­all effect will be con­fus­ing and unpro­fes­sional — in other words, a cap­i­tal offense.

Posted in Uncategorized | Comments Off

Designing Accessible Websites

For the third-​​largest minor­ity group in the United States — more than 40 mil­lion peo­ple — the vast major­ity of Web­sites are par­tially or com­pletely inaccessible.

The idea of a Web­site that excludes African-​​Americans or Lati­nos is all but unthink­able, yet Amer­i­cans with dis­abil­i­ties are con­stantly faced with Web­sites that don’t take their needs into account. For­tu­nately, many of the world’s most pop­u­lar Web­sites — among them Yahoo!, Google, YouTube, and Wikipedia — are work­ing to become acces­si­ble to dis­abled users, but there are many, many more sites out there that still have a long way to go.

We all know that no one inten­tion­ally sets out to cre­ate an inac­ces­si­ble Web­site. After all, the point of hav­ing a Web­site is to reach peo­ple — and most Web design­ers would do any­thing to reach 40 mil­lion of them. But for many design­ers and devel­op­ers, the idea of cre­at­ing an acces­si­ble Web­site is incred­i­bly over­whelm­ing, or even stifling.

I had a chance to speak with designer Dan Rubin and devel­oper Chris Heil­mann at the Web­mas­ter Jam Ses­sion ear­lier this year. These guys live and breathe Web acces­si­bil­ity, and they were more than happy to answer my ques­tions on the topic.

“[There are] a lot of pre­con­ceived notions that things are some­how dif­fi­cult to imple­ment, that you lose a lot of visual con­trol, and that it has to be ugly,” Rubin said. “All those things are wrong.”

Heil­mann echoed this sen­ti­ment: “Devel­op­ers think, ‘I can’t use the cool, new tech­nolo­gies because they’re not acces­si­ble,’ rather than look­ing at these tech­nolo­gies and mak­ing them acces­si­ble. So it’s like peo­ple don’t see an acces­si­ble inter­face as an oppor­tu­nity to make a cooler inter­face, but as some­thing that is dumb­ing down what you really want to do.”

The fact is, acces­si­bil­ity isn’t at odds with per­for­mance or attrac­tive­ness at all. An acces­si­ble Web­site is a well-​​designed Web­site — one that far more peo­ple than the dis­abled can enjoy. Web­sites designed with acces­si­bil­ity in mind also work bet­ter with dial-​​up con­nec­tions and hand-​​held devices such as Black­Ber­ries and iPhones — and as an added bonus, they’re usu­ally also bet­ter indexed by search engines like Google.

It’s worth not­ing that there may even be neg­a­tive con­se­quences of ignor­ing acces­si­bil­ity. On August 27 of this year, Tar­get paid out more than $6 mil­lion as part of a class-​​action law­suit filed by Bruce F. Sex­ton, Jr. and the National Fed­er­a­tion for the Blind. The retail heavyweight’s Web­site was inac­ces­si­ble to blind users, and the court ruled that this vio­lated the Amer­i­cans with Dis­abil­i­ties Act.

Nat­u­rally, it’s the wrong atti­tude to feel strong-​​armed into design­ing an acces­si­ble Web­site out of fear of being sued. The les­son to be taken from the law­suit is that Tar­get lost a lot more than just $6 mil­lion: It also lost mil­lions of poten­tial cus­tomers, not to men­tion the respect of a lot of peo­ple, abled and dis­abled alike.

The right atti­tude is to approach Web design — par­tic­u­larly with the goal of acces­si­bil­ity — with an open mind and a pas­sion for orig­i­nal­ity. It’s also impor­tant to remem­ber that set­ting bound­aries can some­times force you to be more innovative.

“As a designer, con­straints are key,” Rubin said. “If you don’t have con­straints, you can get lost very eas­ily, and there’s no direc­tion. … You use the con­straints to your advantage.”

Heil­mann rec­om­mended I check out BBC Ouch! for an exam­ple of an attrac­tive, suc­cess­ful site that works within the restric­tions of acces­si­bil­ity. The site, which cen­ters around every­day dis­abil­ity issues, is an exam­ple of the sort of strong Web design that every­one — espe­cially the dis­abled — can appreciate.

At first glance, this site looks no dif­fer­ent from most oth­ers. It’s visu­ally appeal­ing and rich with media such as images and pod­casts. Yet Ouch! also offers text-​​only and high-​​contrast ver­sions in easy-​​to-​​locate but unob­tru­sive loca­tions. These sorts of accessibility-​​friendly options are preva­lent through­out the site. For another exam­ple, check out the option to view a tran­script of “Dear Dis­abled Friend,” a comic that reg­u­larly appears on Ouch!:

This tran­script prob­a­bly took all of 30 sec­onds to write, and another minute or so to include in the page design. In no way does it detract from the site — it’s hid­den by default — but it pro­vides a thought­ful ser­vice to blind vis­i­tors that many Web­sites would neglect to include. Clearly, if we take Ouch! as an exam­ple, attrac­tive func­tion­al­ity and acces­si­bil­ity are not mutu­ally exclusive.

When I asked Rubin and Heil­mann to give me an exam­ple of a site that does a poor job of being acces­si­ble, Rubin quipped with a wry smile, “All the rest.”

“We don’t have time,” Heil­mann added.

“That’s unfor­tu­nate,” I said.

“The more unfor­tu­nate thing is that it’s not inten­tional,” Rubin said. “It’s because of just a lack of knowl­edge and aware­ness. Igno­rance, really, but peo­ple are just igno­rant of just how easy it is to make it work for every­body. And that’s all it takes, is a lack of thought, a lack of aware­ness, and things can go hor­ri­bly wrong.”

In order to keep things from going hor­ri­bly wrong, it’s impor­tant to know who you should be design­ing for. Take into con­sid­er­a­tion peo­ple with vision prob­lems, includ­ing blind­ness, color blind­ness, and weak eye­sight. The blind may use screen read­ers or hard­ware that con­verts onscreen text to Braille, but Web users who are far­sighted may sim­ply enlarge text onscreen using their browser or screen mag­ni­fi­ca­tion soft­ware. Enlarged text, par­tic­u­larly links, is also help­ful for peo­ple with con­di­tions such as cere­bral palsy, Parkinson’s dis­ease, mus­cu­lar dys­tro­phy, or stroke, because they can­not use a mouse with pre­ci­sion. Some dis­abled users may not be able to use a mouse at all — instead, key­boards, speech recog­ni­tion soft­ware, and sin­gle switch access devices are all viable alternatives.

Another major group to keep in mind are the hard of hear­ing, who rely on closed cap­tion­ing, sign lan­guage, and writ­ten tran­scripts to fully enjoy audio and video. It’s also impor­tant to remem­ber that peo­ple sus­cep­ti­ble to seizures may not be able to view flash­ing screens, and that those with dyslexia and dyscal­cu­lia may have dif­fi­culty read­ing the pro­vided content.

The most help­ful addi­tions you can make to your site are high-​​contrast and text-​​only ver­sions, as well as full tran­scripts of any audio, video, Flash™, and other mul­ti­me­dia that appears. Those who want to know the offi­cial guide­lines for design­ing for acces­si­bil­ity should check out the Web Acces­si­bil­ity Initiative’s Web Con­tent Acces­si­bil­ity Guide and Sec­tion 508 of the U.S. Reha­bil­i­ta­tion Act. The lat­ter is only required for fed­eral sites, but it lays out some help­ful guide­lines for peo­ple who want to design accord­ing to the U.S. government’s acces­si­bil­ity standards.

Although it’s help­ful to under­stand the dif­fer­ent kinds of dis­abil­i­ties your Web page may encounter, Rubin warned against think­ing about design­ing for acces­si­bil­ity as “a check­list of types of disabilities.”

“It’s so much more than that,” he said. “One of the impor­tant things to remem­ber is that mak­ing a site prop­erly acces­si­ble makes it eas­ier to use for everybody.”

That’s because acces­si­ble sites oper­ate on the prin­ci­pals of proper Web design. As Heil­mann explained, “it’s all about struc­ture and flex­i­bil­ity. If your site works with­out any style sheet, with­out JavaScript, and it gives a proper struc­ture … then you have a great step towards a good product.”

This means your site should use seman­ti­cally cor­rect (X)HTML for struc­ture and con­tent, and CSS for lay­out. Your (X)HTML con­tent must be log­i­cally struc­tured, and ele­ments should be grouped in a coher­ent fash­ion. This is espe­cially impor­tant for peo­ple who use screen read­ers, which read page text in order and get con­fused by bad (X)HTML such as table-​​based design. Screen read­ers also can’t read Flash™ or JavaScript (nei­ther can site spi­ders used by search engines), so you should make sure that all of your links and text are acces­si­ble via good, old-​​fashioned (X)HTML.

“If you have some­thing that refreshes a page, have a real link that points to a real doc­u­ment, and not just some ran­dom JavaScript or a Flash™ movie file or what­ever,” Heil­mann said.

Another basic design rule that proves immensely help­ful for the dis­abled but also tends to get lost in the fray is the use of alt tags for images and graph­ics. If you want to go a step above and beyond, include a descrip­tion of the image à la “Dear Dis­abled Friend.” At the very least, you should incor­po­rate appro­pri­ate con­text for your images in the text sur­round­ing them. This isn’t to say you should include a clunky descrip­tion that slows down your nar­ra­tion, but it is good prac­tice to make sure your pic­tures and text work in con­junc­tion. Think of it like an arti­cle in a news­pa­per. The pic­ture or graphic isn’t thrown in just to take up space — it serves to sup­ple­ment the story.

In the same vein, you should never, ever try to com­pen­sate for weak con­tent with super­flu­ous visual ele­ments. There’s no sub­sti­tute for clear, well-​​written con­tent. Even if you’re unsure of your writ­ing abil­i­ties, there’s never any excuse for spelling errors. Not only is spell check­ing a good idea in gen­eral, but it’s also impor­tant to remem­ber that typos can mess up screen read­ers, which obfus­cates your mean­ing even more.

Per­haps the most impor­tant design tool to remem­ber when design­ing for acces­si­bil­ity is pro­gres­sive enhancement.

“When you take away the high-​​level inter­ac­tion, the high-​​level lay­ers, 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 think­ing about it from the begin­ning and build­ing it in that lay­ered form.”

“It’s look­ing at the depth of the pool before you jump in,” Heil­mann added.

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

The best Web design­ers know the impor­tance of look­ing before they leap. This means test­ing their sites in mul­ti­ple browsers — Fire­fox, Inter­net Explorer, Chrome, Opera, Safari, even Netscape. For the accessibility-​​conscious designer, it only makes sense to add a few other steps to this rig­or­ous test­ing rou­tine. This includes view­ing the site in a text-​​only browser such as Lynx, view­ing the full site in mono­chrome dis­play, try­ing out a text-​​to-​​speech browser such as JAWS, Window-​​Eyes, or Fire Vox, using the site with­out a mouse, and dis­abling JavaScript and CSS to see if the site is still navigable.

If the designer has kept the prin­ci­ples of pro­gres­sive enhance­ment in mind, made sure to use struc­turally valid (X)HTML, and pro­vided text alter­na­tives for mul­ti­me­dia — 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 dif­fi­cult. It’s actu­ally really easy, and it’ll make your life eas­ier. You just have to open your mind to it.“

Screen­shots taken from BBC Ouch!

Posted in Uncategorized | Comments Off

Typography and Renaissance-​​Era Eroticism

Hold on tight, peo­ple: I’m about to take you way, way back.

Think back to a time before the Inter­net, before com­put­ers, before type­writ­ers, back when the word “Amer­ica” was still fresh on the lips of Euro­pean colonists and peo­ple were still get­ting used to that new­fan­gled Gre­go­rian cal­en­dar. I’m talk­ing about the 1600s, the Renais­sance, per­haps the high­est pin­na­cle of Euro­pean art and creativity.

Back in those days, a man by the name of John Donne stunned his peers with glo­ri­ous poetry that was highly clever, highly meta­phys­i­cal, and highly erotic.

Yeah, I’m talk­ing about the same John Donne you prob­a­bly stud­ied in high school. Since Eng­lish teach­ers seem to delight in drain­ing the fun out of the great works of lit­er­a­ture, I’m not sur­prised if you’re a bit skep­ti­cal about the whole eroti­cism thing. Let me prove you wrong.

In “The Flea,” Donne set out on the unlikely task of attempt­ing to seduce his ret­i­cent lady-​​friend by explain­ing that, since they’d both had their blood sucked by the same flea, they’d prac­ti­cally already had sex. That being the case, they should just go ahead and con­sum­mate their rela­tion­ship — after all, why should the flea have all the fun?

MARKE but this flea, and marke in this,
How lit­tle that which thou deni­est me is;
It suck’d me first, and now sucks thee,
And in this flea our two bloods min­gled bee;

As if the jux­ta­po­si­tion of flea infes­ta­tion and sex wasn’t clever enough, Donne took an extra step and cracked a few typo­graph­i­cal puns. Take a closer look at the third line — “It suck’d me first, and now sucks thee” — and then think back to Renais­sance typog­ra­phy, par­tic­u­larly the infa­mous “long S.” Not famil­iar 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 won­der­ing, yeah, John Donne knew exactly what he was doing. There’s a rea­son why he’s still remem­bered today — he was witty, unafraid of rib­aldry, and a lit­er­ary mas­ter beyond compare.

Now let’s fast-​​forward to the present day. There’s actu­ally a lot Web­mas­ters can learn about the impor­tance of Web typog­ra­phy from this lit­tle exer­cise in Renaissance-​​era eroti­cism. The way you present your text can and does have an effect on its mean­ing — even if you aren’t using typog­ra­phy that trans­forms a rel­a­tively innocu­ous word into the F-​​bomb.

Type­face Vs. Font

Before we get started, one thing needs to be clar­i­fied: the dif­fer­ence between type­face and font. Most peo­ple use these two terms inter­change­ably, but they actu­ally mean two dif­fer­ent things. A type­face is a spe­cific design within a type fam­ily. For exam­ple, Times New Roman is a type­face within the serif type fam­ily. A font, on the other hand, is a vari­a­tion of a type­face. Every time you bold, enlarge, shrink, ital­i­cize, or oth­er­wise mod­ify a type­face, you’re work­ing with a font.

For more infor­ma­tion about the type­face vs. font debate, I highly rec­om­mend Jon Tan’s exam­i­na­tion of the sub­ject.

Types of Type

When you’re decid­ing what type­face to use, you should first fig­ure out which type fam­ily best fits your tex­tual inten­tions. Like John Donne, you should know how your text is going to look when ren­dered in a spe­cific type­face, and what lay­ers of mean­ing the type­face is going to add to what you’re saying.

Type­faces come in many shapes and sizes, but they can all be cat­e­go­rized into six type fam­i­lies: serif, sans-​​serif, mono­space, cur­sive, fan­tasy, and picture.

Serif type­faces got their name because they have ser­ifs — those lit­tle dec­o­ra­tions on the end of strokes within each char­ac­ter. Ser­ifs are use­ful because they pro­vide a hor­i­zon­tal groove that serves as a visual cue for the reader’s eyes to lock into. This makes them eas­ier to read, par­tic­u­larly at small sizes, which is why they’re so widely used in the text of news­pa­pers. They tend to be pro­por­tion­ally spaced, which means that dif­fer­ent char­ac­ters have dif­fer­ent widths. They’re great if you’re try­ing to con­vey an author­i­ta­tive, pro­fes­sional feel, but you should avoid them if you want your text to seem more per­sonal and friendly. This isn’t a hard-​​and-​​fast rule, though; for more infor­ma­tion about using serif types, check out David Rodriguez’s fab­u­lous arti­cle on the sub­ject. A few serif type­faces you may have seen are Times New Roman and Georgia.

Sans-​​serif type­faces are pro­por­tion­ately spaced and, as you may have guessed, don’t have ser­ifs. This means they’re harder to read at smaller sizes; how­ever, they work well as head­ings or large text. They also seem a lot friend­lier and more approach­able than their serif coun­ter­parts. Pop­u­lar sans-​​serif type­faces include Arial, Hel­vetica, and Verdana.

Mono­space type­faces may or may not con­tain ser­ifs. What sets them apart is that they aren’t pro­por­tion­ately spaced — that is, each char­ac­ter takes up the same amount of hor­i­zon­tal space. Mono­space isn’t the best choice for most text, but if you’re look­ing to set cer­tain text apart, or if you want to cre­ate a mechan­i­cal or typewriter-​​esque feel, type­faces like Courier and Lucida Con­sole will work just fine.

Cur­sive type­faces such as Comic Sans are curvy and styl­is­tic, and are meant to look like hand­writ­ing. As you might guess, these can be kind of cheesy and dif­fi­cult to read, and as you might not have guessed, they some­times 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 per­sonal look in a head­ing, a cur­sive type­face could be just what you’re look­ing for.

Fan­tasy type­faces are dec­o­ra­tive and artis­tic — think Impact — which means that, like cur­sive type­faces, they can be dif­fi­cult to read. In addi­tion, these type­faces can come with unique lim­i­ta­tions, such as a lack of low­er­case let­ters. These type­faces are best used as accents, not your main text.

The pic­ture type fam­ily con­sists of those crazy type­faces that replace char­ac­ters with sym­bols and illus­tra­tions, like astro­log­i­cal signs, shapes, and the like. I’m sure at some point you’ve had fun check­ing out what your name looks like in Wingdings or Zaph Ding­bats, but it’s best to avoid these type­faces alto­gether when design­ing your Web­site. The rea­son for this — besides the fact that they’re com­pletely non­sen­si­cal — is that there are no browser defaults for pic­ture type­faces, because they don’t cor­re­spond to an actual lan­guage. An A is an A no mat­ter whether you’re using Arial, Comic Sans, or Times New Roman, but if you’re using a pic­ture type­face, it could show up as any­thing from a flower to a pair of scis­sors to a Kro­necker delta.

Play it Web-​​Safe

So, now that you know the dif­fer­ent type fam­i­lies you can choose from, it’s time to go wild and pick out all your favorite type­faces for your Web­site, right?

Unfor­tu­nately, no. Web browsers are finicky beings, and they usu­ally don’t get along very well with creative-​​looking type­faces. If a browser encoun­ters a type­face that isn’t installed on its com­puter, it will default to another type­face, which can seri­ously mess up your design, let alone the mean­ing you had in mind for your text. Your best bet is to stick to Web-​​safe type­faces, which are gen­er­ally ren­dered the same in all browsers, for your main body text. This isn’t nec­es­sar­ily a bad thing — there are enough of these type­faces to ensure that you’ll be able to find some­thing to fit the mood of your text and your Web­site. Here are the most com­mon Web-​​safe typefaces:

Arial
Arial Black
Courier New
Times New Roman
Impact
Comic Sans MS
Geor­gia
Tre­buchet MS
Ver­dana

Mean­while, you should play up the power of cre­ative type­faces by exclu­sively using them as head­ers and text accents. In order to do this with­out the browser default­ing to another, safer type­face, you can cre­ate an image of text or use a pro­gram like Cof­feeCup sIFR Font Maker to cre­ate Flash™ text. You can go fur­ther with Flash™ by adding col­ors and effects to your type­faces using a pro­gram like Cof­feeCup Web­site Font. I’d go into more detail about these processes here, but David Rodriguez has already writ­ten an excel­lent arti­cle on this topic.

Get­ting Choosy With CSS

When John Donne was pen­ning poetry, he only had two options for dis­play­ing his work: hand­writ­ten pages or the rel­a­tively new tech­nol­ogy of the print­ing press. That being the case, he didn’t have the oppor­tu­nity to choose between dif­fer­ent type­faces that might work bet­ter with his artis­tic vision. Instead, he had to work within the estab­lished sys­tem. Although modern-​​day Web design­ers have to do this in a sense with Web-​​safe type­faces, they do have the option of choos­ing which Web-​​safe type­faces they’d like dis­played. You can do this using a sim­ple bit of CSS: the font-​​family property.

Say you want to use Baskerville, a stately, sophis­ti­cated serif type­face, for your Web­site text, but you’re not sure all your users are going to have it installed on their com­put­ers. What you could do is pick another, more com­mon serif type­face, like Geor­gia, and set that as a backup. You could even set “serif” as a backup for the backup, just in case your Web­site vis­i­tor is using some strange browser that doesn’t rec­og­nize Geor­gia. Set­ting serif instructs the browser to use its default serif type­face in case it doesn’t rec­og­nize the other typeface(s). The rule would look like this:

font-family: Baskerville, Georgia, serif;

You can learn more about this tech­nique in yet another arti­cle by the illus­tri­ous David Rodriguez.

Be Respon­si­ble

Web­mas­ters are pre­sented with a ton of free­dom when it comes to typog­ra­phy. Nov­el­ists, jour­nal­ists, aca­d­e­mics, Renais­sance poets, and other pur­vey­ors of the writ­ten word are pretty much lim­ited to strict type­face con­ven­tions, but the Inter­net plays by a dif­fer­ent set of rules. Big text, small text, col­or­ful text, text that glows and explodes and reassem­bles — pretty much any­thing is pos­si­ble with the pow­er­ful tools avail­able to Web designers.

But just because you’ve got a lot of free­dom 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 clev­er­ness. In the same way, you should pre­serve the power and clev­er­ness of your Web typog­ra­phy by using taste­ful text and sav­ing the cre­ative, excit­ing type­faces for spe­cial occasions.

Oth­er­wise, your Web­site could suck.

“The Flea” screen­shot taken from http://​dig​i​tal​donne​.tamu​.edu/.

Posted in Uncategorized | Comments Off

Obama Defeats McCain

In these shaky eco­nomic and polit­i­cal times, it’s impor­tant to put aside our conservative-​​versus-​​liberal dif­fer­ences, to shun petty polit­i­cal squab­bling and come together in per­fect bipar­ti­san agree­ment about an impor­tant issue fac­ing this elec­tion: Web design.

I don’t care who you are, whether you’re a staunch con­ser­v­a­tive or a hard­core lib­eral, a Repub­li­can, a Demo­c­rat, or an Inde­pen­dent — we can all agree that Barack Obama’s Web­site is freak­ing gor­geous. 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 Inter­net, but that’s no excuse for some of the design sins com­mit­ted on his site.

Sure, this may seem like a pal­try issue in light of the cri­sis on Wall Street, the government’s high-​​stakes bailout, astro­nom­i­cal gas prices, the bro­ken health care sys­tem, the… well, you get the point. But with the polls split almost evenly, and 73 toss-​​up elec­toral votes slated to decide this elec­tion, the can­di­dates owe it to them­selves and their par­ties to put their best pos­si­ble face for­ward, par­tic­u­larly on a medium as impor­tant as the Inter­net. Sep­tem­ber saw a huge spike in the num­ber of vis­i­tors to McCain and Obama’s Web­sites, accord­ing to Web infor­ma­tion site Alexa​.com, and if their growth over the past few months is any indi­ca­tion, the sites are due for a lot more in the weeks ahead.

Now, I’m not just writ­ing this for the dis­tinct plea­sure 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 per­ti­nent infor­ma­tion these two very dif­fer­ent Web­sites have to teach us about the prin­ci­ples of sound design — what to do, what to avoid, what looks great, what looks cheesy, etc. So I exam­ined the design and func­tion­al­ity of the sites, look­ing at aspects like qual­ity, orga­ni­za­tion, use of cur­rent design trends, ease and plea­sure of nav­i­ga­tion, pro­vi­sions for alter­na­tive users (the dis­abled, non-​​English speak­ers, etc.), and whether the site achieves its purpose.

And all I can say is that if qual­ity of Web design decided the elec­tion, Obama would win in a landslide.

First Impres­sions — Headers

Located at the top of each page, the header is often the first part of a site that vis­i­tors see. Although it doesn’t need to be wildly impres­sive, putting some effort into it can add a nice touch of flair. The ideal header is attrac­tive, but also says some­thing mean­ing­ful about your site. At the very least, it should con­tain your site’s name and logo.

Both Obama and McCain have put effort into their head­ers, but Obama’s out­shines McCain’s quite a bit in terms of artis­tic quality.

Blurred, feath­ered edges, an infu­sion of white light, a gra­di­ent back­ground, and a faded pho­to­graph of sup­port­ers lift­ing “Change” signs sym­bol­ize Obama’s mes­sage of hope and growth. In addi­tion, the header blends seam­lessly into the rest of the page while still main­tain­ing def­i­n­i­tion as its own dis­tinct ele­ment. It achieves this through a shared gra­di­ent effect with the page back­ground paired with strate­gic high­light­ing and a red bor­der at the bot­tom that fades into a red stripe of the Amer­i­can flag. The only flub in this header is the “En Español” but­ton, an ugly, blocky affair that over­laps the “W” in “Now” slightly.

Yet per­haps just as impor­tant as all this lovely artistry is one sim­ple detail: The pic­tures of Obama and run­ning mate Joe Biden are well pro­por­tioned. Minute and obvi­ous though this may seem, it’s not the case in McCain’s header.

The pic­tures of him and run­ning mate Sarah Palin fall vic­tim to what looks like a bad Pho­to­shop 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 can­di­dates’ heads are chopped off. This looks sloppy and a bit amateurish.

Of course, McCain’s header is not with­out its strengths. Like Obama’s, it employs an artis­tic gra­di­ent back­ground with a faded pic­ture of sup­port­ers wav­ing Amer­i­can flags. McCain and Palin, ren­dered in solid col­ors, stand out in stark con­trast to the soft back­ground. Had the pic­tures of the two can­di­dates been bet­ter pro­por­tioned, this could have been an above-​​average header. As it stands, it looks like some­thing that was slapped together with­out much of an eye for detail.

Find­ing Your Way — Menus and Search Tools

The impor­tance of a well designed, easy-​​to-​​navigate menu can­not be under­stated when deal­ing with information-​​heavy Web­sites like McCain’s and Obama’s. Great care should be taken to make sure that the menu helps peo­ple browse the site effec­tively. Key things to keep in mind are read­abil­ity and functionality.

From the text to the design to the details, Obama’s menu is an ideal nav­i­ga­tional tool. The dark blue sans-​​serif font over a white back­ground is easy to read, and the use of an ital­i­cized serif font for words like “the” accents the text nicely. Also impor­tant is the for­mat — namely that he con­denses long lists of infor­ma­tion in his drop-​​down menus into two columns. This means that users with smaller screens or browser win­dows don’t have to scroll down to see the full host of menu options. In addi­tion, his drop-​​down menus appear in full on mouseover and dis­ap­pear instantly when the mouse is moved away. Sev­eral pop­u­lar Web­sites like Google, Yahoo!, Face­book, and The New York Times online employ this professional-​​looking tech­nique because it doesn’t waste the visitor’s time or clut­ter the screen with unnec­es­sary animation.

McCain’s menu eschews the solid design prin­ci­ples on which Obama’s is built in favor of the exact oppo­site. Instead of a clearly defined main menu, there are bold words against the site back­ground. Instead of dark text against a white back­ground, there is bold white text on a dark back­ground. Although this can be an eye-​​catching tech­nique, it is noto­ri­ously dif­fi­cult to read, so it should be kept brief and lim­ited to spe­cial situations.

The poor menu con­struc­tion doesn’t stop there. On mouseover, his menus slide down, and they slide back up when the mouse is removed. This unnec­es­sary effect not only wastes time and clut­ters 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 frus­trates vis­i­tors — and that can drive them away.

McCain’s final major error is neglect­ing to include alt text in his menu. This is impor­tant because it allows peo­ple using text-​​only or voice browsers to access the infor­ma­tion. Luck­ily for alter­na­tive users, Obama’s menu does uti­lize this essen­tial tool.

How­ever, Obama’s Web­site fal­ters by omit­ting one cru­cial ele­ment: a search func­tion. No mat­ter how great a menu is, there is still going to be some infor­ma­tion that’s hid­den away some­where that can only be accessed eas­ily through a search. It’s almost embar­rass­ing that McCain’s site beat Obama’s on this one. Hid­den though it may be — it’s tucked away at the very bot­tom right-​​hand cor­ner of the page — McCain’s site does indeed fea­ture a search func­tion. I grudg­ingly tip my cap to you, Mr. McCain.

Cre­at­ing A Palette-​​able Site — Color Scheme

Use of color in a Web­site should never be hap­haz­ard. At the very least, the design should fea­ture a match­ing color scheme; how­ever, neglect­ing to take full advan­tage of this use­ful tool can be a big mis­take. When used well, color can draw atten­tion to or away from page ele­ments or even sym­bol­ize an idea — which is exactly what Obama’s strate­gic color scheme does.

The site uti­lizes a taste­ful, con­sis­tent scheme, with cer­tain areas appear­ing brighter or more faded for vari­ety and empha­sis. The page is drenched in a deep, lovely blue, with white typ­i­cally used as a text back­ground or high­light, and splashes of red accent­ing impor­tant ele­ments. The sym­bol­ism of this color scheme, while clear, isn’t over­stated or obnoxious.

The use of color in McCain’s site, while cer­tainly sound, lacks in strat­egy and vision. Strong col­ors placed almost indis­crim­i­nately around the page make it dif­fi­cult to deter­mine where the eye should be led. In addi­tion, the solid color back­ground is a bit bor­ing. Ulti­mately, this scheme pales in com­par­i­son to Obama’s clever use of color.

Lookin’ Good (Or Not) — Design

Of course, what is a color scheme with­out a design to go with it? The ideal site looks good and func­tions bet­ter. Nav­i­ga­tion should be easy and intu­itive, pre­sent­ing — but not push­ing — cool but use­ful fea­tures to vis­i­tors. Ulti­mately, peo­ple want to feel like they’re in con­trol of the Web­site they’re vis­it­ing — 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 eas­ily as it can keep them around. The most impor­tant thing keep in mind is whether Flash™ is actu­ally nec­es­sary for what you’re try­ing to accom­plish. If it doesn’t make the expe­ri­ence of your Web­site eas­ier and more pleas­ant for your vis­i­tors, don’t use it.

I’m talk­ing to you, John McCain.

The front page of McCain’s Web­site fea­tures a clunky Flash™ ani­ma­tion con­tain­ing three screens that alter­nate with a rolling ani­mated effect every few sec­onds — kind of like a slot machine, only with oppor­tu­ni­ties to vol­un­teer with McCain’s cam­paign instead of pic­tures of fruit. If you want to shift to a dif­fer­ent set of screens, you can click some arrows at the bot­tom of the ani­ma­tion, but you have to wait and watch while the new screens roll into place.

This clumsy bit of Flash™ ani­ma­tion ulti­mately gives the impres­sion of some­one who’s severely out of touch try­ing to impress peo­ple with what he thinks of as “sophis­ti­cated technology.”

The rest of McCain’s site design isn’t much bet­ter. The sep­a­rate ele­ments in his page are kept in neat boxes, but loud col­ors and unnec­es­sary use of large text size make for a clut­tered, almost chaotic feel.

Even though Obama’s front page fea­tures quite a bit more con­tent than McCain’s, it avoids clut­ter through a clean, cohe­sive design. The site is exquis­itely woven together using a series of color fades and bright­en­ing, an excel­lent bal­ance of text and graph­ics, plenty of breath­ing room between ele­ments, and strate­gic vari­ety of text size, style, and color. He also includes an excel­lent graphic that uti­lizes Sil­verlight, Microsoft’s Flash™ alter­na­tive — a series of four tabbed screens that switch every few sec­onds with a brief, taste­ful fade as a transition.

This motion makes it clear that these screens, which con­tain infor­ma­tion about the cam­paign and cur­rent events, are the main empha­sis of the front page. Vis­i­tors who want to view a spe­cific screen sim­ply click one of the clearly labeled tabs, and the cho­sen screen is auto­mat­i­cally dis­played with­out the fade transition.

But the atten­tion to detail on Obama’s site doesn’t stop with Sil­verlight ani­ma­tion. Right-​​clicking the page back­ground and select­ing View Image reveals an intri­cate emblem that appears in the cen­ter of every page, but that’s usu­ally cov­ered by the content.

Spe­cial atten­tion is also paid to his Peo­ple page. The name of each fea­tured group is accom­pa­nied by a graphic of the emi­nently clever Obama logo with taste­ful, attrac­tive accents that per­tain to that cul­ture. As if that weren’t enough, his Issues page con­tains unique graph­ics pro­duced in a sim­i­lar style for each dif­fer­ent topic.

Curi­ous to see if McCain’s Web­site uti­lized a sim­i­lar tech­nique, I checked out his Issues page. He opted to use reli­able but unin­spired stock pho­tos. Click­ing the Coali­tions menu but­ton returned me to the main page, which is a def­i­nite no-​​no in Web design. Links should always lead to the place they claim to lead to. Remem­ber: If you don’t have a place for a link to go, don’t link any­where at all.

Yes, I’m still talk­ing to you, John McCain.

Music, Pic­tures, and Vids, Oh My! — Multimedia

With sites like MySpace, YouTube, and Face­book rank­ing 3^rd, 4^th, and 5^th on Alexa.com’s list of the top 100 most vis­ited sites in the U.S., it’s no sur­prise that incor­po­rat­ing mul­ti­me­dia can boost a Website’s pop­u­lar­ity. Videos, pic­tures, music, and the like can make a site look mod­ern and inter­est­ing, but they also carry with them the threat of seem­ing cheesy, inex­pert, and even frus­trat­ing for visitors.

Obama deftly avoids the per­ils of includ­ing mul­ti­me­dia with a Pho­tos page that uti­lizes a clean, intu­itive design. Thumb­nails give the user the option of choos­ing which pho­tos to view, and a brisk but not-​​too-​​quick slide show allows them to relax and watch with­out get­ting frus­trated or bored.

His videos page, Barack TV, exudes a trendy, scrabook-​​y, down-​​home kind of feel. Weath­ered gray boards with the Obama logo in flak­ing paint form the back­drop for a clut­tered assort­ment of framed pic­tures, faded pho­tographs, tat­tered cam­paign posters, and license plates from four of the bat­tle­ground states. Mou­s­ing over these dif­fer­ent images reveals titles of dif­fer­ent videos. This is a dis­tinct depar­ture from the orig­i­nal Barack TV page, which fea­tured a sleek, mod­ern player with a neatly con­sol­i­dated list of videos, but it makes for a much more inter­est­ing and artis­tic layout.

In addi­tion to pho­tos and video, Obama offers sev­eral other mul­ti­me­dia options on his site, includ­ing down­loads like desk­top wall­pa­per, instant mes­sen­ger buddy icons, mate­ri­als for assist­ing with his cam­paign, cell phone ring tones, iPhone apps, and even music.

McCain’s site doesn’t take advan­tage of the many rich mul­ti­me­dia options avail­able — and judg­ing from how the pic­tures and videos on his site are treated, this is prob­a­bly for the best. There’s no slide show for the pho­tos on the front page; to view a pic­ture, the user must click the thumb­nail and then wait for the photo to grow to full size. Click­ing the Pho­tos 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 cre­ation, it ulti­mately comes off as imprac­ti­cal and flashy for the sake of being flashy.

McCain blun­ders on his Mul­ti­me­dia page with a video that begins play­ing auto­mat­i­cally. Any­one who’s spent more than 10 min­utes on the Inter­net knows this is annoy­ing — if your vis­i­tors are lis­ten­ing to music, they have to scram­ble to turn it off, and then rewind the video to the begin­ning so they can catch what they missed. And — sur­prise, sur­prise — the mis­takes don’t stop there.

The list of videos doesn’t include any more infor­ma­tion than the title and a tiny, extremely pix­i­lated thumb­nail, which makes it dif­fi­cult to fig­ure out which video you want to watch. Finally, there’s no easy access to closed-​​captioning or Span­ish. That’s just insensitive.

Keep­ing In Touch — Networking

Net­work­ing and inter­ac­tiv­ity can help keep users con­nected to the Web pages they fre­quent. Know­ing that their input is val­ued can make vis­i­tors feel spe­cial, wel­come, a part of their favorite sites. Most sites would do well to include an easy-​​to-​​find con­tact page and per­haps a dis­cus­sion board. There’s also the option of get­ting involved with estab­lished social net­work­ing sites like MySpace and Face­book. How­ever, try­ing to cre­ate your own online com­mu­nity can be fraught with peril.

Don’t believe me? Check out McCain­Space.

The ambi­tion behind McCain’s net­work­ing page is admirable, but its exe­cu­tion is an utter fail­ure. The clut­tered page opens with a pix­i­lated video of a pro­foundly uncomfortable-​​looking McCain, who deliv­ers a stilted speech about the impor­tance of social net­work­ing sites. I have to give him credit for try­ing, but he really would have been bet­ter off not film­ing this almost amus­ingly embar­rass­ing video. He sounds as anachro­nis­tic as, well, a 72-​​year-​​old talk­ing about the impor­tance of social net­work­ing sites. McCain­Space is a key exam­ple of why most sites are bet­ter off leav­ing the social net­work­ing to Face­book.

But then there are the excep­tions that prove the rule. Sure, Obama has taken advan­tage of the myr­iad social net­work­ing options out there, includ­ing links to 16 pop­u­lar sites for net­work­ing and photo and video shar­ing. But he also cre­ated a savvy, suc­cess­ful social net­work­ing space of his own.

MyBO’s sleek, excit­ing design allows sup­port­ers to cre­ate events, get involved, meet other Obama fanat­ics, blog about their expe­ri­ences, and much more. There’s even a handy tuto­r­ial that appears when a new user logs on for the first time. MyBO is designed far bet­ter than it has any right to be.

Whoops! — Errors

Bro­ken links, mis­spelled words, pix­i­lated pho­tos — errors like these can make your site look ama­teur­ish and even untrust­wor­thy. It’s imper­a­tive for Web design­ers to check, double-​​check, and triple-​​check their sites for errors.

Although their sites are cleaner than most, even Obama and McCain, men whose Web­sites will play a part in decid­ing whether they’ll be elected pres­i­dent of the United States, have errors on their Web pages. Frankly, this is inex­cus­able — par­tic­u­larly 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 shin­ing exam­ple of the amaz­ing 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 atten­tion to detail. No, the true lessons lie in John McCain’s attempt.

Now, don’t get me wrong: I’m not say­ing you shouldn’t vote for McCain because of shoddy Web design. Clearly the man has a lot to offer the Amer­i­can pub­lic — expe­ri­ence, intel­li­gence, an impres­sive record of ser­vice, all that good stuff.

But what if McCain wasn’t run­ning for pres­i­dent? What if he was run­ning a small busi­ness instead? If that were the case, a lot fewer peo­ple would tol­er­ate the mis­takes he made on his Web­site. And that’s the les­son to take from this. McCain’s Web­site com­mits two griev­ous errors: Try­ing too hard and not try­ing hard enough. Instead of wast­ing time with McCain­Space — a doomed enter­prise if ever there was one — he should have con­cen­trated on pick­ing color more wisely. Instead of try­ing to impress his vis­i­tors with hack­neyed ani­ma­tions, he should have checked his site for errors. Instead of cre­at­ing a mediocre site plagued by the same basic design mis­takes peo­ple have been mak­ing since the days of ani­mated GIFs and embed­ded MIDI play­ers, he should have done his home­work on cur­rent design trends.

In a way, his site almost mir­rors his pol­i­tics. The self-​​proclaimed mav­er­ick who votes with the cur­rent admin­is­tra­tion the vast major­ity of the time has cre­ated a blasé site that fails to step out­side the safe bound­aries of Web design, and even repeats a few obvi­ous mis­takes. Mean­while, Obama’s site is poised at the fron­tier of inno­v­a­tive design, incor­po­rat­ing rel­e­vant trends with solid prin­ci­ples and a spirit for exper­i­men­ta­tion and evo­lu­tion, all while keep­ing in mind the most impor­tant aspect of any Web­site — the user.

As far as I’m con­cerned, that’s the change we need.

Screen­shots taken from www​.barack​obama​.com and www​.john​m​c​cain​.com.

Posted in Uncategorized | Comments Off

Where Design Really Fits

As a designer, do you know where your work really fits in the process of design?

We all love Web design. Look­ing at a blank white box on a com­puter screen and using only your mind’s eye, a mouse, and a key­board to trans­form it into a liv­ing, breath­ing Web­site is no minor feat, and there is undoubt­edly a cre­ative rush when it comes to doing some­thing like this. Web design can be a strong artis­tic out­let and it inevitably brings with it the joy that comes with look­ing at your fin­ished work and pre­sent­ing 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 busi­ness, then you must make cer­tain you are in the right mind­set and you use the right process when it comes to your work. You don’t want your designs to fail, but, unfor­tu­nately, there is a strong chance that they will do exactly that. Lets take a step back for a minute and define what a fail­ing design is, and why it fails.

Fail­ing Design

Fail­ing design is not nec­es­sar­ily poor design. This means that a “fail­ing design” is not nec­es­sar­ily an ugly Web­site. Rather, a fail­ing design is one that fails to func­tion prop­erly for the site where it’s used. A design can be very beau­ti­ful, but be ter­ri­ble for its purpose.

If your (or your client’s) goal with a Web­site is to sell some­thing or gen­er­ate excite­ment over a spe­cific idea or cam­paign, you’ll want to design accord­ingly. For a site like this, you don’t want to use a calm ocean pic­ture 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 fail­ing design because it doesn’t sup­ple­ment the site’s goal or message.

The above exam­ple is a gross exag­ger­a­tion, but it serves to show why so many designs fail. The prob­lem lies in the mis­un­der­stand­ing of the process of design.

The Process of Web Design

So many design­ers, espe­cially newer, free­lance work­ers, jum­ble up the process of design. What’s worse is that this is a direct path to fail­ure and they don’t even know it. We’ll be focus­ing 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:

• Plan­ning
  Before you even get a sin­gle idea in your head about what your lat­est Web design is going to look like, you need to do all the appro­pri­ate plan­ning. Mostly, this includes know­ing the answers to impor­tant questions.
• Con­tent Build­ing
  You need to build all of the con­tent of your site after you have a clear plan. This doesn’t nec­es­sar­ily mean get­ting every detail down, but you need to know what your con­tent will be and where it will go.
• Design­ing
  Now you’ll design the Web site. This is a cru­cial step, of course, but if you’ve done the plan­ning and con­tent build­ing first, this part will be the most fun, and most likely the most prof­itable! But keep in mind that there are sev­eral key con­sid­er­a­tions you’ll be tak­ing into account, so you won’t be get­ting wild with your dig­i­tal paint­brushes here.
• Devel­op­ment
  Once you’ve final­ized your design, you’ll turn it into XHTML/​CSS/​PHP/​MySQL and what­ever else your site needs. Devel­op­ment typ­i­cally refers to the tech­ni­cal side of Web design: the cod­ing and back­end stuff.

As you can see (pay atten­tion to this part, it’s impor­tant!), design­ing the site comes late in the game. Many design­ers make the mis­take of want­ing to jump right into the design step, because that’s where a designer’s tal­ents shine. But if you avoid or sim­plify the plan­ning and con­tent build­ing steps, you will end up with a design that prob­a­bly fits the site pretty well, but will ulti­mately fail in help­ing the site achieve its goals.

There­fore, it’s impor­tant that you know and fol­low this process in your pro­fes­sional 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 actu­ally get to start draw­ing, col­or­ing, lay­ing out, and gen­er­ally design­ing your Web­site. First, you need the answers to these ques­tions. You will know these answers if you are design­ing a site for your­self, or your client will know them.

You need to know the answers to these:

• What is your goal with this site?
  Are you try­ing to sell some­thing? Deliver a mes­sage? Share infor­ma­tion? Keep in touch? Etc.
• Who are your site’s vis­i­tors?
  In other words, who is your tar­get audi­ence? This can some­times be as vague as, “stu­dents” or as spe­cific as “restau­rant review pub­li­ca­tion advertisers.”
• What do you want your vis­i­tors to do?
  Usu­ally, if you’re get­ting vis­i­tors to your site, you want them to actu­ally do some­thing. Some answers to this ques­tion could be, “buy a prod­uct,” “sign up for a newslet­ter,” or “learn how to build bet­ter Web­sites.” This is an impor­tant ques­tion; make sure you have a good, clear answer for it.
• Why should they do it?
  Look at this site from the viewer’s per­spec­tive. Why should they be inter­ested in your site? What’s in it for them?

If you or your client don’t have clear answers for the above ques­tions, it’s time to do some research. Find some of your cus­tomers and get these answers or make some calls. Visit other sites that are sim­i­lar to yours in idea and find out what kind of crowd they’re draw­ing. If this is the type of crowd you’ll be work­ing with, then you’ll have some answers.

Once you have good, clear answers to all of these ques­tions, you can start build­ing con­tent for your site and start mak­ing some actual design deci­sions. With just these answers, you can deter­mine the basics, like:

• Color
• Lay­out
• Font fam­ily
• Font size

Col­ors? Lay­outs? Fonts? Ah, here we go; this is start­ing to sound more like Web design! If you know, for exam­ple, that your goal is to pro­vide wildlife safety tips to new campers, you will want a lay­out that allows you to pro­vide clear, read­able text. Because your tips will come mostly in the form of text and illus­tra­tions, 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 some­thing like this). Since you’re deal­ing with wildlife-​​related mate­r­ial, your col­ors 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 Pho­to­shop just yet! You’re still not quite ready to start draw­ing and col­or­ing. Next, you want to build the con­tent of your site.

Step 2: Con­tent Building

There’s a phrase that’s often thrown around in the Web devel­op­ment world: “con­tent is king.” This is true for most Web­sites out there. Most Web­sites want to be found and one key way sites are dis­cov­ered is through search queries. Search engines fre­quently “spi­der” their data­base of Web­sites for new, clear, up-​​to-​​date, and orig­i­nal con­tent, and Web­sites that have good con­tent are rewarded with higher rank­ing and thus they are found more often.

It’s no won­der, then, that con­tent build­ing is such an impor­tant step in Web design. With the answers you got from Step 1: Plan­ning, you should know what kind of con­tent you will want to start build­ing. If your goal is to sell music and elec­tron­ics, and your tar­get audi­ence is col­lege stu­dents look­ing to buy things like iPods and dig­i­tal cam­eras, then you’ll want to write some con­tent that’s light-​​hearted, down-​​to-​​earth, and to the point while still build­ing on the pop­u­lar “lifestyle” trend that sells gad­gets like these so well.

Or, as another exam­ple, if your tar­get audi­ence is a group of pro­fes­sion­als in the med­ical research field and your goal is to pose chal­leng­ing new ideas for col­lab­o­ra­tion or dis­cus­sion, you’ll want to write con­tent that comes off as some­thing of a tech­ni­cal blog.

Ulti­mately, though, the most impor­tant thing you want to do in this step is get all your ideas for con­tent down on paper or in a text file. You don’t need to write the ads for your music and elec­tron­ics right now, for exam­ple, and of course you wouldn’t want to spend the time in this step to write a long med­ical jour­nal entry. For now, it’s enough just to get all of your con­tent down in short­hand. Just be sure you get it all.

Once you have all your con­tent in a place where you can look at it, you’ll want to build your sitemap. This is the final step before you actu­ally start design­ing the site. You can use a com­puter pro­gram to draw your sitemap like I did below, but most of the time a pen­cil and paper works best for this part.

Let’s take a look at a small sam­ple sitemap for the music and elec­tron­ics store we talked about earlier.

Here we can see that our home­page links to four other pages: Store Loca­tions, Music, Elec­tron­ics, and Con­tact Us. The Music and Elec­tron­ics pages each link to dif­fer­ent sub­sec­tions. The Music page lets you choose a genre of music to buy, and the Elec­tron­ics page lets you browse through dif­fer­ent gadgets.

When design­ing your sitemap, it’s impor­tant to remem­ber the 3-​​click rule. Sim­ply, the 3-​​click rule states that a vis­i­tor should never have to click more than three times on your site to do any­thing. In our sam­ple sitemap, we can see that if a vis­i­tor wanted to get our other store loca­tions, they would just need 1 click on the home­page. Or, if they wanted to browse through rock music to buy, they would just need to click Music on the home­page, then Rock on the Music page. Just 2 clicks.

While build­ing your sitemap, you should make sure that every box (or page) on the sitemap will hold some of the con­tent you out­lined ear­lier. All of your con­tent should have a place on your site, and you need to be able to visu­ally see on what pages you’ll put each bit of your content.

And now that we have our plan­ning and con­tent build­ing done, let’s get designing!

Step 3: Design

Many design­ers make the mis­take of skip­ping steps 1 and 2, jump­ing instead right here to Step 3: Design. But if you got here after hav­ing done the nec­es­sary work before­hand, then you’re on the right track!

In Step 1: Plan­ning, you prob­a­bly already got a good idea about what types of lay­outs and design you want to use. Let your cre­ativ­ity flow here. Remem­ber, there are mul­ti­ple lay­outs you will prob­a­bly need for your design. You’ll want a lay­out for your home­page, which, accord­ing to your sitemap, will just con­tain some intro­duc­tory infor­ma­tion or high­lights, some links, and, depend­ing on your goals, maybe some excit­ing imagery.

You’ll also want a lay­out for your tran­si­tional pages. Tran­si­tional pages are pages that just shut­tle the user to more impor­tant things. In the sam­ple sitemap above, the Music and Elec­tron­ics pages are just tran­si­tional pages. The Music page would be small, and con­tain links to the dif­fer­ent gen­res of music below (Coun­try, Hip Hop, Clas­si­cal, and Rock). The Elec­tron­ics page would also be small, and just con­tain small bits of infor­ma­tion while it links to the more impor­tant stuff, like the DVD Play­ers, TVs, MP3 Play­ers, and Dig­i­tal Cam­eras pages. Tran­si­tional page lay­outs should match the whole site, but also be sim­ple so users can spend as lit­tle time on them as possible.

You prob­a­bly don’t want to hear this, but even at this point, you might con­sider leav­ing Pho­to­shop closed for a bit. Instead, try draw­ing sev­eral lay­outs for your site on paper first. It’s a good idea to build mul­ti­ple lay­outs just to see how they “feel” with the site you’re build­ing, and using Pho­to­shop to build lots of lay­outs that you might not even use is time con­sum­ing. It’s much faster to draw some quick and dirty lay­outs on paper to get a rough feel for which way you want to go with the design.

By this point, you prob­a­bly have a twitchy trig­ger fin­ger right about now when it comes to fir­ing your design gun. But take it slow. Here’s some­thing to con­sider about design.

Did you know that Apple, the com­pany behind the designs of the wildly suc­cess­ful iPhone, iPod, and iMac com­put­ers and Mac­books, uses a design process they call “10−3−1?” It’s true; at the 2008 South By South­west Inter­ac­tive Fes­ti­val, I attended a pre­sen­ta­tion by Michael Lopp, Apple’s senior engi­neer­ing man­ager, where he revealed this small lit­tle bit of infor­ma­tion to a packed room filled with designers.

Here’s how it works. Apple design­ers must adhere to the 10−3−1 rule, where design­ers first give them­selves plenty of cre­ative free­dom and come up with 10 good, whole­some designs for some­thing. This could be for a site or a prod­uct, among other things. Then, after com­ing up with 10 good designs, they must go through the painful and often dif­fi­cult task of elim­i­nat­ing 7 of them, leav­ing them with 3 really good designs to work with.

Then, the Apple design­ers will spend some months on these 3 designs improv­ing them and bring­ing them up to Apple’s game. Finally, after all this work, the design­ers must again elim­i­nate 2 of the designs, until they’re left with just 1 pow­er­ful design which gets the final work done and is given the well-​​known Apple brand and polish.

In recent years this type of think­ing has been very good to Apple, and their designs have met with some big suc­cess. If you want your designs to be suc­cess­ful as well, then it’s here in this step, Step 3: Design, that you should take the time before open­ing Pho­to­shop to really plan out your design, tak­ing into account every­thing you learned from Step 1 and know­ing what the site will flow like from Step 2.

Make sure you final­ize your design. Once you have your design ready, there’s no going back.

Step 4: Development

If you’ve final­ized your design (either to your­self or with your client), then you can begin devel­op­ing the site. Depend­ing on how you want the site to work, this could involve such com­plex­i­ties as PHP and MySQL back­end pro­gram­ming, or it could just be as sim­ple as some basic HTML and CSS. Either way, this step involves the actual cod­ing of the site.

Some design­ers are solely design­ers and deal with only the basics of XHTML and CSS, opt­ing to work with a part­ner or hire some­one to do the cod­ing of a site. Other design­ers know the devel­op­ment and cod­ing side just as well as the design side, but these design­ers aren’t alto­gether too common.

Either way, we won’t go into the devel­op­ment of the site here. For the pur­poses of this arti­cle, it’s enough to say that this is the final step, after the design is done, in the cre­ation of a Website.

So, as you can see.…

So, as you can see, actu­ally design­ing a Web­site comes almost com­pletely last in the process of Web design. If you want your designs to be suc­cess­ful, you will take the nec­es­sary steps to work up to the design.

It’s easy to work with the mind­set of, “I’d like to get this design done so I can add it to my port­fo­lio.” Yes, your port­fo­lio is an impor­tant part of being a Web designer. But it’s also key to pro­duce a prod­uct that actu­ally works for your clients (and for your­self). If your work is high qual­ity and suc­cess­ful, then you can expect a great deal of suc­cess for your­self, as well.

Posted in Uncategorized | Comments Off

The Design Environment

I get anx­ious in cer­tain envi­ron­ments. The rea­sons for this can vary from gen­eral dis­or­ga­ni­za­tion, to bad light­ing or clash­ing col­ors, but the biggest cul­prit is usu­ally clut­ter. Clut­ter is the stuff that has no “place,” doesn’t belong with its sur­round­ings, and serves lit­tle to no pur­pose. It’s not that I’m a clean-​​freak, it’s that I’m a designer, and I have a height­ened sen­si­tiv­ity to things that are out of place or irrel­e­vant. When dis­or­der reigns, I get uneasy, anx­ious, even dizzy. On occa­sion, it gets bad enough that I feel the sud­den urge to flee as quickly as possible.

Some­times I get the same feel­ing when I’m surf­ing the web. Every­one feels this sen­sa­tion to some degree, and it trig­gers 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 won­der most web pages are aban­doned within a few sec­onds of viewing.

Whether intended or not, a person’s home and the way he presents it are phys­i­cal man­i­fes­ta­tions of his per­son­al­ity just as the design and con­tent of a cor­po­rate web site are vir­tual man­i­fes­ta­tions of a brand. Envi­ron­ments, both real and vir­tual, affect human per­cep­tion and behavior.

Clut­ter comes mostly from a cou­ple of sources. As a nat­ural pro­gres­sion, a home and a web site seem to accu­mu­late things. At the same time, they are rarely purged of non-​​essentials. There is also the “design by com­mit­tee” effect where every­one from every depart­ment wants their infor­ma­tion front and cen­ter. It’s bet­ter to decide what is most cru­cial and pro­vide easy access to the rest. In a liv­ing room, the kids’ toys should be con­tained in a des­ig­nated bas­ket or toy chest, while on a typ­i­cal cor­po­rate web site, the HR infor­ma­tion should be kept on the HR page. Most peo­ple are not com­ing to the home page to look for employment.

In someone’s home, a quick escape is not always easy, but on a home­page, the “back” but­ton is just a click away. If a web site is like a house, and its pages are like rooms, and peo­ple want vis­i­tors at their homes, how do they make vis­i­tors feel com­fort­able enough to stay? And come back again? How do we as design­ers cre­ate envi­ron­ments to attract, com­fort and retain vis­i­tors? These are the things both inte­rior and web design­ers stew over.

Visual Ele­ments: On a web site, color, typog­ra­phy, iconog­ra­phy and other imagery should be con­sid­ered as care­fully as an inte­rior designer con­sid­ers sur­faces, fur­nish­ings and art. Are they appro­pri­ate for the tar­get user? A site tar­get­ing “metal heads” will not appeal to its mar­ket if it is bathed in soft pas­tels and cutesy typefaces.

Color: There are appro­pri­ate uses of color for spe­cific mes­sages tar­geted at spe­cific end users. Once an appro­pri­ate color palette is defined, a designer can use it to direct users to spe­cific con­tent, orga­nize that con­tent, and cre­ate an appro­pri­ate envi­ron­ment. Too many col­ors, col­ors that clash, or use of too much strong color can make a space feel cramped and cluttered.

Typog­ra­phy: Too many type­faces in one place is like cram­ming a room with fur­nish­ings from dif­fer­ent eras. Stick to a theme, and vis­i­tors will be more com­fort­able and get a bet­ter sense of the mes­sage the type is sending.

Imagery: We have all seen web pages with the cheer­ful cus­tomer ser­vice woman, or the close-​​up of the two hands shak­ing — “clos­ing the deal.” This is clut­ter, just like the faded Matisse prints we hung on our walls in col­lege with scotch tape. Imagery (pho­tos, illus­tra­tions, icons) should enhance an envi­ron­ment by pro­mot­ing a mes­sage or feel­ing. Imagery becomes clut­ter when it serves no pur­pose, lacks qual­ity, or is poorly presented.

Con­tent: A clearly defined hier­ar­chy of infor­ma­tion is cru­cial to help­ing users under­stand what a site has to offer and find­ing the infor­ma­tion they seek. If too many ele­ments are shout­ing at vis­i­tors (flash­ing, bold, large, bright.…), they are likely to be over­whelmed and move on. Sites that have a clear focus and log­i­cally orga­nize less crit­i­cal mes­sages and ele­ments pro­vide a more approach­able envi­ron­ment. Infor­ma­tion that is pre­sented with one voice and sticks to mes­sage is more likely to keep view­ers engaged and confident.

Navigation/​User Feed­back: A house is gen­er­ally set up with its rooms in log­i­cal loca­tions; the entry way gen­er­ally does not lead to a bed­room. The same is true for a well-​​designed web site. If a vis­i­tor has to think about where they can click to get more infor­ma­tion, or click through mul­ti­ple pages to get to spe­cific infor­ma­tion, they are not likely to stick around. The best web sites clearly map out what infor­ma­tion is avail­able where, and lead view­ers to crit­i­cal con­tent via sub­tle feed­back, like but­tons or text that high­light when the mouse trav­els over them.

The bot­tom line is “web clut­ter” affects a busi­ness’ bot­tom line. It has been well doc­u­mented how clut­ter can drain us of time, energy, and trig­ger stress. When con­sid­ered in the realm of the Inter­net, clut­tered web pages make find­ing infor­ma­tion dif­fi­cult and lead to aban­don­ment. Web sites that are “sticky” present view­ers with a com­fort­able and orga­nized envi­ron­ment and log­i­cal orga­ni­za­tion of con­tent that helps view­ers under­stand what is avail­able and where to find it. The goal is to cre­ate an orga­nized “home” with only the nec­es­sary things in their log­i­cal places to allow cus­tomers to find what they’re seeking.

Ahhh. Peace at home and on the home­page through good design.

By: Kyle Mueller
Cre­ative Direc­tor at MUELLER design
www​.muellerde​sign​.com

Posted in Uncategorized | Comments Off