Instructor email: Course Web Site: Extension School ... · Lecture Notes Home | ... Menu Food and...

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

March 7, 2010

Harvard UniversityExtension School

Course Web Site: http://cscie12.dce.harvard.edu/

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

CSCI E-12 - March 10, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100310/handout.html

1 of 108 3/10/2010 4:51 PM

Ed's Weenies ‐ Frankly Fabulous!

Graphics and Images

Building a Site

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you have seenthe lecture.


2 of 108 3/10/2010 4:51 PM

Content

Menu

Food and prices and specials

Professional‐quality photographs

Soup menus ‐ change and need to be updated

Consider an "Ed's IBM Special"

(Possible T‐shirt merchandise in spring)

Hours and Location

Recycling

Tie‐in with "Gary's Farmstand"

Special Events at Site and off‐site (and these will tie into community involvement)

Community Involvement

Fun ‐ how do you like your dog? (with local "celebrities")

Books

Online tip jar

Other organizations and groups

Information about Ed Howard and Ed's Weenies

Business Start‐up

Small‐cart for hire

Customer comments

Consider other online presences

Restaurant‐oriented: Yelp, MenuPages, etc.

Social Networking: Facebook, Twitter, etc.

Next steps: sketches and design


3 of 108 3/10/2010 4:51 PM


4 of 108 3/10/2010 4:51 PM

Incorporating images in content

Markup: img element

alt attribute

height and width attributes

Graphics ToolsSee: FAS IT Software Downloads for software available for you to use.

Adobe

Adobe Photoshop

Adobe Fireworks

Corel

CorelDRAW

Painter

Paint Shop Pro

Gimp

Color Depth

RGB color is a 24‐bit system (16 million colors)

8 bits (256 colors) for each channel (red, green, blue).


5 of 108 3/10/2010 4:51 PM

Get an acceptable image in the least number of bytes possible.

Overall Image Dimensions

Format (GIF, JPEG, PNG)

Compression

Colors


6 of 108 3/10/2010 4:51 PM

A web page has a "page weight" (XHTML + CSS + images + JS + Flash + ...) of 184kb. How long does this take 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


7 of 108 3/10/2010 4:51 PM

Graph of download times:


8 of 108 3/10/2010 4:51 PM

Bitmap Graphic

Bitmap Graphic Formats on the Web

JPEG

GIF

PNG

Graphic type in which each pixel that comprises theimage is described.

A 100 x 100 pixel bitmap image must encode informationabout 10,000 pixels.A 200 x 200 pixel bitmap image must encode informationabout 40,000 pixels.

Vector Graphic

Vector Graphic Formats on the Web

SWF (Flash)

SVG

Graphic type in which the image is described by amathematical description.

Amount of information encoded is independent of thescale of image. For example, a circle is described by theequation

x2 + y2 = r2

whether or not the radius is 5 pixels or 1000 pixels


9 of 108 3/10/2010 4:51 PM

Bitmap (PNG) Vector (SVG)

Original image: Original image:

Magnified (16x) Magnified (16x)


10 of 108 3/10/2010 4:51 PM

GIFGraphics Interchange Format

JPEGJoint Photographic Experts Group

PNGPortable Network Graphic


11 of 108 3/10/2010 4:51 PM

Property GIFGraphics Interchange Format

Color System 8 bit indexed (256 colors)

Compression Lossless Compression (LZW; horizontal repeating units)

Other Features.gif file extension

Transparency

Animation

Typical UsesIllustrations (logos, icons)

Animated banners and icons

Images with small dimension


Photograph250 × 188 px

29.3 kb

Illustration148 × 179 px

1.47 kb


12 of 108 3/10/2010 4:51 PM

Property JPEGJoint Photographic Experts Group

Color System RGB (24 bit; millions of colors)

Compression "Lossy" Compression(compression optimized for gradual color changes)

Other Features.jpg and .jpeg file extensions

No Transparency

No Animation

Typical UsesPhotographs

Property JPEGJoint Photographic Experts Group


16.8 kb


6.12 kb


13 of 108 3/10/2010 4:51 PM

Property PNGPortable Network Graphic

Color System8 bit indexed (256 colors)

RGB (24 bit; millions of colors)

Compression Lossless Compression

Other Features.png file extension

Transparency

Animation through MNG extension

