Howard Redfearn

Stormwater Manager, City of Mansfield

IntroductionIntroduction

Howard RedfearnHoward Redfearn Stormwater Manager – City of MansfieldStormwater Manager – City of Mansfield Senior Planner, Storm Water – Denton CountySenior Planner, Storm Water – Denton County GIS Research Assistant – University of North GIS Research Assistant – University of North

TexasTexas• created 2 web based mapping sitescreated 2 web based mapping sites

The GoalsThe Goals

Understand general concepts for effective site Understand general concepts for effective site designdesign

Basic introduction to vocabularyBasic introduction to vocabulary Encourage creativity and enthusiasm about Encourage creativity and enthusiasm about

creating a great websitecreating a great website Understand how viewers use the internetUnderstand how viewers use the internet

The BasicsThe Basics

Webpage vs. WebsiteWebpage vs. Website What, exactly, is a web page/site?What, exactly, is a web page/site? Different extensions: .html/htm, .php, .jsp, .aspDifferent extensions: .html/htm, .php, .jsp, .asp What can a website do?What can a website do? Why use a website?Why use a website?

The BeginningThe Beginning

Do you need a website? What will you use it for?Do you need a website? What will you use it for? Public Outreach; Internal Training; Public Participation; Data Public Outreach; Internal Training; Public Participation; Data

Entry; General and Pointed Education; Document DeliveryEntry; General and Pointed Education; Document Delivery

Identify objectivesIdentify objectives Visit other sitesVisit other sites Check with your organization about format Check with your organization about format

Many communities have a set format and layout for web Many communities have a set format and layout for web pages, it is usually best to develop your site within these pages, it is usually best to develop your site within these requirements requirements

Sketch initial site diagram – brainstormSketch initial site diagram – brainstorm Include others if possibleInclude others if possible

Gather content examples Gather content examples

Site Design – The Site Design – The ArchitectureArchitecture

The backbone that will determine how pages are The backbone that will determine how pages are relatedrelated

Separate information into logical “chunks”Separate information into logical “chunks” Public Education, Construction Activity, Public InvolvementPublic Education, Construction Activity, Public Involvement

Chunk hierarchyChunk hierarchy Which chunk is the most important for your communityWhich chunk is the most important for your community Most important content needs to be at the top of every pageMost important content needs to be at the top of every page

Content relationshipsContent relationships Web site function – shallow vs. deepWeb site function – shallow vs. deep

A few pages that are very long, or several pages that are A few pages that are very long, or several pages that are shortershorter

Site Design – The Site Design – The HomepageHomepage

Avoid pop-ups as much as possible – notify users Avoid pop-ups as much as possible – notify users when there are inevitablewhen there are inevitable

Home page & subsection homepagesHome page & subsection homepages Different layout, or the same as internal sites?Different layout, or the same as internal sites? Can include font type, color, graphic locations, Can include font type, color, graphic locations,

etc…etc… To flash, or not to flash?To flash, or not to flash? Page layout grid – where things go throughout the Page layout grid – where things go throughout the

sitesite

Site Design – The ElementsSite Design – The Elements

Use menus and subsites to keep clutter off Use menus and subsites to keep clutter off homepagehomepage

Other related sites / external linksOther related sites / external links Site guides – provide information about how large Site guides – provide information about how large

the site isthe site is Site maps – graphical or textual representation of site Site maps – graphical or textual representation of site

connectivity (index or table of contents)connectivity (index or table of contents)

What’s new? and Calendar of events – page What’s new? and Calendar of events – page should contain last updated dateshould contain last updated date

Site Design –More ElementsSite Design –More Elements

Option to search the siteOption to search the site Contact and feedback info are critical – include Contact and feedback info are critical – include

email, phone, fax and addressemail, phone, fax and address Get the FAQsGet the FAQs Lessons from intranet designLessons from intranet design

Clear, consistent design throughout the siteClear, consistent design throughout the site Predictable behavior of site elementsPredictable behavior of site elements Design for the userDesign for the user

Page Layout – Graphic Page Layout – Graphic DesignDesign

Layout should lead readers to contentLayout should lead readers to content Remember user expectations:Remember user expectations:

Internal links on the leftInternal links on the left External links on the rightExternal links on the right Anything flashing is an advertisementAnything flashing is an advertisement Viewed links change colors, anything underlined is a linkViewed links change colors, anything underlined is a link

