8.10: Special ideas for editing websites

Technical editors are probably not going to code complete websites themselves. Even so, you may be asked to edit and possibly create web-based content, so you need to be familiar with the basics of web technology.

HTML and CSS

Hypertext markup language (HTML) is the backbone of internet content, and Cascading Style Sheets (CSS) are a vital part of how web programmers style that content. In short, HTML tells your browser what to put onscreen, and CSS tells the browser what it should look like.

This chapter cannot go into the details of how HTML and CSS work, but if you intend to edit websites, you need to be able to "read" basic HTML and CSS and understand how they work.

Many online tutorials for HTML and CSS exist; the W3 Schools website (www.w3schools.com) is one of the better ones.

General web design principles

Websites' layout, design, purpose, and function vary tremendously, but most websites follow a set of basic concepts that you can use to evaluate and edit them. Consider these ideas when you edit websites:

• Are words used consistently across the whole website? Are these words meaningful to the users? If not, what words would the readers prefer or understand?
• Are related activities close to each other onscreen and in a logical location? If not, where would the user like to see those activities?
• Do the pages have plenty of headings? If not, where would headings be useful and appropriate?
• Are the sentences and paragraphs short? If not, how and where could you break up long blocks of text into bitesized chunks?
• Are there any paragraphs that can become lists?
• Are the typefaces and font sizes appropriate for use onscreen? If they're hard to read, how could they be improved?
• Are the hyperlinks easily visible?
• Do the hyperlinks' visible text and mouse-over text describe the items that will open? (In particular, rename links that say "click here.")
• Do the hyperlinks work?
• Do the navigation menus appear in the same place and look the same on every page?
• Do the navigation menus work?
• Does the website include a sitemap?
• Does the website have an internal search engine? Does it work?
• Is the website usable on a mobile device?
• Does the onscreen layout follow an F-pattern? (Most people read websites in this pattern: they look across the top, scan down the left side a few inches, read across, and scan down again.)
• How long would it take for a user to realize s/he ran into a problem?
• Can the user start over if a problem occurs?

Accessibility

One editing issue that you need to consider very carefully is website accessibility. Some issues with accessibility deal with physical or mental disabilities, while others deal with limits on users' expertise and access to technology.

A federal law called Section 508 requires all government agencies that receive federal funding to make their electronic and information technology accessible to people with disabilities. Government agencies also want to make their websites usable for people with limited resources.

Similarly, corporations want to make their websites accessible to the widest possible variety of customers, so corporate websites should incorporate accessibility standards to accommodate these broad audiences.

As a technical editor, you may be responsible for evaluating a website's accessibility. Consider these ideas when you edit websites:

• Is the website usable by people with physical or mental disabilities? Examples include people who are
  • partially or completely blind
  • colorblind
  • unable to focus their eyes well
  • unable to see contrast
  • partially or completely deaf
  • easily distracted by noise
  • unable to use a mouse accurately, or at all
  • unable to use two hands
  • unable to tolerate blinking lights
  • dyslexic
  • unable to form short-term memories
  • unable to concentrate for long periods of time

Many of these users depend on assistive technologies such as screen readers and alternative keyboards. If the website does not work with these technologies, you should edit the website to make it accessible.

• Is the website usable by people who have limited experience with computers? Examples include
  • senior citizens
  • people from rural areas
  • people in developing countries
• Is the website used by people with limited or modified technological resources? Examples include people who have
  • dial-up internet connections
  • older computers
  • small or non-widescreen monitors
  • lack of access to computers other than mobile devices
  • lack of access to mobile devices
  • no software to open downloaded files
  • older web browsers
  • text-only browsers
  • disabled speakers
  • disabled cookies
  • disabled Javascript
  • ad-blocker programs
  • pop-up blockers

A detailed discussion of accessibility issues and goals is available online through the Web Accessibility Initiative section of the World Wide Web Consortium (W3C) website: wwww.w3.org/WAI/

The W3C also hosts a page with an extensive and frequently updated list of accessibility checkers. You may wish to use them when editing a website for accessibility: http://www.w3.org/WAI/eval/Overview.html

Website markup strategies

You have multiple options for how to mark up websites. None are innately better than the others, so choose the method(s) that best fits the project and your client's needs.

• Edit a website's unpublished text in a word processor as you would any other text document.
• Copy-and-paste a published website's text to a word processor, and edit it as you would any other text document.
• Capture and print screenshots, or print formatted web pages with your browser's "Print" function, then mark them up as you would any other hard copy documents.
• Capture screenshots, open them with a graphics program such as Photoshop or MS Paint, and mark them up with the program's drawing and/or text-creating tools.
• Export website pages to PDF and edit them with Acrobat or Acrobat Reader markup tools.
• Type a separate comments file.
• Directly edit the HTML and CSS code.
  • Use either a web-development program or a plain-text editor. Never use MS Word.
  • Tag your edits with highlighting, colored text, and/or comment codes ( <!--commentgoeshere--> for HTML, and /** commentgoeshere **/ for CSS).
• Export the website's code or text to a collaborative online space such as a wiki or Google Docs, and edit it online, using the program's tools.