Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Building a WebsiteApril 1, 2009

Harvard UniversityDivision of Continuing Education

Extension School

Course Website: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] staff email: [email protected]

Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

1 of 76 4/1/2009 9:12 AM

Building a Website

Nine Pillars of Successful Web Teams by JesseJames Garrett

User Research1.Site Strategy2.Technology Strategy3.Content Strategy4.Abstract Design5.Technology Implementation6.Content Production7.Concrete Design8.Project Management9.


2 of 76 4/1/2009 9:12 AM

Building a Website: Resources

Web Style Guide, 3rd ed. by Lynch and Horton.Book and online.

Visual Design for the Modern Web by Penny McIntire.Available online through Harvard Library - Safari


3 of 76 4/1/2009 9:12 AM

UsabilityJakob Nielsen's useit.com and his Alertbox Column

Usability 101: Introduction to UsabilityTop Ten Mistakes of Web Design

User Interface Engineering (UIE)


4 of 76 4/1/2009 9:12 AM

StrategyAudience and GoalsContentOrganization


5 of 76 4/1/2009 9:12 AM

Goals and Audience(s)

Why and Who

Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


6 of 76 4/1/2009 9:12 AM

Michigan State UniversityWhat audiences can be identified?


7 of 76 4/1/2009 9:12 AM

AudienceWho are they?

demographicscomputer experience and technology profile

What are their goals?their information needstasks/actions they are performing

Know Your Audience

Be clear on who you are building for. Anticipate their needs.User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersFeedback from users - Watch what users do, not what they say.Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.


8 of 76 4/1/2009 9:12 AM

Typical Audiences for an Academic Department

Undergraduate StudentsConcentratorsPotential concentratorsNon-concentrators

Graduate StudentsPotential Graduate StudentsFaculty

CurrentPotential

ResearchersPublic


9 of 76 4/1/2009 9:12 AM

ContentWhat content already exists in other media types (brochures, pamphlets, statements, etc.).

Adapt it for the WebWhat content would be good to develop for the site?

Does it fit purpose of site?Does it suit the audience?Would people find this useful?

Define incremental goals to avoid "scope creep".Initial PhaseAdditional Phases


10 of 76 4/1/2009 9:12 AM

Organization of ContentFrom Information Architecture for the World Wide Web (also available through Harvard Library Safari):

information architecture defined:

The combination of organization, labeling, and navigation schemes within an information system.1.The structural design of an information space to facilitate task completion and intuitive access to content.2.The art and science of structuring and classifying web sites and intranets to help people find andmanage information.

3.

An emerging discipline and community of practice focused on bringing principles of design andarchitecture to the digital landscape.

4.

Organize, Label, Navigate

Organize and CategorizeLabelNavigate


11 of 76 4/1/2009 9:12 AM

Organize and Label

Organize

Sticky-notes, index cards, whiteboardPlan for future growth

Label

Know your audienceTest your labels (ask your audience)

Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?


12 of 76 4/1/2009 9:12 AM

Categories and Labels from News SitesCNN

Fox News

ABC News MSNBC CBS NPR BBC


13 of 76 4/1/2009 9:12 AM

Law of the Internet User Experience

Jakob's Law of the Internet User Experience:

Users spend most of their time onother sites.


14 of 76 4/1/2009 9:12 AM

OrganizationHierarchical

Sequential

Webs


15 of 76 4/1/2009 9:12 AM

Hierarchical

Library of Congress Classification

"Q" - Science"QC" - Physics


16 of 76 4/1/2009 9:12 AM

Open Directory Project


17 of 76 4/1/2009 9:12 AM

Yahoo! Categories


18 of 76 4/1/2009 9:12 AM


19 of 76 4/1/2009 9:12 AM

Taxonomy and FolksonomyTaxonomy

The science, laws, or principles of classification; systematics.Division into ordered groups or categories.

Folksonomy"Bottom-up" classification system that emerges from social tagging.A user-generated taxonomy.

CSCI E-12 tag cloud in Delicious:

Taxonomy in Amazon (for "Web Design in a Nutshell"):

Folksonomy in Amazon


20 of 76 4/1/2009 9:12 AM

Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey


21 of 76 4/1/2009 9:12 AM

