Site Design -- web issues

Web-specific design challenges

• browser width... ~ 500px to 1400px
• network connection speed... ~ 56 kb/sec to >20,000 kb/sec
• whether visitors arrive at your home page or arrive deep within your site.

Designing "above the fold"

In the early days of the web, (pre-scroll wheel) it was estimated that 90% of people never scrolled down.

Horizontal scrolling is still awkward.

Put as much navigation as possible, and absolutely essential information within the prime screen real-estate: the part of the page that displays initially when someone visits your site-- an area of approximately ?? pixels.

Designing for variable browser width

• SST pages - flexible table
• Riverstudio - fixed, small width

For Discussion

Which of these sites communicates what the site is about 'above the fold'? At what widths do these sites still look "acceptable"?

Mark Guard Matocha Associates McKissack MMPA

Olson Lavoie OSKA * Plunkett Raysich * Renzo Zecchetto River Architects

Bandwidth or access speed

Access speeds (measure yours) to the rest of the Internet range from:

• 56 kb/sec - modem
• 768 - 3000 kb/sec - DSL (Paul measures 740 kb/secs from home DSL -- ca. 100kB / sec)
• 1,000,000 kbit/sec - ethernet-based intranet
  

Access speed to someone else's web page is controlled not only by the speed of your computer's modem or network connection, but the rest of the internet in between.

Attention spans

Useability studies indicate that:

• delays of less than 0.1 second are not even noticed
• delays of more than about 1 second slow people's reading, and
• after about 10 seconds people start to look for something else to do.

You have a few seconds to grab the attention of the least-committed visitors to your site, and this is enough time to show ca. 100 kB.

Slow connection speed

Those with slow connections include:

• those using a modem
• Folks located far from the high-speed Internet backbones (certainly in less developed countries)
• Folks browsing the web via their cell-phones or cell-phone modems

...In other words, some of us all the time, all of us some of the time.

Designing for slow connections

Strategies for designing for those with a slow Internet connection include:

• Specify explicit HEIGHTs and WIDTHs for every image (much easier with Dreamweaver),
• Spend more time reducing graphics' size (jpeg compression level, or reduce color depth of GIF images, e.g. using Fireworks or Photoshop's "Save for Web") compared to other parts of your pages.
• Repeated use of the same graphics: take advantage of web browser caches. Link to the same logo file from every page, instead of identical-looking files in different locations.

• Provide a summary or thumbnail of high-bandwidth (e.g. video) items to let people decide if it's worth their time.
• "Reassure" your audience by having part of the page appear, even if some (graphics) may be longer in appearing.

Consistency

"A uniform format for organizing and presenting your information allows users to apply their past experience with your site to future searches and explorations, and allows users to predict how an unfamiliar section of your Web site will be organized."

Yale C/AIMM


Master page layout-grid, formatting, organization

• every page--title, author, rev date, home page link, home url on major pages

Some approaches in use at Goshen College:

• Publishing design guidelines and templates, (good for small orgs),
• CSS Stylesheets.
• Pulling every page from a database, and displaying it through one template. E.g. the GC event calendar
• Content Management Systems (CMS) automate navigation, and centrally enforce a common look and feel: Grants, Science & Religion, News & Events.

Location and orientation

Even pre-web books use cues to let you locate yourself.

These become more important when a page is taken out of context (for example, photocopied).

Beamed in...

Visitors might arrive in the middle of your site, never having seen your home page when they

• follow a link on someone else's site,
• click a search engine summary.

This GC SST update (Nicaragua), and a page on navigation from Nielsen's "Use-it" website both use a "breadcrumb trail" at the top of the page.

This page within the Washington Post highlights the current page location in their navigation bar.

Lynch and Horton resources

Site design themes
Training, Teaching, Continuing Education, Reference, Entertainment, News, E-commerce
p 47-53
Home page strategies
menu, news, path-based, splash screen, hybrid/combination Elements to include in a site menus/subsites resource lists/other related sites what's new search contact info maps, parking FAQ customer service error pages site guides table of contents/site indexes site map p 55-75

Photo credit: newspaper machine.