Readings

Formatting for Accessibility

Van Londen. 2004.

Approximating Master Pages in PHP

Spinning the Web. 2006.

An Introduction to Accessibility
on the Web

Macromedia Training Cafe

Accessibility Techniques for Dreamweaver MX

Macromedia Training Cafe

How to make skip navigation links

this technique allows visitors who listen to websites (rather than read them) to jump over the navigation links on each page so they don’t have to listen to them over and over.

About Favicons

Wikipedia.com

Need more templates?

When you finalize the design of your masterpage, you can make additional masterpages for other uses, such as:

• Subtopics which need new color schemes, imagery, or functions.
• Content-only popup pages.

Additional templates are based on the original template, so that there is consistent use of color color, fonts, and layout.

The purpose of a masterpage/template is to provide a consistent message to the users, via functions, navigation, content, color, and placement of elements, no matter what page they land on.

A masterpage should include the following components:

1. Masterpage Functions
• Scripts such as PHP allow the masterpage to be "included" or "called" by each content page creating an efficiency when updates to the graphic design are needed.
• For example, if you decided to update the name of the menus, one change in the masterpage is automatically applied to all pages of the site because they each include a call to the same masterpage.
• Click the diagram to see a legible illustration of the concept.
• Learn more at Spinning the Web:
  • Approximating Master Pages in PHP
2. Complete title tag
• Name of the page.
• Name of the site.
• Short description of the site, written using the most important keywords.
3. Meta tags
   • Some search engines still index your site by looking at meta tags. These are the most common to include:
     • Description of the site
     • Key words and phrases that visitors would use to search for the site.
     • Author of the site
     • Rating
   • If you don’t want your site indexed, then add the exclusion meta tags:
     • Noindex, nofollow, to keep site from being listed in search engines.
4. Accessibility features
• To ensure everyone can use your site, keep in mind that not all users have hands, ears, or vision. So consider incorporating these features:
  • Skip Navigation, to allow visitors who listen to pages–rather than view them–to jump over the navigation items each time they go to a new page.
  • Font-size enlarger icon. Many visitors do not know that the browser has a menu to increase or decrease the font size when they have trouble reading the page. Many new sites use a toolbar which includes skip navigation and a font-size enlarger to make it easier for the visually impaired.
  • Legible text and images. Many people are colorblind or have poor vision (and perhaps higher or lower resolution monitors than yours), so use text that is large enough, has enough contrast with the background, and does not flicker or blink when reading. Important details must not rely on subtle color changes to provide critical information because not all visitors can perceive color changes.
  • Images are quick to download, having file sizes smaller than 20k (10k or smaller is preferred).
  • Media files are labeled with links to necessary plugins and note the load time so visitors can choose whether to wait longer before viewing.
  • Downloadable files use appropriate formats. Label each with file type, links to necessary plugins, and are virus-free. Appropriate online file formats include:
    • Acrobat Reader (.pdf) files optimized for online viewing or download.
    • Text-files (.txt) work on all platforms without plugins and generally download quickly.
    • Graphics files (.gif, .jpg, or .png). Note that .bmp, .psd, .eps, and .ppt are not online formats and may be too large for some visitors to download quickly.
    • Media files (.ra, .qt, .wmf, .mov). New media file formats become available often, so test your files for download time and quality before asking your visitors to. Consider offering more than one format and size for visitors with slow internet connections.
    • Inappropriate formats for online deliver include .doc, .ppt, .xls, unless they are converted to web pages.
5. Site and page name and purpose
• Make it obvious what the site is about. Don’t rely on the <title> tag or menus to give all the information a visitor needs to understand at a glance what they can do at your site.
• In the header area, use the name of the site and a brief description that uses the main keywords.
• In the content area, use a descriptive headline.
• Continue to describe the site or page’s purpose in the first paragraph.
6. User Interface / Navigation sets
• At this stage, link names are set, but the pages are not created for them to land on.
• If using database-driven menus, testing of the links can be done at this stage.
7. Legal statements
   • Copyright date and holder.
   • Link to a policies/legal page that describes what visitors are allowed to do with the content of the site.
8. Date last modified
• If using php pages, add this function to the footer or article byline to tell visitors when the page was last updated. Visitors want to know how old or fresh the content is.
  • <?= 'Updated ' . date('F j, Y',filemtime($_SERVER['SCRIPT_FILENAME'])) . '' ?>
9. Contact information
   
   • Phone and address but NOT an email address.
   • Spammers will siphon the email address and begin sending you irritating email.
   • Adding a contact/inquiry form page during the content production phase will help alleviate unwanted email.