Too deep or too shallow?

Deep Shallow


22 of 76 4/1/2009 9:12 AM

Sequential

When order is important or part of presentation.

Useful when "workflow" is important in web applications.


23 of 76 4/1/2009 9:12 AM

WebsWikipedia.com


24 of 76 4/1/2009 9:12 AM

Site ArchitectureTopicsAudienceTask-OrientedSearchInternal Organization


25 of 76 4/1/2009 9:12 AM

Michigan State


26 of 76 4/1/2009 9:12 AM

IBM


27 of 76 4/1/2009 9:12 AM

Hewlett Packard


28 of 76 4/1/2009 9:12 AM

Harvard Extension School


29 of 76 4/1/2009 9:12 AM

Site ArchitectureCritical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites


30 of 76 4/1/2009 9:12 AM

Navigation SystemsWhere am I?Where can I go?

What is close by?What is further away?

Where have I been?


31 of 76 4/1/2009 9:12 AM

Main Sections Current Page and Section More within Current Section

Harvard College


32 of 76 4/1/2009 9:12 AM

Global NavigationAppears on every inner page.

Quicklinks


33 of 76 4/1/2009 9:12 AM

Breadcrumb Navigation"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I havestrewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Breadcrumb Navigation Increasingly Useful, Jakob Nielsen's Alertbox, April 10, 2007.

DMOZ

Harvard Summer School

Construction Projects at FAS, Harvard University


34 of 76 4/1/2009 9:12 AM

Clamshell navigation

O'Reilly Safari Harvard College


35 of 76 4/1/2009 9:12 AM

Creating Links

Build confidence by making your links predictable and differentiable.

Pay attention to the scent of the site's links.

Links within navigation and content must be:

PredictableAm I getting 'closer' to my goal?DifferentiableWhat is the difference between clicking here or clicking there?

When creating links:

Be descriptiveUse "title" attribute to elaborateLink several words or a phrase, not just one or two words

Don't lie

Your links should have scent, and on a related note, your site should suck.


36 of 76 4/1/2009 9:12 AM

Use "title" attributeTitle attribute can add information so that the link is more predictable and able to be differentiated from others.

Example 9.1Example 9.1 Source:

view plain print ?

<p><a href="http://www.president.harvard.edu/speeches/faust/070917_morningprayers.html" title="Text of talk given by President Drew Gilpin Faust at Morning P

1.

President Drew Gilpin Faust spoke</a> at <a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" title="Morning Prayers at The Memorial Church of Harvard University" shape

2.

prayers</a> on September 17, 2007.</p> 3.

Example 9.1 Rendered:

President Drew Gilpin Faust spoke at morning prayers on September 17, 2007.


37 of 76 4/1/2009 9:12 AM

Deep LinkingLink directly to content within a site.Support deep linking to your site.

URLs that do not change

Alertbox: Deep Linking is Good Linking

Deep linking:

Register for Harvard Summer School so you can take CSCI S-1, "Great Ideas in Computer Science with Java".

<p> 1. <a href="http://www.summer.harvard.edu/2009/register/default.jsp"> 2. Register for Harvard Summer School</a> so you can take 3. <a href="http://www.summer.harvard.edu/2009/courses/31441.jsp"> 4. CSCI S-1, "Great Ideas in Computer Science with Java" 5. </a>. 6.</p> 7.

Not deep linking:

<p> 1. <a href="http://www.summer.harvard.edu/"> 2. Register for Harvard Summer School 3. </a> so you can take 4. <a href="http://www.summer.harvard.edu/2009/courses/"> 5. CSCI S-1, "Great Ideas in Computer Science with Java" 6. </a>. 7.</p> 8.


38 of 76 4/1/2009 9:12 AM

Example from Logan Airport (BOS)Example from Boston's Logan Airport site:


39 of 76 4/1/2009 9:12 AM

Example from Mass RMVTo renew your registration, visit http://www.mass.gov/rmv


40 of 76 4/1/2009 9:12 AM

Losing the Scent


41 of 76 4/1/2009 9:12 AM


42 of 76 4/1/2009 9:12 AM

Please don't "Click Here"Example from Boston's Logan Airport site:

Sometimes you can "Click Here" to Elicit an Action