Typical UsesAny

Property PNGPortable Network Graphic


25.8 kb (indexed, 8‐bit) 81.9 kb (RGB, 24‐bit)


1.02 kb (indexed, 8‐bit) 1.89 kb (RGB, 24‐bit)


14 of 108 3/10/2010 4:51 PM


JPEGJoint Photographic Experts Group Porta

Color System 8 bit indexed (256 colors) RGB (24 bit; millions of colors)8 bit indexed (256 colors

RGB (24 bit; millions of co

Compression Lossless Compression (LZW; horizontalrepeating units)

"Lossy" Compression(compression optimized for gradualcolor changes)

Lossless Compression

OtherFeatures .gif file extension

Transparency

Animation

.jpg and .jpeg file

extensions

No Transparency

No Animation

.png file extension

Transparency

Animation through MNG

Typical UsesIllustrations (logos, icons)

Animated banners and icons

Images with small dimension

Photographs Any


JPEGJoint Photographic Experts Group

PNGPortable Network Graphic


29.3 kb 16.8 kb 25.8 kb (indexed, 8‐bit)


1.47 kb 6.12 kb 1.02 kb (indexed, 8‐bit)

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.

Illustration image from the original works of David Heitmeyer


15 of 108 3/10/2010 4:51 PM

An 8‐bit indexed image has a palette of up to 256 colors thatthe image can contain. Color information is not stored foreach pixel, but rather just a reference to which color in thepalette.

Palettes

Exact (if 256 or fewer colors)

Adaptive (weighted based upon colors in document)

Web Palette (216 Web Safe Colors)

System

Windows

Macintosh


16 of 108 3/10/2010 4:51 PM

Exact Palette

Image Palette

Adaptive Palette

Image Palette

Web 216 Palette

Image Palette


17 of 108 3/10/2010 4:51 PM


18 of 108 3/10/2010 4:51 PM

Color Shift

Image (16 colors; Color Shift) Zoom

Dither

Image (16 colors; Dither) Zoom


19 of 108 3/10/2010 4:51 PM

Properties Image Palette (adaptive)

8 bit

256 colors

46.3 kb

7 bit

128 colors

36.2 kb

6 bit

64 colors

28.9 kb


20 of 108 3/10/2010 4:51 PM

5 bit

32 colors

21.9 kb

4 bit

16 colors

16.5 kb

3 bit

8 colors

10.9 kb


21 of 108 3/10/2010 4:51 PM

2 bit

4 colors

7.31 kb

1 bit

2 colors

2.84 kb


22 of 108 3/10/2010 4:51 PM

Properties Image Palette (adaptive)

8 bit

256 colors

64.9 kb

7 bit

128 colors

52.3 kb

6 bit

64 colors

43.4 kb


23 of 108 3/10/2010 4:51 PM

5 bit

32 colors

34.7 kb

4 bit

16 colors

26.7 kb

3 bit

8 colors

18.6 kb


24 of 108 3/10/2010 4:51 PM

2 bit

4 colors

14.2 kb

1 bit

2 colors

5.86 kb


25 of 108 3/10/2010 4:51 PM

GIF LZW compression operates on horizontal blocks of the same color. Here are two images that are identical except for a90 degree rotation. The vertical stripe GIF image is nearly twice as large as the horizontal stripe GIF image. The PNG imagesare the same size.

Format HorizontalStripes

VerticalStripes

GIF

471 bytes 911 bytes

PNG

232 bytes 221 bytes


26 of 108 3/10/2010 4:51 PM

A purple shade was created by alternating red and blue pixels.32× magnification:

200×200px Image, Dithered and Solid

Image Format Dithered Grid Solid

GIF

601 bytes 303 bytes

PNG

225 bytes 209 bytes


27 of 108 3/10/2010 4:51 PM

The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0 to 100). The image qualityis inversely related to the amount of compression since the compression algorithm is "lossy".

Properties Image

Quality: 80

34.1 kb

Quality: 70

26.0 kb

Quality: 60

22.4 kb


28 of 108 3/10/2010 4:51 PM

Quality: 50

17.0 kb

Quality: 40

14.3 kb

Quality: 30

6.97 kb


29 of 108 3/10/2010 4:51 PM

Quality: 20

4.80 kb

Quality: 10

3.75 kb

Quality: 1

3.21 kb


30 of 108 3/10/2010 4:51 PM

Typically first appears at boundaries in images. Portions of image can also become "blocky".

Schlieren at boundaries:

Blockyness


31 of 108 3/10/2010 4:51 PM

Aliased Anti‐aliased

Format Aliased Anti‐aliased

GIF 0.79 kb 1.9 kb

PNG(indexed)

0.62 kb 1.7 kb

PNG(24‐bit)

1.12 kb 2.6 kb

JPEG 5.5 kb 4.9 kb

JPEG JPEG Compression artifacts:


32 of 108 3/10/2010 4:51 PM


33 of 108 3/10/2010 4:51 PM

Loading...


34 of 108 3/10/2010 4:51 PM

The Interactive Advertising Bureau (IAB) has established guidelines for sizes of banner ads (interactive marketing units;IMUs)

Interactive Advertising Bureau

Ad Unit Guidelines

Common sizes are: 728x90, 300x250, 180x150, 160x600:


35 of 108 3/10/2010 4:51 PM

With GIF and PNG images, a color in the palette can be designated as "transparent". This lets any background colors orbackground images show through the transparent portions.

Star Image

Background Image(satin.png)

Format Background Color(gray)

Background Imagesatin.png

GIFNo transparency

GIFWhite is transparent

GIFBlue is transparent

PNGNo transparency


36 of 108 3/10/2010 4:51 PM

PNGWhite is transparent

PNGBlue is transparent


37 of 108 3/10/2010 4:51 PM

GIF PNG JPEG

GIF1,511 bytes

PNG; 8 bit1,031 bytes

JPEG (Quality 100)14,660 bytes

PNG; 24 bit1,944 bytes

JPEG (Quality 6)1,530 bytes

Original image from the works of David P. Heitmeyer


38 of 108 3/10/2010 4:51 PM

Image itself. usemap attribute for img

Definition of "hot spots" for image. map element

area element

attributes

shape="circle"

shape="rect"

shape="poly"

coords

Imagemap Example

Image

Mapdefines the coordinates of "hot spots" and URLs

Example 7.1 ‐ Imagemap ‐ View example by itself

view plain print ?

<img src="images/shapes.gif" width="192" height="39" usemap="#shapes" alt="Shapes" style="border: 1. 2.<map id="shapes" name="shapes"> 3. <area shape="circle" coords="106,18,17" href="http://en.wikipedia.org/wiki/Circle" alt="Circle"/>

4.

<area shape="rect" coords="1,4,60,32" href="http://en.wikipedia.org/wiki/Rectangle" alt="Rectangle"/>

5.

<area shape="poly" coords="150,34,190,34,170,0" href="http://en.wikipedia.org/wiki/Triangle" alt="Triangle"/>

6.

</map> 7.

Units are in Pixels, (0,0) is the upper left corner of the image.

Circle: center (106, 18); radius = 17

Rectangle: vertices at (1,4), (60,4), (1,32), (60,32)

Triangle: vertices at (170,0), (150,32), (190,32)

Markup Display


39 of 108 3/10/2010 4:51 PM

Exploring Vermont's Regions @VermontVacation.com


40 of 108 3/10/2010 4:51 PM

Whitehouse

Bookmark list:

Location bar and browser tabs:


41 of 108 3/10/2010 4:51 PM

favicon.ico at root of web site

"link" element in "head" element of XHTML/HTML document

The code in the head of the XHTML would look something like:

view plain print ?

 1.<link rel="icon" href="images/mozilla-16.png" type="image/png"/> 2. 3.<link rel="shortcut icon" href="images/mozilla.ico" type="image/vnd.microsoft.icon"/> 4.

Formats and Settings:

Microsoft's ICO format (image/vnd.microsoft.icon

PNG

GIF

Size and Colors: typically 16×16 (can be 32×32) with 8‐bit color (256 colors)


42 of 108 3/10/2010 4:51 PM

Vector formats that are relevant to web development.

Adobe Flash/SWF

Scalable Vector Graphics (SVG)

Other Bitmap formats typically not encountered in web development.

TIFF (Tagged Image File Format)

JPEG 2000


43 of 108 3/10/2010 4:51 PM

Web Style Guide, 3rded. by Lynch andHorton.Book contentsavailable online

Visual Design for theModern Web by PennyMcIntire.

Don't make me think! :a common senseapproach to Webusability by Steve Krug

The non‐designer'sdesign book by RobinWilliams

About face 3 : theessentials ofinteraction design

Web redesign 2.0 :workflow that works

Nielsen Norman Group

useit.com: JakobNielsen onUsability andWeb Design

Alertbox:Current Issues inWeb Usability

IxDA(Interaction DesignAssociation)

IxDA BookRecommendationLists

User InterfaceEngineering

A List Apart: for peoplewho make websites

adaptive path:produce experiencestrategy and design


44 of 108 3/10/2010 4:51 PM

Nine Pillars of Successful Web Teams by Jesse JamesGarrett

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


45 of 108 3/10/2010 4:51 PM

The Elements of User Experience by Jesse James Garrett


46 of 108 3/10/2010 4:51 PM

Audience and Goals

Content and Organization


47 of 108 3/10/2010 4:51 PM

Why and Who

Most sites get a variety of users

Some audiences will be "primary", others "secondary"

What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


48 of 108 3/10/2010 4:51 PM

What audiences can be identified?


49 of 108 3/10/2010 4:51 PM

Who are they?

demographics

computer experience and technology profile

What are their goals?

their information needs

tasks/actions they are performing

Know Your Audience

Be clear on who you are building for. Understand their needs.

User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 Users

Feedback from users ‐ Watch what users do, not what they say.Alertbox: First Rule of Usability? Don't Listen to Users

As target audiences increase, difficulty of Web design increases.


50 of 108 3/10/2010 4:51 PM

Undergraduate Students

Concentrators

Potential concentrators

Non‐concentrators

Graduate Students

Potential Graduate Students

Faculty

Current

Potential

Researchers

Public


51 of 108 3/10/2010 4:51 PM

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

Adapt it for the Web

What 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 Phase

Additional Phases


52 of 108 3/10/2010 4:51 PM

From 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 and manageinformation.

3.

An emerging discipline and community of practice focused on bringing principles of design and architecture to thedigital landscape.

4.

Organize, Label, Navigate

Organize and Categorize

Label

Navigate


53 of 108 3/10/2010 4:51 PM

Organize

Sticky‐notes, index cards, whiteboard

Plan for future growth

Label

Know your audience

Test 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?


54 of 108 3/10/2010 4:51 PM

CNN

Fox News

ABC News

CBS

NPR

MSNBC BBC


55 of 108 3/10/2010 4:51 PM

Jakob's Law of the Internet User Experience:

Home Use, May 2009 Value

Sessions/Visits per Person per Month 37

Domains Visited per Person per Month 70

Web Pages per Person per Month 1,591

Page Views per Surfing Session 42

PC Time Spent per Month 38:00:14

Time Spent During Surfing Session 1:02:11

Duration of a Web Page Viewed 0:00:51

Source: Nielsen Online


56 of 108 3/10/2010 4:51 PM

Hierarchical

Sequential

Webs


57 of 108 3/10/2010 4:51 PM

Library of Congress Classification

"Q" ‐ Science"QC" ‐ Physics


58 of 108 3/10/2010 4:51 PM

Kingdom

Phylum

Class

Order

Family

Genus

Species

Catalog of Life


59 of 108 3/10/2010 4:51 PM


60 of 108 3/10/2010 4:51 PM


61 of 108 3/10/2010 4:51 PM


62 of 108 3/10/2010 4:51 PM

TaxonomyThe 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


63 of 108 3/10/2010 4:51 PM

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


64 of 108 3/10/2010 4:51 PM

Deep Shallow


65 of 108 3/10/2010 4:51 PM

When order is important or part of presentation.

Useful when "workflow" is important in web applications.


66 of 108 3/10/2010 4:51 PM

Wikipedia.com


67 of 108 3/10/2010 4:51 PM

Topics

Audience

Task‐Oriented

Search

Internal Organization


68 of 108 3/10/2010 4:51 PM


69 of 108 3/10/2010 4:51 PM


70 of 108 3/10/2010 4:51 PM


71 of 108 3/10/2010 4:51 PM


72 of 108 3/10/2010 4:51 PM

Critical to site's success

Precede any design/visual elements

Work from paper or text‐based Web sites


73 of 108 3/10/2010 4:51 PM

Where am I?

Where can I go?

What is close by?

What is further away?

Where have I been?


74 of 108 3/10/2010 4:51 PM


75 of 108 3/10/2010 4:51 PM

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn 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


76 of 108 3/10/2010 4:51 PM


77 of 108 3/10/2010 4:51 PM

O'Reilly Safari


78 of 108 3/10/2010 4:51 PM

O'Reilly has a "most popular" list, clamshell, and tag cloud navigation systems.


79 of 108 3/10/2010 4:51 PM


80 of 108 3/10/2010 4:51 PM


81 of 108 3/10/2010 4:51 PM

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 descriptive

Use "title" attribute to elaborate

Link 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.


82 of 108 3/10/2010 4:51 PM

Title attribute can add information so that the link is more predictable and able to be differentiated from others.

Example 7.2 ‐ View example by itself

view plain print ?

<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. 3.

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

Markup Display


83 of 108 3/10/2010 4:51 PM

Link 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" .

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

Not deep linking:

 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/2010/courses/"> 5. CSCI S-1, "Great Ideas in Computer Science with Java" 6. </a>. 7. 8.


84 of 108 3/10/2010 4:51 PM

Example from Boston's Logan Airport site:


85 of 108 3/10/2010 4:51 PM

To renew your registration, visit http://www.mass.gov/rmv


86 of 108 3/10/2010 4:51 PM


87 of 108 3/10/2010 4:51 PM


88 of 108 3/10/2010 4:51 PM

Example from Boston's Logan Airport site:


89 of 108 3/10/2010 4:51 PM


90 of 108 3/10/2010 4:51 PM

Sometimes you can "Click Here" to Elicit an Action


91 of 108 3/10/2010 4:51 PM

Title that "stands on its own"

Creator (person or institution)

Creation or Revision or Reviewed date

Link to home page

Possibly

URL of the page

Link to Privacy Statement, Terms of Use

Copyright Statement


92 of 108 3/10/2010 4:51 PM

Browser

Bookmarks

History

Window Title

Search Engine results

Bookmarks

Window Title

History


93 of 108 3/10/2010 4:51 PM


94 of 108 3/10/2010 4:51 PM

title

meta description

meta 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.


95 of 108 3/10/2010 4:51 PM

Logo

Title

Navigation

Content


96 of 108 3/10/2010 4:51 PM

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, subheadings

Add appropriate hyperlinks

Provide print‐friendly CSS or print‐friendly versions for certain documents


97 of 108 3/10/2010 4:51 PM

Check your pages for several window sizes:

800 × 600

1024 × 768

1280 × 1024


98 of 108 3/10/2010 4:51 PM

Above the fold:

Below the fold:


99 of 108 3/10/2010 4:51 PM

Printing: 560 pixels for fixed width

Reading: about the same

Avoid horizontal scrolling

Variable width does not waste space, but may make text lines too long.

CNN ‐ fixed width

W3C ‐ flexible width


100 of 108 3/10/2010 4:51 PM

Take 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.


101 of 108 3/10/2010 4:51 PM

A web page has a "page weight" (XHTML + CSS + images + JS + Flash + ...) of 184kb. How long does this take 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


102 of 108 3/10/2010 4:51 PM

Graph of download times:


103 of 108 3/10/2010 4:51 PM

File 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 be redirected tothe true resource via Apache Redirect or Rewrite directives

Or use an URL shortener like bit.ly or TinyURL.com


104 of 108 3/10/2010 4:51 PM

Boeing

Harvard College


105 of 108 3/10/2010 4:51 PM


106 of 108 3/10/2010 4:51 PM

From User Interface Engineering: Reassuring Users with Inukshuk Content

Carleton

Harvard College


107 of 108 3/10/2010 4:51 PM

Copyright © 1998‐2010 David P. Heitmeyer

The Internet Archive Wayback Machine

Examples

Southwest Airlines

The BBC

Commonwealth of Massachusetts

Boston.com

University of Michigan

Internal Revenue Service

The White House

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home


108 of 108 3/10/2010 4:51 PM

Date post:	29-Jul-2018
Category:	Documents
Upload:	trinhthien
View:	213 times
Download:	0 times

Instructor email: Course Web Site: Extension School ... · Lecture Notes Home | ... Menu Food and...

Documents