Writing for the Web

Everything I know about writing for the Web I learned while walking a blind man through an airport in Dallas, Texas.

While I was getting my undergraduate degree, I was head of accessibility for a small student-run Web design company on campus. I was sent to a conference in Dallas to learn more about the needs of students with disabilities in higher education. A tech-savvy blind coordinator named Dan who worked in the university’s disability services was asked to speak at the conference, so we traveled together.

When our flight landed in Dallas, we had to get our baggage and catch a shuttle to our hotel. While Dan was more than capable of navigating the airport himself, it was faster for him to hold on to my arm and have me guide him around the bustling travelers with lagging suitcases and endless hallways, pit stopping at a coffee shop and bathroom on the way to baggage claim. I was in an unfamiliar and loud airport playing Frogger with a real person! I had to safely get Dan through the obstacles of  rolling suitcases, running children, plants, benches, doors and so much more. Suddenly elements of an airport that were generally background noise  became a focus when I had to complete this task. I wanted to explain everything in our path, but my stumbling through explanations of things I have never had to put into words before would not be complete by the time we reached the obstacle. We would be on the escalator by the time I got done explaining what it was and when he needed to step. My inability to explain what was ahead of us fast and clear enough caused  frustration on both ends. How do you explain to a blind person how to go through a rotating door? As someone who could see what lay ahead of us, it was easy for me to use hand signals such as pointing and generalizations like “turn right here” or “the bathroom is the door right after this jewelry store.” Obviously he could not clearly follow my directions because he could not see what I was referring to.

This experience was a huge learning curve, and I was much more prepared for the return flight. The key to the whole mission was putting myself in Dan’s shoes and efficiently communicating just what he needed to know to navigate to where he wanted to go. I had to speak loudly and be clear and concise.

You have to be clear and concise in your website content as well. A quality website includes content and formatting that allow users to quickly complete the task they came to your website to complete. This includes all users. The National Center for Health Statistics claims that there are 21.2 million blind and visually impaired people in the U.S. and many more who use assistive devices to access Web content. There are many standards that Web developers can follow to help users with assistive devices access Web content, but there are also things copywriters can do. Many of the tips below not only help users with assistive devices better navigate a Web page, but they also help to make a website easier for all people to use and increase organic search engine optimization or SEO.

Here are eight tips to increase the clarity in your website text while also increasing usability, accessibility and organic SEO.

1. Language needs to focus on target audience

When directing Dan through the airport, I caught myself using visual representation to guide him. Me telling Dan to step around the planter did not mean much to him. I had to get in the mindset of focusing on Dan and filtering my directions to his needs. Otherwise, I was not benefiting him.

Think like your audience

If you want your website to be memorable, helpful and give users a reason to return, the content you put on your website needs to focus on your target audience. Content is always king. The reason people come to your website is for your content. If you are selling red wagons for kids, your text is probably going to focus on what parents would want to know about the red wagon before purchasing it. What are the safety features? Is the red paint harmful? How many toddlers can fit in it? Is it durable? What are the weight limits? You need to think like a parent and give content that will help them decide if this is the right product for them.

Post truthful reviews by other parents or add a commenting or forum feature for parents to post their own reviews. If the product gets a bad review, then show what great customer service your red wagon company has. Show that you care for your customers by replying to those reviews with rebate and warranty offers. Think like your audience to give them content and features they want. The Web is an amazing tool where you can have two-way communication with your users. Create a community on your website where your audience can interact with you and with each other.

Would your audience know your jargon?

Do not use jargon specific to producers of the red wagons if the purpose of your website is to sell red wagons. The average parent looking to purchase the red wagon would not know your jargon and may be turned away from the product. If the purpose of your website is to create a community for producers of red wagons, then jargon specific to the field is OK. Use language appropriate for your target audience. For most website audiences, the vocabulary used should reference that of a senior in high school, according to Web usability specialist Jakob Nielsen. If your target audience includes children on a science education website, then use language to reflect that age group. Same if you are working on a website for academics. Reflect the language used to that of the audience. This helps users read your text with ease and also increases the use of language that your target audience would use when searching for the product, service or content your website offers.

Does your audience care about your location?

If you would like your target audience to visit the Red Wagon Company brick-and-mortar operation, make sure to add the business location into your copy. Google states that 20 percent of searches are related to location. Adding that the Red Wagon Company is located in Ogden, Utah, increases the chances that your website will appear in search listings for users searching for red wagons in Ogden. Location creates a smaller pool of competition for rank.

2. Content needs to be easy to read

The directions I gave Dan had to be quick and to the point to make sure he knew what to expect. I had to be louder and more defined than the surrounding airport noise. If he did not hear me tell him to step up when we hit stairs or if I did not get to the point fast enough, he may have fallen.

