Moderne Webdesign-Paradigmen. Vorgestellt beim Webmontag in Wien vom 30.04.2007

1. Webmontag Wien V

2. Modernes
Webdesign
Eric Eggert
yatil.de

3. Modernes
Webdesign

4. 1. POSH

6. X

7. 1. POSH
Plain-Old-Semantic-HTML

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

9. 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.
•

10. 2. Persönliche
Codebausteine

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

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

13. aus: yatil.de/focusstandards/

14. 3. Raster

15. Spalten

16. aus: Khoi Vinh: The Other Times

17. aus: Khoi Vinh: yeeaahh.subtraction.com

18. aus: Khoi Vinh: yeeaahh.subtraction.com

19. aus: Khoi Vinh: yeeaahh.subtraction.com

20. Zeilen

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

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

23. 4. Typografie

24. aus: Dan Cederholm: SimpleBits.com

25. aus: AIGA.com

26. 5. Unaufdringliches
Javascript
Unauffällig, doch genial

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

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

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

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

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

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