thinking about good webdesign
DESCRIPTION
Thinking about good Webdesign. Philipp Rütsche. Web Office ETH Zürich. Overview. Principles and problems Layout and content Navigation and orientation The ETH web: outlook. Common Principles (1). Form follows function As simple as possible Avoid meaningless stuff. Common Principles (2). - PowerPoint PPT PresentationTRANSCRIPT
1Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn
Thinking about good Webdesign
Thinking about good Webdesign
Philipp RütschePhilipp Rütsche
Web Office ETH Zürich
2Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn OverviewOverview
Principles and problemsPrinciples and problems Layout and contentLayout and content Navigation and orientationNavigation and orientation The ETH web: outlookThe ETH web: outlook
3Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Common Principles (1)Common Principles (1)
Form follows functionForm follows function As simple as possibleAs simple as possible Avoid meaningless stuffAvoid meaningless stuff
4Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Common Principles (2)Common Principles (2)
Accessibility Accessibility (http://www.w3.org/WAI/)(http://www.w3.org/WAI/)
Browser independencyBrowser independency No technical gimmicks (plug-ins: No technical gimmicks (plug-ins:
Shockwave, Java, ...)Shockwave, Java, ...)
5Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Known Problems Known Problems
BandwithBandwith Different browsersDifferent browsers FramesFrames Excessive use of graphics and Excessive use of graphics and
multimediamultimedia The author!The author!
6Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Layout and ContentLayout and Content
The content is that countsThe content is that counts Don’t loose readers due to old Don’t loose readers due to old
informationinformation Layout and design structures Layout and design structures
contentcontent It supports navigation and It supports navigation and
orientationorientation
7Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Ask QuestionsAsk Questions
Don’t design «headless»Don’t design «headless» What is the audience?What is the audience? What are their interests?What are their interests? What can I offer?What can I offer? What is a useful structure?What is a useful structure?
8Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn The HomepageThe Homepage
Fast, practical, attractiveFast, practical, attractive Not more than 7 categoriesNot more than 7 categories Who, when, feedback, help, Who, when, feedback, help,
(search)(search) Present the services and structure Present the services and structure
of your organisationof your organisation
9Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Help, where am I? (1)Help, where am I? (1)
Users always have to know, where Users always have to know, where they arethey are
Clear and evident structureClear and evident structure Table of contents, site mapTable of contents, site map Horizontal and vertical navigationHorizontal and vertical navigation
10Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Help, where am I? (2)Help, where am I? (2)
HeaderHeader ETH logoETH logo Logo of departement/instituteLogo of departement/institute Caption, subtitlesCaption, subtitles
FooterFooter Navigation barNavigation bar ResponsibleResponsible Last updateLast update
11Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Some RulesSome Rules
Correct coding!Correct coding! No physical or absolute formattingNo physical or absolute formatting Don’t missuse structure elements Don’t missuse structure elements
for layout purposes (UL, DL, for layout purposes (UL, DL, BLOCKQUOTE)BLOCKQUOTE)
No blinking or scrolling textNo blinking or scrolling text <TITLE>, meta-tags (Dublin core)<TITLE>, meta-tags (Dublin core) Use commentsUse comments
12Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn Validate your Site!Validate your Site!
W3C sets the standardsW3C sets the standards HTML 4.0 and 3.2HTML 4.0 and 3.2
http://www.w3c.org/MarkUp/http://www.w3c.org/MarkUp/ Correct HTMLCorrect HTML
Watch Web Office ToolsWatch Web Office Toolshttp://www.weboffice.ethz.ch/tools/http://www.weboffice.ethz.ch/tools/
Valid links (including <TARGET>)Valid links (including <TARGET>)
13Philipp Rütsche10.06.98
Th
inki
ng a
bou
t g
ood
W
eb
desi
gn The Future – «my Vision»The Future – «my Vision»
My wish: only websites that meet My wish: only websites that meet this criteriathis criteria
Rising quality on the ETH webRising quality on the ETH web(web-policy)(web-policy)
A webdesign guide (in process)A webdesign guide (in process) A style guide for the ETHZ (CD, CI)A style guide for the ETHZ (CD, CI) A new (and improved) ETH A new (and improved) ETH
homepagehomepage