Short and sweet

Writing for the Web must be short and to the point so busy users can get the information they need and move on. It is easier to read text displayed in short sentences and short paragraphs. Small bits of information also makes a page full of content seem less daunting.

Good contrast

We do not want Web users to miss or assume words they cannot see on a website due to bad contrast of text to the background. This could lead to a miscommunication with the audience that could hurt your brand. The best contrast is black text on a white background. White text on a black background is actually hard to read. For buttons, graphics and headings with small amounts of larger text, it is OK to have colored headings, white heading text with a black background or even a fun font to make the headings stand out.

Readability

For continued ease of reading, large bodies of text should be left-aligned and in an easy to read sans-serif font such as Verdana or Arial.

3. Content needs to be easy to scan

Some professionals say to keep page content short. Others say to write as much copy as possible for better SEO. I say, write as much as needs to be said and keep it updated. Be careful not to be too wordy. Make your point. If you need to let your user know more about the page topic, then do so, but do it wisely by breaking up content and adding scanning techniques.

Headings

heading layoutWeb users tend to scan through pages looking for the info they need to complete their desired task. It is essential that Web copywriters group data into hierarchical sections that allow users to find exactly what they need. Every section needs to lead with a heading that briefly explains what the section is about. Each page should have a No. 1 heading or h1 that explains what the page will be about. This one h1 per page reflects the need to only have one main topic per page. All content after the h1 should be sectioned into h2s, h3s and so forth, as shown in the graphic to the right.

The headings are actual <hx> tags added into the code. If you are adding copy to your website make sure your web developer has shown you how to properly apply heading tags to your copy. Just as Web users scan through the headers looking for the topic they are interested in, visually impaired users with screen readers also have the option to scan through just headings. This is why it is important to use the <hx> tags instead of just bolding text to represent a heading visually.

Keyword use in scanning techniques

Make sure you include your researched keywords in headings. People are not the only ones looking at headings to scan through copy. Search engines scan  <hx> tags and other scanning techniques such as bulleted lists, bolded copy and italics. Now, don’t start making all of your page content headings, bolded text and bulleted lists to try to trick search engines. If you have too much bolded text, users no longer know what is important. Search engines can figure out what you are doing  and may even ding your site.

Links

Another element users look for when scanning a Web page are links. After all the most amazing part of the Web is that we can follow links to more content. Use text in links. Do not just make the URL the link. Link text needs to tell users where the link will take them. Do not use “click here” for you link. That does not tell the user where the link goes and they have to go back and read the content to figure out the context of the link. Screen reader users also have the ability to pull out page links into a small box to scan. If a link just says “click here,” then they do not know where it goes and cannot easily go back to read context. Search engines also look at your link text, so make sure to repeat your researched keywords and phrases in your internal and external link text as well.

4. Have one main topic and call-to-action per page

If I had looked a quarter-mile ahead and told Dan everything he needed to do in the next quarter mile, he would have been overwhelmed and probably walked away. I had to give Dan a play-by-play and keep focused on the next obstacle. Once we passed that obstacle, I could start talking about the next.

Main topic

Web pages are all small obstacles leading to the greater goal of the decided conversion for the website. A conversion is what you want users to do on your website whether that is an online sale, leading users to an interactive tool, or persuading users to read more. As mentioned in No. 3, every interior page needs to have one h1 heading that tells the user what the page content will be about. Keeping to one main topic per page keeps content simple and to the point. If you have too many topics on a page, users may get overwhelmed and have difficulty trying to achieve the task they came to the website to achieve.

Call-to-action

Along with one clear topic per interior page, we also want one clear call-to-action. You may have a few small actions such as a link to read more about a specific product or a phone number to call for more information. It is important to have one main call-to-action per page that stands out with wording, size, font, color, graphical, placement, etc., to tell users what you suggest they do next. If your conversion goal is to have users purchase your product, make sure every page has a clear link to that product and a clear “add to cart” action on the product page. Home pages and landing pages will likely have more than one main action item because they represent a more holistic purpose. We do not want to overwhelm users though, so keep the main call-to-action on landing pages to just three or four.

5. Tell users what they need to know right up front

While I was guiding Dan through the airport, I had to voice the most important information first in case I did not finish my explanation before we reached the obstacle. It was more important that he knew to step to the right before I told him there was a cart driving directly toward us.

Users will generally not read all of the text on a Web page. Just like newspaper writing, you want to use inverted pyramid style writing to ensure that readers get the most important information right away. This way if they navigate away from the page they depart with the most pertinent information. The best examples of this writing style are online news websites because they follow inverted pyramid style.

