How-To: Proofread Your Website

At some point in the course of every web design project, the client will be offered the opportunity to view a fully functional version of his site before it goes live. In this late phase of the project, the client is usually reviewing content that has been passed around multiple times in the form of Word documents. Clients often proof the text in a more relaxed manner because of this and are exposing themselves to typos, coding mistakes, and text they don’t even know is present. 

Where is the hidden text?

Sighted users are not the only visitors to your site. Vision-impaired users and search engines cannot interpret photos, and while you may not be aware of it, your web designer has the ability to put descriptions of the photos (or Alt Tags) that help describe the photo. A photo of the city of Indianapolis might have an underlying description that says “Indianapolis skyline.” Each page of your site should also have a unique Description tag and Title tag.

You can see the Title by looking at the top of your browser while visiting the page. The only way to see the Description is by going to the View Source feature on your web browser and looking for the Meta Description tag which should be close to the top. (You should also be able to search for the word “description” while looking at the source.) The best way to view the Alt tags is to go into the preferences for your web browser and turn off images. If you do not see text where the photo used to be, your designer may have forgotten to include Alt tags and this is a cause for concern. Failure to have page descriptions and unique Titles is also a cause for concern.

Why would there be new typos in my proofread text?

Special characters such as the ampersand, fractions, MS Word-generated “curly” quotes, em-dashes, and others are not read consistently on every computer. For this reason your designer should be replacing each of these with a coded character that will be read properly by all computers. You can often see these mistakes in a web browser during the final proofing of the functional site.

Also, sometimes a designer will attempt to re-type short blocks of text such as photo captions. It is always a good idea to do a complete read of the text on the functional proof.

Advanced: Proofreading Website Image Replacement.

Image replacement is a great thing. This allows your designer to put text, say, “Dan Finney Design, Inc.,” at the top of your website, and then use advanced coding methods to hide the text and replace it with a logo. Designers can also use this method to replace plain text with a designer font or a font with effects applied to it such as a drop shadow or a reflection. This underlying text is what the search engines read (not the image that you see) and use to determine how your site ranks in the search results.

It is possible for the image of the designer font to be spelled properly and the hidden text underneath to be misspelled. Also, if the text changes in the course of the project, the designer may have updated the version that you can see and failed to update the underlying text.

The easiest way to see text behind images that have been replaced this way is with the Firefox web browser, which is a free download. Once you have Firefox installed you can disable your website’s visual stylesheet and see the pure HTML (without having to look at the code). To do this go to View > Page Style > No Style.

This will also give you an opportunity to see if your site is designed according to modern standards. If your website navigation completely disappears when viewing your site without style you should have great cause for concern. This is an indication that search engines, mobile phone users, and blind visitors using audible text browsers will not be able to get past your home page.

Was this article helpful to you? Did you find any concerns on your website? Please let us know with a post.