Transcript 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