43 of 76 4/1/2009 9:12 AM

Every Page NeedsTitle that "stands on its own"Creator (person or institution)Creation or Revision or Reviewed dateLink to home pagePossibly

URL of the pageLink to Privacy Statement, Terms of UseCopyright Statement


44 of 76 4/1/2009 9:12 AM

Importance of a Good TitleBrowser

BookmarksHistoryWindow Title

Search Engine results

Bookmarks

Window Title

History


45 of 76 4/1/2009 9:12 AM


46 of 76 4/1/2009 9:12 AM

Search Enginestitlemeta descriptionmeta keywords

<head> 1. <title>Harvard College Admissions Office</title> 2. <meta name="keywords" content="harvard admissions, 3. harvard college admissions, harvard admissions office, 4. harvard college admissions office, 5. harvard undergraduate admissions, 6. harvard undergrad admissions, 7. harvard undergraduate admissions office, 8. visiting harvard, visiting harvard university, 9. harvard university admissions, 10. harvard university undergraduate admissions, 11. harvard college, travel to harvard" /> 12. <meta name="description" content="The main website for the 13. Harvard College Admissions Office which oversees 14. undergraduate admissions for Harvard University." /> 15.</head> 16.


47 of 76 4/1/2009 9:12 AM

Visual Design

LogoTitleNavigationContent


48 of 76 4/1/2009 9:12 AM

Creating Content

People scan Web content. Content designed for print publications will need to be made Web-friendly:

Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly CSS or print-friendly versions for certain documents


49 of 76 4/1/2009 9:12 AM

Technology Constraintsmonitorbrowserinternet connection speedplugins


50 of 76 4/1/2009 9:12 AM

Design "Above the Fold"Check your pages for several window sizes:

800 × 6001024 × 7681280 × 1024


51 of 76 4/1/2009 9:12 AM

Below the FoldAbove the fold:

Below the fold:


52 of 76 4/1/2009 9:12 AM

Page Design: Fixed or Variable Width?Printing: 560 pixels for fixed widthReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.

CNN - fixed width

W3C - flexible width


53 of 76 4/1/2009 9:12 AM

Page WeightTake advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.

Decide on per page kilobyte budget which reflects your audience.


54 of 76 4/1/2009 9:12 AM

Download TimesA web page has a "page weight" (XHTML + CSS + images + JS + Flash + ...) of 184kb. How long does thistake to download?

184 kb = 184kb × 1024 bytes/kb × 8 bits/byte = 1,507,328 bits For a 56K modem: 1,507,328 bits / 56,000 bits/s = 26.9 s

HTTP Requests. A look at the HTTP requests needed to render www.extension.harvard.edu

Download Time Calculator


55 of 76 4/1/2009 9:12 AM

Graph of download times:


56 of 76 4/1/2009 9:12 AM

URLs as UIFile structure should resemble site organization.For some users, your URL can also function as a user-interface. (Alertbox: URL as UI)

http://www.adobe.com/software/dreamweaver/http://www.adobe.com/software/fireworks/http://www.adobe.com/software/flash/

Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed.Often "advertised" or "published" URLs will be short and easy to remember. These URLs can beredirected to the true resource via Apache Redirect or Rewrite directivesOr use an URL shortener like bit.ly or TinyURL.com


57 of 76 4/1/2009 9:12 AM

Homepage is often a Different Beast

Boeing

Harvard College


58 of 76 4/1/2009 9:12 AM


59 of 76 4/1/2009 9:12 AM

Reassuring Users with "Inukshuk" ContentFrom User Interface Engineering: Reassuring Users with Inukshuk Content

Carleton

Harvard College


60 of 76 4/1/2009 9:12 AM

Examples of Website EvolutionThe Internet Archive Wayback Machine

Examples

Southwest AirlinesThe BBCCommonwealth of MassachusettsBoston.comUniversity of MichiganInternal Revenue ServiceThe White House


61 of 76 4/1/2009 9:12 AM

Wrap-up of JavaScript and ObjectsMenusObjects

FlashAppletsSilverlight


62 of 76 4/1/2009 9:12 AM

Dropdown MenusHarvardScience: Science and Engineering at Harvard University

Amazon.com

