bertdesign.de

Zur Zeit wird man im Bereich Web­de­sign regel­recht zuge­schmis­sen mit Arti­keln, die sich mit dem letz­ten Schrei der Web­tech­nik befas­sen: HTML5 und CSS3. Zwar sind beide Ansätze noch bei wei­tem nicht in allen Brow­sern *hust* IE *hust* imple­men­tiert – den­noch ist ihr Ein­satz bereits jetzt sinn­voll & loh­nens­wert. Ich halte es da ganz mit Andy Clarke: Ignorance is bliss:

That’s because in the real world, people using the Web don’t find a Web site that they like, then open up ano­ther brow­ser to check that it looks they same.

AUf meh­re­ren Sei­ten habe ich diese Tech­ni­ken genutzt. Wie die Umset­zung in der Pra­xis aus­sieht, möchte ich ein einem Bei­spiel ver­deut­li­chen. Ich habe zu Beginn des Jah­res die Web­seite für den müns­te­ra­ner Kaf­fee­freund Domi­nik Schweer umge­setzt. Dabei habe ich diverse Neue­run­gen genutzt, die ich kurz anschnei­den möchte.

HTML5

HTML5 stellt neben dem wahn­sin­nig ein­fa­chen Doc­type diverse neue Ele­mente vor – einen guten Über­blick bie­tet Peter Krö­ners Arti­kel zum Thema. Mit ent­spre­chen­den CSS-Klassen & IDs las­sen sich diese Ele­mente zumin­dest schon anti­zi­pie­ren, wie es auch A List Apart im Pre­view zu HTML5 als „com­mon struc­tures” für HTML4 vor­stellt. Die Schwie­rig­kei­ten, die man sich beim direk­ten Ein­satz die­ser Ele­mente ein­han­delt, wer­den in Peters Arti­kel ein­drucks­voll belegt, daher sollte man in die­sem Bereich wohl zunächst auf die Klassen-/ID-Lösung zurück­grei­fen – was in vie­len Jah­ren evtl. mal die Umstel­lung erleich­tet

Was man aber bereits ein­set­zen kann sind WAI-ARIA-Landmarks, Gründe dazu fin­den sich bei Vor­sprung durch Web­stan­dards:

Mit Aria-Landmarks kann jede sta­ti­sche Web­site bes­ser struk­tu­riert wer­den. Aria-Landmarks wer­ten das HTML auf und erhö­hen des­sen Infor­ma­ti­ons­wert. Mit Land­marks kann die Rolle eines Ele­ments genauer beschrie­ben werden

Die erwei­ter­ten Anga­ben sind schnell eingebunden:

• Der Kopf­be­reich erhält „role=banner”
• Der Haupt­in­halt erhält „role=main”
• Die Sei­ten­leiste erhält „role=complementary”
• Die Navi­ga­tion erhält „role=navigation”
• Blog­ein­träge / Texte erhal­ten „role=„article”
• Zusatz-/Metainfos zu Blog­ein­trä­gen erhal­ten „role=contentinfo”
• Das Such­for­mu­lar erhält „role=search”

Das war’s auch schon. Kurz und schmerz­los wurde der Inhalt durch ein­fa­che Aus­zeich­nun­gen zugäng­li­cher gemacht.

Auch For­mu­la­r­ele­mente las­sen sich in HTML5 gewinn­brin­gend erwei­tern. Dort gibt es einen gan­zen Satz neuer Typ-Bezeichnungen, die glück­li­cher­weise bei „Unwis­sen­heit” des Brow­sers auf den Stan­dard­typ „text” zurück­ge­setzt wer­den. So las­sen sich z.B. Kom­men­tar­for­mu­lare in Blogs durch mini­male Ände­run­gen seman­tisch leicht aufwerten:

<input type="url">, <input type="email">

Zumin­dest auf dem iPhone wird dann schon mal die Tas­ta­tur ange­passt. Ansons­ten sehen die Fel­der aus wie nor­male Text-Eingabefelder, dem­ent­spre­chend gibt es User­seite keine Beein­träch­ti­gung der Dar­stel­lung. Eine voll­stän­dige Doku­men­ta­tion dazu gibt es bei „Dive Into HTML5″: A Form of Mad­ness.

Wie gesagt ver­zichte ich zunächst auf den Ein­satz der brand­neuen Ele­mente, da dies zu unglaub­li­chen Kom­pa­ti­bi­li­täts­pro­ble­men führt. Dem Ein­satz der oben beschrie­be­nen klei­nen Ände­run­gen steht jedoch nichts im Wege.

CSS3

Neben den HTML5-Techniken bie­ten einige Brow­ser mitt­ler­weile sehr gute Unter­stüt­zung für die neuen CSS3-Eigenschaften. Beim Ein­satz sollte man natür­lich stets dar­auf ach­ten, dass die Funk­tio­na­li­tät der Seite auch ohne Unter­stüt­zung der Fea­tures gesi­chert ist. Daher beschränke ich mich auf wenige gra­fi­sche Details, ganz im Sinne des Pro­gres­sive Enhan­ce­ments.

