Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 23

HTML und CSS3: Webtechnologien produktiv einsetzten

Während die einen von HTML5 und CSS3 nicht genug bekommen können, wenden andere sich desinteressiert ab und denken: „Ich schau mir das noch mal an, wenn auch der Internet Explorer das kann.“ Dabei gibt es kaum Gründe, die dagegen sprechen, noch länger mit dem produktiven Einsatz der neuen Webtechnologien zu warten.

CSS3 und HTML5 sind in aller Munde und es existieren bereits viele Tools und Tutorials, die beim Einsatz dieser neuen Techniken helfen. Doch viele Webdesigner und -entwickler warten nach wie vor mit dem Einsatz, bis auch der ersehnte Internet Explorer 9 diese Technologien unterstützt oder der Internet Explorer 6 wirklich ganz verschwunden ist – oder beides.

Ablehnung aus falschen Motiven

Immer wieder tauchen die gleichen Begründungen in Kommentaren zu HTML5- und CSS3-Artikeln auf: „Der Kunde hat keine Ahnung vom Internet, dem ist egal, was CSS3 ist“, „Keine Chance auf CSS3, mein Kunde und seine Mitarbeiter surfen alle mit dem IE 6“, „Ich warte mit dem Einsatz von CSS3 bis es sich lohnt“, „Was will ich mit Effekten, die nur 10 Prozent der User sehen?“, „Dass man CSS3 bereits heute einsetzen kann, bedeutet nicht, dass man es auch muss“, um nur ein paar Beispiele zu nennen.

Woher kommt diese ablehnende Haltung? Neue Technologien werden doch dazu entwickelt, um den Arbeitsalltag zu erleichtern und neue Möglichkeiten und Funktionen zu bieten – Argumente, die eigentlich jeden bestärken sollten, diese Technologien einzusetzen, statt sich abwartend zu verhalten. Wo müssen Webworker ansetzen, um neuen Technologien positiver gegenüberzustehen und ihren Einsatz zu fördern und was können sie tun, um auch ihre Kunden davon zu überzeugen?

Den eigenen Standpunkt überdenken

Sicherlich sorgt eine Übergangsphase zu neuen Funktionen immer für einen gewissen Mehraufwand durch Lernprozess und Umsetzungsprobleme. Aber statt der eigenen Probleme bei der Implementierung sollte man den langfristigen Nutzen für die User im Blick haben. Wenn neue Technologien eingeführt werden, geht es nicht nur darum, diese technisch zu begreifen und anwenden zu können, sondern – und das ist vielleicht sogar noch wichtiger – zu verstehen, was damit erreicht werden soll. Nur so kann man den Nutzen von neuen HTML5-Elementen und -Funktionen sowie CSS3-Modulen gegen die technischen Umsetzungsprobleme in älteren Browsern abwägen. Bei dieser Betrachtung scheinen viele der Verweigerer nur den eventuellen Mehraufwand zu sehen, was ein wenig kurzsichtig ist. Denn Websites werden nicht nur für den Zeitpunkt der Veröffentlichung geplant, sondern über einen längeren Zeitraum.

Ebenso scheint es immer noch für einige ein Ziel zu sein, in allen Browsern ein möglichst gleiches Bild einer Website zu erstellen. Dabei sollte doch mittlerweile allen klar sein, dass ein einheitliches Aussehen über die verschiedenen Geräte wie Mobiltelefon, Tablet-PC und Desktoprechner hinweg schlicht eine Illusion ist. Als Argument wird dann oft der Kunde ins Feld geführt, der entweder auf der zuvor im Grafikprogramm erstellten Bildvorlage besteht oder auch mal mit einem anderen Rechner als dem seinen die eigene Firmenwebsite besucht und erstaunt feststellen muss, dass sie von der ihm bekannten Version abweicht.

Generell müssen Webworker akzeptieren, dass es immer Unterschiede zwischen Browsern geben wird. Die klaffende Lücke zwischen dem Internet Explorer und dem Rest der Browserwelt schließt sich zwar mit dem IE 9 größtenteils, aber allein die große Anzahl und die technischen Herausforderungen der neuen CSS3-Module führen dazu, dass immer ein Browser dem anderen in bestimmten Dingen hinterherhinkt.

