Creating a Web Site: Some of the Basics
for Comm 495, Spring 2004

http://www.lib.odu.edu/libassist/tutorials/guides/comm495/

Karen Vaughan
Digital Services Coordinator
Old Dominion University Libraries
683-4184
kvaughan@odu.edu

• What it takes to create a Web site
  • some (not so) technical basics
  • planning
• Some elements of good/bad Web sites
  • basic do's and don'ts
• How writing for the Web is different from print

1) Web page/s = simple file with HTML tags that describe how and where the text (& images) should be displayed on the computer screen

HTML = HyperText Markup Language -- in the form of tags to define fonts, colors, headings, embedded graphics

• use code or editor (eg, Dreamweaver, MS Word, FrontPage)

2) Web browser = program that interprets HTML tags within the page; pulls pages from a server to your machine (eg, Netscape, Internet Explorer)

3) Web server = computer that stores files, with software program that responds to browser's request (ftp) and delivers pages.

• free space (ads, banners)
• fee (domain name)

4) Users ? (promote your site)

But, before you create, you should plan:

• know your purpose (to provide information, teach, sell something, market a company or product, impress someone ?)
• know your audience (think about who they are, what they want/don't want)
• outline the structure
• write the text
• design a basic layout for all pages (make it graphically interesting)
  • with navigation on all pages; links to home & contact information
  • choose colors, fonts, headings, images carefully
• always keep usability and accessibility in mind
  • Jakob Nielsen's Alertbox : http://www.useit.com/alertbox/
  • Web Style Guide : http://www.webstyleguide.com/
• always test (on different users, on different browsers, on different monitors -- screen resolutions, on different connections)

First... the bad

"Online content creation has been dominated by MBAs, graphic designers, and software engineers - not writers." -- Wayne MacPhail, Web Coordinator at Centennial College; has twenty years of experience writing and editing for newspapers, magazines and websites

• www.webpagesthatsuck.com
  • http://www.hrodc.com/
    
  • http://www.standardhotel.com/index_flash.html
    

Elements of a good web site

• Clear, inviting, informative home page
  • keep to 1 screen
  • use tagline that summarizes what the site or company does
    • users are impatient -- they won't stay long if they don't like what they see or if they can't find what they need immediately -- 10 seconds
• Clean, easy-to-follow (easy-to-update) structure
  • break the site into areas of interest or importance
  • logically sequence the areas (linear outline)
  • use style sheets, server-side includes to make editing and updating more efficient
• Simple, accessible, consistent navigation
  • straight-forward menu on every page
  • left, top or right
  • contact info, "about us," and home option on every page
• Fast loading "light" pages
• pages should be less than 50-60k (including images)
  
• Relevant images ("symbiotic graphics and text")
  • 72 dpi images -- with "high-quality" look
  • don't let image dominate the page -- crop it
  • minimal animation, if at all
    
• Consistent color scheme
  • use browser safe palette
    
• Intelligent use of technology
• use multimedia/Flash only if it makes sense
  
• Continued development and review
  • review pages and re-date pages after review
  • keep ownership information up to date (footer?)
    with credentials, affiliation, affiliation (institutional logo)
    
• For complex sites:
  • Search feature
  • Site map
• Things that are unnecessary, confusing, or get in the way:
  • too much content
  • textured backgrounds
  • page counters
  • blinking or flashing text
  • frames
  • special plug-ins to view page (offer option)
  • separate flash intro ("skip intro" was 2nd most clicked option on Web
    
• Clear, consistent, well-written text ....

Reader behavior:

• People "speed read" on the computer
• 4 times as fast as they read paper documents
• They rarely read word-by-word -- they scan, picking out individual words and sentences
• Nielsen study 1997: 79% scanned, only 16% read word-by-word
  
• Users roam from page to page and link to link
• Readers will print anything longer than ½ page and read it offline
• Credibility is important to Web users

How you should write:

• Use excellent writing skills (spelling, grammar)
• Stick to the point - keep your writing short, sweet
  • Users are busy and usually want to get straight facts
• Use scannable text:
• Highlight keywords (with underlined links, typeface variations, color variations)
• Use meaningful subheadings
• Use bulleted lists
• One idea per paragraph - put it in the first line of the paragraph
• Use inverted paragraph style: conclusion first; important facts near top of first paragraph
• Avoid empty chatter - don't try to be too clever
  • Don't use "marketese" (boastful claims = "hottest ever")
• Think globally - if your users are international, they may not understand clichés and metaphors

Other Text on the Page:

• Break up information into logical chunks - connected with links
• Links:
  • Should be used sparingly and as a reinforcement of, not a substitute for, content
  • They can be too distracting in the middle of text - place off to the side and explain their purpose
  • Have links open a new browser window
  • Or, have reference/resource page
• Page title:
• often first thing users see (especially with slow Internet connections)
• it's the text for bookmarks
• in search engines, it's the primary descriptor of your page
• Should include name of company, organization, or web site
• Should be a concise, clear reminder of page contents
  
• Navigation buttons:
  • remember the strange room with lots of doors!
• Include information, credentials of page creator and date all pages

NOTE:

• Some writing isn't suited to scannable text -- don't "dumb down" important material
• Make printable version for long pages of text
  • Readers will print anything longer than ½ page and read it offline

Jakob Nielsen's Alertbox www.useit.com/alertbox/
Lots of articles and studies on usability

Web Style Guide www.webstyleguide.com
Web version of standard guide for creating Web sites

Sites with many tutorials, articles, links to resources for Web developers:

• Web Developer's Virtual Library www.wdvl.com
• Killersites.com: Learn to build websites www.killersites.com
• Webmonkey: the Web Developer's Resource hotwired.lycos.com/webmonkey/
• How-to-build-websites.com: Learn to build 4th generation websites easily www.how-to-build-websites.com/ (promotes use of html coding rather using editors)