MM2203 Introduction to Web Design :: Art Institute

Week 6: Writing for the Web

Writing for the Web Slideshow

View Slideshow: PPT

View Slideshow: PDF

Reading Text: Online vs. In Print

Studies have shown that people read about 15% slower on the web than they do from a print document. This is because computer display devices have a far lower resolution than print does. On the screen, your eyes try to make of for slightly blurrier text. To avoid eyestrain, they will also tend to read online text differently.

Online users scan text, looking for keywords, sentences, and paragraphs that are meaningful to them. If you write text that's specifically designed to be scannable, your users will read faster and understand and retain your message better. They get a better experience on your site, which means they'll stay longer and come back more often.

Exercise: Short Reading #1

Start reading the following block of text when prompted. You will have 20 seconds. Then you'll be asked three questions to check your comprehension. But don't cheat: look at the questions only after you've read the text.

Coleco Industries, which was originally named the Connecticut Leather Company, was founded in West Hartford, Connecticut in 1932 as a shoe leather company by Russian immigrant Maurice Greenberg. Moving into plastic molding in the 1950’s, Coleco eventually sold off their leather business, and became a publicly traded company. By the beginning of the 1960s, the company was one of the largest manufacturer of above-ground swimming pools. In 1976, after an unsuccessful attempt to enter the dirt-bike and snowmobile market, they released Telstar, a clone of the home PONG unit being sold and marketed by Atari.

Despite the fact that Coleco was certainly not the only company releasing home PONG clones, they enjoyed moderate success and went on to produce nine more varieties of the Telstar unit. Unfortunately, in 1978, as the home video game market moved to programmable, cartridge based game units, Coleco was forced to dump over one million obsolete Telstar machines at a nearly crippling cost of more than 20 million dollars.

Coleco president Arnold Greenberg ignored this near disaster and directed his Research and Development team to begin work on a new home videogame system, the ColecoVision, which he felt would set the standard in graphics quality and expandability.

  1. What was the name of the home PONG clone that Coleco released?
  2. What was the name of the man who founded Coleco?
  3. Who was the president of Coleco in the 1970's?
  1. Telstar
    This was buried in the first paragraph. Did you find it?
  2. Maurice Greenberg
    You may have gotten this one easily. That's because the answer was early in the first paragraph of text.
  3. Arnold Greenberg
    Did you get as far as this bit of info in 20 seconds?

Exercise: Short Reading #2

Now try the same thing with this block of text. Again, be sure to read the text before you look at the questions.

The Release of the ColecoVision

ColecoVision was released in the summer of 1982 at a retail of $199, featuring several noteworthy advancements:

  • The ability to display 32 sprites on-screen at the same time
  • A 16 color on-screen palette out of a total of 32
  • Three channel sound

Donkey Kong: The Key to the ColecoVision's Success

The key to this new system's success was its included cartridge. In the case of the ColecoVision, Coleco successfully negotiated the right to release the smash arcade hit Donkey Kong.

Donkey Kong: Legal Problems with Universal

While amazingly popular, Coleco's release of Donkey Kong with the ColecoVision was not without its problems. Universal City Studios, Inc. believing that Donkey Kong infringed upon their own King Kong, threatened both Nintendo and Coleco with legal action. With a large sum of money already invested in the license, Arnold Greenberg agreed to pay Universal 3% of the net sale price of the game.

Coleco Caves and Nintendo Fights Back

Unlike Coleco, Nintendo fought the lawsuit, offering numerous in-court demonstrations of gameplay vs. movie plot. Nintendo had argued that King Kong's characters and plot were in the public domain. Nintendo successfully argued its claim and was awarded $1.8 million in damages. This prompted Coleco to file as well, earning back a portion of the royalties they had previously paid to Universal.

  1. How many sprites could the ColecoVision display on the screen?
  2. What game was included with the ColecoVision?
  3. Who sued Nintendo and Coleco over copyright infringement?
  1. 32
    This was in the first bullet, so it's easy to recall.
  2. Donkey Kong
    This was repeated several times as well as starting the second and third headlines.
  3. Universal
    Again, easy to get, as it was in a headline. Your eye was automatically drawn to the bold text.


