thinking about good webdesign

13
1 Philipp Rütsche 10.06.98 Thinking about good Webdesign Thinking about good Webdesign Philipp Rütsche Philipp Rütsche Web Office ETH Zürich

Upload: marvel

Post on 10-Jan-2016

23 views

Category:

Documents


0 download

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 Presentation

TRANSCRIPT

Page 1: Thinking about good Webdesign

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

Page 2: Thinking about good Webdesign

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

Page 3: Thinking about good Webdesign

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

Page 4: Thinking about good Webdesign

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, ...)

Page 5: Thinking about good Webdesign

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!

Page 6: Thinking about good Webdesign

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

Page 7: Thinking about good Webdesign

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?

Page 8: Thinking about good Webdesign

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

Page 9: Thinking about good Webdesign

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

Page 10: Thinking about good Webdesign

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

Page 11: Thinking about good Webdesign

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

Page 12: Thinking about good Webdesign

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>)

Page 13: Thinking about good Webdesign

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