Best Practices Web Design

Looking for the lessons? Get started!

A flying look at the idea of “design” in Web design.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

The Design of Web Design

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity. — Jeffrey Zeldman

The function of design is letting design function. — Micha Commeren

[U]sers spend most of their time on other websites. — Jakob Nielsen

This site does not teach design principles in and of themselves. This site will teach you the nuts and bolts of creating Web pages, but it will not teach you how to design them in any artistic sense. Articles by Francisco Inchauste, Andy Rutledge, and Von Glitschka, among many others, address the topic of design vs. tool — art vs. craft, if you will. Roger Black’s Web Sites that Work, a 1997 publication that addresses the timeless fundamentals of Web design, and Jason Beaird’s more modern The Principles of Beautiful Web Design are two books that in my opinion should be on any designer’s shelf; there are many others.

Design began like any craft: people practiced it, studied it and challenged themselves. While modern design tools and resources certainly make our many tasks easier, they don’t always improve our work. Tools and shortcuts are temporary. Great design is timeless. The best tool available is sitting in our heads; we just need to upgrade it once in a while. — Francisco Inchauste

If the entire idea of “designing for the Web” leaves you drawing a blank, read Rutledge’s article for a good introduction to the concepts underlying basic design. His example of transforming the “About copy” and “Registration copy” of the product “Optimizr” from static, undifferentiated text to a graphically driven, highly structured and reorganized is one of several excellent visual examples of how design drives and enhances function and form. Also, you might take his design test to assess your knowledge of, and responses to, the fundamentals of design. (You can’t cheat, because Andy didn’t give an answer key!) In fact, just explore the various design and design-related articles on Rutledge’s site. He is not the be-all end-all of Web design, and his political views are far from my own, but his work, acerbic and opinionated as it is, is an excellent starting point for those who want to transcend HTML and CSS nuts and bolts. So is Black’s book, though he spends more time than I would like promoting his own efforts and taking whacks at artists and schools of design he doesn’t like.

Designing for the Web, as I see it, is a multi-layered process. It’s a process in which each layer addresses specific design needs related to client aims, brand characteristics and site user habits and expectations. Sadly, the last of these layers to be applied in the process, the application of style, is an oft-maligned element of design. Style for its own sake or by itself is not design, certainly, but stylistic concerns are important to successful design. — Andy Rutledge

Purpose of Your Site

This is so simple and straightforward that it’s hard to believe how many Web sites don’t have a clear, simple purpose. Web designer and marketing guru Tim Priebe writes:

A good web site has good graphic design, good coding, good writing, and good pictures. A better web site has all that and more. A better web site is well researched, simple to maintain and serves a definable purpose. … A good web site looks professional. A better web site also has a clearly defined purpose.

So what is the purpose of your site? To “help people”? To “make money”? To “present information”? Any of these are perfectly acceptable purposes, if a little vague and unformed. Maybe you’d better define exactly how your site intends on helping people. Will it provide a service or information to a specific group of users? Will it assist users in solving a particular problem – say, rearing a toddler, dropping a new engine in an old Chevy, or getting rid of fleas in their carpet? How are you going to make money off the site? Will it give users a favorable impression of your firm or offering? Will it build a list of potential clients? Will it encourage people to buy products (or donate funds) via a credit card, PayPal, or other money transfers? Will it give potential customers an easy way to contact you?

Get specific. Your site isn’t going to “help people,” but it will “help dog owners learn how to control fleas inside their homes.” Your site isn’t going to “make you money,” but it will “encourage potential clients to use their Visa cards to buy this product by showing them how indispensible it is.” Your site isn’t going to “present information,” but it will “provide current news and information to members of the Flat Earth Society.” Even if your site is for sheer entertainment, it should be specific: “This site provides the user with daily flat-panel comic strips that mock American political figures,” or “This site provides current movie reviews written for teenagers who like action films.”

I serve as an advisor on the SitePoint Web Design forums, and as such, I can’t tell you how impatient I get when I see people post about their burning, trembly desires to throw up a Web site and Make Money Fast! When you ask them how they plan on doing this, they start spouting “SEO” gibberish and half-understood business plan formulations, but they rarely state a clear purpose of their site – except to give them Big Bucks No Whammies. They’re like the “underpants gnomes” of South Park:

Step one, collect underpants. Step two, uh, we’ll get to that later. Step three, roll in the profits! (Image used under fair use guidelines from Wikimedia.)

They are of no more use to their potential site visitors than the average panhandler, and they’re about as likely to get rich as said panhandler. It’s all about “make me some money,” but there’s no answer to the question, “Why should I, as a site visitor, send you my money?”

The same applies to non-profit organizations. Why should I donate to your cause, when there are thousands of other worthwhile charities out there angling for my charitable donations? Your site should answer that question. Information, entertainment, same thing: why should I spend my time on your site looking up information, or being entertained, when there are millions of Web sites out there competing for my time and attention?

Designers often get caught up in the beauty and art of their designs, and forget that their site serves a larger purpose (unless it is a site to showcase their art, in which case they’re on point). One of my favorite examples is the Web site of a person who serves as a technical advisor on the Wordpress forums. Nice person, excellent advice, and a truly lovely, well-designed site. It’s a pleasure to examine this site’s code and design. What’s the site about? As far as I can tell, it’s about “random crap he/she found while surfing the Internet.” Why would I go back for a second visit? The real purpose of that site, I believe, is to say to the world, “Look, I designed a lovely site!” And as art, that’s well and good. But what purpose does the site serve? Very little that I can see, and after I spent a few minutes oohing and ahhing over it, I left. Been there, done that, no reason to return.

On the other hand, among the countless examples of excellent design and excellent, purpose-driven content, there’s Veerle Pieters’s site. It’s a truly excellent site created by a design expert, and clearly serves several purposes: it showcases her interest (and her career) in graphic and Web design, it focuses on her avocation as a home and furniture designer, and takes the user on a subject close to her heart, Belgian graphic design. All this is ascertainable within five seconds of her page loading on your computer. Other information and content on her site quickly show us the underlying, all-inclusive purpose of the site: to serve as a business and personal site for Veerle Pieters. This is a site that shows us how to combine lovely artistry with content and purpose-driven craft.