Q: Do people really read that much more slowly online?

A: Yes. Lots of scientific studies have come to the same conclusion.

Q: Those two blocks of text didn't seem all that different. Why did I remember so much more from the second one?

A: It's all thanks to "chunking" or breaking down content into smaller, easier to read and understand bits. Sounds simply, but it's a killer tip for getting people to read more of your site.

Q: So I can apply these principles to my blog? It's not just for online newspapers and long articles?

A: Absolutely! You can apply this to your blog or any other text you know folks will have to read on a computer screen.

The Inverted Pyramid

Take a look at this article submitted by a client for use on his website called The Hipster Intelligencer. How would you face the prospect of reading this text online?

A low percentage of people scroll beyond the information that's initially visible in their browser window. Even if your users are willing to scroll, most of them decide whether they want to read the page based on what they see in the browser window when the page loads.

To account for this, you should structure your text like an inverted pyramid. Start with a short conclusion so that users can quickly get the gist of the page, and add details afterward. This way, users can stop reading at any time and still be confident that they'd already read the important pieces of information.

  1. Put the most important stuff at the top of your text. Users should be able to read your first paragraph and get the idea of the whole piece.
  2. Content that's progressively less important, even though it's well written, comes lower down. Stuff that's not essential to the user's understanding of the article can appear later.

Exercise: Short Reading #3

Coming up are two pieces of text. One was written using the inverted pyramid, the other was not. Read both, but stop reading when you feel that you've gotten the gist of what the article contains.

Text Block A

Avalon Hill, now owned by Hasbro and operating as a division of Wizards of the Coast, was a tabletop game company specializing in war games and strategic board games. They were not only responsible for pioneering many of the key concepts of modern tabletop wargaming—such as the hex grid and zones of control—they were also responsible for publishing some of the most recognizable titles in the board game industry such as Civilization, Axis and Allies, Runequest, and Dune.

In 1958, Charles Roberts founded Avalon Hill in order to capitalize on the success of his game Tactics. Self-published in 1952, Tactics was particularly noteworthy because it was based on actual war tactics and scenarios. As such, Tactics is considered m be the first modern tabletop war game. Shortly after the company was founded, it released Tactics II, the sequel to Roberts' original game. Shortly after the release of Tactics II, Avalon Hill published Gettysburg, which is widely considered to be the first tabletop wargame based upon an actual historical battle.

Avalon Hill enjoyed moderate growth through the 1980s and early 1 990s. However, during the mid 1 990s, the board game industry as a whole began suffering a downturn in sales. Not only had overall sales of their board games decreased, but the company had also lost the rights to two of their most popular games, Civilization and 1830, in a legal battle with the computer game publisher Microprose. In the summer of 1998, Eric Don, president of Monarch Avalon, Inc. (the parent company of Avalon Hill), sold the rights to all Avalon Hill titles, all back stock, and the name company itself to Hasbro, Inc. Hasbro continued to publish games under the Avalon Hill name. 1n late 1999, Avalon Hill was made a division of Wizards of the Coast, who had been purchased by Hasbro earlier that year. Wizards of the Coast continues to release games under the Avalon Hill name, including Axis & Allies, Betrayal at House on the Hill, RoboRally, and Risk 2210 A.D.

Text Block B

Warhammer, which is currently in its 7th edition, is played using player-selected armies of 25 mm-28 mm plastic or metal miniatures. The game rules (as well as storyworld material) are published and released in a series of books (some of which are core to gameplay, while some of which are supplementary). The game itself is generally played on a surface, the standard size of which is 4x6 feet. While the game can be played with just the miniatures, players will often use model scenery, such as trees, buildings, and topography, in order to add realism and depth to their game. Each unit (either a single miniature or a group of miniatures) has a point value based on their power or skills. Players build (or “draft”) an army based on an overall point value set by the game type. For instance, a 700 point game means that each player can build an army totally 700 points or less. Movement across the playing surface, which is turn-based, is measured in inches and combat between units is accomplished through use of six-sided dice. Victory in Warhammer is most often determined by victory points, which earned by killing enemy units and meeting scenario based special objectives.

