Web Editor Training

With headings as your structure, paragraphs, ordered lists, unordered lists, data tables, images, etc., will flesh out your content. Text might have treatment like bold, italic, link, etc., to draw attention to key concepts and resources. 

Writing for the web

When greeted with a text-heavy page, users often skim in a "F" pattern: they'll read the first line or two, then skim (especially the left side) of lines lower on the page. Good design can help a) counteract this, and b) connect users quickly to the content they're looking for. 

As with anything, you want to write with your audience in mind. We've previously talked about how they might be distracted, or stressed. Front-load important concepts and keep things straightforward. The less stress your content brings to their experience, the better they'll feel about what you're offering. 

Here are a few key ideas for better writing on the web: 

• Aim for a reading level that's a few steps below what you'd expect your audience to have. For example, for most university materials, we want to aim for (at most) a 9th or 10th grade reading level. The web has some tools to help test your readability, like this one from WebFX. 
• Be careful with jargon, official names, and abbreviations, and use plain language whenever possible. If you must use abbreviations or jargon, be sure to explain them upon first mention. 
  • Exceptions: Sometimes we do have opportunities to expand comprehension by introducing jargon users may need to know. For example, if you are introducing Library services to students, explaining that Interlibrary Loan is often referred to as "ILL" may help them feel more empowered at a later date. They probably do not need to know, however, the names of the internal teams or back-end software that enable this service to function. 
• As a general rule? Cut words. Cut cut cut. Shorter is better!
• Paragraphs on the web should be limited to 2-3 sentences whenever possible. 
• Remember to make your content skimmable: 
  • Bold key concepts, 
  • use lists and short paragraphs to make information digestible,
  • remember to add clear & concise headings. 

Finally, a very important one: 

• Link text needs to make sense out of context. 
  • There are a few reasons: 
    1. When people skim, link text tends to jump out. 
    2. Importantly, many assistive devices allow users to jump from link to link, reading the link text as they go.
       •  ​When link text is "here" (as in "click here"), it gives a user no information about what "here" means and what's on the other side.

Want more? Check out "Antidotes for the F-Shaped Pattern" and "Legibility, Readability, and Comprehension" from the Nielsen/Norman Group. 

Here are a few examples of link text and how it could be improved.

Note: an underline is used below to indicate which text would be linked in each example. 

Alternative text (or "alt" text)

Alt text is meant to replace the experience of the image, which is not always the same as describing it in a literal sense.

A few guidelines: 

1. Is it purely decorative? Then empty alt tags are fine!
2. The words, “Photo of…” or “image of..” are not needed: the coding of an image conveys this for you. 
3. You might start by asking yourself, "What am I getting from this image?" and trying to convey that in the alt text. Is it factual information? An emotion? Information about the location of something? Etc. 

Good alt text depends on the context.

Here's an example: 

• If your content is describing what type of pencil a student needs to purchase for testing, your alt text may include details such as, "A pencil with the number 2 etched into a side near the eraser".
• On the other hand, if your content is about writing in a general sense and the pencil is simply decorative, empty alt text (alt="") is perfectly fine. 
• Why? The visual indicator--a number '2' etched on a pencil--provides additional information about what a #2 pencil looks like or feels like, which might help a student know whether they already own the correct type, or may help them confirm a purchase in a store. A low-vision individual may not be able to easily see this on a computer screen and might rely on alt text for the description. 
• BUT... that said, if this information is provided elsewhere, it does not need to be repeated in the alt text. 

Another example: 

• A photograph meant to convey a mood might be given the alt text, "A warm sunset beside the UVA Rotunda."
• The same photograph, if used on a page introducing visitors to Central Grounds, might say, "A large columned building with stairs leading to a grassy space and smaller columned buildings perpendicular to it" 
• Why? Depending on context, the image might convey emotional meaning or directional meaning: it's up to you, content-creator, to know what visual information is most important! 

Want more examples? WebAIM has a examination of this  under the heading "Context is Everything". 

Cropping/image size

Large media files (like images and videos) can require a massive download in order to be experienced. In the spirit of Universal Design, make sure your media files are properly sized to avoid frustrating your user with slow download times, unnecessary data usage fees, or barriers because of spotty service. 

• Crop images appropriately. Will your image take up 400px of width in a browser? Crop it to 400px rather than shrinking it in the code (which means users download the full file before the browser resizes it). 
• Adjust DPI. Rich photographic experiences (especially for print media) are often sized to 300 dpi or higher. Most web browsers are unable to display anything better than 72dpi. 

Choosing imagery

Keep in mind image rights when you're identifying images, but there are two things that make this fairly easy: 

• Both Google Image search and Flickr allow you to filter by "reusable" (or "Creative Commons") images: these are usually images you can freely use but may require attribution (so read carefully). 
• Work done in an academic context sometimes falls under the concept of "fair use" since it's done for the purpose of education, generally not selling anything, and won't compete with original market share. Find out more about Fair Use.

What else should I consider?

Images bring a lot to content but they also pose challenges. Keep in mind the principles of Universal Design when choosing images. 

You might consider: 

• Tone: If my user is intimidated by this resource, will this image alleviate that? Does this image help convey the tone I wish to convey? 
  • Like productivity, seriousness, approachability, flexibility, or structure
• Reinforcing key concepts: Can I find an image that reinforces concepts I convey in the text? 
• Alternatives: Can the content of this image be adequately represented in the alternative ("alt") text, or in explanatory text nearby? 
  • For charts and graphs, this is often a sticking point, but it's essential. 
  • If the answer is "no", you may need to re-think your image and its content. How can you make sure all users can access it's meaning? 

Special consideration for charts and graphs

In most cases, charts or graphs are in non-interactive image format. Your user needs alternate ways to experience this content if they can't view the image. Can your chart or graph be adequately described in alt text? 

If not, could the content be put into a data table? Or could the image be kept sparse and described in full detail below (in a way that would be useful for all visitors)? 

There's more information about charts, graphs, and data tables in the next section.