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

2Philipp Rütsche Thinking about good Webdesign Overview Principles and problems Principles and problems Layout and content Layout and content Navigation and orientation Navigation and orientation The ETH web: outlook The ETH web: outlook

3Philipp Rütsche Thinking about good Webdesign Common Principles (1) Form follows function Form follows function As simple as possible As simple as possible Avoid meaningless stuff Avoid meaningless stuff

4Philipp Rütsche Thinking about good Webdesign Common Principles (2) Accessibility ( Accessibility ( Browser independency Browser independency No technical gimmicks (plug-ins: Shockwave, Java,...) No technical gimmicks (plug-ins: Shockwave, Java,...)

5Philipp Rütsche Thinking about good Webdesign Known Problems Bandwith Bandwith Different browsers Different browsers Frames Frames Excessive use of graphics and multimedia Excessive use of graphics and multimedia The author! The author!

6Philipp Rütsche Thinking about good Webdesign Layout and Content The content is that counts The content is that counts Don’t loose readers due to old information Don’t loose readers due to old information Layout and design structures content Layout and design structures content It supports navigation and orientation It supports navigation and orientation

7Philipp Rütsche Thinking about good Webdesign Ask 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ütsche Thinking about good Webdesign The Homepage Fast, practical, attractive Fast, practical, attractive Not more than 7 categories Not more than 7 categories Who, when, feedback, help, (search) Who, when, feedback, help, (search) Present the services and structure of your organisation Present the services and structure of your organisation

9Philipp Rütsche Thinking about good Webdesign Help, where am I? (1) Users always have to know, where they are Users always have to know, where they are Clear and evident structure Clear and evident structure Table of contents, site map Table of contents, site map Horizontal and vertical navigation Horizontal and vertical navigation

10Philipp Rütsche Thinking about good Webdesign Help, where am I? (2) Header Header  ETH logo  Logo of departement/institute  Caption, subtitles Footer Footer  Navigation bar  Responsible  Last update

11Philipp Rütsche Thinking about good Webdesign Some Rules Correct coding! Correct coding! No physical or absolute formatting No physical or absolute formatting Don’t missuse structure elements for layout purposes (UL, DL, BLOCKQUOTE) Don’t missuse structure elements for layout purposes (UL, DL, BLOCKQUOTE) No blinking or scrolling text No blinking or scrolling text, meta-tags (Dublin core), meta-tags (Dublin core) Use comments Use comments

12Philipp Rütsche Thinking about good Webdesign Validate your Site! W3C sets the standards W3C sets the standards  HTML 4.0 and Correct HTML Correct HTML  Watch Web Office Tools Valid links (including ) Valid links (including )

13Philipp Rütsche Thinking about good Webdesign The Future – «my Vision» My wish: only websites that meet this criteria My wish: only websites that meet this criteria Rising quality on the ETH web (web-policy) Rising quality on the ETH web (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 homepage A new (and improved) ETH homepage