Elements of Style for Web Design

In The Elements of Style, Strunk and White talk about style:

[One might] often suppose that style is a garnish for the meat of prose, a sauce by which a dull dish is made palatable. Style has no such separate entity; it is non-detachable, unfilterable. The beginner should approach style realizing that it is himself he is approaching, no other; and he should begin by turning resolutely away from all devices that are popularly believed to indicate style - all mannerisms, tricks, adornments. The approach to style is by way of plainness, simplicity, orderliness, sincerity.[1]

We shouldn't be surprised to find exactly that approach is best when engaging in web design.

Table of Contents

• Introduction
• Elementary Principles of Composition
• Elementary Rules of Usage
• An Approach to Style
• A Few Matters of Form
• Conclusion

Elementary Principles of Composition

1. What is the purpose?
   What do you intend to have your pages do? They might entertain, sell, inform, or report. They might keep records, impress clients (though they won't if the design is bad!), recruit members, gain customers or provide services. Each of these should help dictate your design process. Entertainment implies glitz and glamour - pizzazz. Entertainment pages would be much differently designed from pages that are for reporting of information.

   Once you've determined your goals for you pages it should be easy to decide what type of design, what level of quality and how much you're willing to spend on the project.

2. Who is the Audience?
   Decisions based on audience will affect many aspects of the design as well. Things to take into account here include whether the reader is an existing client or someone who's never heard of your organization. You should also consider: will they be using a Mac, PC, or high-end workstation? Would the majority have a high-speed connection or use modem access to the internet? Also consider age, activity level, professionalism, and common interests among the majority of your perceived readers.

3. What is the Competition doing?
   Keep an eye on what the other sites are doing - this can help you decide your quality level, and perhaps the breadth and depth of material presented. You can either run with the pack so as not to be too far off-base from the other guys, or you can set the pace, doing new and innovative things to set yourself apart. The best bet is to look for a singular style that doesn't alienate, yet provides the basic services you need to support.

4. What will your pages say?
   Examine your goals and decide how to reach them using a combination of words, images, sounds, etc. in your pages. Don't forget that people have different ways of needing to find the same information. Consider multiple views into the same material to account for this.

   As in any medium, good writing and good illustration are critical to conveying your message and to keep the audience returning to your site.

   Consider short descriptions with text linking to longer information, giving the person browsing the choice - similar to the way thumbnail sketches of images or photographs are linked to bigger, more detailed images - allowing a user to make the choice as to whether or not they care to wait for the download.

5. How will the pages look?
   The text on your pages may give a user the information she needs, but design will keep her intrigued and coming back. The concept of your organization should also affect your design. Are you perceived as a dignified and formal or casual and informal? Is your organization seen as stable and reliable, or innovative and dynamic? Each of the qualities you perceive should stimulate the design process.

6. What is your timeline?
   A big promotion on the horizon might dictate a speed up in the production cycle but don't put your site up until it's really ready. There's nothing worse (when it comes to the web) than visiting a site and hitting one or two buttons only to find "Under Construction" or worse "404 Not Found".

   All of these steps should lead to the first pass design of your pages. That design can be done on paper or on the computer, but should not be lead to an announced site until the design is complete, the pages created, and the site tested.

7. Who can test your site?
   Just as software has it's alpha and beta testers, so too should your web site. Solicit uninvolved parties to try the links and look for information about your organization they might want to know. Use their feedback to modify the design or individual pages accordingly.

1. Make sure your links work.
   This will prevent disappointed readers. The best way to make sure this doesn't happen is to test the pages several times - from different domains if possible, at minimum from different machines. Then check the error logs on a regular basis to make sure others aren't finding bad links on your pages that you missed.
2. Page content should be limited.
   The axiom less is more holds particularly true for the web. The nature of browsing has allowed us to break information into suitably digestible pieces, with a quick link to the next piece in the flow. This also give the reader a chance to change their mind before going on without the necessity of loading a very long document to decide. Exceptions to the rule exist - if the sole reason a document exists on the web is to have someone print it out, then the content being on a single page is quite handy. On the other hand if you're just doing that so you don't have to produce a real html version of the document you're being lazy.
3. Consider white-space balance
   As in art, balance between objects, between dark and light, is necessary. Look at the page from a moderate distance - do you mostly see dark or light? If the former, consider modifying the page to lighten it up. Information is easier to absorb if it doesn't saturate the page.
4. Maintain stylistic coherence with graphics
   This is just a common sense design approach - continuity of design elements. Carry it throughout your pages. Another way to say this is that buttons and icons should look like they were created by the same artist.
5. Avoid dead-end links
   Give your readers a "way out" of your pages that is to your advantage. Don't make them dependent on the back button to see more. Perhaps after reading one section of your information the next logical place to go would be to another section, and not necessarily back to the top. Give them a choice to take either path.
6. Place important information at or near the top of the page
   It should be visible when the page first appears. If someone needs to scroll to see it they may miss it. This is particularly true with What's New links and chronological listings - the latest information should be first.
7. Indicate size on large files that will be downloaded
   This is a courtesy to modem users in particular!
8. Place links on the word that describes where the link goes - never on the word "here"
   Need any more be said?
9. Avoid "generic web information"
   Don't waste your own space helping users get to NCSA or CERN - they came to your pages to read about you (exception - if you're providing an web indexing service you will certainly include those types of links!)
