Wenn wir könnten, wie wir wollen

„Wenn ich nur könnte, wie ich wollte…“, wird sich so mancher denken, angesichts der vielen netten Möglichkeiten von CSS3. Runde Ecken sind damit ein Kinderspiel, einfach zu pflegen. Sie funktionieren zudem in allen Lebenslagen. Kleine, feine Animationen funktionieren in Webkit-Browsern und bestimmt auch bald in anderen modernen Browsern. Auch die vielen CSS3-Selektoren sind ein Segen. Doch immer schwebt das Damokles-Schwert Internet Explorer über uns Webentwicklern.

Die Welt ist leider ungerecht: nicht alle Nutzer surfen mit den neuesten Browsern. Unterschiedliche Fähigkeiten dürften den wenigsten bekannt sein. Wissen muss dies sowieso niemand, bis auf uns, die wir professionell mit Webseiten umgehen. Den Nutzern ist es egal, wie wir zum gewünschten Ergebnis kommen, unseren Kunden oft auch. Es ist eine echte Herausforderung, dem Kunden begreiflich zu machen, daß man technisch rückständigen Browsern wie den vielen Internet Explorern nur mit Mühe ein gewünschtes Layout unterjubeln kann, während dies bei modernen Browsern schnell und einfach geht.

Es wird noch lange eine Herausforderung bleiben, für Progressive Enhancement zu werben. Also dafür, dem Browser das zu geben, was er kann und nicht mehr. Wir haben uns selber in diese missliche Lage gebracht, weil wir jahrelang Wege gesucht und gefunden haben, anspruchsvolle Designs auch für den IE zu realisieren. Unsere Kunden wissen also, daß wir Wege finden werden, alle Details browserübergreifend zu realisieren. Wir sollten dazu übergehen, die Aufwände zu spezifizieren, die eine moderne und eine IE-spezifische Lösung bedeuten.

Vor kurzem habe ich in einem kleinen Team an einem Projekt gearbeitet, dessen Frontend sich durch viele runde Ecken, Verläufe und Schatten auszeichnete. Diese runden Ecken mit Schatten mußten sich zudem auch über andere Boxen legen können. Da es sich um eine Intranet-Anwendung handeln wird, konnten wir von einer extrem hohen IE-Dichte ausgehen. Allein für die unterschiedlichen runden Ecken, mit und ohne Schatten, hat ein Kollege mehr als einen Tag benötigt, um alle Grafiken in Sprites vorzubereiten. Hinzu kamen meine Aufwände, die richtige Struktur zu finden. Hätten wir alles nur mit CSS3 realisiert, wären wir nach einer halben Stunde fertig gewesen. Den Zusatzaufwand kann man in Euro ausdrücken. Die mit der grafischen Sonderlösung zusammenhängende Performanceverschlechterung hat nachher auch finanzielle Folgen und sie verschlechtert die Nutzerfreundlichkeit.

Vielleicht tragen Apples Kult-Geräte iPod, iPhone und iPad ja dazu bei, daß ein Umdenken entsteht. Auf diesen Geräten laufen keine Internet Explorer. Hier kommt mit Safari ein Webkit-Browser zum Einsatz. Apple ist dabei, immer neue Spielereien zu entwickeln, die sie in ihren Browser implementieren. So wie Microsoft dies früher auch tat. Möchte man nun also seine Seite „für das iPad optimieren“ und geht man dabei den alten, traditionellen Weg, muss man entweder alle neuen Apple-Spielereien für alle anderen Browser mittels Javascript nachbauen oder eine separate Webkit-Version einer Webseite erstellen. So oder so, es endet in einer Wartungshölle.

Chris Heilmann zeigt in einem Artikel bei Microsofts „Script Junkie“, wie man praktisch mit „Progressive Enhancement“ zum Erfolg kommt. Ich stelle in meinem ersten Artikel bei „Create or Die“ ein paar Seiten vor, mittels derer man CSS3 austesten und sich Code ausgeben lassen kann. So kann jeder mal „reinschnuppern“.