Five Purposes Every Web Site Should Fulfill

Here’s a list, adapted and expanded from the list in Priebe’s book, of five things every Web site, including yours and mine, should do. Not “try” to do or “attempt” to do, but should do, period.

Do or do not … there is no try. — Yoda

Provide information.

The type of information your site provides is dependent on the purpose of your site, whether it be to sell cat toys, entertain testosterone-soaked teenagers, help African refugees, or get your candidate elected. It’s a constant source of amazement to me how many sites fail to provide the information their users need to do whatever the site owner/designer wants the users to do, or provide that information in a clear, usable format.

Increase credibility.

Who are you, and why should I believe anything you say on your site? If you’re providing medical information, convince me that you have some medical knowledge (whether it’s your medical certifications, your experiences as a cancer survivor, or whatever). If you’re the owner of Joe’s Engine Repair, give me some reason to believe you know what you’re doing when you tear into my automobile. A picture of a smiling, hard-working Joe in the bay of his car repair shop might be good, also. Specific testimonials from real satisfied clients or customers – not generic “happy talk” that sounds like something cribbed off the late-night infomercials – also convince site users that your site (and you) is (are) for real.

Create approachability.

If I can’t contact you, why should I trust you with my time, my money, or my interest? How many ways can I contact you: mailing address, telephone, cell phone, e-mail, Facebook, Twitter, LinkedIn? Where are you, physically (if this is something a user should know, i.e. where Joe’s Engine Repair actually is)?

Provide a benefit to the user.

Okay, your site is out there, trolling for customers, soliciting votes for candidates, or offering information to those interested in it. What benefit does your site provide? What can users do once they’re onsite? What do they get from coming to your site?

Provide a benefit to you.

What do you get out of your site? Money? Notice? Status? Better relationships with customers? Potential job enhancement? Satisfaction? Knowledge that you’ve helped rescue puppies or gotten your candidate elected? Whatever the benefits to you are, they are some of the most powerful driving forces behind you putting up a site. Naturally, the benefits are going to be somewhat different if you’re designing sites for other people, but the principle still applies. Are you proud of the design you did for the client (whether it be a paying customer or your Aunt Hilda)? Is it a site you can use to promote your design skills for future jobs?

Web Standards

One area of Web design I have bought into, in large part because of my connection to SitePoint but also because of personal inclination, is the notion that web standards are important.

When you think about it, most browsers are incredibly forgiving of errors. Even if you code in strict HTML (or XHTML), the browsers will put up with a lot of “guff” from designers — badly written code, improper implementations, a certain amount of misspellings, chaotic structure, and many other errors and poor practices, and still make a manful effort to display a Web page in some sort of decent presentation.

A lot of designers – including some very skilled ones both amateur and professional – figure that if a browser will display something written a particular way, it’s okay to code it that way even if it violates all notions of Web standards. They’ll tell you that if it works, if it’s easier, then they have no problem coding with non-standard techniques, and Web standards – and validation – is not particularly relevant.

More about validation.

They have some reasonable arguments, but I don’t entirely buy them. There are a number of reasons why I advocate designing to standards (as much as humanly possible). Many of those arguments are detailed in the Validation page linked above.

Designer Craig Cook gives his definition of Web standards:

[W]eb standards are the functional specifications for the core languages the web is built on. They define how user-agents should handle and interpret these languages, and how web authors should write them.

Like most designers, Cook bases his standards on those hewn out by the W3C, which has, since the inception of the World Wide Web, given us a set of guidelines and best practices that help us build sites that display well in all modern browsers.

Cook continues:

For one computer to understand another, they need to speak the same language and follow the same rules. So you can think of web standards as the rules of grammar that make web languages understandable. Assuming that web browsers are programmed according to the specifications, we need to speak a language the browsers can understand to get our message across. By the same token, a browser manufacturer who wants their software to operate correctly needs to build it so it correctly interprets the language as it is written.

Most – not all – browsers interpret standards-compliant Web designs in virtually the same way. A design that looks one way in Firefox, for example, will display (almost) identically in Opera, or Camino, or (mostly) Internet Explorer. This was not always the case. However, now is not the time to re-examine the Great Browser Wars of the late 1990s and early 2000s. Suffice it to say that with the occasionally maddening exception of Internet Explorer versions 6 and 7 (and sometimes 8), and rare quirkiness from the other modern browsers out there, browsers implement CSS fairly thoroughly, and that in turn enables us to construct elegant, beautifully designed Web pages that look almost the same from one browser to the next.

Chris Mills, a developer for Opera, writes a brief synopsis of where Web design was before standards were widely implemented. It’s an excellent reminder of where we were then, and how much progress has been made up through now.

In the old days, people used to do things like laying out their web sites inside giant tables, using the different table cells to position their graphics, text etc (not what tables were intended for, adds superfluous markup to the page). They used to use invisible images called spacer GIFs to fine tune positioning of page elements (not what images are intended for, add superfluous markup and images to the page). They used to write JavaScript that generated menus etc on the fly (no good for people with JavaScript disabled in their browsers, or people with visual impairments using screenreaders, which get confused by such JavaScript) or worked on only one browser (what about people using other browsers?). They used to insert styling information directly into the HTML using <font> elements (terrible for maintenance, and adds superfluous markup to the page). And many other crimes against web development. The worst thing is that I say “in the old days” above, but the fact is that a lot of people are still doing things like this!

And Web designer and marketer Greg Kise was proselytizing for Web standards back in 2001. The arguments have not changed all that much.

Web development is a messy skill at the best of times, but bad practices like these just make it harder. Using web standards and best practices, as outlined in this course, is the best way to go.