Ein gutes Bei­spiel dafür ist der Ein­satz von RGBa für die Fest­le­gung von Far­ben. Bei 24ways.org gab es zu Beginn der Adventskalender-Reihe 2009 ein exzel­len­tes Tuto­rial für die Arbeit mit RGBa. Die Mög­lich­keit, nur die Hin­ter­grund­farbe, nicht aber den ent­hal­te­nen Text mit leich­ter Trans­pa­renz zu ver­se­hen, habe ich beim Kaf­fee­freund einige Male genutzt. Beson­ders beim Inhalts­be­reich fällt das auf – in allen Brow­ser, die RGBa unter­stüt­zen, scheint das Hin­ter­grund­bild dezent durch:

Durch­schei­nen­der Hintergrund

Brow­ser, wel­che die RGBa-Farbangaben nicht akzep­tie­ren, bekom­men statt­des­sen eine ein­fa­che RGB-Farbe aus­ge­lie­fert & müs­sen auf die Kaf­fee­boh­nen lei­der ver­zich­ten. Ist zwar schade, stört aber den Besu­cher wohl nicht wei­ter – wie soll er es auch wis­sen Zudem sieht der fort­schritt­lich brow­sende Nut­zer im Googlemaps-Infokasten zu spä­ter Stunde nicht ein­fach nur eine graue Box mit Text, son­dern leicht durch­schei­nend einen Kar­tenau­schnitt aus Goo­gle­Maps dahin­ter. Das sieht im CSS dann z.B. für den Haupt­in­halt so aus:

#content{ background-color: rgb(241,232,226); background-color: rgba(241,232,226,0.8);}

Mit Schat­tie­run­gen habe ich ganz behut­sam gear­bei­tet. Über die Eigen­schaft box-shadow mit ent­spre­chen­den Browser-Prefixes wer­ten die Schat­tie­run­gen die Seite auf & geben ihr einen leich­ten drei­di­men­sio­na­len Touch. Nach Lek­türe des Arti­kels „Craf­ting Sub­tle & Rea­listic User Inter­faces” habe ich die Schat­ten übri­gens mas­siv redu­ziert – den Grund gibt der Artikel:

Drop Shadows will ruin your design if you don’t do it right. Things should be right up against their sur­face which means using a 1-3px Drop Shadow size. And 0-3px dis­tance. This isn’t WordArt.

Der Schat­ten am rech­ten Rand der Navi­ga­tion ist eigent­lich nicht korrekt

Pro­ble­ma­tisch bei die­ser Eigen­schaft ist, dass per CSS ver­ge­bene Schat­ten streng genom­men per­spek­ti­visch nicht ganz kor­rekt sind. So müsste z.B. bei der Kaffeefreund-Seite der Schat­ten der Navi­ga­tion zum Hin­ter­grund hin län­ger sein als zur dazwi­schen­lie­gen­den Inhaltsebene.

Den­noch erscheint die Seite so ganz sub­til etwas grif­fi­ger. Der Ein­satz von Schat­tie­run­gen sollte jedoch ins­ge­samt wie bereits ange­deu­tet gut durch­dacht sein. Wel­che Pro­bleme auf­tau­chen kön­nen, ver­deut­licht der Arti­kel „Drop-Shadows and Gra­di­ents: Be Con­sis­tent in Your Visual Meta­phors”.

Eine letzte heiß­ge­liebte Eigen­schaft ist der border-radius. Runde Ecken sind waren ja der abso­lute Knal­ler, wenn es um jeg­li­che Web2.0-Seiten geht. Natür­lich nutzt die Seite auch diese Eigen­schaft – und das sogar bei fast jeder Box, die sicht­bar ist. Jedoch habe ich auf über­trie­ben abge­run­dete Boxen wei­test­ge­hend ver­zich­tet, son­dern nur geringe Radien ange­ge­ben. Den Grund dazu lie­fert der bereits oben zitierte Arti­kel zu Userinterfaces:

Real-world objects rarely have per­fectly square cor­ners. Use sub­tle roun­ded cor­ners to make objects look real.

Daher ist jedes Ele­ment, das ursprüng­lich eckige Kan­ten hatte, zumin­dest mit einer mini­ma­len Run­dung ver­se­hen. Die Angabe dazu habe ich platz­spa­rend ganz an das Ende der CSS-Datei gescho­ben & dort alle Ele­mente ange­ge­ben, die ich leicht gerun­det haben wollte.

Wer die ent­spre­chen­den Tech­ni­ken im Ein­satz sehen möchte & mir auf­grund inkon­sis­ten­ten Codings die Ohren lang­zie­hen mag, darf sich das Style­s­heet gerne in Gänze zu Gemüte führen.

Wie  man sieht: Wenn die vor­han­de­nen Tech­ni­ken dezent ein­ge­setzt wer­den, las­sen sich mit ein­fa­chen Mit­teln sinn­volle Ver­bes­se­run­gen erzie­len. Die Seite wird in weni­gen Minu­ten auf­ge­wer­tet & bleibt den­noch funk­tio­nal – sie über­mit­telt auch im IE6 den Inhalt problemlos.

Nach­trag: Etwas abs­trak­ter, aber kom­pakt und tref­fend for­mu­liert hat es Mathias Schä­fer. „Pro­gres­sive Enhan­ce­ment: Die Zeit ist gekom­men”

Ähnliche Artikel

• Wordpress: Performance optimieren
• Tutorial: CSS — Hover mit verlinkten Bildern
• CSS Tutorial I: Hover effect on linked images