Use spaces between paragraphsUse spaces between paragraphs Do not be afraid of white spaceDo not be afraid of white space Logical, consistent and organizedLogical, consistent and organized Consistent, but differentiated sectionsConsistent, but differentiated sections

Page Layout – ContentPage Layout – Content

Text lines about 4 inches wideText lines about 4 inches wide Limit paragraphs to one main idea and about 6-8 Limit paragraphs to one main idea and about 6-8

lineslines Avoid horizontal scrolling at all costsAvoid horizontal scrolling at all costs

Most users have between 17”-19” screens and screen resolution Most users have between 17”-19” screens and screen resolution of 800x600 pixelsof 800x600 pixels

Each page needs to stand on its ownEach page needs to stand on its own Use Use descriptive link text descriptive link text – not – not click hereclick here

Notify users if links are off-siteNotify users if links are off-site

When possible, use bulleted listsWhen possible, use bulleted lists Lists should still be short and succinct, around 5-6 itemsLists should still be short and succinct, around 5-6 items

Page Layout – More ContentPage Layout – More Content

Front load content – the main idea of the Front load content – the main idea of the paragraph, or page, should be stated firstparagraph, or page, should be stated first

Even with a web page there is a before and after “the fold”Even with a web page there is a before and after “the fold” Before: 410 pixels from the top, After: everything below Before: 410 pixels from the top, After: everything below

Short, succinct and to the pointShort, succinct and to the point Clear, simple languageClear, simple language

• Can you define promulgated?Can you define promulgated?

Use descriptive sub-headings between ideasUse descriptive sub-headings between ideas Short title that allows scanners to quickly get an idea of what Short title that allows scanners to quickly get an idea of what

is in the paragraph is in the paragraph

Page Layout – Still more Page Layout – Still more contentcontent

Color, contrast and fontsColor, contrast and fonts Font types, colors, and sizes used in concert with graphic Font types, colors, and sizes used in concert with graphic

design, white space and consistency to provide contrast pulling design, white space and consistency to provide contrast pulling the reader into contentthe reader into content

Cascading Style Sheets (css) vs. HTML TagsCascading Style Sheets (css) vs. HTML Tags Cross-browser compatibility issuesCross-browser compatibility issues

““Framing” the problemFraming” the problem Frames have some drawbacks, particularly printing issuesFrames have some drawbacks, particularly printing issues

Page Layout - SpecificsPage Layout - Specifics

Left align textLeft align text BoldBold important words important words White space can be used to add interest and White space can be used to add interest and

increase scanningincrease scanning Paragraph indentation and alternativesParagraph indentation and alternatives

Typeface – also known as fontTypeface – also known as font 5 useful, cross-platform typefaces – Times New Roman, 5 useful, cross-platform typefaces – Times New Roman,

VerdanaVerdana, , GeorgiaGeorgia, , ArialArial, , TrebuchetTrebuchet Vary weight within single typeface for emphasis and interestVary weight within single typeface for emphasis and interest Avoid using unusual or proprietary typefacesAvoid using unusual or proprietary typefaces

Page Specifics – More Page Specifics – More SpecificsSpecifics

Type size – fixed vs. flexibleType size – fixed vs. flexible Using “em” in style sheets to set relational font size for Using “em” in style sheets to set relational font size for

flexibilityflexibility

Text color should sufficiently contrast with Text color should sufficiently contrast with background – but keep vision impaired users in background – but keep vision impaired users in mindmind

All caps vs. sentence caseAll caps vs. sentence case All caps can increase read time and decrease interestAll caps can increase read time and decrease interest Initial caps in headlines and titles can do the sameInitial caps in headlines and titles can do the same People read information on the web based on form and shape People read information on the web based on form and shape

then lettersthen letters

Page Specifics –EmphasisPage Specifics –Emphasis

Creating emphasisCreating emphasis Headlines and subsection headings one of:Headlines and subsection headings one of:

• Larger Larger / / BoldBold ; ALL CAPS for short headings ; ALL CAPS for short headings ItalicsItalics creates shape contrast from other text – but has creates shape contrast from other text – but has

academic usage implicationsacademic usage implications UnderlinedUnderlined – generally reserved for links – generally reserved for links Colored text – do not use blue, if you use a different colorColored text – do not use blue, if you use a different color

• Users can specify default font colorsUsers can specify default font colors

• Works well for differentiating headings from body textWorks well for differentiating headings from body text Capital Letters – use very sparingly, one of the most common Capital Letters – use very sparingly, one of the most common

