Modernes Webdesign Eric Eggert yatil.de

Modernes Webdesign

  1. POSH

X

  1. POSH Plain-Old-Semantic-HTML

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

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.

  1. Persönliche Codebausteine

  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)

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

aus: yatil.de/focusstandards/

  1. Raster

Spalten

aus: Khoi Vinh: The Other Times

aus: Khoi Vinh: yeeaahh.subtraction.com

aus: Khoi Vinh: yeeaahh.subtraction.com

aus: Khoi Vinh: yeeaahh.subtraction.com

Zeilen

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

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

  1. Typografie

aus: Dan Cederholm: SimpleBits.com

aus: AIGA.com

  1. Unaufdringliches Javascript Unauffällig, doch genial

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

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

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

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

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.

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