10. Layout defined
    
    • Will the layout be suitable for the home page as well as the content pages?
      • If not, make addtional masterpages with customized designs.
11. Add a favicon to help identify your site in the browser bookmarks list and tabs.
    • For FireFox, a .gif file will suffice.
      • <link rel="icon" type="image/gif" href="favicon.gif" />
    • For Explorer, an .ico file works best.
      • <link rel="icon" type="image/gif" href="favicon.ico" />
    • Convert most graphic files formats to ICO format with FavIcon from Pics’ free image converter.
      • Uncompress the .zip archive the converter provides and place the .ico fie in your images folder.
12. Print the template to ensure no text is cut off, excess white space does not create extra pages, and excess ink is not wasted on large masterpage graphics. See instructions below.

Key

• :-) standard
• __ not available
• [plug] requires additional plugin

Resources

The Free Site.com

Links to sites offering free sound files and streaming.

Web Mastering: The Art of Optimizing Sound Files for Napster and the Internet

Josh Beggs. O’Reilly Web. 2000.

The Linux Cookbook: Tips and Techniques for Everyday Use

Methods for for cutting and pasting sound files, applying effects and filters, and converting sound files between formats

RM to MP3 Converter

Includes other formats.

LEAD Video Compression Codecs

What is a codec and why do I need one? Table helps determine the correct codec for the application. Fully functioning evaluation copy.

Multimedia converters/Translators

ICDatamaster.com. For all situations in life.

Adding sound and video to your Web site

Macromedia Support Center

Video for the Web Tutorials

FluffBucket.com

Integrating Flash and QuickTime Video

Dave Emberton. New Riders. Sep 2, 2001.

Readings

HTML For the World Wide Web

Page 32, 55; chapter 2, 3.

The Unusually Useful Web Book

June Cohen. New Riders. 2003.

Pages 191 to 192.

Creating Web Pages with Dreamweaver

Pages 82 to 91.

It is the linking of separate, single web pages that turns them into a web site. How the pages and directories are named, organized, and linked helps determine the quality of the visitor experience.

File naming standards

• File names are lowercase.
• File names are descriptive but not too abbreviated.
• File names use – instead of spaces or underscores (preferred by Google).

Directory naming standards

• Each main topic area gets a directory.
• If subcategories will have more than a few pages, add a subdirectory.
• All directories have an index/default file.
  • This file hold content for the first subtopic in a directory.
• Decide what kind of media files you’ll be using and consider separating them into directories and/or subdirectories
  • images (graphical elements related to the page design)
  • audio
  • movies
  • photos
  • illustrations
  • downloads
• Main template graphics go in the main images directory and each topic’s images often reside in the corresponding section images directory.

Organizing

Many variations exist for organizing the directory and file structure of web pages on a web server. For example:

• Database-driven sites pull page content from a database but use many script and function files to do the work. Complete pages are not actually built until the visitor requests a topic from the menu. The server builds the page on the fly.
• Masterpage-driven sites allow content pages to inherit a masterpage/template. Complete pages are not actually built until the visitor requests a topic from the menu. The server builds the pages on the fly.
• Traditional sites hard-coded all code, content, and styles on each page and therefore took a lot of tedious, redundant editing to make global changes. Pages were built before loading to the server.

Linking

Depending on the site’s structure, paths from menu items to their pages will either be absolute or relative:

Absolute path

• http://domain.com/folder/file.php
• http://oregonstate.edu/~vanlondp/cs195
• http://oregonstate.edu/instruct/cs195/demos/site/folder/filename.php

Relative path

• ../folder/file.php or ../folder/subfolder/file.php
• ../../../instruct/cs195/demos/site/folder/filename.php
• ../cs195
• Within any content pages, use a relative path to the masterpage.php file—an absolute path will not work.

In order for web authors to provide that positive experience for visitors, and to keep from spending too many hours making redundant changes to the code or layout, efficiencies are built into the site’s design from the start.

Recommendations for efficiencies:

• Include the following components in a masterpage (sometimes called a template), which is then called by each page, rather than hard-coded into each page:
  • headers (site name, logo, contact info)
  • footers (copyright, legal, contact info)
  • navigation sets (menus for audience, topics, locations, etc.)
  • dynamic content (rotating articles, news feeds, staff highlights, advertising, product highlights, etc.)
• Within those components are often graphical elements that can be handled by the style sheet and masterpage files.
  • logos
  • icons
  • buttons