A common practice on websites, brought on by the introduction of blogs, is to display teasers of information on landing pages that connect to more information. Try to get the most important information on the landing page just in case the user does not take the extra step to click for more information.

6. Do not use color as a means of communication

If I had told Dan to step to the right of the orange cone marking that the floor was wet, would that have meant anything to him? Obviously Dan cannot see, so telling him about an orange cone was worthless information to him. Dan is completely blind which is not as common as having color deficiency. According to iamcal.com, one in 12 people have some sort of color deficiency and may not be able to see or decipher certain colors. If a user is not able to see the color red, they do not know how to proceed if your call-to-action on a Web page is to click on the red button.

7. Follow expectations

I stood in amazement after watching Dan lift his hand to a certain height and width from the bathroom door to read the braille that assured him it was the men’s room before he entered. He knew exactly where that sign would be placed. Then again when we were in baggage claim I watched in amazement as his hand hovered over the rotating bags lightly touching the top of every bag that passed. He assured me he could get his own bag so I just gawked in curiosity trying to figure out how he was going to know which bag was his. I quickly grabbed my green bag with red stitching and a pink ribbon tied around the handle and stood back to watch Dan. After gently touching the tops of about a dozen bags, Dan confidently grabbed one and started walking toward the shuttle. He set his bag on the ground as we were waiting for the shuttle and I inspected it. I could not see anything different about his bag. It was a black duffle. There were no color markers on the bag like I had on mine because a pink ribbon is not going to help a blind man find his bag. So finally I asked. The top zipper led right to the handle that had two small bumps to the far right of the handle.

Because Dan knew what to expect for sign placement, handicap door buttons and the feel of his bag, he was able to get around pretty well and do things for himself. The same is true online. Users expect elements to be placed in certain areas. As a copywriter for the Web you will probably not have to worry about placement of elements, but it is important for you to know that the navigation should always be along the top and/or left column and maybe the right column. The search field should always be in the top center to top right. The shopping cart count and checkout on e-commerce sites should always be in the top center to top right. The logo should always be in the top left to top center and link to the home page. The copyright info should always be in the footer, etc. Make sure to use common names as well. If you were to replace the term “search” next to the search field with “pursue your fancy,” you will likely have some confused users. Creativity is a wonderful thing, but do not get too creative on placement and naming because you can confuse your users. If users have to think about what they are doing, they get distracted, frustrated and leave the site.

8. Be descriptive in all Web elements

As discussed previously, it is important for SEO to use research key words and phrases in headings, links, bulleted lists, bolded text, the first few sentences on a page, and some claim the footer. There are many elements hidden in the HTML of a Web page that developers may ask you to provide text for.

  • Page name: This is what the Web page is saved as and therefore the URL for the page: http://www.url.com/pagename. Work with your Web developer on names because there are many stipulations dependent on what the website is built with. Search engines can differentiate words that are clumped together so you do not need to add a hyphen to separate words in the page name unless the words spell out different words when clumped together such as the experts exchange URL: http://www.expertsexchange.com. Never use spaces to separate words in the page name. Google will display your URL as lowercase even if you use capitals in your URL, so it is best practice to keep everything lowercase. Keep in mind that users may have to type in the URL from print ads to get to a particular landing page, so do not make the page name too long or complicated.
  • Title: The page title appears in the top bar of the browser. It generally includes the name of the company and what the page is about in just 70 characters, including spaces. The title needs to match the page content. If the page title uses a commonly searched term such as sex to try to get your website to appear in more search results but the page content does not include anything about sex, search engines may ding you for trying to trick them. Get your researched keywords toward the front of the 70 characters.
  • Meta Data: The meta data tags are just data about data. They are hidden from users and are just there to help search engines and other entities know what the page is about. There are quite a few different meta data attributes, but what we care most about is the page description. The page description is unique to the page and explains the page content in 160 characters, including spaces. Search engines will use either the meta page description or the first 160 characters of page text for the description information that appears under the listing link in search results. Some still like to include the meta data keywords, but many experts argue that search engines no longer look at this data. If you do use meta keywords, do not list more than 10 keywords per page.
  • ALT tags: Add ALT tags to images. If you are inserting a photo of a your red wagon to go along with product information, make sure to include alternative text for the image that gives a brief description of what the photo is such as “child sitting in red wagon.” The ALT tag is searched by search engines, especially in Google image search. The ALT tag is also read by screen readers to let the visually impaired user know what the image contains.

Interview with Web Copy Expert