Wir müssen damit rechnen, daß der IE6 noch ein paar Jahre mit hohen Zugriffszahlen existieren wird. Aus der Sicht einer performanceorientierten, sparsamen Erstellung von Webseiten ist es aber egal, ob der IE6 stirbt oder nicht. Erst ab dem IE9 wird die Sache für uns interessant. Die IE-Versionen 7 und 8 müssen also auch erst von der Bildfläche verschwinden, bis wir nicht mehr genötigt sein werden, Krücken zu nutzen. Das wird viele Jahre dauern, denn die Beharrungskräfte sind sehr stark, wie die Antwort der Britischen Regierung auf eine Petition gegen den IE6 in Behördennetzwerken zeigt. Die Regierung will weiterhin auf den IE6 bauen. Zum einen glauben sie, eine adäquate Sicherheit auch über Firewalls erzeugen zu können und verweisen dann darauf, daß es zuviele interne Applikationen gibt, deren Funktionsweise mit anderen Browsern nicht gewährleistet ist. Ein Test wäre zu aufwändig und teuer. Chris Heilmann analysiert die Argumentation sehr detailliert und fundiert. Sein Artikel ist ein wichtiges Dokument, um sich unser Dilemma vor Augen zu führen. Denn obwohl es sich um die Britische Regierung handelt, wird sich deren Argumentation nicht stark von Firmen und Behörden in Deutschland unterscheiden.

Das Dilemma ist relativ einfach: Aus Sicht der Britischen Regierung (und der meisten Firmen) sind die Browser für die Nutzung des Intranets und internen Tools da. Die private Nutzung des Internets wird mehr oder minder geduldet. Es ist aber nicht die Aufgabe der Regierung oder einer Firma, für eine bessere Nutzung von Google Maps, eines Reiseportals oder von GoogleMail zu sorgen, wenn dies nicht im Behörden-/Firmeninteresse geschieht.

Es gibt aber nicht zu ignorierenden Nutzungsspitzen während der üblichen Bürozeiten. Deshalb sind die meisten Anbieter im Netz daran interessiert, auch den Nutzern aus Behörden- und Firmennetzwerken eine angenehme und moderne Webseite zu präsentieren. Es wird schwer, dagegen zu argumentieren. Aber ich gebe die Hoffnung nicht auf, daß spätestens eine detaillierte Auflistung der Sonderaufwände für den IE und die damit verbundenen Kosten ein Umdenken hervorbringt.

Gerne werden Javascript-Lösungen propagiert, die dem IE runde Ecken und mehr beibringen sollen. Meine Erfahrungen damit sind nicht berauschend. Ich rate davon ab, runde Ecken mittels Javascript zu erzeugen. Richtig schlimm sind Skripte, die transparente PNGs im IE6 ermöglichen sollen. Sie ziehen die Performance extrem in den Keller.
ich finde es wichtig, ein Layout von Beginn an als Ideal zu definieren, das in manchen Browsern nicht erreicht werden wird. Der IE ist nunmal wie ein schwarz-weiss Fernseher: Man kann damit Farbfilme sehen, sie werden aber anders dargestellt und das richtige Vergnügen stellt sich erst mit einem Farbfernseher, also einem modernen Browser, ein. Wenn wir dies immer mehr Kunden und Kollegen begreiflich machen können, werden wir unsere Freude mit CSS3 haben. Wenn nicht, wird es ein Haufen Arbeit, zweigleisig zu fahren.