Navigation Sets
Adding Style to Navigation Lists

Web Programming Languages

Loren Paulsen 2007

Readings

Homepage Real Estate Allocation

Jakob Nielsen’s Alertbox, February 10, 2003

Top Ten Guidelines for Homepage Usability

Jakob Nielsen’s Alertbox, May 12, 2002

Promotion Tip: Splash Pages May Drown Your Site

Larisa Thomason, Senior Web Analyst, NetMechanic, Inc. 2008.

Splash Pages: Do We Really Need Them?

Smashing Magazine’s Design Showcase. 2007.

Four Types of Webpages To Avoid

Patrick Burt. 2007

While testing your home page

Include a real or greeked sample of each kind of content.

Greeking Machine

Duck Island. Choose from a variety of types of gibberish language to populate your prototype pages.

Lorem-ipsum.info

Several languages available.

The home page is the most impressional page of a web site; most visitors will see it before any others. Content on the home page will vary depending on the kind of web site you’re building.

Consider these types of sites and typical home page content:

Blog/news/zine

• Short description of the site’s purpose
• News (takes up most of the real estate)
• Photos
• Category and search navigation
• Outside links, ads and affiliations
• Contact info

Portal

• Short description of the site’s purpose
• Short description of the company
• Few menu items taking up lots of real estate
• Contact/location links

Intranet

• Short description of the site’s purpose
• My ToDos
• Internal news
• Tips
• Login
• Staff highlight

Entertainment

• Short description of the site’s purpose
• Media (takes up most of the real estate)
• Tips & Tricks
• Participant highlights
• Ads

Ecommerce and Web Services

• Specials and product highlights
• Success Stories
• List of tutorial titles
• How to get started
• Order status help

Who will visit the sites you build? What are their expectations? What kind of technology will they use to view you site? What will bring them back to see it again?

Answers to these questions will effect every decision you make about the development of a site, from the way navigation is labeled to how much multimedia is tolerable.

A site development team will go to great lengths to get answers they need to help define their site, including surveying focus groups, asking for online feedback of an existing site, paper surveys, and offering premiums/giveaways for the users’ time and effort.

Take a look at Reece, Rogers, and Sharp’s online tools for building a list of questions you may need to address for your project:

Interactive Heuristic Evaluation Toolkit

Reece, Rogers, and Sharp. Interaction Design web site.

For this course, you will make educated guesses about your audience (unless you have the time to really find out about your audience) and listen to feedback from your small groups to assess whether you site(s) meet your defined audiences’ needs.

Types of sites

The range of applications the Internet has to offer is endless. New methods of communicating electronically are developed daily and expand the capabilities to new audiences and new devices. Here’s a brief look at what’s available now. Have I left any out?

Informational

This type of site is static; there is very little interaction with the user. It provides visual, textual, audio, or video information. Examples include personal résumés and photo albums, reference materials, online business and organization brochures.

Community

These interactive sites engage users in sharing and conversation with discussion forums, live chat, blogging, and games. Membership is often required.

E-learning

Taking workshops, seminars, professional and degree courses online, sometimes along with other media, such as video and Interactive Television is a form of e-learning. It is usually heavy on the informational content, but well designed e-learning will engage students in lively discussions, which creates a much richer learning environment.

E-commerce

Add the ability to purchase online to an informational site, and you have commerce at work. Security to the user is very important here, so that their private purchasing information is not shared or stolen. Many options are available for setting up shopping, from free applications like PayPal, to robust database-driven banking solutions.

Productivity

The ability to do work online—not just surfing (research), but sending and receiving email, personalizing web pages, adding guestbooks, building databases, scheduling events, and presenting online provides individuals and businesses with productivity tools that can cost less than installed applications.

Layers

Web Developers concern themselves with the different layers of production of a site:

• User Interface
• Middleware
• Backend

For this course, we are primarily concerned with the user interface and an introduction to middleware. Other CS courses concern themselves with the middleware and backend tools that allow pages to be created and served once a user requests them.

Getting commitments from key players

What is acceptable contract between a web developer and a client? What kind of verbiage to different industries require in a contract? Here are a few examples.

AIT’s Reseller Resources

Web Design/Development Documents.

E-Consultancy

Professional level Plan Document, free download for simple version.

Web Design and Developer’s Contract Swipe File

Bob Schmidt. Provider Marketing Group. 01/04/04.

It was too good to last, I guess.

What really NICE thing could I do for the neighbor to help her realize what a MEAN thing she’s done for us?

Should I let her karma takes its course or should I help it along?