Webmontag Wien V

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äsentations-
•
zwecke 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.
•

2. Persönliche
Codebausteine

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

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

aus: yatil.de/focusstandards/

3. 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

4. Typografie

aus: Dan Cederholm: SimpleBits.com

aus: AIGA.com

5. 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