Chapter Six: The Web

This chapter is different from the preceding chapters in that it focuses on a particular medium of communication--the world wide web as a delivery system for digital visual documents. The reason we're discussing this particular medium when we've skipped other important media such as TV, radio, and film, is that as a visual communicator, you will probably be asked to publish on the web more than in any other medium, including paper. There is no way we can cover everything in this chapter that you will need to know to do successful web publishing; for more information, I suggest Dr. Mott's TC 251 course and Edward Tufte's chapters on web interfaces in Visualizing Information. For now, we will begin with an extremely brief history and explanation of the World Wide Web, then summarize the principles we have learned so far that can and should be applied to web design, then finish by considering a couple of topics particular to web publishing.

What is the World Wide Web?

Most of you are probably already familiar with the essentials here, so we will move through them quickly. The World Wide Web is often called the Internet, but these are actually two different systems. The Internet is an ever-growing network of servers and terminals linked by communication lines such as phone lines, cable, and radio waves (wireless). It has existed in the form that we're familiar with since the 1980s, when businesses and the military adopted it as a quick way to transfer electronic files using file transfer protocols (FTP) and internet protocols (TCP/IP).

The World Wide Web is a technology that uses the internet to permit readers at its nodes to view (but not to modify except in cases of fora and wikis) documents housed remotely on other computers. This capability requires a hypertextual mark-up language (HTML) that tells the reader's computer monitor how to display parts of the file for viewing. Tim Berners-Lee developed a prototype web and HTML at CERN in 1989, and by 1993, the National Center for Supercomputing Applications had published Mosaic, the first graphical web interface (browser). Here's a screenshot of what Mosaic looked like (Figure 1):


Figure 1: Screenshot of old Mosaic browser from history/old_sites/

To see what HTML looks like, if you haven't seen it before, pull down your browser's View menu and select Source to view the HTML commands that create this page in your browser. The commands in angle brackets are called tags, which appear in pairs that bracket off a part of the file that need to be displayed in a certain way or to have certain behaviors, such as paragraphs, headings, and external links. For example, if I wanted to make a bit of text bold in HTML, I would write the following in the source file: <b> a bit of text </b>. The browser reads the file from the top; when it hits the <b>, it turns on boldface, and when it encounters </b>, it turns off boldface. That is a very simple example; if you view a typical source file for a web page, you will find much more complicated HTML that makes tables and frames along with some Java or Flash that creates interactive behaviors--such as buttons you can "click"--and animations.

Web authoring software

There are a number of ways you can create a web page. You can "hand-code," placing HTML tags on a TXT file you create in WordPad or another simple text editor. Save this file with a .html or .htm extension (either can be read by most browsers now; just be consistent in your naming of linked files), then upload with an FTP program to your public HTML directory in your online account, where the file can then be viewed by readers. Remember that all browsers default to a file named "index.html" in the public directory, so you'll want to name your homepage or main page with this filename.

Microsoft Word does allow you to save a Word file as HTML, but be aware you'll lose a lot of formatting, including all your tables. Most experienced web designers prefer to use a WYSIWYG (What You See Is What You Get) web authoring tool. Dreamweaver is industry standard. All of these editors just create HTML files, so you don't have to use the same program to edit your files as you did to create them. Sometimes, it's easier to make simple corrections by hand in a TXT editor such as WordPad. For more complicated behaviors, such as rollover buttons and frames, you'll almost certainly want to use a WYSIWYG editor instead of hand-coding. See the references at the end of this chapter for some tutorials and trial downloads.

Review of visual principles applying to web design

Here is a quick review of principles from previous chapters that apply to web design:

Chapters One and Two on Neurology and Perception:

  • Anything on the periphery of the web page must be scaled much larger to attract the viewer's eye
  • Be aware of colorblindness when you design your pages. Use vischeck.com to check your graphics if you have any doubt, but in general, using muliple cues to signal information (closure, continuity, color, etc.) should serve you well
  • Make sure your text and background are high contrast. It is easier to read dark text on light backgrounds than vice versa
  • Use alt tags on your web graphics to assist viewers with visual challenges
  • People only notice what changes, true, but be careful about using looping GIFs and Flash animation--it will prove distracting and annoying. If you have some animation, have it play through once or maybe twice and then stop

Chapter Three on Cultural Factors:

The World Wide Web is not just a name. Remember you have a global audience when you select colors and symbols for your website.

Chapter Four on Print:

  • To be readable on the web, font should be at least 14 point and preferrably sans serif
  • Upscaled fonts tend to get that stair-steppy look called pixelization. Either use a font that has been scaled for large titles, or rasterize the text (turn it into a graphic in Fireworks or Illustrator)

Chapter Five on Graphics:

  • Be careful to optimize your graphic file sizes, i.e., make them as small as possible without sacrificing too much resolution. People lose patience and leave sites with slow-loading graphics.
  • The best file format for photographs is JPG; the best for smooth graphics is GIF.
  • The resolution of a computer monitor is 72 pixels per inch (dpi). If you print out an uncompressed web graphic on a printer that prints at 300 dpi, your graphic will appear approximately 4 times smaller.

Web-specific considerations for visual communicators

The web presents special opportunities and challenges for visual communicators. The advantages of web publishing are many: low cost (after initial outlay for software and server support), speed, customizability through XML and other flexible mark-up systems, ease of correction and update, accessibility. The disadvantages are not as immediately obvious, but they include a steep initial learning curve and a user mindset that is intolerant of poor design, slow loading, and out-of-date information. If people are overly judgmental of the presentation of web pages, they often tend to be less discriminating about content. The fact that anyone can publish on the web impacts many people's trust in the documents they find there. Here are some web-specific rules to keep in mind as you venture into web publishing:

  • Studies have shown that people look for navigation materials first at the upper left of the page and next across the top. If you place navigation elsewhere, make sure it is about twice as big as normal. Eye-tracking studies conducted by web designers and technical communicators show that people first look at the upper left of a web page, and then their eyes scan left to right down the page. The last-seen spot on the page is the upper right hand corner (Figure 2):


Figure 2: Composite results of Eyetrack III study
From

  • Although most people now have larger monitors, it is still a good idea to build your home page within an 800 pixel wide by 600 pixel high box so that all elements will be visible on just about any monitor
  • Tables are extremely useful for laying out graphics, text, and navigation areas on a page in a way that will stay stable between browsers
  • Always check the look of your page on multiple browsers to control for variations. Don't forget to check the look of your site on a Mac, too, if you've designed it on a PC.
  • Use websafe colors whenever possible to control variations among browser display
  • If you have a gorgeous Flash intro, make sure to include an opt-out link for those with dial-up or little patience
  • To boost your site's ethos (credibility), always link and cite graphics and source info to the originals

References

Vischeck.com for colorblindness checks

Tutorial for HTML

Download trial of Dreamweaver here; or, just try the excellent tutorials.

Jakob Nielsen's Alertbox articles on web usability