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

descriptive and simpleno spaces or symbolsno caps*

Webs with links to and froLinks to outside sites use

target= attribute with value set to “_blank” .

Page SizePage SizeMinimum 1024 x 768

fit most important information in area

maximum width, browser edgesless scrolling

1 ½ pages max lengthless vertical scrollingbetter for printinge.g., 900-1200 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 multimediaConsider access

dial up, DSL, cable, wifiOptimize/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/PNG for photosGIF/PNG for cartoons72-150 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”