Web designer and author Jennifer Niederst Robbins observes that we should remember not to choose an element based on how it looks in the browser. The h1 element may look chunky when we first add it to our design. But we can change it easily enough in our stylesheet. Robbins writes: “Take the time to consider the meaning or function of each element in your document and mark it up accurately.”

Three Considerations Before Designing

Web designer Louis Lazaris writes that in considering a new design, there are three fundamental elements to consider before touching a keyboard or even a pencil:

• audience
• content
• conversions

I’ve supplemented Lazaris’s observations with material from other sources, and my own observations as well.

Audience

Determining the audience and the content they expect to find may not seem like a design issue, but it is. In fact, if it isn’t done right, the prettiest graphics in the world aren’t going to matter because even if you manage to get visitors to your site, they won’t come back. — Karen Dodds

Who is your audience for your new site (or your client’s)? A lot of designers cop out by saying, “Everybody!” but even though that may be true to a point – you may be designing for a very general audience – still, you need to consider what group or groups of people are most likely to spend time on your site.

Let’s use this site right here as an example.

I’ve designed this site for a relatively general audience, but mindful that everyone who visits this site has some interest in Web design. Because I only speak English, I’ve had to restrict this site to English-speaking users. Though I personally do not suffer from major disabilities, I’ve attempted to construct this site to work with at least the most easily addressed disabilities and special needs of my visitors; however, I’m no accessibility expert, and I don’t doubt that some accessibility and usability needs are not being addressed. My potential site visitors will come from all walks of life, of any ethnicity, religious orientation, gender, political stance, etc, so though I have very strong opinions on many aspects of poltiics and society, I haven’t incorporated any of those into this site.

I’ve tried to design this site to specifically appeal to people new to Web design, and those with a bare modicum of experience and knowledge. I chose the fundamental layout of this design because one, I really, really like it; two, its structure lends itself well to my purpose; and three, it is very clean and easy to use. My own personal design touches come into play most visibly in the choices of the photographic illustrations that decorate each page, the small, CSS3-reliant touches such as border-radius on some of the design elements, the typography, and other important features. My friend and fellow designer Maleika Attawel, who is a far better designer than I am, has a very different design aesthetic than mine. I think the world of her, and respect her tremendously, but while she would have undoubtedly done as good or better a job on this site than I have, it would look much different from what I’ve provided. Different designers have different visions and aesthetics. There is more than one way to achieve a goal, and more than one way to design the same Web site with the same goal and purpose in mind.

Many Web designers who have created tutorial sites for new designers, and especially for younger designers (i.e. teens and even preteens), have used deliberately childlike elements in their designs. One of the more successful efforts along these lines is Lissa Explains It All, a site designed by the then-11-year old Alyssa Daniels. Her site retains many of the almost Barbie-like qualities she employed when she originally designed it, in part to honor and “tie in” to the site’s earlier iterations, and partly because she wants to present a non-threatening design that will entice and appeal to younger visitors. (I’m not ashamed to admit I’ve found Daniels’s site very useful in learning about code and design.)

(Graphic obtained from Wikimedia, a public domain source.)

Other “beginning design” sites have had less success in employing the same aesthetic, often relying on the Comic Sans font, poorly done “clip art” graphics, a condescending, smarmy writing style, and either outdated and/or obsolete information, an overly simplistic approach to the subject, or, in some cases, both. That approach does a disservice to the user, and shows a distressing lack of respect for the site’s target audience.

Vandelay Design has written an article citing 21 specific aspects of Web design that should be assessed in the context of your audience. It’s a good follow-up to this quite general overview.

Content

The content of a Web site includes two major concepts: the structure of the site and the site’s navigation. In other words, how the site is laid out, and how the user can move around the site. There are almost as many approaches to serving the needs of your site’s content (and those who use that content) as there are people who design those sites, so I’ll just make a point that is so obvious some designers forget it entirely:

Content is more important than design.

There’s more about content below.

Conversions

The conversions of a site include two major concepts: visual hierarchy and calls-to-action. In other words, … more to come …

Visual Hierarchy

Bradley writes:

Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow.

Ultimately the visual hierarchy you establish tells a story about your page and site.

Site visitors hit your site, and before their eyes focus, they are asking themselves (subconsciously) three questions:

• Is what I’m looking for on this page?
• Where is it?
• How do I complete my task?

The old newspaper-era idea of the inverted pyramid applies to a certain extent.

(Image originally from Eastview High School’s Lightning Press. The graphic originated from Tango Connect, a site that no longer exists, and the Lightning Press contact information is obsolete.)

I picked this graphic over others available because of the commentary and its applicability to Web site structure. The first and most important layer reads: “Information they must have for your communication to be successful.” Immediately upon opening any page in your site, the visitor needs to know what your site is about – is it a site about Web design, about your favorite movies, about how to rebuild a Porsche engine? If they’re not sure, most visitors will leave immediately, without staying to “solve the mystery” of your badly identified page. Once they figure out you’re, say, an animal-rescue organization, they need to know where you are, how to get in touch with you, and how they can get involved, either financially or by volunteering. All you need here is obvious and well-identified links that tell them, “Here’s more information on how to help us” or “Here’s where we are.” They can decide for themselves if they want to stick around and get more information.

The second layer of information on the pyramid is titled, “Additional information that is helpful but not crucial.” If you’re running that animal-rescue organization site, then this second layer of information might be, say, testimonials, stories of adopted animals, or details about how the organization operates.

The third and least important layer of information is called “Be nice if they had it.” In other words, they don’t need this information, so put it somewhere less obvious. This might be the honoring of a volunteer, or a gallery of cute puppy pictures. No one’s saying the volunteer isn’t important, or the pups aren’t tug-at-your-heartstrings cute, but that information isn’t the main focus of your site (certainly not of your home page).

The graphic reminds us, “Crucial information must go at the beginning. They could stop reading at any time.” Remember, the Internet is an ADHD-friendly place. Attention spans are brief at best. Hit them out of the gate with the most important information, and give them a reason to focus their attention on your site.

Bradley concludes:

Your hierarchy should begin with thoughtful consideration of the content and goals of the page. Only after you’ve decided intellectually the hierarchy of your page should you attempt to visually design that hierarchy.

Calls to Action

Calls to action (CTAs) are simple. They give the site visitor the opportunity to do something, and hopefully the motivation to perform that action.

A call to action answers the unasked question, “That’s interesting. Now what?” — Rich Brooks

Say you visit my animal-rescue site. I want you to send me money so I can get my pups vaccinated. How do I get you to do that?

One thing I need to do is make it clear how to do just that:

It’s big, it’s orange, it’s clearly marked. If you want to donate, here’s the way to do it. And it conveys a sense of urgency – don’t wait, don’t procrastinate, do it NOW.

Web marketer Rich Brooks reminds us:

The mistake that many site owners make is believing the site visitor knows what’s expected of her. That she’s arrived because she is ready to buy a signature pottery piece, or make an appointment for a Botox injection, or subscribe to a newsletter.

Nothing could be further from the truth.

He’s right, and he’s not insulting the site visitor. Most visitors don’t come to your site ready to do anything. They come to your site to look for information and decide whether or not to do something. They’ll more readily donate money to your rescue organization if you tell them (better, show them) why they should, and make it ridiculously easy to do so.

There is, of course, the issue of overkill. Many, many sites inundate you with screaming CTAs everywhere, veritable tsunamis of persuading, cajoling, pleading, ordering elements all trying to convince you to click here, donate there, buy this, do that, and do it NOW NOW NOW. You have to let some taste, grace, and restraint guide your CTA structures.

Gavin Doolan of Google Analytics writes:

In an attempt to satisfy the needs of every possible visitor, landing [home] pages are often crammed full of text, graphics, special offers and sometimes even advertising banners. Your call to action is competing with all that noise. Visitors are often left confused and unsure what to do.

Doolan gives a number of techniques for increasing the effectiveness of your CTAs without going overboard and turning your site into some crazed marketing hack shop. Jacob Gube of Six Revisions also gives a number of techniques, each illustrated with real-world examples.

The Ten Rules of Design

In 1997, print and Web designer Roger Black, in his book Web Sites That Work, gave us his “Ten Rules of Design.” The idea that there are ten, or three, or a hundred, “rules” of design is itself suspect. Forget the idea of rules and think of these as powerful guidelines for your design that will empower your designs and make your users happy. You’ll notice some caveats along the way, as I don’t take Black’s rules as stone engravings, either.

Put content on every page.

A page without content serves no real purpose. Content doesn’t necessarily have to be text: an artist can put an image of a painting on a page with no other content, and have it stand alone beautifully and expressively. Black notes that too much content on a single page is as bad as not enough content: “A reader should never have to plow through forests of buttons to get” whatever they are looking for, be it news or the latest Tweet from a celebrity’s blog.

The first color is white.

The second color is black.

The third color is red.

Black is serious. The most classically simple and powerful color combination is white/black/red, and we can see that on tens of thousands of sites with no need to strain Google’s capabilities. Think of your “average” high-text content site, say the Web site for a newspaper. White background, black text, pops of red as design decorations, say the navigation buttons or the links. Simple, right? Black’s book gives an illustration of an image from the Incans around 1490 as an example of white/black/red design, but you can go back as far as the ancient Greeks to see the color combination in striking and effective use. A few years ago, white/blue/orange was a tremendously faddish color combination, toning down the stark contrast of the black/red elements and adding warmth, friendliness, and an element of casualness to designs. Nothing wrong with that, but that color combination, as ubiquitous as it is, is already fading in popularity. White/black/red is forever.

Never letterspace lowercase.

Who would do this? Most novice designers don’t even know how to add extra spacing between lower-case letters, and wouldn’t think to do it if they could. It’s a print convention that some few designers have picked up on because they think it makes their text look cool. It does, when used sparingly and in headings or other “splashy” text strings. Using it in standard textual content ruins the natural rhythms of the lettering. Black quotes pre-Web typeface designer Frederic Goudy: “A man who would letterspace lowercase would shag a sheep.” What else needs to be said? Well, he also quotes one of his colleagues, Theo Fells, who calls such hard-and-fast rules derived from traditional typography “fuddy-duddies.” Hmm. At any rate, you should know what you’re doing if you letterspace your lower-case typography, and eye it with suspicion if you do.

Never set a lot of text type in all caps.

This is another typographical “rule” derived from print, and is often broken by two sets of people: authors such as Hunter S. Thompson, Harlan Ellison, and others who know what they’re doing, and kajillions of emotionally insecure idiots who think that PUTTING THEIR WORDS IN ALL CAPS MAKES THEIR IDEAS HARDER TO REFUTE or THEIR EMOTIONAL POSTURING THAT MUCH MORE COMPELLING. Doesn’t work, does it?

A cover should be a poster.

True enough as far as it goes, but many Web pages don’t devote their home page to merely a poster-ish graphic and such. (Okay, some do, they’re called “splash pages,” and most of the time, they should be avoided like moldy sardines.) Best to make the top part of your page the “poster,” and make sure the user can access real content quickly and easily. If your “poster” page has a single “Click to Enter” link, you’re doing something wrong.

Use only one or two typefaces.

When kids first learn to create Web pages, they invariably try to use half a dozen fonts, the more ornate and whacked-out the better. Let them. At some point, they’ll figure out that they can’t read all the content they’ve hunted and pecked over the keyboard to create. The purpose of typography is twofold: to be readable, and to contribute to the artistic design of the site. If you can’t read your site’s text because you set it in Monotype Corsiva (a popular flowing handwriting font), change it to Helvetica or Arial. Your readers will be glad you did. The combination of two typefaces – often a blocky serif font for headings and such, and a miminalist, elegant sans-serif for textual content – is very popular, and for good reason: the combination looks good and can be read with no difficulties.

Make everything as big as possible.

Again, true enough as far as it goes. Readability and ease of use is key, and to those ends, bigger is usually better. Just don’t get carried away here.

Get lumpy!

