If the purpose of your web site is to amuse or alienate, be as unconventional as a modernist poet or a jazz musician. But if the purpose of your web site is to inform, follow these top 5 conventions of web pages.
No list of guidelines will help you as much as usability testing a prototype; nevertheless, the conventions described on this page can help you create useful web pages.
Online readers are impatient; they will scan the page quickly and hit “go back” as soon as they get bored. Put your most important stuff near the top .
[wp_ad_camp_4]
To learn about Rainbow Hector, click here. | |
Visually impaired web users frequently scan web pages by instructing their computer to read aloud all hyperlinks. Sighted readers assess web pages in much the same way.Since web visitors decide in a matter of seconds whether your page is worth reading, when you choose bland, content-neutral words for your hyperlinks, you miss an important opportunity to communicate. | |
Somebody tell me, who is Rainbow Hector? | |
In this case, the linked words suggest what will be at the other end of the link, which helps the reader decide whether to click. |
Another way to make your links informative is to follow them with a blurb.
Blurbs: Writing Previews of Web Pages
A blurb is a short paragraph that previews what’s on the other end of a link. You’re reading a blurb now. If it helps you decide whether you should click the link, then it has done its job.
See: “Navigation: An often neglected component of web authorship”
Because I am a writing teacher, not a web designer or programmer, my expertise lies in using words. I often see students who go overboard with fancy typefaces, their favorite garish colors, and whatever distracting little JavaScript menu or Flash slideshow application they’re very proud to have figured out.
While a fancy site may look impressive when you present it in class or for your client, the people who will actually use your site (perhaps via a dodgy WiFi connection or an expensive pay-per-byte telephone plan) don’t really care about your spinning logos or the sound effects that play when you move your cursor over the buttons.
(Use a photo editing tool to reduce the number of pixels or increase the compression rate of your thumbnails — simply dragging its corners to shrinking its appearance in your web editor will not reduce the size of the file.)
If the visitors to your website find the information they’re looking for, they won’t care that the site can’t compete visually with a professionally-designed masterpiece. I have seen many students spend far too much time designing a document in Microsoft Word, and then copy-pasting the text into a web editor, and then wrestling to try to make the web version look exactly like the print version.
Why is it a bad idea to design a web page with Microsoft Word?
If you put your boots in the oven, that don’t make them biscuits. Likewise, if you take a great flyer that you designed to be printed on an 8.5 x 11 inch page, and then use the “Save as HTML” function, you won’t end up with a good web page.
A printed document has fixed dimensions, but a web page has to be effective when viewed on multiple different monitors, ranging from huge flatscreen monitors to tiny PDA screens… so arranging a document so that it looks perfect on your own monitor may create a horribly disjointed document for everyone else.
Provide meaningful subheadings, bulleted lists, and bold keywords; write meaningful links.
Conventional print prose is designed for sequential readers who will start at the beginning and move sequentially to the end. Such writing develops extended ideas via a series of good paragraphs joined by transitions. Each sentence helps to build the paragraph; each paragraph supports the chapter; each chapter drives the book towards its conclusion.
Online text, on the other hand, relies upon smaller chunks of text, which the reader may or may not encounter in order. Each page of a website must make sense to a reader who bypassed the home page.
15 Apr 2003; Dennis G. Jerz
18 Mar 2008 — minor updates
19 Mar 2008 — minor updates
15 Jun 2012 — refeshed content (removed outdated warning against HTML frames)
Related Links |
Dennis G. Jerz Newbie Web Author Checklist If you’ve recently created your first website and you’re getting ready to submit it for a class assignment, then this link is for you.Dennis G. Jerz Blurbs: Writing Previews of Web Pages A blurb is a short paragraph that previews what’s on the other end of a link. You’re reading a blurb now. If it helps you decide whether you should click the link, then it has done its job.Dennis G. Jerz Two Kinds of Titles for Web Pages The in-context title is what your reader sees at the top of the page; the out-of-context title appears on other pages, as part of a blurb or a list of search engine results.Dennis G. Jerz Navigation: An often neglected component of web authorship To make the best use of hypertext, you should not blindly follow the convention of printed, linear text. Instead, divide your content into logical, free-standing units that can be strung together like beads, in different orders. |