17 Kommentare

  1. Hey!

    Schöner Artikel. Einen Webentwickler von progressivem Enhancement zu überzeugen ist natürlich nicht schwer. Uns ist bewusst mit welchen Techniken welcher Browser umgehen kann und mit welchen nicht. So haben wir auch mal das Verständnis wenn eine Seite auf anderen Systemen „anders“ aussieht. Das gilt für CSS3, aber ebenso für Schriftarten die via @font-face eingebunden werden und somit auf Windows XP natürlich ohne Antialising gerendert werden.

    Ich habe die letzten drei Projekte stark auf CSS3 mit progressivem Enhancement gesetzt. Ich vermute mal das der Kunde den Sinn und Zeck auch verstanden hat. Es erleichtert einem extrem die Arbeit und man kann sich wieder auf Layouts freuen, die einem früher einen Schrecken eingejagt hätten.

    Ich bin gespannt was uns in der Zukunft noch alles erwarten wird!

    Viele Grüße, Micha

  2. Das große Problem wird immer ein alter IE sein. Solange MS nicht vom Weg abkommt, ihre Broser an gewisse Betriebssysteme zu binden, wird niemals ein IE6 oder IE7 verschwinden.

    Es gibt ja, soweit ich weis, keine Möglichkeit auf einem XP-Betriebssystem – oder älter – einen IE9 zu installieren. Und wer wechselt schon von alleine zu einen modernen Browser (FF, Opera, Safari, Chrome), wenn er garnicht weis, was er davon hat? Die meisten interessiert es garnicht.

    Das nächste Problem, wie du auch schon erwähnt hast, sind die Firmen. Die meisten EDV-Mitarbeiter weigern sich auch etwas anderes wie ein XP – wenn überhaupt – zu installieren. Da sind wir wieder bei dem „kein IE9-Problem“. Ebenso werden keine updates gefahren, da dies ja Aufwand u somit Kosten bedeutet..lieber ein unsicherer IE6 und eine supertolle Firewall die 90% blockt und ein super Loggin-System wo der EDV-Leiter täglich schaut was seine Mitarbeiter machen, als mal einen sicheren Browser, sowie ein aktuelles BS zu installieren.

    Es ärgert einem, so gehindert zu werden. Da ist ein IPhone/-pad/-pod/-microwave nur ein Tropfen auf dem heißen Stein.

    Grüßli
    Chris

  3. 1. Du sprichst mir aus der Seele,
    2. hie und da habe ich das Empfinden, ich kann zuwenig erklären-dass der IE Support soviel kosten mag, mag kaum wer begreifen. Und zum Schluss kommt dann das Killer Argument bei den Tabellenlayouts gehts ja auch ganz easy – hörte ich erst die Tage.

    Da steh ich dann da und suche wirklich nach Argumenten – und das mir 😉

  4. Ich gehe mit der Überschrift des Artikels nicht d’accord. Wir könnten meiner Meinung nach durchaus so wie wir wollen, aber wir (die meisten) wollen eigentlich gar nicht oder wissen nicht wie. Ich werde das die Tage mal etwas ausformulieren.

    P.S. runde Ecken im IE6-8 ohne Javascript, VML, Sprites oder sonstige Kalamitäten gehen durchaus. Die Technik muss nur noch publiziert werden, aber ihr Erfinder ist ein schreibfauler Hund 🙂

  5. Ich bin nicht faul, ich hab gerade nur zu viel umme Ohren… :[

  6. Ich liebe und lebe die Idee des Progressive Enhancement – ich glaube an die Kunden und deren Verständnis. Aktive Webentwickler, die im Web publizieren und teilen, schaffen meiner Ansicht nach ihre eigene Welt und es gibt zu viele in dem Segment der „Internetseitenmacher“, die die neuen Möglichkeiten nicht können und viel schlimmer, die nicht wollen. Die machen das Arbeiten so schwer – nicht nur der Kunde. Die Nutzer der Browser werden das Umdenken in den Unternehmen herbei führen – nicht die Webentwickler. Neue Technologieen ziehen in den Alltag der User ein und sie werden ihre Arbeitgeber zwingen zu wechseln. Gerade deutsche Firmen haben lange versucht sich dem „social“ Gedanken des Web zu verschließen, trotzdem müssen sie umdenken und müssen zum Teil auf den Zug aufspringen – sei es aus Angst vor dem Verlust der Information oder dem Mitarbeiter, dem gerade diese Freiheit fehlt. Ähnlich wird es dem IE gehen, die Anwender werden den Wechsel herbei führen – ein wenig Geduld ist noch nötig. Nicht lange her, da meinte man, nur Blackberrys können im Unternehmen bleiben – die Welt dreht sich, für Smartphones und genauso für Browser. …

  7. Das Problem bei vielen Firmen (grade im deutschen Mittelstand) ist, dass man sich beim Design gedanklich oftmals noch auf Print-Ebene bewegt: Das Layout wird vom Vorstand abgenommen (genau wie die letzte Image-Broschüre) und das sieht dann selbstverständlich immer überall gleich aus.

    Dass die Darstellung aber nie völlig gleich sein kann (unterschiedliche Browser, Betriebssysteme, Ausgabegeräte wie Smartphones, etc.) lässt sich manchem auch mit geduldigem Erklären nicht vermitteln. Das wird sicher noch interessant werden, wenn das Internet massentauglich mobil wird, da steht uns Web-Entwicklern dann der nächste K(r)ampf ins Haus. 😉

    Was den IE6 & Co. betrifft: Zumindest vier Jahre müssen wir noch tapfer sein, dann läuft die Extended Support Period von allen Windows XP-Versionen aus[1] (Keine Sicherheitsupdates oder -hotfixes mehr). Bis dahin werden auch die Unternehmen alle auf neue Systeme mit neuen Browsern migriert haben müssen, damit wären auch zumindest der IE6 und 7 weitestgehend erledigt. Bei den Privatleuten, die dann immer noch tapfer mit einem 13 Jahre alten System unterwegs sind, wird wahrscheinlich auch irgendwann ein neuer Aldi-PC fällig sein.

    Wer sich das genaue Datum schon mal in den Kalender eintragen will: 08.04.2014 😉

    [1] http://en.wikipedia.org/wiki/Windows_XP#Support_lifecycle http://support.microsoft.com/lifecycle/?LN=en-gb&C2=1173

  8. @Monika

    Da steh ich dann da und suche wirklich nach Argumenten – und das mir

    Semantik und Schematik 😉

    @Frederic

    Zumindest vier Jahre müssen wir noch tapfer sein, dann läuft die Extended Support Period von allen Windows XP-Versionen aus[1]…

    wie viele menschen ich kenne, die noch WIN98 daheim haben und sich weigern ~100€ für ein neues BS auszugeben…

  9. @Chris

    wie viele menschen ich kenne, die noch WIN98 daheim haben und sich weigern ~100€ für ein neues BS auszugeben…

    Wow, das ist wirklich tapfer! Kenne persönlich in meinem nicht-computeraffinen[1] Bekanntenkreis niemanden, der noch mit Versionen älter als XP unterwegs ist. Deine Bekannten dürften sich bestimmt mittlerweile über fast alle Internet-Seiten ärgern, da sie in ihrem IE4/5 nicht vernünftig laufen. Verdammter neumodischer Schnickschnack!

    [1] Übrigens, Firefox schlägt mir in der Rechtschreibkorrektur statt „computeraffinen“ „Computerkriminelle“ vor. #fail

  10. Wie #7 Frederic schon schreibt, beginnt das Problem doch schon bei der Printlastigkeit der meisten Agenturen. Der Kunde sucht nach Webdesign und wendet sich an seine Agentur, von der er seit Jahren Flyer und Briefpapier machen lässt. Dummerweise haben die meisten Agenturen keine Ahnung von Webdesign. Der beste Beweis dafür ist, wenn man als Entwickler ein (vom Kunden abgesegnetes) Layout vorgelegt bekommt, aus dem nicht hervorgeht, wie die Links aussehen sollen. Daran denken Printdesigner nämlich nicht. Neben hunderten anderer wichtiger Sachen.

    Worauf ich hinaus will: Wenn der Designer schon keine Ahnung hat, wie soll er dann den Kunden bitteschön richtig beraten können? Wenn der Kunde mit der Idee „machen sie mal bitteschön runde Ecken“ kommt, muss man ihm sofort klar machen, was das bedeutet und warum das die halbe Welt nicht sehen wird. Und dass das nicht schlimm ist. Und was es für ihn bedeutet, wenn er trotzdem darauf besteht – sowohl an Kosten als auch an Einbußen in der Benutzerfreundlichkeit. Das selbe muss der Designer von sich aus erklären können, wenn die Idee mit den runden Ecken von ihm stammt. Beides ist meistens nicht der Fall und das Dilemma nimmt seinen Lauf.

    Wenn man den Kunden über die technischen Zusammenhänge aufklärt, ist er meistens gar nicht mehr abgeneigt, den technisch korrekten Weg einzuschlagen und die vergleichsweise geringen Nachteile in Kauf zu nehmen. Wenn das aber nicht spätestens bei der Präsentation des Layouts erfolgt, ist es meistens schon zu spät. Der Kunde hat sich bereits mit seinen runden Ecken angefreundet und will nicht mehr einsehen, warum die jetzt nicht überall sichtbar sein sollten.

  11. @Frederic
    Man sollte erwähnen, dass mit „Bekannten“ eher ältere Verwandschaft gemeint ist, die einfach zu alt ist sich damit zu beschäftigen oder etwas „modernes“ anzuschaffen.

  12. Ich sehe das optimistischer. In den nächsten zwei Jahren werden viele Firmen das OS auf Win7 updaten müssen und damit stirbt auch der Internet Explorer. Allerdings sind noch viele Blinde bis auf weiteres mit XP unterwegs, weil sie keinen neuen Screenreader bezahlt bekommen. Die interessieren sich aber auch nicht für runde Ecken;-) Ich würde eher mal an dem Glaubenssatz rütteln, dass alle Websites in allen Browsern gleich aussehen müssen.

  13. Hierzu: „Richtig schlimm sind Skripte, die transparente PNGs im IE6 ermöglichen sollen. Sie ziehen die Performance extrem in den Keller.“
    Ist DAS wirklich so schlimm, insbesondere, wenn die Skripte nur im IE <= 6 zur Anwendung kommen? (Meist reicht es doch, wenn der Kunde einmal gesehen hat, dass es im IE6 "auch geht"…). Irgendwie hält sich mein Mitleid mit Auftraggebern, die Dinge aus moderneren Browsern im IE6 auch "exakt so" haben wollen, extrem in Grenzen.
    🙂

  14. Hi,
    das sind nicht: „…viele nette Möglichkeiten“, hört sich irgendwie vorsichtige, zurückhaltend an.
    Mensch, das ist neuere Technik, das ist das was man mal endlich bewerkstelligen kann, nicht so zurückhaltend bitte und nicht so runterspielen, gibt viele die da ernsthaft dran arbeiten!!

    Find ich zumindest.

    gruß
    Don

  15. Klasse Artikel,
    möchte ich so gerne unterschreiben.
    Wenn da nur nicht die Kunden wären die Ihre neue Webseite mit 2 unterschiedlichen Browsern aufrufen, beide Seiten ausdrucken und übereinander legen. Dann gegen das Licht halten und mir vorwerfen die würden nicht deckungsgleich sein. Sorry, habe das selber schon erlebt. Da helfen keine Argumente mehr.
    Aufwände für eine IE Version und eine allgemeine Version (mit Abstrichen bei einigen Browsern) zu beschreiben halte ich für eine sehr gute Idee. Beim Geld werden sie irgendwie alle folgsam 😉

    Gruß
    Günter

  16. Hi,
    nocheinmal,
    ah ok nun nab ich den Artikel gelesen :). Hab da was in den falschen Rachen bekommen, dachte, es ist wieder so ein IE6 Jammerartikel, vonwegen: „oooh, das kann man ja noch nicht benutzen“…“ohhh, der IE6 und was mit ihm machen?“…usw.
    Wenn Text-Boxshadow und runde Boxen in IE nicht funktionieren, ist doch scheissegal, dann geht’s einfach nicht bzw. wird nicht angezeigt. Was soll man da noch gross diskutieren – verstehst was ich meine. Und ausserdem ist ein gutes Design nicht auf diese „Gimics“ festgelegt. Evtl. gib’s in 2 Jahren wieder eine Welle der absoluten bauhausmässigen scharfen Kanten a la „form follows function“, vielleicht wird der Weissabstand das Atmen des Raumes wieder geringer und die Schriftgrösse schrinkt – wer weiss?
    Aber bitte versteh mich nicht falsch: „Runde Ecken“ und co. sind fast das minimalste, was so ein Browser darstellen können soll. Und vor allem sollten wirklich bald mal vernüftig Schriften einzubetten sein, da drückt nemlich am meisten der Schuh. Dann kommt man von der Header auch mal zum Fliesstext mit dem Fontdesign.

  17. Euer Argument ist eigentlich: „Ich habe keine Lust, das zu programmieren, das ist so viel Aufwand, dass es im IE6 gut aussieht.“ oder wie?

    Wenn ich einem Kunden anbiete …

    Webseite HTML/CSS 4.000 €
    IE6-Optimierung 2.000 €

    … hat bisher *jeder* Kunde nach Nachfrage und Erklärung beides beauftragt. Leicht verdientes Geld. 🙂