Black is talking about the propensity of many text-heavy sites to give their users long pages of smooth typefaced text, unbroken by headings, images, different typefaces, and so forth. He also warns against the monotonous effect of “picture, headline, picture, text, ad, headline, picture, text, ad, and so forth. … Newspapers are the worst offenders. No wonder no one under thirty reads them! Why can’t a newspaper occasionally run a full-page picture? Or a 10,000 word essay? Wake the reader up!” He then breaks away from kvetching about print design to a useful caveat about designing for the Web: “And why do 95 percent of Web sites have a graphic home page followed by legions of pages that look like mimeograph newsletters with snapshots stapled to them?” Such a good question.

The Three Layers of a Web Site

Like the cakes your mom might bake (not mine, she despised baking), Web sites are made up of three layers. (This part of the page owes a great deal to Cook’s lucid descriptions.)

• Content — HTML or XHTML
• Presentation — CSS
• Behavior — JavaScript or another client-side scripting language

The HTML content layer tells the browser how to denote the different parts of the document, and what each part means. This provides the basic structure for a Web page, and can be considered the “bottom layer.”

The CSS presentation layer tells the browser how to visually display the Web page. It is the “second layer” of the site, controlling the appearance of the site but leaving the structure intact.

The JavaScript behavior layer tells the browser what to do when certain “events” occur, letting both the user and the designer manipulate some parts of the Web page to allow enhanced functionality and interactivity.

Cook sums up the integrated functionality of the three layers:

These are different languages performing different tasks. When these facets of the page are all mixed together, the language becomes muddy and difficult to understand. But if we separate the layers, we end up with three distinct-yet-connected beings, each of which can be modified and maintained without interfering with the others. Each layer then becomes lighter and stronger.

Note: Cook provides a clear distinction between the terms “document” and “page,” a distinction I had not considered before reading his article. He writes that a document is ”[t]he plain text file containing the content and markup which is served to the browser,” while a page consists of “[t]he content (text, images, objects) when rendered by a browser.” To differentiate: “a page is what you see, but the document is what you build.” Excellent distinction, and one I intend to follow through the course of this site, even if I have to rewrite some of the already-written pages.

Web sites and CRAP

Web designer and SEO expert Steven Bradley gives us four principles of design that we would do well to observe. Together, they create the inartful acronym CRAP, which stands for:

• Content
• Repetition
• Alignment
• Proximity

Bradley based his observations on his reading of a book by graphic designer Robin Williams, The Non-Designer’s Design Book.

Content

We’ve already seen several experts discuss content, and there’s an entire section on it below, all of which should tell you something. I’m going to incorporate Bradley’s observations into that section.

Repetition

Bradley, via Williams, writes:

The principle of repetition: Some aspects of the design should be repeated across the entire design.

Any site worth its salt uses repetition. If you choose to use in your first <h2> heading the Georgia typeface at a size of 18px, that’s what you should use in all of your <h2> headings, unless you have an overriding reason not to. You set a theme for an element — a heading, a blockquote, a paragraph, a blog post, a forum comment – and you carry it through in your design.

Not to blow my own horn, but look at the similarities carried on throughout the design of this site’s pages. Same heading and footer, same navigational links, same three-column design for the central portion of the pages … the same design elements repeat throughout the design. That gives a certain level of comfort to the user, who knows, for example, that all of the pages will have the same links in the same place no matter what page he or she is on.

On the other hand, repetition can lead to an overly homogenous site, where nothing stands out from any other component. If something needs to contrast against another element, it should contrast strongly. The heading of a page should be discernably different from the footer or the content areas. The navigation should be obvious from the outset. The links should stand out. Want someone to click on a button? Make it an unmistakable “call to action,” either through sizing, color, typography, positioning, animation, or some combination thereof.

Bradley, in separate articles, gives an example of a fictional site design and its improvement through repetition of color, font choices, and borders, and through contrast.

Alignment

Bradley, via Williams, writes:

The principle of alignment: Nothing on a page should be placed arbitrarily. All elements should have a visual connection with something else on the page.

When you see elements — text, graphics, dividers, etc — stacked haphazardly one on top of the other, with no spatial relationship to one another,

Bradley discusses, in more depth than I want to plumb, the idea of using a grid to lay out a design. You can Google the phrase “web design grid” to find any number of tutorials and resources on grid-based layouts if you want to learn more. For now, take a look at the print layout below. It has grid lines superimposed on it for your reference.

(Graphic obtained from Wikimedia, a public domain source.)

Notice how the left edge of the text blocks line up precisely with one another, except for the “Winter 2007 season” text block, which lines up with the previous grid line. This is a deliberate layout choice and did not happen by accident.

Bradley also gives as an example the Oxford Garden furniture site, a simple yet excellent example of grid-based layout.

Grid layouts are not mandatory for good design, but they can help.

Bradley gives a brief but excellent walkthrough of a fictional site design being improved through alignment in a follow-up to his earlier article.

Proximity

Bradley, via Williams, writes:

The principle of proximity: Related items should be grouped together.

Well, duh, this sounds quite obvious. But you’d be surprised how many designers – sometimes very good designers – ignore this principle.

Bradley gives as an example the Arts Design Studio website as an example of proper grouping. If you visit the link, you’ll see six elements grouped together farther down the page. (In Bradley’s screenshot, they were under the title “Solutions,” but that title has since been removed.) Each separate component – Web, SEO, Graphic, Video, Photo, and Media – looks the same, has a similar icon, coloration, typography, block structure, and so on. They’re like six blocks stacked on top of one another in rows of two. Nice job.

In contrast, I’m reminded of a development job I was involved in with someone else as the lead designer. I won’t go into specifics, but basically, he wanted to split the site navigation into two separate groups. I opposed the idea, on the groups of proximity – all site navigation elements should be together unless there is an overriding reason not to place them together. I didn’t accept his arguments for dividing them. (The argument became moot when the entire design was abandoned, but that’s another story.)

Bradley provides a separate article showing how a fictional Web site was improved via the principle of proximity.