An amazing resource for professional communication is University Communications at Weber State University. They have a few Web copy specialists and I had the great opportunity to interview Web developer Sara Lleverino. Lleverino co-created a class for university faculty and staff on how to write for the Web. She has been training WSU employees on how to gain more with Web content by writing less. In the interview below, Lleverino shares some of her tips and examples for creating and formatting Web content in a more usable fashion.

  1. Q: How long have you been writing for the Web?
    A: I’ve been doing Web pages for over a decade now, but I started to get serious with the writing aspect about a year ago.
  2. Q: How long have you been teaching WSU staff to write for the Web?
    A: I have a training session that I offer once per semester. This is the third semester I’ve been teaching it.
  3. Q: What are the top three techniques you focus on when writing copy for a website?
    A: 1. Making sure the content is relevant and personal (writing in second person).
    2. Being simple and concise.
    3. Keeping an editorial calendar to make sure the content is timely and up-to-date.
  4. Q: Do you write for various audiences or do you generally have a particular audience in mind?
    A: In general, I have one main audience in mind. I create a persona that represents my main audience and speak to that one person in my writing. It makes the copy more personal.
  5. Q: What tools do you use for keyword research?
    A: As a first point of reference, I’ll use Google Analytics to see what keywords people were using when they got to my site. I also use Google AdWords Keyword Tool, but with a grain of salt. It’s not always correct for my specific audience. I’ll also use some A/B testing and a heatmap to see which keywords are resonating with people. Ideally, I would also put together a small focus group and get keywords through them, although in a time of staff shortages and budget cuts, that’s not always easy to do.
  6. Q: Where do you focus on adding those keywords in your copy?
    A: Probably the most important places I can use those keywords are in links, titles and headings.
  7. Q: What techniques do you use in your writing to allow for users to easily scan your content?
    A: I use lists, tabular data and infographics instead of paragraphs when I can. I make sure each section of content contains a heading. I use relevant images along with content to connect content visually.
  8. Q: Can you give an example of quality Web writing and bad Web writing?
    A: To protect the innocent, I’ll use an example of a page we use to have, for the Independent Study program, which is now being referred to as “Self-Paced Online.”

    Bad Writing

    Bad copy examples
    I think anyone who took one glance at this would know this is bad. The page doesn’t have a title on it. The paragraphs are long and wordy and don’t really provide any concrete or helpful information. The point-of-view switches from second person to first person and isn’t consistent. Most of the wording is a fairly boring sales pitch that no one would be interested in. Who cares about accreditation? Luckily, the rewrite is so much better.
    Quality WritingGood copy exampleIn my opinion, good Web writing is where there is as little writing as possible and still gets across a clear message. Here is that same page today.  In a few short bullet points (Self-Paced Online), it conveys more concrete information to the user than all those paragraphs before. It is also side-by-side with the traditional option (Semester-Based Online), so the user can see a comparison and make a more educated decision about which path to choose.

References

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd edition by Steve Krug. This is a timeless topic on common sense tips to making a website easy to use. The tips make complete sense once you hear them, but you may not have thought about them before.

Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger. Another oldie, but goodie! Web technology and design trends may change, but basic usability approaches will always remain the same. Jakob Nielsen is a leader in the field of web usability and a good resource for anyone who has anything to do with the web.

Writing for Multimedia and the Web, Third Edition: A Practical Guide to Content Development for Interactive Media by Timothy Garrand. This book links the needs of video game developers to those of web developers because with both mediums the creator needs to accurately plan how the user will use the product and how to guide users through each possible path.

Search Engine Optimization (SEO): An Hour a Day by Jennifer Grappone and Gradiva Couzin. This book literally walks you through chapter by chapter what you can spend an hour working on that day to increase your website’s SEO. It is as simple as a “dummy” book with beneficial tips for getting your website found.

http://www.alistapart.com
A List Apart is an online magazine that focuses on usability, writing great copy and following W3C web standards.

http://www.copyblogger.com/blog/
Copy Blogger has great frequent blog posts on how to be a better copywriter for both online and print sources.

http://searchenginewatch.com/
Search Engine Watch is a great blog with frequent posts of information about search engines, mainly Google because that is the most used search engine. The blog also posts information about social media and other online sources that reflect SEO techniques.

http://www.searchengineguide.com/
Search Engine Guide is a blog with some really great writers who make SEO information a bit more interesting. There are always posts on how to write for organic SEO.

http://googleblog.blogspot.com/
This is the official Google blog. They do not give away the holy grail algorithm that we all seek, but they do have informative posts.

http://www.section508.gov/ | http://www.w3.org/TR/WCAG10/full-checklist.html
Both of these websites include information about how to follow accessibility standards. All Federally funded entities need to follow section 508 guidelines. W3C has their own priority one, two and three guidelines that include the section 508 guidelines but are a bit easier to follow.

Acknowledgments

https://sites.google.com/a/pressatgoogle.com/googleplaces/metrics
(Google local search stats)

http://www.iamcal.com/toys/colors/
(color deficiency stats)

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s