It's important to note that Warhammer is not a collectible game. As a result, miniatures are not sold using a closed-box, random model. Players simply pick and choose the miniatures they want to have in their armies, and buy them individually or in large sets. It is also important to note that Warhammer miniatures do not come pre-painted. It is the responsibility of the player to paint their own miniatures. As such Warhammer is somewhat of a niche product as it requires specialized skills to fully experience the game. In addition, unlike other pre-painted tabletop miniature games, such as WizKids’ HeroClix, Wizards of the Coast's Star Wars Miniatures, or Fantasy Flights Games' Mutant Chronicles CMG, the Warhammer community has a unique system (which is both formal and informal) that recognizes particularly talented miniature painters. Generally speaking, Warhammer is most commonly played in game stores, hobby stores, and comic stores.

  • Which was easier to read?
  • Can you identity the text written using the inverted pyramid?
  • How do you think the inverted pyramid makes the text easier to read?
  • Text Block A was written with the inverted pyramid. We learn a lot about what we can expect in this article from the first two sentences.
  • In Text Block B, boring stats like the size of the plastic miniatures aren’t good opening material. No inverted pyramid here!

Exercise: Inverted Pyramid

Download this Word document with information about the Cosumnes River Preserve.

Organize the paragraphs using the inverted pyramid. Focus on getting the most important three paragraphs to the top. Remember to keep the most important information at the top.

Scannable Web Copy:

  • has content ordered by the inverted pyramid.

Compress Your Copy

One of the easiest things you can do to make text more web-friendly is to remove unnecessary content. If your text's clear and concise, your users will spend less time reading and will be happier. They won't realize why, but you just save them strained eyes!

So, what's the best way to write less but still keep the relevant content in your article? It's a matter of careful editing. Get to the point quickly with short words and phrases and concise two- to three-sentence paragraphs.

Reduce adverbs (words that change other words and often end in -ly, like "a really large moose") and replace passive phrases with active phrases: "the flower was watered daily" vs. "I watered the flower daily". You'd be surprised how many words don't have to be included in copy for it to make sense.

When you're done, re-read your copy. If you can't work out what it says, what hope do your users have of understanding it?

Exercise: Copy Compression

Refer back to your edited Cosumnes River Preserve document.

Edit it down so that it is shorter while retaining the essential information. Keep the editing rules in mind. Save your file for upcoming Exercises.


Q: If people don't like to read on the web, what's the point of editing my text down? Won't users just go ahead and print it to read offline?

A: Sure, some users print pages for future reference, but think about how you use the web. When did you last print a page to read later? Most people surfing the Net want quick answers, so it pays to give them text that's quick to read.

Q: Won't that mean they spend less time on my site, not more?

A: Actually, no. Sure, the occasional browser who was looking for something specific will read the page, then head on out never to be seen again, but the majority of users are hooked by good content. Once you've got them hooked, you can feed them more content with carefully placed links to related articles.

Q: With the inverted pyramid, how do I work out what's most important about my content, so I can present that to users after a general introduction?

A: There are no hard and fast rules. If it's content you wrote, you should have a good idea of the two or three main points you want readers to take away. If it's content you received from someone else, read it through and see if you can find the main takeaways.

Q: If my content's ordered by importance, how do I know when to stop?

A: If some bit of content's so far down the importance line that you're not sure whether to include it, that may be enough of a hint to get rid of the text. If you're still not sure, be the user. Imagine you're reading the text; does that last little bit of detail help you understand the main gist of the text? If it doesn't, dump it!

Q: How much content should I have removed when I edited my text?

A: There's no perfect answer to this, but if you follow the rules to create 2-3 sentence paragraphs and remove unnecessary words, you'll find your text will be significantly shorter. Shoot for 50-80% of your text's original length.

Practice will help, but you can also learn a lot by looking at other sites like yours and compare their writing style. Chances are, if you're following the rules, you're already seeing places where they could slim down their content a little!

Take another pass through the Cosumnes River Preserve article and see if you can shave off just a little bit more.

Scannable Web Copy:

  • has content ordered by the inverted pyramid.
  • has been edited so it's shorter.