Focus on Content

We said it above, and we’ll say it again.

Content is more important than design.

In most cases, content outweighs design in importance. Unless your site explictly requires a focus on the site’s design over its content (see web designer Craig Grannell’s quote below about experimental or artistic sites), your site should put its content above everything else. Your site should be structured with the primary goal of making your content easy to find, easy to read. Grannell reminds us:

It’s imperative that a visitor doesn’t spend a great deal of tiume looking for information that should be easy to find. Remember, there are millions of sites out there, and if yours isn’t up to scratch, it’s easy for someone to go elsewhere.

The classic example is Craigslist. It has essentially the same stripped-down format and design, such as it is, that it’s had since its inception in 1995, and relies on incredibly minimal CSS and JavaScript to function. Any modestly knowledgeable designer could have whacked that design out on his lunch hour. However, it is one of the most heavily trafficked Web sites (or family of Web sites) on the Internet, serving millions of people in dozens of cities and regions around the globe. In many ways, it violates some of the most fundamental tenets of Web design — but because it serves excellent content, is structured in an easily grasped format, and is incredibly easy to navigate and use, the site works.

Michael Seidel, a usability and content management expert, writes of the need to focus on content first and foremost in your designs. Content is indeed “the seed of the design process,” he writes, but the structuring and formatting of content is itself an integral part of visual design. Seidel writes:

You can strategize until you’re blue in the face about what your content should be and how it will be created and maintained. But ignore how it will be presented and your content will flounder once it leaves your cozy den of theory and hits the real world.

Seidel writes that he is talking about “simple formatting”:

• Strong headings,
• Bullet points,
• Short sentences, and
• Scannable paragraphs

Seidel writes that no matter how obvious these elements may seem in their necessity for creating usable designs, designers forget it over and over again. He bemoans the prevalence of “impossibly cluttered and kludgy design” even on today’s Web.

Seidel writes:

Your readers need content they can kiss. Don’t make it a complicated kind of love. Break things down to their core. Written content with a strong visual hierarchy helps simplify the creation process. It helps designers build clean, purposeful interfaces.

These things matter.

Never forget.

Formatting may seem like minutia, but it’s not. Make sure that content design is a key part of your content strategy equation. Fretting over style will pay off in crazy amounts in the long run.

Grannell notes that some sites won’t fall under this set of guidelines. Grannell reminds us:

There are exceptions to the general rule of a website having a structural and logical design — notably sites that are experimental in nature or the equivalent of online art, thereby requiring exploration. In these cases, it may actually be detrimental to present a straightforward and totally logical site, but these cases are strictly a minority.

Interactivity: The Changing Paradigm

Roger Black brought up a point in 1997 that designers and developers are still grappling with today: the fact that the idea of the top-down, “you read what I write” paradigm is changing in favor of a push-pull, “everyone reads and anyone who wishes contributes” mindset. Black writes:

For someone like me, who started in print, the most alarming thing about the Internet is that the reader can publish. It takes a while to remember that we are not broadcasting on high, we are not delivering typeset, printed pieces. The Net is a space where the reader actually writes. It’s necessary to move from a linear, one-way paradigm, like newspapers, to a two-way paradigm — like telephones. On the Net, information isn’t tumbling down a hierarchy; it’s flowing collaboratively. Designers have to move aside and make a place where the customer can speak, where they’re comfortable and feel at home. It’s fascinating; this is a very challenging design space.

Black wrote this at a time when no one owned a smartphone, and only the privileged few had cell phones. Facebook and MySpace (not to mention Squidoo and StumbleUpon and the million other “social networking” entities) hadn’t been introduced yet. Not only is Internet content something that readers expect to be able to access and contribute to instantly, they can now do it on their phones while riding the subway or waiting in line for lunch. Designers have to understand how that changes the way content is created and presented.

With the Internet there are no longer providers and customers, or publishers and retailers. The new order makes the viewer the producer, the director, the editor. It’s a collaboration. — Roger Black

The Joy of Cooking

Designer and content strategist Nicole Jones serves us a useful metaphor: design is like cooking a meal.

Before you begin cooking, Jones writes, a chef does some planning. Who are the guests? What do they like and dislike? How are they feeling — what is their mindset? What are they coming to eat? (Patrons visiting a restaurant specializing in local seafood would be surprised to be told that the evening’s special is meatloaf.) What is available at that time of year?

A good designer asks similar questions. Who is the site for? What do the likely users prefer, and what do they avoid? How are they likely to approach the site? What do they expect to be able to do upon clicking into the site? What can the designer provide, and what is beyond his capabilities or inclinations?

Building on her metaphor, Jones continues:

A great chef is an accomplished editor; the entire experience matters. The menu is consistently good from start to finish, without overt techniques or an overwhelming amount of ingredients. The chef disappears. The food is not intimidating, precious, or minimal. … After all, a delicious meal is not a masterpiece. It’s sweet and savory, and intended to be eaten.

She concludes that designers “ask questions, cook with the diner in mind, and use [their] tools responsibly.”

In line with Jones’s example, my wife frequently reminds me that in design as in cooking, patrons eat first with their eyes. She’s exactly right.

Designing “Above the Fold”

One of the stronger design concepts has been designing “above the fold,” or placing everything of importance in the top of your design, so your site visitors don’t have to scroll down to see that content. Taken to its extreme, this has resulted in huge amounts of content shoved “above the fold,” and cramped, overloaded designs that users found confusing, overwhelming, and off-putting. It is certainly important to put some of the most critical elements of the design “above the fold”: the site visitor should know what the site is about, what they can do there, how they can explore the site, and how they can become involved (whether by volunteering, donating, buying a product, or whatever) without scrolling. Web designer and author Jennifer Niederst Robbins reminds us:

It is here that the user makes the decision to continue exploring the site or to hit the Back button and move along.

