Modernes Webdesign

A presentation at Webmontag Wien in April 2007 in Vienna, Austria by Eric Eggert

Slide 1

Slide 1

Modernes Webdesign Eric Eggert yatil.de

Slide 2

Slide 2

Modernes Webdesign

Slide 3

Slide 3

  1. POSH

Slide 4

Slide 4

Slide 5

Slide 5

X

Slide 6

Slide 6

  1. POSH Plain-Old-Semantic-HTML

Slide 7

Slide 7

„Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it. Pick a page on your web site to begin with, and apply the POSH Checklist to it.“ (microformats.org/wiki/posh)

Slide 8

Slide 8

POSH Checkliste • Die erste POSH-Regel ist, dass dein POSH validieren (http://validator.w3.org) muss. • Zweitens: Hör auf TABLEs für Präsentationszwecke zu benutzen, entferne 1px-GIFs und HTML-Elemente für Präsentation. • Leere Anker eliminieren (http://tantek.com/log/ 2002/11.html#L20021128t1352). • Benutze gute, semantische Klassennamen.

Slide 9

Slide 9

  1. Persönliche Codebausteine

Slide 10

Slide 10

  1. Persönliche Codebausteine “You can think of a personal markup pattern as a sort of microformat that solves a problem unique to your situation.” (Garrett Dimon, 23.04.2007)

Slide 11

Slide 11

  1. Persönliche Codebausteine Wiederverwendbare HTML-Bausteine „Elemente, die sich – auch abgewandelt – auf einer Webseite wiederholen“ (Eric Eggert, 25.04.2006)

Slide 12

Slide 12

aus: yatil.de/focusstandards/

Slide 13

Slide 13

  1. Raster

Slide 14

Slide 14

Spalten

Slide 15

Slide 15

aus: Khoi Vinh: The Other Times

Slide 16

Slide 16

aus: Khoi Vinh: yeeaahh.subtraction.com

Slide 17

Slide 17

aus: Khoi Vinh: yeeaahh.subtraction.com

Slide 18

Slide 18

aus: Khoi Vinh: yeeaahh.subtraction.com

Slide 19

Slide 19

Zeilen

Slide 20

Slide 20

aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid

Slide 21

Slide 21

aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid

Slide 22

Slide 22

  1. Typografie

Slide 23

Slide 23

aus: Dan Cederholm: SimpleBits.com

Slide 24

Slide 24

aus: AIGA.com

Slide 25

Slide 25

  1. Unaufdringliches Javascript Unauffällig, doch genial

Slide 26

Slide 26

<a href="#" onclick="toggle('div.hinweis'); return false;"> Hinweise einblenden </a>

Slide 27

Slide 27

X <a href="#" onclick="toggle('div.hinweis'); return false;"> Hinweise einblenden </a>

Slide 28

Slide 28

<script type="text/javascript"> addEvent('hinwtoggle', 'click', toggle('div.hinweis') ); </script> <a id="hinwtoggle" href="/hinweise.html"> Hinweise einblenden </a>

Slide 29

Slide 29

Weiterführende Links: 1. Posh microformats.org/wiki/posh 2. Persönliche Codebausteine Garrett Dimon: Coding for Content Eric Eggert: XHTML-Bausteine 3. Raster Mark Boulton: Five Simple Steps to designing grid systems Khoi Vinh: The Other Times Khoi Vinh: Oh Yeeaahh! & yeeaahh.subtraction.com & Grids Are Good@SXSW

Slide 30

Slide 30

Weiterführende Links: 4. Typografie R. Rutter & M. Boulton: Web Typography Sucks @SXSW Mark Boulton: Five Simple Steps to better typography Jon Hicks: Choosing typefaces for the web @Oxford Geek Night Jeff Croft: Elegant Web Typography (PDF) @FOWD 5. Unaufdringliches JavaScript Christian Heilmann: Barrierefreies JavaScript Die Folien 16–19, 21, 22, 24, 25 sind Eigentum der jeweiligen Autoren. Sie werden zu Demonstrationszwecken hier gezeigt. Alle anderen Folien sind unter einer CC-Lizenz veröffentlicht.

Slide 31

Slide 31

Ende Danke für’s Zuhören :) Eric Eggert, yatil.de