Breaking Text into Lists

Even cut by as much as half, the article is probably still a little overwhelming. We can use lists to make the text more scannable.

Lists break up large blocks of text into smaller chunks that are easier for the user to read. And they give the user's eye something to lock onto when they scan the page.

An Example

Read the following text:

Lists do a great job of breaking up text and making the content on your page more sensible. Lists can break up paragraphs that seem to have lots of list-type items in them, and lists can break even larger paragraphs into smaller chunks, essentially building a list of paragraphs. Lists can be used in the main content body, sidebars, navigation, forms, and pretty much everywhere else on your page.

It's not bad so far. It uses an inverted pyramid to get all the important points up top. However, it could be much quicker to scan and read in lists.

Use a list when:

  • You need to make your text scannable
  • Paragraphs or sentences have "listable" elements
  • Large blocks of text can be broken into 1- or 2-sentence chunks

Lists can be used in different ways all over your site. Try them in:

  • Your main content
  • Sidebars
  • Navigation and headers

Take a look at these two pages about the symptoms of swine flu. If you needed the information, which one would you be most likely to stick around and read? (See slideshow for images.)

Breaking text into a list allows readers to quickly glance at the text and extract information.

Exercise: Breaking Text into Lists

  • Refer back to your Cosumnes River Preserve article.
  • Find one or more are paragraphs in the article containing content suitable for lists.
  • Break that content down into bullet lists.
  • Hint: You can use a sentence or two to explain what the list(s) is/are.

Scannable Web Copy:

  • has content ordered by the inverted pyramid.
  • has been edited so it's shorter.
  • breaks down content even more with lists.

Headings Make Your Text Even More Scannable

So you've used lists to break down some paragraphs and sentences into bullets, but what can you do to help users scan your content? Headings are a great way to make blocks of text more scannable.

Headings reduce large blocks of text into more manageable chunks, and they announce exactly what the chunk of text is about—which lets your users decide whether they want to invest their time in reading that bit of text.

Common Uses of Headings on the Web

A main site heading appears on every page and gives the users context if they arrived there through a search engine or any place else besides the home page.

Sidebar headings let the user know where the links go or why the content is different from the main column. Sidebars also often break down content into lists.

A page heading is typically found above the main content and announces the topic of the page.

Sub-headings in the body text help to break up the page and emphasize ancillary content.

Exercise: Create Headings

Now that you've got a good idea why headings are important, it's time to try headings out on your own.

Write a short heading for each of the following blocks of text. Remember to create headings that are straight-to-the-point and scannable.

Acoustic guitars are used in a variety of different genres across the globe. Because of the long history of the acoustic guitar, there are many different kinds; some kinds are rarely considered guitars, such as the ukulele, which is based on the four-stringed braginho or cavaquinhos from Portugal.


The Protestant movement may have commenced earlier, but the publication of Ninety-Five Theses by Martin Luther in 1517 spurred on the revolution within the Church. Luther attacked the Church's theology, which, he believed, misrepresented the Bible and placed too much authority in the hands of the clergy, and wished to reform the Church. After being excommunicated, Luther published many books on Reform. Luther's works were most influential in Germany and Scandinavia.


The surface of Mars is a lot like a desert on Earth: it is very dry and dusty, but it is also very cold. There are a lot of loose rocks and dunes of fine sand. Crater impact mark the surface, but these are not as common as on the Moon. One of the craters is the huge Hellas Planitia. It is about half the size of the continental United States. The southern half of the planet has more craters than in the north. The south is also higher in elevation.


How close were your headings to the following ones?

Acoustic Guitar Types

This text isn't merely about acoustic guitars, but the different types of guitar that have evolved around the world.

Martin Luther

This text is about Luther and his role in the Protestant movement, so if you have a heading that focuses on either, that's probably fine.

The Geography of Mars

This one's definitely about geographical elements and Mars. Sometimes headings are no-brainers.


Q: Doesn't adding a bunch more small items on the page make it longer? Won't that strain my users' eyes more than a shorter page?