She is absolutely correct. But it is also a mistake, I believe, to get too wrapped up in the concept of “above the fold.” Early studies showed that Web users were reluctant to scroll down for more information, but more recent studies have contradicted those findings. If a visitor to your site sees a reason to stick around, he or she won’t mind scrolling to find supplementary and secondary information.

Limitations of Web Design

Web design consistently wrestles with limitations that print designers don’t have to sweat over. For example, a magazine layout can easily be done in columns, something that isn’t so easy on the typical Web page (one of several methods for making columns involves JavaScript, not an ideal methodology for doing layouts, and columnar print forces readers to scroll down and then back up to read a section of print).

Magazines can easily use very large or very detailed graphic illustrations, whereas Web designers have to be aware of download times and other limitations of large graphical content. Also, resolution on the Web is far lower than what print designers work with.

Font choices are very limited, compared to what print designers have. Most print designers use serif fonts for body text, whereas many Web designers feel serif fonts are hard to read at smaller (i.e. “standard” body text) sizes.

More about fonts

Moreover, while the print designer can assume that everyone will see the particular magazine article or display in much the same way, the Web designer can ill afford to make that assumption. Web users have a range of operating systems and browsers at their disposal, as well as a variety of monitor display sizes and types.

More about monitor displays

However.

As Craig Grannell notes:

The Web is a truly magnificent medium, and for every downside there’s something amazing to counter it. So what if the resolution’s low? Nowhere else can you so effortlessly combine photography, video, sound, and text. Sure, it’s all well and good to read a magazine, but the Web enables interaction, and navigation can be nonlinear, enabling you to link words within specific pieces to other articles on your website or elsewhere on the Internet.

What he said.

And legendary Web designer Dan Cedarholm answers the question of whether web sites should appear the same in all browsers. This is as definitive an answer as you will find on the subject. And brief.

Learning from Mistakes

The site Web Sites That Suck has, for well over a decade, done the Internet a great service: it helps teach proper Web design by mercilessly mocking those sites that handle it badly. The site proprietor, Vincent Flanders, has a wicked sense of humor that has left some designers outraged and others scrambling to correct the mistakes Flanders points out. I hope you would fall into the second category. (Same for me.)

I’m cribbing from a page on the WSTS site, confidently titled Biggest Mistakes in Web Design 1995-2015, to give us a reality check on why others’ sites suck, and how we can avoid their mistakes. The WSTS page gives plenty of illustrative examples using sites that make the very mistakes they cite. Make sure your site never gets “profiled” on this one …

No One Cares about Your Site

No one besides yourself, and perhaps someone very close to you, gives a hoot about your site. Truly. What your site visitors care about is their own problems, and how your site can help them. They want information, or they want to buy something, or they want entertainment, or they want to feel like part of a community. If your site can help them with their needs, they’ll visit it time and again. They’ll send you money. They’ll lavish attention and praise on you. And when your site stops helping them, they will run off to another site that gives them the help you are no longer providing.

No One Will Stay to Figure Out What Your Site is About

You have four seconds, approximately, to inform your visitors what your site is about. You might have five. You definitely do not have ten.

I tried, for better or worse, to address that problem in this site. When you open any page of this site, the first thing you see, in enormous typeface, is “Best Practices with HTML & CSS.” Underneath it, in smaller yet still prominent type, is “Beginning Web Design Taught the Right Way.” What does that tell the first-time visitor? Well, they can learn “best practices” about “HTML and CSS,” which is perhaps a bit diffuse. The second line is more straightforward: “beginning” – for beginners – “Web design taught the right way” – in other words, you’ll learn the proper way (or at least a proper way) to design Web sites from these pages. That tells the visitor what the site is about, and gives them an idea of what they will get from poking around the site’s contents. If that’s what interests them, they will indeed stick around. If not, they’ll be off to greener pastures.

And remember, most people will not visit your home page first. They could go to any page of your site from an outside link, a search engine result, or just random chance. Every page must be clearly labeled as to what the site is about and what it does, not just the home page.

Lack of Contrast Drives Users Away

Don’t think so? Think again. If they can’t see that light gray text against that off-white background, which one will they do? A) stick around and squint, or B) get irritated and go somewhere else. If you answered A), you don’t know Web surfers very well.

Stay Out of Your Visitors’ Way

Many, many designers forget that their users are there to, well, use the site. They place design elements on the page that interferes with the visitor’s ability to get to the content. Flanders has put up a YouTube video of a site that has a little guy in a business suit “welcoming” visitors and “telling them a bit about the site,” all while the home page sits behind him, teasing the viewer with content they cannot access until the guy shuts up: Web Pages That Suck – Don’t Have Stupid People Talking. (You can’t stop him! And when you click on another site page, will he appear again? I’m not sticking around to find out.)

Perhaps the worst offender is the splash page – the “introductory” page that stands between the user and the site. Many designers include Flash videos and other frippery that does nothing except waste the user’s time while it “promotes” or “illustrates” the site. Flanders has even less patience for splash pages than I do: he has a YouTube video pointing out the flaws of one particularly egregious offender: Bad Web Design – Flash Splash Pages. And it’s not just obscure sites doing this. Here’s one by the telecommunications giant Sprint from 2008: Web Pages That Suck – Sprint “This is Now”. This site goes from a truly impenetrable Flash “introduction” to a site that neither Flanders nor I can comprehend, but turns out to be a second introductory page. This is a two-minute video; I spent far more time watching the video than I ever would battling Sprint’s Web site.

Take a Look at Other Sites First