"Mega" Dropdown Menus

Jakob Nielsen's Alertbox, March 23, 2009: Mega Drop-Down Navigation Menus Work Well


63 of 76 4/1/2009 9:12 AM

The White House

Food Network


64 of 76 4/1/2009 9:12 AM

Dropdown Menus

The basics are:

Make the first list "inline"Hide the secondary listsUse the CSS ":hover" pseudo-class to change secondary list display property


view plain print ?

<ul id="dropdown1" > 1. <li><a href="#" shape="rect" >AL East</a> 2. <ul> 3. <li><a href="#" shape="rect" >Baltimore</a></li> 4. <li><a href="#" shape="rect" >Boston</a></li> 5. <li><a href="#" shape="rect" >New York</a></li> 6. <li><a href="#" shape="rect" >Toronto</a></li> 7. <li><a href="#" shape="rect" >Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect" >AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect" >Chicago</a></li> 12. <li><a href="#" shape="rect" >Cleveland</a></li> 13. <li><a href="#" shape="rect" >Detroit</a></li> 14. <li><a href="#" shape="rect" >Kansas City</a></li> 15. <li><a href="#" shape="rect" >Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect" >AL West</a> 18. <ul> 19. <li><a href="#" shape="rect" >Los Angeles</a></li> 20. <li><a href="#" shape="rect" >Oakland</a></li> 21. <li><a href="#" shape="rect" >Texas</a></li> 22. <li><a href="#" shape="rect" >Seattle</a></li> 23. </ul> </li> 24.</ul> 25.


65 of 76 4/1/2009 9:12 AM

In style element (<style type="text/css">) within head element:

view plain print ?

ul { 1. padding: 0; 2. margin: 0; 3. list-style: none; 4. } 5.li { 6. float: left; 7. position: relative; 8. width: 10em; 9. } 10.li ul { 11. display: none; 12. position: absolute; 13. top: 1em; 14. left: 0; 15. } 16.li:hover ul { display: block; } 17. 18.

Example 9.2 Demonstrated


66 of 76 4/1/2009 9:12 AM

Dropdown Menus


view plain print ?

<ul id="dropdown2" > 1. <li><a href="#" shape="rect" >AL East</a> 2. <ul> 3. <li><a href="#" shape="rect" >Baltimore</a></li> 4. <li><a href="#" shape="rect" >Boston</a></li> 5. <li><a href="#" shape="rect" >New York</a></li> 6. <li><a href="#" shape="rect" >Toronto</a></li> 7. <li><a href="#" shape="rect" >Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect" >AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect" >Chicago</a></li> 12. <li><a href="#" shape="rect" >Cleveland</a></li> 13. <li><a href="#" shape="rect" >Detroit</a></li> 14. <li><a href="#" shape="rect" >Kansas City</a></li> 15. <li><a href="#" shape="rect" >Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect" >AL West</a> 18. <ul> 19. <li><a href="#" shape="rect" >Los Angeles</a></li> 20. <li><a href="#" shape="rect" >Oakland</a></li> 21. <li><a href="#" shape="rect" >Texas</a></li> 22. <li><a href="#" shape="rect" >Seattle</a></li> 23. </ul> </li> 24.</ul> 25.

In style element (<style type="text/css">) within head element:


67 of 76 4/1/2009 9:12 AM

view plain print ?

ul { 1. padding: 0; 2. margin: 0; 3. list-style: none; 4. } 5.li { 6. float: left; 7. position: relative; 8. width: 10em; 9. } 10.li ul { 11. display: none; 12. position: absolute; 13. top: 1.7em; 14. left: 0; 15. } 16. li > ul { 17. top: auto; 18. left: auto; 19. } 20.li:hover ul { display: block; } 21.#dropdown2 li { 22. border: thin solid navy; 23. font-family: calibri,verdana,tahoma,helvetica,sans-serif; 24. background-color: #ccf; 25. } 26.#dropdown2 ul li { background-color: #eef; } 27.#dropdown2 a {display:block; padding: 0.25em;} 28.#dropdown2 a:link, 29.#dropdown2 a:visited, 30.#dropdown2 a:hover, 31.#dropdown2 a:active 32. { text-decoration: none; font-weight: bold; } 33.#dropdown2 a:hover { background-color: navy; color: #ccf; } 34. 35.

