What Makes a Great Web Site? | WebReference

What Makes a Great Web Site?

What Makes a Great Web Site?

What are the essential traits of great Web sites? After you visit a site and find yourself staying awhile, what makes you stay? A sense of humor helps. Flashy graphics are nice. But the fundamental traits that make a site work are more elusive. This article will break down the essential characteristics of great Web sites into some easily followed rules of thumb.

Site Guidelines

Most of these guidelines are just plain common sense, which seems to be a scarce commodity on the Web. The sexy proprietary page-layout and text markup features provided by Netscape and Explorer as they leapfrog each other have seduced many a webmaster into jazzing up their pages, only to be forced to put "you must use Netscape/Explorer to view these pages" at the bottom. This could be rephrased to say "these pages look awful without Netscape or Explorer." Stick with standard HTML (currently HTML 4) (1) and your pages will look good on all browsers that support it.

Overall, we've found that companies either get the Web or they don't. Your Web site should reflect the culture of the Web, which we call the "Gift Economy." (Witness Netscape and Microsoft.) Very few sites (5%) can charge for admission or require membership, and many people avoid sites with these barriers. Give away something valuable: information, software, advice, humor, and people will flock to your site.

Here are the Web site guidelines that we follow at internet.com.

Web sites should:

Provide credible, original content in as many forms as possible

    Original content is the most important trait of a great Web site. Sites that provide only links to other sites are essentially meta-lists (although Yahoo seems to be doing well :), while sites that have some information that's useful to the user stand out and will be revisited. A recent check of webreference.com's statistics confirms this, our content providers account for 62% of WebReference.com's total impressions. Content is King.

Provide valuable, timely information to the user, not lots of data.

    Web sites should be updated regularly. Stale Web sites say "been there, done that." For the information to be valuable it should be well-edited. For external links include only the best sites with concise descriptions. For internal content be like a magazine editor, don't rush to publish mediocre or incomplete articles. Typos are unacceptible. [sic]
Original Content is the most important trait of a great Web site.

