-
Modernes Webdesign
Eric Eggertyatil.de
http://yatil.de/http://yatil.de/
-
Modernes Webdesign
-
1. POSH
-
X
-
1. POSHPlain-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)
http://microformats.org/wiki/poshhttp://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.
http://validator.w3.orghttp://validator.w3.orghttp://tantek.com/log/2002/11.html#L20021128t1352http://tantek.com/log/2002/11.html#L20021128t1352http://tantek.com/log/2002/11.html#L20021128t1352http://tantek.com/log/2002/11.html#L20021128t1352
-
2. PersönlicheCodebausteine
-
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)
http://www.digital-web.com/articles/coding_for_content/http://www.digital-web.com/articles/coding_for_content/
-
2. Persönliche Codebausteine
Wiederverwendbare HTML-Bausteine
„Elemente, die sich – auch abgewandelt – auf einer Webseite wiederholen“ (Eric Eggert, 25.04.2006)
http://yatil.de/Artikel/xhtml-bausteinehttp://yatil.de/Artikel/xhtml-bausteine
-
aus: yatil.de/focusstandards/
http://yatil.de/focusstandards/http://yatil.de/focusstandards/
-
3. Raster
-
Spalten
-
aus: Khoi Vinh: The Other Times
http://www.subtraction.com/archives/2007/0410_the_other_ti.phphttp://www.subtraction.com/archives/2007/0410_the_other_ti.php
-
aus: Khoi Vinh: yeeaahh.subtraction.com
http://yeeaahh.subtraction.comhttp://yeeaahh.subtraction.com
-
aus: Khoi Vinh: yeeaahh.subtraction.com
http://yeeaahh.subtraction.comhttp://yeeaahh.subtraction.com
-
aus: Khoi Vinh: yeeaahh.subtraction.com
http://yeeaahh.subtraction.comhttp://yeeaahh.subtraction.com
-
Zeilen
-
aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid
http://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeontheweb
-
aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid
http://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeonthewebhttp://alistapart.com/articles/settingtypeontheweb
-
4. Typografie
-
aus: Dan Cederholm: SimpleBits.com
http://simplebits.comhttp://simplebits.com
-
aus: AIGA.com
http://aiga.comhttp://aiga.com
-
5. Unaufdringliches JavascriptUnauffällig, doch genial
-
Hinweise einblenden
-
Hinweise einblenden
X
-
Hinweise einblenden
addEvent('hinwtoggle',
'click',
toggle('div.hinweis')
);
-
Weiterführende Links:
1. Poshmicroformats.org/wiki/posh
2. Persönliche CodebausteineGarrett Dimon: Coding for Content
Eric Eggert: XHTML-Bausteine
3. RasterMark Boulton: Five Simple Steps to designing grid systems
Khoi Vinh: The Other TimesKhoi Vinh: Oh Yeeaahh! & yeeaahh.subtraction.com &
Grids Are Good@SXSW
http://microformats.org/wiki/poshhttp://microformats.org/wiki/poshhttp://www.digital-web.com/articles/coding_for_content/http://www.digital-web.com/articles/coding_for_content/http://yatil.de/Artikel/xhtml-bausteinehttp://yatil.de/Artikel/xhtml-bausteinehttp://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/http://www.subtraction.com/archives/2007/0410_the_other_ti.phphttp://www.subtraction.com/archives/2007/0410_the_other_ti.phphttp://www.subtraction.com/archives/2007/0318_oh_yeeaahh.phphttp://www.subtraction.com/archives/2007/0318_oh_yeeaahh.phphttp://yeeaahh.subtraction.com/http://yeeaahh.subtraction.com/
-
Weiterführende Links:4. Typografie
R. Rutter & M. Boulton: Web Typography Sucks @SXSWMark Boulton: Five Simple Steps to better typography
Jon Hicks: Choosing typefaces for the web @Oxford Geek NightJeff Croft: Elegant Web Typography (PDF) @FOWD
5. Unaufdringliches JavaScriptChristian 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.
http://webtypography.net/sxsw2007/http://webtypography.net/sxsw2007/http://webtypography.net/sxsw2007/http://webtypography.net/sxsw2007/http://www.hicksdesign.co.uk/journal/oxford-geek-night-2http://www.hicksdesign.co.uk/journal/oxford-geek-night-2http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdfhttp://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdfhttp://ichwill.net/http://ichwill.net/http://creativecommons.org/licenses/by/3.0/http://creativecommons.org/licenses/by/3.0/
-
EndeDanke für’s Zuhören :)
Eric Eggert, yatil.de
http://yatil.de/http://yatil.de/