Writing Web Pages: Top 5 Tips for Effective Online Text

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 effective web pages.

1. Lead with Your Best Stuff
2. Inform with Meaningful Links
3. Employ Consistent Navigation
4. Prefer Simple Designs
5. Write Scannable Text

No list of writing tips will help you as much as usability testing a prototype; nevertheless, the conventions described on this page can help you create useful web pages.

1. Lead with Your Best Stuff.

Online readers are impatient; they will scan the page quickly and hit “go back” as soon as they get bored. They don’t care about your page as much as you do. Put your most important stuff near the top .

• Shrink that huge image, (especially if it’s a picture of the sign in front of your building or bunch of people lined up posting for the camera) and put a “related links” box or embed your own content-related social media feed in the recovered space.
• Cut the paragraph about your long-term goals or your organization’s mission down to a single line — and include a link to a separate “about” page. (The fourth or fortieth time your visitor returns to your website, how important will that whole long paragraph be?)
• Begin each page with a summary of the contents. (Instead of “This page offers lots of really cool stuff,” post a short list of the contents; let your visitor decide how “cool” it is.)
• If you are building an archive, insert the most recent items at the top of the list — don’t bury your freshest material at the bottom of the page.

2. Inform with Meaningful Links

	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 — scanning and slowing down only when something grabs their attention. 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.

3. Employ Consistent Navigation

• Put a “Home” link in the upper left corner of every page.
• If your site has more than six or eight pages, you probably don’t need a link from every page to every other page.
  • Instead, group your pages according to function (an archive, a marketing page, a catalog, a membership directory, etc.).
  • If a main section has a log of content, consider breaking it up into sub-pages, with a local table of contents that links to separate pages.
    • For instance, you might list your most current three or four publications on your main “Publications” page, but include hyperlinks to separate pages that maintain separate lists according to subject or genre.
    • Every page on your site might link to “Publications,” but when you publish your first poem you don’t have to add a new “Poetry” link to every page on your site. Just add a new subpage and link to it from your “Publications” page.
• On every page, provide links to the main sections of your site.

See: “Navigation: An often neglected component of web authorship”

4. Prefer Simple Designs

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.

• Bouncing Things Suck. The more blinking and shimmering images on your page, the harder your reader will have to work in order to find anything worthwhile. Many users have trained themselves to ignore blinking and shimmering ads, so they will tune out the content you are trying to emphasize.
• Never Delete Content. The words you type on your site are the reason search engines come to your page. If you delete last week’s update in order to make room for this week’s update, then the words you wrote last week won’t be around to attract hits from search engines.
  • Obviously if an employee leaves or you no longer sell a product, you need to remove the inaccurate or misleading text on your website; nevertheless, from the perspective of making your website look attractive to Google’s search engine and to the bloggers who might have linked to your old content, it’s rarely a good idea to completely remove a page, because that will break any inbound links — which would be like moving your store to a different street every time you get a new shipment to sell.  It’s better to grey out the old text and add a note that says “Cheryl left Universal Materials in 2010. The new Director of Widget Research is Henry Smith.)
  • Unless you have a good reason to erase Cheryl’s name from your page, it would be better to keep it up, perhaps adding a link to the page announcing her going-away party (if she left on good terms).
• Use Multimedia Sparingly. Each graphic or Flash animation you put on your site slows it down — sometimes a little, sometimes a lot.
  • Don’t force your reader to look at a blank screen while a big multimedia file loads. (At least have some plain text links so a reader dialing in on a slow or expensive connection can skip the animation.)
  • Usability expert Jakob Nielsen says: “Every Web usability study I have conducted since 1994 has shown the same thing: users beg us to speed up page downloads. In the beginning, my reaction was along the lines of ‘let’s just give them better design and they will be happy to wait for it’. I have since become a reformed sinner…”
• Because images download slowly, keep each one no bigger than a playing card.
  • Your visitor can click a link to download the full-sized versions of those images that are really interesting.
  • For large collections of images, use postage-stamp-sized thumbnails.

  (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 in MS-Word, 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.

5. Write Scannable Text

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. College professors who ask for academic paragraphs are training students to write in a way that encourages deep thought about complex issues. 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. The author of a book is in the driver’s seat and is taking the reader on a carefully-planned tour; the reader is just along for the ride. 

Okay, be honest. Did you actually down to read the that whole paragraph above, word-for-ford? Or did you skip that imposing block of text and jump right to this part?

Online text relies upon small chunks of text, designed for readers who skip around as their interest dictates. On a well-structured website, each separate page should make sense to a reader who has jumped right there, bypassing the home page and all the intervening pages.

Links to “Home” and “About” are important ways of helping readers orient themselves when they land on a page in the middle of your site. 

15 Apr 2003; Dennis G. Jerz
18 Mar 2008 — minor updates
19 Mar 2008 — minor updates
15 Jun 2012 — refreshed content
(removed outdated emphasis on HTML frames, which are rare nowadays)
24 Jun 2013 — minor updates
04 May 2024 — minor updates (the page has held up surprisingly well)

---

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.