Statt ständig den kleinsten gemeinsamen Nenner hinzunehmen, sollten Webdesigner und -entwickler die Unterschiede befürworten und zunächst für moderne Browser entwickeln und anschließend weniger fähige Browser berücksichtigen.

Vorteile erkennen und ernst nehmen

Einige Designelemente wie Text- und Boxschatten oder abgerundete Ecken werden oft als „Verschönerung“ oder „Aufhübschung“ abgetan. Ob sie überall sinnvoll sind oder nicht, sei dahingestellt. Dass ihre Einbindung mittels CSS aber zahlreiche Vorteile hat, wird oft mit dem Argument „Das geht im IE nicht“ abgetan. CSS3 bietet weitere sinnvolle Neuerungen wie Media-Queries und Webfonts, die ebenfalls nicht browser- oder betriebssystemübergreifend gleich gut funktionieren. Das darf jedoch im Umkehrschluss nicht bedeuten, dass die klar vorhandenen Verbesserungen auch für alle anderen ausgeschlossen werden. Auch semantische Vorteile von HTML5-Elementen werden zurückgestellt, weil User mit einem veralteten Browser und zusätzlich deaktiviertem JavaScript nicht hinreichend unterstützt werden.

Den Kunden einbinden

Bei aller Verwirrung des Kunden sollten Webworker selbigem zunächst das Problem der unterschiedlichen Browserdarstellungen erklären und die Vorteile aufzeigen, die ein Dulden dieser Unterschiede mit sich bringt. Eine Investion in moderne Funktionen, die in Zukunft immer mehr Menschen nutzen können, statt in die Angleichung älterer IE-Versionen, deren Nutzergruppe immer kleiner wird, werden wohl die meisten Kunden befürworten.

Sicherlich gibt es je nach Besucherzahl und Zielgruppen auch äußere Zwänge, die ein gewisses Maß an Zuwendung für ältere Browser erfordern. Bei einem Onlineshop mit 100.000 Besuchern im Monat machen ein Prozent IE-6-Nutzer viel aus. Diese kleine Gruppe sollte aber nicht einen großen Teil anderer Nutzer von modernen Funktionen abhalten. Statt umfangreiche Entwicklungskosten zur Angleichung des Aussehens in älteren IE-Versionen zu investieren, kann man Darstellungsunterschiede tolerieren und das dadurch gesparte Geld für moderne Browser einsetzen. Wie das im Einzelnen geschieht, sollte man mit dem Kunden besprechen, der sich nicht nur über aufklärende Worte in diesem Zusammenhang freut, sondern auch über die Einbindung in den Entwicklungsprozess.

Eine weitere Möglichkeit besteht darin, dem Kunden kein Abbild einer Website aus einem Grafikprogramm zu zeigen, wie es Webdesigner Andy Clarke fordert [1], sondern ihm stattdessen eine richtige Website vorzulegen. Das hat den Vorteil, dass gar nicht erst falsche Erwartungen bezüglich des Aussehens geweckt werden. Zudem können Webworker so direkt Effekte wie Hover- und Active-Stati, Transitionen und Verhalten beim Verkleinern/Vergrößern des Viewports zeigen und vom Kunden bewertet lassen.

Dies ist natürlich zunächst mit einem erhöhten Aufwand für den Entwickler verbunden, der das Risiko eingeht, bei Nichtgefallen Entwicklungszeit vertan zu haben. Andy Clarke relativiert dieses Gegenargument damit, dass man den Code sowieso erstellen muss und etwaige Änderungen in einer CSS-Datei in vielen Fällen schneller von der Hand gehen als in einem Bildbearbeitungsprogramm. Ob diese Vorgehensweise angebracht ist, muss jeder für sich entscheiden. Da in vielen Fällen mehrere Designer und Entwickler an einem Projekt beteiligt sind, ist ein Vermengen der Arbeitsschritte oft gar nicht möglich. Andere wie 37signals.com gehen sogar soweit und schaffen den Arbeitsschritt Grafikprogramm gänzlich ab [2]. Eine interessante Idee, die aber bei weitem nicht überall funktioniert.