Share everything you learn

    Great Web sites share everything they learn and hear (that's relevant of course) with their users. Give behind the scenes accounts of your latest site features, go open source, start a newsletter, and you'll get more than you give.
Customize and target your content/site to your users. Think "one-to-one" Web sites.

Custom-tailor the information to user preferences

    One of the Web's strengths is the volume of information available. That is also one of its weaknesses. Sites that offer customization features (Mylook, Slashdot.org) allow the user to filter the content they see. The future of the Web are "one-to-one" Web sites. These automated, database-driven sites adapt the content, advertising, and even the look to individual users. Technologies such as Web Objects and Cold Fusion allow webmasters to create dynamic, interactive, and adaptive Web sites.
    A good example of a one-to-one Web site is c|net. c|net started with two in-house proprietary content delivery systems: Prism and Dream (2). Prism, or Presentation of Real-time Interactive Service Material, was the site management and page generation engine behind the pages of c|net. CNET has since developed a more sophisticated page-delivery system, Story Server, which powers CNET and the newer spinoff sites of shareware.com, search.com, and news.com. Story Server, marketed by Vignette, is a database-driven, template-based Web site publishing system, which we (internet.com) are transitioning to for our sites (internetnews.com is the first site to be converted to Story Server).
    Template-based database publishing systems are much more efficient and consistent for publishers, give users a richer more targeted experience, and when coupled with ad software, give advertisers higher clickthroughs. Story Server stores content and graphic elements in a Sybase database, and as visitors request a page the content is "poured" on the fly into design templates.
    Dream, or Delivery of Real-time Enhanced Messages, is the advertising content delivery system c|net started using in December 1995. Dream dynamically creates ad pages based on individual visitor characteristics, including hardware platform, browser type, host service, and domain. c|net's 1,000,000+ registered users receive even more specialized attention, their age, salary, and other demographics are utilized when delivering ads. CNET is now using Accipiter to deliver their ads, which has excellent targeting features. Many of the larger Web sites on the Web are using these specialized Web publishing systems, like Vignette and Autonomy.

 

Be responsive on a 56 Kbps modem (the typical Web user).

    Use graphics sparingly to convey information. Each graphic takes another trip to the server. Consolidate neighboring graphics or use CSS'd text or table cells with background colors to speed display. WebMonkey has a policy "use graphics for graphics and text for text, not graphic text." Size graphics to fit in a typical user's window (a maximum of 465 to 532 pixels wide [i.e., the default Netscape screen to a printed page], or for max screen space viewable on all platforms use a max of 580 pixel wide tables to fit on Mac screens). It's easy to see if a site's been designed on only a PC, the page is too wide on a Mac, typically 620-640 pixel wide tables fit a PC's monitor but are too wide to display on a 14-15" Mac monitor.
    Break up your tables vertically for a cascading load to appear more responsive (we use this technique on our front page). One huge table takes much longer to display content than stacked smaller tables which display one at a time. Microsoft's IE5 has a FIXED table width feature that speeds table display, unfortunately this is proprietary and does not work on Netscape's browser.
    Optimize graphic file size for Web display (a maximum of 20 KB per graphic). Utilize page display speedups such as the WIDTH and HEIGHT attributes for images. Use JPEGs where possible and appropriate (continuous-toned images) and minimize the color palette of GIFs to optimize file size. Provide text alternatives to graphics for low-bandwidth users, the blind, and for speed. ALTernate text tags for images should be functional, not descriptive. If the graphic has no function, use ALT="" (i.e., ).
    Optimize your HTML by removing excess spaces, comments, tags and commentary, especially on your home page, to minimize file size and download time. Products like Antimony Software's Mizer and VSE's HTML Turbo automate this process by removing excess characters and HTML to optimize your HTML and JavaScript. I manually tune our home page for minimize file size (typically 14-15K for the HTML page), but these products can help even file-size obsessed webmasters like myself. These products are drag and drop, and should be used as the last step before you upload your page (the files are harder to read after many of the returns are removed). After optimization your pages will appear to snap onto the screen.

Be easy to read.

    Make your pages as easy to read as possible. Black text on a white background (as this page is set up) is the easiest to read. I've seen some nearly impossible to read pages that use backgrounds the same shade as the text (dark text on a dark background and vice versa). If you use a background, stick with the lighter shades and let the text stay black. Use a wide and short (we use 700 X 16 pixels) background graphic that's non-interlaced and under 1K or . HTML 4.0 now includes style sheets that can control page, link, and text color attributes site-wide, and make maintenance easy.
The second most important trait a Web site should have is interactivity.

Be interactive; good interactivity engages the user and makes your site memorable.

    After original content, the second most important trait a Web site should have is interactivity. The Web is an interactive hypermedia communications medium that your Web site should reflect. Sites that involve the user and have a sense of fun or adventure will get more hits, and can charge more for ad space.
    Another advantage of interactivity is self-generating content. By allowing your visitors to interact with your site they actually create content for you. Script-driven user surveys and forums allow visitors to share information with others and can help shape your site to better serve their needs. Forum or chat software is a great way to do this. A great example of a user-driven site is Slashdot, a news site for nerds which posts short stories submitted by users, and allows users to easily append comments to each story.

Be well-organized

    Balance the number of levels (the degree of hyperization) with page length to minimize scrolling and display time.
    Sun Microsystems found that users equate poor organization with poor site design in their extensive usability study of their home page. They also found that users don't want to scroll. However, the hits on Discovery Channel Online increased by 40% after they went from non-scrolling design to a scrolling design.
Users equate poor organization with poor site design.
    It depends on your application. Designing pages so important content is "above the fold" is a good idea, though some sites take this maxim to an extreme and cram everything into a cramped mess. Where possible, size your pages important content to fit into the typical user's screen (465 pixels wide by 340 pixels high for a 15" monitor). Web pages should be at most two 8.5 x 11 pages in length. I've seen many examples of huge 100K+ one page sites.
    Part of having a well-organized site is providing multiple ways of easy navigation (3). Supply both text and graphics for buttons. Users feel more comfortable if you maintain a consistent look and feel throughout your site.

Use an appropriate metaphor (like Zima's fridge or Ragu's Mama Cuchino Kitchen).

    Using a good graphic metaphor for your interface makes the user feel more comfortable navigating your site. Good metaphors, like using a fridge as a gateway to the world of Zima, can elevate a merely good site to a great site.

Match customer profiles with Net demographics (now about 50/50 educated males/females).

Fill a niche.

Dominate a subject area; become the site for that subject.

Don't duplicate a list when you can point to it. Leverage other people's work to reduce your workload. Let others who specialize in a particular topic keep their list up to date for you. On the other hand, don't make lists that point to lists ad infinitum, seek out the meat of the site and point directly to the article or resource. Many sites on the Web are just lists that someone else has already done.

Many sites on the Web are just lists that someone else has already done.

Have a secure and automated server

    Tracking
    Part of Web marketing is gauging the effect your pages have on the public. Sophisticated site usage tools such as I/Count, SiteTrack, WebTrends, and Interse Market Focus allow site developers and their clients to easily see the popularity of different pages, stay duration, where they come from and where they go, and even the path they take through your site. Include a what's new area to give frequent visitors a way to see what has changed since their last visit.
    Automation
    Maintaining a large Web site can be a daunting experience. Use automation tools where possible for site maintenance. Use local spiders such as MOMspider and LinkBot to help check for old URLs. Where you choose to link will affect how fast your links will fail. The deeper into a site you link, the more likely it is to change. Don't move popular pages in your site unnecessarily, you'll break the links to your pages. If you do move them, provide a "this page has moved" page. Many orphaned links are a sign of webmaster neglect.
    Searching
    Let users search your site with search tools such as SWISH and Excite for Web Servers. Offer an overview of your site with a TOC or site map.
    Security
    Security is often the last item addressed on even larger commercial sites. Allowing adventurous users to sniff around your files (especially your server configuration files) is not a good policy, but amazingly only 20% of current Web sites are secure.
"A Web site is like a diner. It has a core arsenal of dishes that justify its existence, but it also must have a regularly changing specials menu that keeps its regular customers coming back for more. The assumption...is that a Web citizen...visits the site on a weekly, if not daily, basis."(4)

Build it, and they will come?

A common misconception companies new to the Web have is that if they put up a page, people will visit it. In order to have a popular site, you've got to offer something to the user: information, interactivity, fun, freebies, something more than an 800 number.

Original content is important. Users may come to your site once, but to keep them coming back you've got to have fresh original content.

Sites that offer freebees get noticed. Free software, services, databases or electronic newsletters will attract users like a magnet. SGI has a FREE LUNCH area where you can download free software, computer games, graphics, and video.

Conclusions

The Web is an interactive, dynamic, and rapidly changing new communications medium that your Web site should reflect. Well-organized, edited, and timely original content set in an attractive, interactive, and consistent format are some traits of great Web sites.

References

1.HTML 4.0 - W3C's specification for HTML, replaces the expired HTML 3.2 draft. Includes more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. Also see the newest HTML draft.

2.From an article entitled "Automation Keeps Them a Step Ahead" by Ellis Booker, Internet World (formerly Web Week), April 1996, p. 17. Also see CNETs article on how they do it at How CNET.

3.From the Yale C/AIM WWW Style Manual, an excellent Web site devoted to good HTML and site design.

4.Gerald M. O'Connell, from "A New Pitch" Internet World, May 1994 p. 56.