Flanders gives the atrocious example of the Accept Jesus, Forever Forgiven page, often dubbed the “Rainbow Jesus” page. I’ve noted this elsewhere in these pages as a Horrible Example of Web design gone terribly awry. I would never question the devotion and faith of the folks who provide us this site, but I join Flanders in wondering if the designer has ever seen another Web site. Why would such an awful example of bad design stay on the Net for so many years? (The site has a number of other “design atrocities” throughout its pages, starting with the home page, which bills the site as a “Interactive 3-D Virtual World Ministry” and hammers the visitor with the tremendously loud sound of a rainstorm (and has an animated graphic of rain falling behind the site content). The site bills itself as “The next phase of the evolution of the Internet.” I hope not, or I’m changing professions.

Epic Navigational Fail

Flanders spends a lot of time harping about “mystery meat navigation” and other navigational “schemes” which seem designed to stop people from figuring out how to get around from one page to the next in their sites, or knowing what will happen when they click. If I click on the “Contact Me!” page of your site, I trust I will get to a page that will tell me how to contact you, not a page filled with dancing llamas or an invitation to send you money. I’d also like to see what the links are on your page without aimlessly moving my mouse around, hoping to see the cursor change or a hover effect happen to alert me that I’ve just found a clickable link. Flanders writes:

All web navigation must answer these questions:

Where am I?

Where have I been?

Where can I go next?

Where’s the Home Page?

Where’s the Home Home Page?

Navigation must be simple and consistent.

He provides a YouTube clip of a puzzling navigational scheme that looks something like the footlights on a stage, but requires you to mouse over each footlight to figure out where the link takes you: Web Pages That Suck — U of Calgary. As he notes in the video, the University of Calgary changed their site to get rid of the old nav scheme.

Text’s Purpose is Not Illustrative

Text is there to provide information, not to illustrate your site. (There are exceptions to this, but unless your site is one of these, or something similar, your site probably doesn’t qualify. Mine certainly wouldn’t.) Use text to inform your visitors (or to entertain them, or debate with them). Use illustrations to illuminate the concepts behind the text, or to illustrate examples, or just to decorate your page. But as a rule, don’t use graphics to convey textual information.

Staying True to Your Identity

If I visit NASCAR driver Jeff Gordon’s page, I’m pretty sure right off the bat what I will find: lots of photos and textual content about Gordon, the cars he drives, the racetracks he frequents, and so forth. And guess what? I got just that. I would have been surprised had Gordon’s page looked like a scholar’s list of best 17th-century sonnets. So, I imagine, would Gordon when he visited his page (you don’t think he designed his own, do you?). My site, I hope, looks like an informative resource for Web design information. It doesn’t look like something wildly different from what it is. No one’s advocating cookie-cutter Web design – all veterinarians’ sites must have happy dogs and cats prominently featured, all bank sites must use subdued color schemes, etc – but if you’re designing a site for a podiatrist, don’t make it look like the home page of a Las Vegas strip club. And vice versa.

Don’t Serenade Your Visitor

As I’m typing this, I’m listening to music from a YouTube video. That means I already have aural content going. When I click into a page, I don’t want another piece of music, or a guy yammering at me, or birdcalls, or rain falling on a tin roof, or any sound effects at all intruding on what I’m already listening to. When I click into a page that assaults me with aural content, I first turn down my volume to zero, then I click out of the page. Studies show that a vast majority of Web surfers do much the same thing. If you must provide aural content, give the user the chance to activate it on their own. Don’t fall into the trap of forcing the visitor to hear your sound file from the outset and give them the opportunity to deactivate it. Let them decide what, if anything, they want to listen to. (This doesn’t necessarily apply to sites for musicians and such. One of my favorite keyboard players, Jordan Rudess, includes some nifty musical and sound content on his site. He’s a musician, I expect music from his site. I’m not as thrilled with his splash page, but that’s another topic that’s already been discussed.)

If you have music playing on your site, and you’re not a musician, lose the music. You’re driving away customers and losing sales. — Bob Parsons, CEO of GoDaddy.com

Flanders included much more in his page, but I will leave that to you to read for yourself.

Your approach to design should be very much like the old masters’ approach to painting. You learn how to paint classically, according to all of the rules, and then if you want to go off and paint like Jackson Pollock, fine. But you learn to do it the old-master way first. The new school says you don’t have to learn the old way; you’re not going to paint that way anyway, so why bother? Give up on all that. As a matter of fact, the new school says, you’re at a disadvantage doing all that old stuff. You might as well just do it free-form, whatever you want to do, and then you will invent some new language. Just like David Carson. I guess it’s up to the viewer to decide who is more successful. — John Schmitz

Further Reading

Jeffrey Zeldman, the dean of Web design, gives us a wake-up call about the misconceptions that make up most people’s perceptions of the concepts behind Web design.

It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant. — Jeffrey Zeldman

Steven Bradley has given us a Design Hierarchy of Needs, ranking five fundamentals of design from the most basic need of functionality – the site must function properly – through reliability, usability, proficiency, and finally creativity as necessary elements of any Web site’s design. A recommended read.

Alex Dawson, an inordinately talented Web designer and my friend from SitePoint, recently contributed an article to Smashing Magazine, Web Designer as The Artist, Scientist And Philosopher. I’ve done my own musings on Web design as artistry and/or craftsmanship; Alex has a different, and excellent, take on the subject.

David Rodriguez attempts to find the middle ground in (business-oriented) Web design between unbridled creativity and bland, generic “corporatism.”

A much more narrowly focused article from Sam Dunn focuses on several excellent methods for strengthening the visual appeal of your site.

CSS Zen Garden is one of the best places on the Internet to begin looking over Web designs. Anyone can submit a site (re)design; the HTML remains exactly the same for every version of the site, but the CSS is dramatically different from one submission to the next. One person’s version might be militaristic and sharp-edged, while another might take you into a bright blue oceanscape. A seminal showcase of the infinite variety of aesthetic, concept, and function that can be produced for the Web.

More reading and content will be added periodically.

The evolution of a website can equally be put down to a mixture of nature (what the coder puts into the site) and nurture (what the end-user adds with growth), both of which have significant importance and shouldn’t be ignored. — Alex Dawson

Keep in mind that a user is simply a human being, an average Joe, a passerby on the street who might be a web-savvy tech-support guru, or an elderly lady who’s only just started using a computer. People use web sites, so it’s a handy term, but just try to keep in mind that we’re talking about regular humans, rather than some kind of machine-operating robot. — Elliot Jay Stocks

Simplicity is the ultimate sophistication. — Leonardo Da Vinci