Unterstützung durch JavaScript

Zum Umgang mit weniger fähigen Browsern stehen diverse Möglichkeiten zur Verfügung. Die vorgestellten Möglichkeiten beziehen sich dabei nicht ausschließlich auf ältere Browser, sondern auch auf all jene, die einfach weniger Fähigkeiten haben. So ist zwar der kommende IE 9 brandneu, hat aber dennoch weniger CSS3-Funktionen als Safari, Chrome oder Firefox an Bord.

Eine recht einfache und zeitsparende Möglichkeit ist der Einsatz von JavaScript, um fehlende HTML5- oder CSS3-Unterstützung nachzurüsten.

html5.js [3] und ie-9.js [4] wurden bereits in t3n 21 (Artikel ab Seite 77) vorgestellt und rüsten Unterstützung für HTML5-Elemente beziehungsweise CSS3-Pseudoklassen nach.

selectivizr.js [5] bietet ebenfalls unter Zuhilfenahme verschiedener JavaScript-Bibliotheken Unterstützung für zahlreiche Pseudoklassen und Attributselektoren an.

modernizr.js [6] rüstet keine fehlenden CSS3-Funktionen nach, sondern liest die Fähigkeiten des Browsers aus und vergibt entsprechende Klassen an das HTML-Element. Dadurch kann man gezielt mit CSS Browser ansprechen, die eine bestimmte CSS3-Funktion unterstützen oder eben nicht. Darüber hinaus rüstet es fehlende Unterstützung für HTML5-Elemente nach und bietet eine Fallback-Klasse für nicht JavaScript-fähige Browser.

css3pie [7] rüstet einige fehlende CSS3-Eigenschaften im IE mittels HTC-Script nach. Dies ist zu empfehlen, wenn der Kunde etwa auf eine gleiche Darstellung besteht.

Ausweg Conditional Comments

Mit Hilfe von „Conditional Comments“ kann man jede Version des Internet-Explorers mit einem eigenen CSS und/oder einer eigenen Klasse im Body-Element ansprechen und so auftretende Darstellungsprobleme zumindest zum Teil beheben.

CSS

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" media="screen, projection">
<![endif]-->

Listing 1

CSS

<!--[if lte IE 6 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Listing 2

Dieser Ansatz rüstet keine fehlenden Funktionen nach, sondern behebt lediglich Darstellungsfehler. Je mehr Darstellungsunterschiede man hierbei toleriert, desto mehr Entwicklungszeit spart man ein. Ältere Browser sollte man nur dann komplett ignorieren, wenn die Besucherstatistik oder die Zielgruppe das zulässt. Beispielsweise ist es nicht unbedingt sinnvoll, eine Website für Mac-Software für den Internet Explorer 6 oder 7 zu optimieren.

Fazit

HTML5 und CSS3 lassen sich heute in Kundenprojekten einsetzen. Mit einer vernünftigen Kundenberatung und Zuhilfenahme einiger Tools kann man gute Kompromisse in älteren Browsern erzielen, ohne überflüssige Entwicklungszeit für eine möglichst einheitliche Darstellung zu investieren.

Mehr zu diesem Thema bietet beispielsweise das englischsprachige Buch „Hardboiled Webdesign“ von Andy Clarke [8].

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
jenifa23

http://www.CleverGeldMachen.de - Zuhause Geld verdienen! Monatlich bis zu 3.000€ sind ohne Probleme möglich! Ansehen LOHNT sich! Liebe Grüße

Kjell

Ein paar lustige Effekte bleiben trotz modernizr und co übrig: z.B. beim Laden von Code-Fragmenten im IE6/IE7 mit style bzw. script tag haut es einem wieder alles zusammen. War eine wahre Freude herauszufinden warum plötzlich alle Styles für nicht mehr funktionierten und das vorher noch flutschende Script sich nicht mehr in Ganz bringen lies...

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden