Basic Web Design Tips

By Chris Harvey, online bureau director,
University of Maryland Philip Merrill College of Journalism
(charvey@jmail.umd.edu)

Here are a few tips for novices to consider when building basic news sites. Remember that pages and images are measured on the Internet in pixels, which are roughly equal to a point size on a printed page:

• Build your news home page as concisely as possible to reduce scrolling. Readers become impatient with too much scrolling.
• Strive for a dominant piece of art (a photo or graphic) and a dominant headline on the opening screen.
• Keep your pages, your layouts and your packages simple - often with no more than one dominant piece of art and several small thumbnail photos or graphics on most pages. Simplicity and good design are often linked. And too many large photos and graphics would slow down the delivery of your page.
• If you'll be using Photoshop or PaintShopPro to size pictures or graphics, work to make the images as light in weight as possible, without sacrificing clarity. You can accomplish this by cropping photos tight; changing most file extensions from .tif or .psd to .jpg or .gif; and decreasing the resolution of the image to about 72 pixels per inch (ppi).
• In keeping with the simple-is-better theme, don’t use more than a few fonts on your site. Often designers use a headline style that’s sans serif, (such as Verdana or Helvetica or Arial), and a serif text font, such as Georgia or Times New Roman. This provides good contrast on a page. Some, however, prefer to use san serif fonts throughout.
• Leave a line of space between paragraphs, to help readers to quickly scan a page. Flush paragraphs left.

Eyetracking Studies: Stanford University and the Poynter Institute joined forces to study how we read and process information on the Internet. Their 2000 eyetracking study offered a number of interesting findings, including that most Web readers focus on text first (headlines and captions) when they look at a new screen of information. A 2003 study by Poynter and two other research groups reaffirmed this. Thus, on the Web, it's essential to write headlines that draw readers in, designer Andrew DeVigal writes on Poynter's site. More Useful Links: Web usabilty guru Jakob Nielsen's design guidelines. A guide to fonts in more than 124 languages from SIL International's "Fonts in Cyberspace." About.com's design tips. Webmonkey tutorials on visual design.

• Use a color scheme that’s consistent throughout your package. Don’t use pastels on one page and glaring primary or neon colors on the next. Colors should unify your site. (USAToday.com goes so far as to match its Web site section-front colors to its newspaper section-front colors:  Deep blue for News, green for Money, red for Sports, etc.)
• Keep navigation consistent throughout your site or package. Many professional news sites put main navigation on the left side of the screen or along the top, or use a combination of the two.
• Avoid using too much text in italics. It’s difficult to read.
• Use black backgrounds with white text sparingly, if at all. It's difficult to read and to legibly print.
• If you’re searching for art for your site, don't reproduce copyrighted photos or graphics without permission. Most recent work on the Web is copyrighted--even if the page doesn't say so. (U.S. government documents are a key exception. However, if you want to use a photo from a U.S. government site, copyright lawyers say it's still good practice to get permission to republish. A freelancer may retain republication rights to a picture.) Check out clip art sites on the Web, such as barrysclipart.com, which offer graphics for free or for nominal fees for noncommercial use. Or try Wikipedia, the Free Encyclopedia, which categorizes and links to public domain photographs (follow the link back to the originating site to verify its authenticity). But be sure to read the rules of use and give credit as requested. (For answers to frequently asked copyright questions, check out the U.S. Copyright Office site and new-media publisher Brad Templeton's "10 Big Myths about copyright explained.")
• Limit your use of animated graphics. They can be distracting and can sometimes look amateurish, or too similar to paid advertising. 
• Avoid blinking objects or text. Again, they often look amateurish or like paid advertising.
• Remember when designing your page that most people read the Web from top to bottom and left to right. However, a 2006 eye-tracking study from the Nielsen Norman Group has shown that the right side of the screen is given much less attention than the left--and increasingly so as a reader scans down the page. (More on that study.)
• Remember that most Web readers are impatient. They'll scroll down a page quickly before deciding if they'll stick around to read it. Entice them by breaking up interesting sections on a page with mini-headlines (or subheads), and by occasionally boldfacing key words on items such as calendars.
• Use bullets when appropriate to lead readers through key points.
• Don't design a site that's too big or complicated to maintain! Be realistic. Don't build in javascript or other advanced programming languages into your code if your staff won't know how to make changes to update it.
• Your page should load quickly. The diagnostic site NetMechanic recommends having pages load in 12 seconds or less on a 28.8 modem. To find the total weight of a page and how quickly it will load, go to NetMechanic's Site Tune-Up  This site will also tell you if you have bad links on your page, and it will point out spelling and HTML errors.

 

Reporting & Research

Writing

Production

Design

Planning