10. Make titles very descriptive
    Titles show up at the top of browsers, get saved on bookmark lists and hotlists - they need to say more than "stuff" for them to be a good reference back to your pages.
11. Read Elements of Style
    This little book by Strunk and White gives a lot of good advice about writing in particular, but also about style in general. It's short and to the point, but useful in the design of web pages or any other medium of textual information.

1. Consider Position of Graphics vs. Text
   The typical set of pages now has large, showy graphics on the home page, with minor graphics on the following pages. In some cases repeated elements are used throughout the pages such as a set of bullets at the bottom that take you to a set of pre-defined locations. Graphics that add information to the text should be strategically placed so as to provide it in the right place. Thumbnail images are useful to show an idea of an image, with a link to the bigger version provided.
2. Number of links in a paragraph
   I have seen some paragraphs where there is a link on every other word. This is very distracting to read! First the color change is annoying and second, one has a tendency to follow the link and get distracted from the initial intent of the paragraph - particularly if the link is off to some other site full of lots of neat stuff on its own. Better to reserve those links for beneath the paragraph unless they add clarity to what is being said.
3. Location of "content"
   If it takes several steps through graphical images and pretty screens before the reader actually get to read what he was looking for, he'll be annoyed. Consider having some "real" content at least one step away from your home page.
4. Continuity of design
   The best sets of pages I've seen, from a design standard, have a continuity of design that helps the user feel comfortable in knowing that he is still in the "realm" of pages he had hoped to traverse. This might mean a single icon designating a link to the home page is present on all pages, or it might mean that the same colors and graphical style are used on all buttons and bars that appear on the various pages. Since linking off to other sites is so easy and so common, carrying the design through the pages will make a user aware of your site in a much broader context.
5. Level Indication
   It can be quite helpful to know just how "far down" the web tree one has climbed. Level indicators - or graphical indications of level - can be useful for folks browsing your pages. For instance, consider a full-on graphic as a home page, a graphical heading for second level pages and a bar or set of buttons for any level below that. The continuity of the elements will help with cohesiveness and the changes at each level will aid traversal.
6. Ease of traversal
   Speaking of traversal, what is the best way to help someone get to the information that she needs? This, predictably, varies from person to person. Therefore, it might be reasonable to consider various views of the information. You should consider providing two views into the information - for instance, by organization vs. by functionality.
7. Mapping use of information to design of information
   Once folks have perused your documents you might be able to tell how your information is used. It would be great to have a program that mapped the use of pages from a given reader, so consider this a hint to developers. If you could look at that, you could tell what better links would make a difference. Without that aid you can peruse the logs to see, ask in surveys, or contact readers of your pages directly to see how they use them.
8. Breadth vs. Depth
   This argument has been around as long as tree structured anything has been around. Consider the Palm vs. the Banyan! It's an individual call, but consider it in your design - how deep can the information go (i.e. how many links to get there) before the reader is lost. On the other hand, how many direct links from the top page make for too long a list to consider.
9. Use of html extensions (e.g. netscapisms)
   This is a bugaboo for the web's future. Will the (non-standard) extensions you use today be in the browsers of tomorrow? With more and more browsers hitting the market, you'll have to depend on them following the netscape trend. If you don't include them, you may be seen as behind the times. The best call is to use those extensions that don't interfere with your documents when seen on browsers that don't support them.
10. Provide a search mechanism
    If your site is of any size at all, give your readers a break and give them a quick way to find something. You can invest in a commercial search tool, or get something free from the net. It will come in handy for them and you.

1. Don't put "Under Construction" on a page full of information. Most people recognize that the web is like that - everyone's pages are currently under construction - that's a feature! This phrase should be reserved for elements of your pages that are not presentable and hence not even reachable.
2. In a similar vein don't have a link to a page that just says "Under Construction" - that's too frustrating to the person browsing. You should indicate that on the page where the link will eventually be.
3. Don't use icons/images/designs that are unrelated to what you do or what the button does - make sure there is a connection.
4. Don't use a background (netscape feature) that interferes with the message, text or other information on the page.
5. Don't forget ALT tags on images, text equivalents for audio files, text only versions of your pages, information about video in the cases where someone can't see video. Particularly for the sake of disabled readers or those coming to the net on low-speed modems. Full screen ismaps that have buttons need an equivalent set of textual links on the same page, or a link to a "text-only" version.
6. Provide webmaster information on at least the home page. Timestamp where appropriate - static information such as the history of your company doesn't necessarily need it, but product information does.
7. Don't steal someone else's graphics. This doesn't mean you can't create a page with a graphic someone else created. You should just get permission to do so. If you simply point to it (as opposed to copying the image locally) be careful that it doesn't go away.

The young [webmaster] will be drawn at every turn toward eccentricities in [the web]. He will hear the beat of new vocabularies, the exciting rhythms of special segments of his society, each speaking a language of its own. All of us come under the spell of these unsettling drums; the problem, for the beginner, is to listen to them, learn the words, feel the excitement, and not be carried away.

1. Strunk, William Jr. and White, E.B> The Elements of Style, The Macmillan Company, 1959