Download Document

Howard Redfearn
Stormwater Manager, City of Mansfield
Introduction

Howard Redfearn



Stormwater Manager – City of Mansfield
Senior Planner, Storm Water – Denton County
GIS Research Assistant – University of North Texas
• created 2 web based mapping sites
The Goals
Understand general concepts for effective site
design
 Basic introduction to vocabulary
 Encourage creativity and enthusiasm about
creating a great website
 Understand how viewers use the internet

The Basics
Webpage vs. Website
 What, exactly, is a web page/site?
 Different extensions: .html/htm, .php, .jsp, .asp
 What can a website do?
 Why use a website?

The Beginning

Do you need a website? What will you use it for?

Public Outreach; Internal Training; Public Participation; Data
Entry; General and Pointed Education; Document Delivery
Identify objectives
 Visit other sites
 Check with your organization about format



Sketch initial site diagram – brainstorm


Many communities have a set format and layout for web pages,
it is usually best to develop your site within these requirements
Include others if possible
Gather content examples
Site Design – The Architecture
The backbone that will determine how pages are
related
 Separate information into logical “chunks”



Public Education, Construction Activity, Public Involvement
Chunk hierarchy


Which chunk is the most important for your community
Most important content needs to be at the top of every page
Content relationships
 Web site function – shallow vs. deep


A few pages that are very long, or several pages that are shorter
Site Design – The Homepage
Avoid pop-ups as much as possible – notify users
when there are inevitable
 Home page & subsection homepages
 Different layout, or the same as internal sites?
 Can include font type, color, graphic locations,
etc…
 To flash, or not to flash?
 Page layout grid – where things go throughout the
site

Site Design – The Elements
Use menus and subsites to keep clutter off
homepage
 Other related sites / external links
 Site guides – provide information about how large
the site is



Site maps – graphical or textual representation of site
connectivity (index or table of contents)
What’s new? and Calendar of events – page
should contain last updated date
Site Design –More Elements
Option to search the site
 Contact and feedback info are critical – include
email, phone, fax and address
 Get the FAQs
 Lessons from intranet design




Clear, consistent design throughout the site
Predictable behavior of site elements
Design for the user
Page Layout – Graphic Design
Layout should lead readers to content
 Remember user expectations:





Internal links on the left
External links on the right
Anything flashing is an advertisement
Viewed links change colors, anything underlined is a link
Use spaces between paragraphs
 Do not be afraid of white space
 Logical, consistent and organized
 Consistent, but differentiated sections

Page Layout – Content
Text lines about 4 inches wide
 Limit paragraphs to one main idea and about 6-8
lines
 Avoid horizontal scrolling at all costs


Most users have between 17”-19” screens and screen resolution
of 800x600 pixels
Each page needs to stand on its own
 Use descriptive link text – not click here



Notify users if links are off-site
When possible, use bulleted lists

Lists should still be short and succinct, around 5-6 items
Page Layout – More Content

Front load content – the main idea of the
paragraph, or page, should be stated first


Even with a web page there is a before and after “the fold”
Before: 410 pixels from the top, After: everything below
Short, succinct and to the point
 Clear, simple language

• Can you define promulgated?

Use descriptive sub-headings between ideas

Short title that allows scanners to quickly get an idea of what is
in the paragraph
Page Layout – Still more content

Color, contrast and fonts


Cascading Style Sheets (css) vs. HTML Tags


Font types, colors, and sizes used in concert with graphic
design, white space and consistency to provide contrast pulling
the reader into content
Cross-browser compatibility issues
“Framing” the problem

Frames have some drawbacks, particularly printing issues
Page Layout - Specifics
Left align text
 Bold important words
 White space can be used to add interest and
increase scanning



Paragraph indentation and alternatives
Typeface – also known as font



5 useful, cross-platform typefaces – Times New Roman,
Verdana, Georgia, Arial, Trebuchet
Vary weight within single typeface for emphasis and interest
Avoid using unusual or proprietary typefaces
Page Specifics – More Specifics

Type size – fixed vs. flexible

Using “em” in style sheets to set relational font size for
flexibility
Text color should sufficiently contrast with
background – but keep vision impaired users in
mind
 All caps vs. sentence case




All caps can increase read time and decrease interest
Initial caps in headlines and titles can do the same
People read information on the web based on form and shape
then letters
Page Specifics –Emphasis

Creating emphasis

Headlines and subsection headings one of:
• Larger / Bold ; ALL CAPS for short headings





Italics creates shape contrast from other text – but has
academic usage implications
Underlined – generally reserved for links
Colored text – do not use blue, if you use a different color
• Users can specify default font colors
• Works well for differentiating headings from body text
Capital Letters – use very sparingly, one of the most common
and least effective means for creating emphasis
Spacing and indentation – one of the most effective ways of
creating interest and emphasis
Navigation – Links
Majority of links should be within your site
 Use of outside links should reinforce your
message and be clearly marked so users know they
are leaving your site
 If the link will open a new window, let the user
know
 Place minor, parenthetical links on the bottom of
the page
 Links should maintain context (no click heres)

Using Images
Web readers often ignore text in images
 Consider load time of image
 Select the appropriate format:




GIF – Graphic Interchange Format – limited to 8-bit 256 colors
• simple compression scheme – best for images with large
areas of homogenous color
JPEG – Joint Photographic Experts Group – 24-bit full color
• complicated mathematical compression – photos and
artwork with smooth color and tonal transitions and few
harsh contrasts and sharp edges
PNG – Portable Network Graphics –developed by graphics
designers as alternative to GIF
• Designed specifically for use on web pages
• Transparency not supported in IE6 or below
Using Images – Part II
Be sure to save the original files, intermediate files
and the final files
 Smaller, less than 200x200 pixel, images should
be GIF or PNG
 Screen vs. Print – don’t be shocked when you
print images designed for the web and they are
ugly
 Wherever possible, use background color to add
color and contrast to the site, instead of images

Multimedia – Double Edged Sword
Can be effective at delivering the message
 Bandwidth Usage
 Non-standard browser plug-in requirements
 Users have no control over animated GIFs
 Some users find them highly annoying


Best usage is to provide links to multimedia
sources on your site with adequate descriptions for
interested users
References




http://www.webstyleguide.com/index.html - Web Style
Guide 2nd ed. hosted by Yale University, written by Patrick
Lynch and Sarah Horton
http://www.useit.com/alertbox/designmistakes.html - Top
Ten Web Design Mistakes of 2005 -Jakob Nielsen’s
Alertbox - subjective editorials about irritating web design
practices – other useful by Dr. Nielsen can be found at:
http://www.useit.com/jakob/
http://psychology.wichita.edu/optimalweb/default.htm optimal web design - Michael L Bernard – Software
Usability Laboratory Wichita State University
http://www.webcredible.co.uk/user-friendly-resources/webusability/ - Web usability articles & resources – several
article regarding usability and effective site design tips