A: No. In fact, lists help your users scan the page faster and take in more information, more easily. Lists break down sentences and paragraphs that contain a lot of information into easy-to-read chunks. Lists might add a little to the length of a page, but your users will be happy to scroll down if the content's relevant to them. And since you've already edited your text so it follows the inverted pyramid structure, they'll know right away if the page is relevant to them.

Be careful not to overuse lists. It's good to try and keep a balance between short, focused sentences and lists. Both help keep your users interested.

Keep practicing. The more web copy you write and edit, the better you'll be at slimming text down and making it scannable.

Exercise: Create Headings for Your Article

Go back to your Cosumnes River Preserve article. Create a main heading for the article at the top of the page. Then create two or more subheadings which break up the content into distinct sections.

Scannable Web Copy:

  • has content ordered by the inverted pyramid.
  • has been edited so it's shorter.
  • breaks down content even more with lists.
  • creates sections within content using headings and subheadings.

Mixing Fonts to Emphasize Headings

Using different fonts within your site can dramatically change the feel and emotion of the design. On top of that, different fonts can make your text more readable and make life easier for your users. There are two distinct categories of fonts for the web: serif and sans-serif.

A mix of serif and sans-serif fonts can add a nice touch to pages and help separate content from headings. It also allows you to render serif fonts at a larger size and keep the body content in a sans-serif than can be safely displayed at a smaller size.

The distinction between fonts is of course defined in the CSS.

The Level of a Heading Conveys Importance

HTML comes out of the box with six different header levels: <h1> through <h6>. With no stylesheet (just the naked markup), most browsers will render <h1> in the largest text and <h6> the smallest.

Remember, HTML's a markup language and isn't intended to convey style information. The different heading levels are used to signify importance in your content. A level one heading <h1> is the most important heading, <h2> is the next-most important, and so on.

When you're marking up your sites, remember to make the main headings <h1>, and other subheadings a lower heading level. This will ensure that the site is semantically correct and search engines are interpreting content correctly (remember, the bots can't actually see your design).

Hint #1: Level Hierarchy doesn't mean that you go from <h1> through to <h6> from the top to the bottom of the page. <h2> would be a subheading contained within content belonging to an overall <h1>; <h3> would be a sub-subheading within an <h2> content; and so on. If you have two sub-subheadings within content under a main <h2> heading, they should both get <h3> markup.

Hint #2: Use CSS to change the size of headings, rather than choosing headings for their size.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
6 Cosumnes River Preserve Article CosumnesRiver Preserve.docx
My About Page about.doc

Assignment Details

Cosumnes River Preserve Article

Complete each of the Exercises on the left which involve editing the DCosumnes River Preserve article for web use.

  • Inverted Pyramid
  • Copy Compression
  • Breaking Text into Lists
  • Create Headings for Your Article

Turn in your edited article in MS Word format.

My About Page

In MS Word, write your company's About page content for your Final Project. It should include a good deal of information about your imaginary company.

Include at least four of these topics:
  • Company information: who the company is and what it can do for the customer. Tell what products you sell. Explain your specialties and your market niche.
  • Outline your accomplishments. Use actual numbers to show your profits. Tell your strengths and your values. Show your credentials: list any business awards, titles or designations.
  • Include the history of the company. Tell customers how you started and how many employees you had. Then bring them into the present. Tell customers where you are now.
  • Provide contact information: the names and bios of key players. List each person's contact information and title so customers know how to contact someone in your company. Provide your location, email address and phone number.
  • Create an outline of your future plans. Let people know your vision of the company and what you plan to do for customers. Outline your purpose clearly so customers know what you can do for them today and tomorrow.
  • Answer your customer's questions before they ask with a frequently answered question (FAQ) section. Keep it short.

Review a number of "About Us" pages for companies in the same industry as yours to get an idea of what constitutes a good and poor about page.

Start by writing a rough draft with as much information as you can think of. If your company is imaginary, you'll be making this up, but be as realistic as you can.

Then edit the content for web use:

  • Order the content by the inverted pyramid.
  • Edit it so it's shorter and more concise (while retaining all the important information.)
  • Break down content even more with lists.
  • Create sections within the content using headings and subheadings.

Turn in your edited About page in MS Word format.