and least effective means for creating emphasisand least effective means for creating emphasis Spacing and indentation – one of the most effective ways of Spacing and indentation – one of the most effective ways of

creating interest and emphasiscreating interest and emphasis

Navigation – LinksNavigation – Links

Majority of links should be within your siteMajority of links should be within your site Use of outside links should reinforce your Use of outside links should reinforce your

message and be clearly marked so users know they message and be clearly marked so users know they are leaving your siteare leaving your site

If the link will open a new window, let the user If the link will open a new window, let the user knowknow

Place minor, parenthetical links on the bottom of Place minor, parenthetical links on the bottom of the pagethe page

Links should maintain context (no click heres)Links should maintain context (no click heres)

Using ImagesUsing Images

Web readers often ignore text in imagesWeb readers often ignore text in images Consider load time of imageConsider load time of image Select the appropriate format:Select the appropriate format:

GIF – Graphic Interchange Format – limited to 8-bit 256 colorsGIF – Graphic Interchange Format – limited to 8-bit 256 colors

• simple compression scheme – best for images with large simple compression scheme – best for images with large areas of homogenous colorareas of homogenous color

JPEG – Joint Photographic Experts Group – 24-bit full colorJPEG – Joint Photographic Experts Group – 24-bit full color

• complicated mathematical compression – photos and complicated mathematical compression – photos and artwork with smooth color and tonal transitions and few artwork with smooth color and tonal transitions and few harsh contrasts and sharp edges harsh contrasts and sharp edges

PNG – Portable Network Graphics –developed by graphics PNG – Portable Network Graphics –developed by graphics designers as alternative to GIFdesigners as alternative to GIF

• Designed specifically for use on web pagesDesigned specifically for use on web pages

• Transparency not supported in IE6 or belowTransparency not supported in IE6 or below

Using Images – Part IIUsing Images – Part II

Be sure to save the original files, intermediate files Be sure to save the original files, intermediate files and the final filesand the final files

Smaller, less than 200x200 pixel, images should Smaller, less than 200x200 pixel, images should be GIF or PNGbe GIF or PNG

Screen vs. Print – don’t be shocked when you Screen vs. Print – don’t be shocked when you print images designed for the web and they are print images designed for the web and they are uglyugly

Wherever possible, use background color to add Wherever possible, use background color to add color and contrast to the site, instead of imagescolor and contrast to the site, instead of images

Multimedia – Double Edged Multimedia – Double Edged SwordSword

Can be effective at delivering the messageCan be effective at delivering the message Bandwidth UsageBandwidth Usage Non-standard browser plug-in requirementsNon-standard browser plug-in requirements Users have no control over animated GIFsUsers have no control over animated GIFs Some users find them highly annoyingSome users find them highly annoying

Best usage is to provide links to multimedia Best usage is to provide links to multimedia sources on your site with adequate descriptions for sources on your site with adequate descriptions for interested usersinterested users

ReferencesReferences

http://www.webstyleguide.com/index.htmlhttp://www.webstyleguide.com/index.html - Web Style - Web Style Guide 2Guide 2ndnd ed. hosted by Yale University, written by Patrick ed. hosted by Yale University, written by Patrick Lynch and Sarah HortonLynch and Sarah Horton

http://www.useit.com/alertbox/designmistakes.htmlhttp://www.useit.com/alertbox/designmistakes.html - Top - Top Ten Web Design Mistakes of 2005 -Jakob Nielsen’s Ten Web Design Mistakes of 2005 -Jakob Nielsen’s Alertbox - subjective editorials about irritating web design Alertbox - subjective editorials about irritating web design practices – other useful by Dr. Nielsen can be found at: practices – other useful by Dr. Nielsen can be found at: http://www.useit.com/jakob/http://www.useit.com/jakob/

http://psychology.wichita.edu/optimalweb/default.htmhttp://psychology.wichita.edu/optimalweb/default.htm - - optimal web design - Michael L Bernard – Software optimal web design - Michael L Bernard – Software Usability Laboratory Wichita State UniversityUsability Laboratory Wichita State University

http://www.webcredible.co.uk/user-friendly-resources/web-http://www.webcredible.co.uk/user-friendly-resources/web-usability/usability/ - Web usability articles & resources – several article - Web usability articles & resources – several article regarding usability and effective site design tipsregarding usability and effective site design tips