Web Design and Development

Web Pages for the Real World

Areas to ConsiderAreas to ConsiderColor SchemeReadabilityNavigationContentGraphics

SpeedUniversal AccessPage SizePage LayoutSite Structure .

Site StructureSite StructurePlanning is the keyFolder organizationFile naming

8.3 preferred schemeno spaces or symbolsno caps or punctuation

Webs with links to and froLinks to outside sites use

target= attribute with value set to “_blank” .

Page SizePage SizeMinimum 800 x 600

fit most important information in area

Standard 1024 x 768maximum width, browser edgesless scrolling

1 ½ pages max lengthless vertical scrollingbetter for printinge.g., 900-1100 pixel length .

Page LayoutPage LayoutLoads left to rightLoads top to bottomNavigation: top & left (prefer text

links)Most important text information

at top (above fold)Body of text: top & leftLogos & other graphics: right or

further down page .

NavigationNavigationRedundant placement

left menutop and bottom of pagewithin written textlinked to images with

alternative text, alt=Clearly visible Limit choicesUse text labelsNo mystery meat!!! .

Color SchemeColor SchemeEvokes emotionSets toneEnhances lookAdequate contrastChoose a paletteIntegrate links,

backgrounds, text, borders, graphics and design elements .

ContentContentRelevant and relatedAccurateOriginalDepth and breadthOrganizedLinks to other resources .

ReadabilityReadabilityEasy to read fonts

style (normal, bold…)color (contrast)size (default 3)

Small blocks of textConcise sentencesBulleted/numbered listsUse <blockquote>Include some white space .

Speed (loading)Speed (loading)10 second limitMore text, fewer graphics

at firstLink to multimedia50k goal per pageConsider access

dial up, DSL, cableOptimize/compress files .

Universal AccessUniversal AccessSpecial software for

people with disabilitiesMore text, fewer pixLarger fontsLess content per page“Alt” text on graphicsMultiple versions of site.

GraphicsGraphicsLimit file sizeLimit screen size

link from thumbnailsJPG for photosGIF for cartoons72-96 dpi resolutionRelevantGood quality!

Web Resources on DesignWeb Resources on Designwww.webmonkey.comwww.visibone.com/colorlabwww.webpagesthatsuck.com/info.med.yale.edu/caim/manual/www.coolhomepages.com/www.useit.com/alertbox/9605.htmlwww.htmlhelp.com/

Folder and File Management

Folder and File Management

In WCWork folderAdd folder called “webdesign”

In “webdesign” folderAdd folder called “firstnamelastname”Add folder called “donotupload”