Example 9.3 Demonstrated


68 of 76 4/1/2009 9:12 AM

Some details for Opera and IE6For Opera, we need a few additional styles.

For IE6, we need JavaScript since the CSS "hover" pseudo-class is not supported for all elements.

See: A List Apart: Suckerfish Dropdowns


69 of 76 4/1/2009 9:12 AM

Dropdown menus inspired by SuckerfishSon of Suckerfish Dropdowns

Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript),have greater compatibility (they now work in Opera and Safari without a hack in sight) and can havemultiple-levels.

Superfish

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSSdrop-down menu (so it degrades gracefully without JavaScript) and adds the followingmuch-sought-after enhancements.


70 of 76 4/1/2009 9:12 AM

Adobe SWF and Flash and FlexFlash Player is the browser pluginSWF is file formatAuthoring tools: Flash and FlexActionScript is the proprietary scripting language (based on JavaScript)

Video

Charts

Webkinz

MLB Gameday

ESPN Gamecast

Flash Earth


71 of 76 4/1/2009 9:12 AM


72 of 76 4/1/2009 9:12 AM

Example Flash with XML/SWF ChartsXML/SWF ChartsCharts SWF is providedYou provide the data in an XML format

Files involved:

chart-object.htmlcharts.swfdata.xml

A closer look

Markup (note use of "object" with nested "embed"):

view plain print ?

<body> 1. <p>A Chart</p> 2. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 3. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 4. width="400" height="250" id="charts" align=""> 5. <param name="movie" value= 6. "charts.swf?library_path=charts_library&xml_source=data.xml" /> 7. 8. <param name="quality" value="high" /> 9. <param name="bgcolor" value="#666666" /> 10. <embed src= 11. "charts.swf?library_path=charts_library&xml_source=data.xml" 12. quality="high" bgcolor="#666666" width="400" height="250" name= 13. "charts" align="" swliveconnect="true" 14. type="application/x-shockwave-flash" pluginspage= 15. "http://www.macromedia.com/go/getflashplayer" /> 16. </object> 17.</body> 18.

Screenshot of the chart itself:

XML Data (data.xml):


73 of 76 4/1/2009 9:12 AM

view plain print ?

<chart> 1. <chart_data> 2. <row> 3. <null/> 4. <string>2004</string> 5. <string>2005</string> 6. <string>2006</string> 7. <string>2007</string> 8. </row> 9. <row> 10. <string>Region A</string> 11. <number>5</number> 12. <number>10</number> 13. <number>30</number> 14. <number>63</number> 15. </row> 16. <row> 17. <string>Region B</string> 18. <number>100</number> 19. <number>20</number> 20. <number>65</number> 21. <number>55</number> 22. </row> 23. <row> 24. <string>Region C</string> 25. <number>56</number> 26. <number>21</number> 27. <number>5</number> 28. <number>90</number> 29. </row> 30. </chart_data> 31.</chart> 32.


74 of 76 4/1/2009 9:12 AM

Use "swfobject.js" to include SWF filesswfobject SWFObject is an easy-to-use and standards-friendly method to embed Flash content, whichutilizes one small JavaScript fileExample of Chart using SWFObject

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 2. <head> 3. <title>SWFObject v2.0</title> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5. <script type="text/javascript" src="swfobject.js"></script> 6. </head> 7. <body> 8. <script type="text/javascript"> 9. flashvars = { library_path: 'charts_library', xml_source: 'data.xml' } 10. swfobject.embedSWF("charts.swf", "myContent", "600", "400", "9.0.0",'expressInstall.swf',flas11. </script> 12. 13. <div id="myContent"> 14. <p>Alternative content</p> 15. </div> 16. </body> 17.</html> 18.

Flash Embedding Cage Match, from A List ApartSWFObject project


75 of 76 4/1/2009 9:12 AM

Java AppletsUC Irvine Chemistry Educational AppletsChemical Kinetics Simulation

Math, Physics, and Engineering AppletsRipple Tank

Table of Contents | All Slides | Link List | Examples | CSCI E-12


76 of 76 4/1/2009 9:12 AM

Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.

Documents