Skip to content

ie 10 versteht keine conditional comments mehr

ie 6 - ie 9 conditional commentsJa, ja. Standard und darum nimmt Microsoft dem ie 10 die conditional comments weg. Im Grunde ja richtig, aber bei meinem ersten Test klappte zunächst etwas eben im ie 10 nicht.

Also wie gewohnt, das Stylesheet angelegt, zu

  • ie.css
  • ie7.css
  • ie8.css
  • ie9.css
  • ie10.css ergänzt

"ie 10 versteht keine conditional comments mehr" vollständig lesen

ie8 kann zwar Schatten - aber...

Screenshot ie8 Cursor und Linkproblem bei Einsatz von Microsoftfiltern Ich wollte für ein Design im ie8 (Internet Explorer) Schatten einsetzen, also sowas für die einzelnen Container:

zoom:1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=305, Strength=2);
"ie8 kann zwar Schatten - aber..." vollständig lesen

Merkwürdige Linien in einem Design im Firefox

Firefox Geisterlinien LinuxIch bastelte an einem Design, an einigen Stellen erschienen in meinem Standardbrowser Firefox zuweilen schwarze Linien. An anderen Stellen wirkte es wie eine umliegende Box. Derzeit nutze ich zum Entwickeln den Firefox 15 mit Firebug und dem Webdeveloper.

Ausprobiert hatte ich zunächst die üblichen "Verdächtigen":

...
   border:0;
   background-color: #fff;
...
"Merkwürdige Linien in einem Design im Firefox" vollständig lesen

Responsive Webdesign ::: von mobil bis Riesenmonitor

  • miradlo.com in verschiedenen Auflösungen mit Responsive Webdesignmiradlo.com Auflösungen testen
In den letzten Wochen habe ich mich intensiver mit Responsive Webdesign befasst. Hierbei geht darum, die Inhalte einer Seite möglichst optimal für alle Geräte darzustellen. Egal ob mobiles Smartphone oder großer Monitor mit hoher Auflösung alle Nutzer sollen ein Layout finden, was zu ihrem gerade genutzten Gerät passt. Beim Barcamp Stuttgart habe ich am Samstag eine Session zu diesem Thema angeboten, dieser Beitrag enthält die Links und Infos hierzu. Die Techniken im Hintergrund sind gar nicht so neu, vorgestellt wurde CSS 3 schon vor einigen Jahren.  "Responsive Webdesign ::: von mobil bis Riesenmonitor" vollständig lesen

Formularelemente und vergrößerte Schrift ::: Zugänglichkeit

  • Unlesbare Navigation
  • Teaserinfos laufen in- und übereinander
Fast auf allen Seiten, auch auf ordentlich sauber mit HTML und CSS erstellten, passen die Formularelemente mit meinen Einstellungen nicht. Ein Klick auf die Bilder führt zur vergrößerten Ansicht.

Benutzerdefinierte Mindestschriftgröße

Einerseits habe ich seit Jahren in dem Browser, den ich normalerweise nutze, eine Mindestschriftgröße eingestellt, weil ich sonst auf sehr vielen Seiten, schlicht nichts lesen kann. Hinzu kommt, dass selbst damit inzwischen viele Seiten eine derart schicke, Minischrift haben, dass ich erneut die Schrift vergrößern muss. Einfach wäre die Mindestschriftgröße erneut höher zu setzen, doch das geht leider nicht, denn spätestens bei Seiten mit Formularen, sind damit nur noch sehr wenige überhaupt nutzbar. Oft komme ich nicht mal soweit, weil schon vorher die Benutzung nicht mehr klappt: "Formularelemente und vergrößerte Schrift ::: Zugänglichkeit" vollständig lesen

Flexible oder pixelgenaue Layouts : Ursachen und Gründe

Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen.

onli kommentierte daraufhin recht ausführlich. Beim Schreiben meiner Antwort fiel mir auf, dass es ein bisschen lang wird, deshalb jetzt als eigenen Artikel. onli schrieb:

"Ich bin über die Diskussionen über flexible Layouts immer wieder überrascht. Denn eigentlich führt die Diskussion am Thema vorbei. Das eigentliche Problem dürfte sein, dass CSS in derzeitiger Form ungeeignet ist für das, was ein dynamisches Layout erfordert. Man kann viele Dinge einfach nicht zuverlässig erreichen, die nötig wären: Elementen eine dynamische Größe zuordnen, aber mehreren Elementen immer die gleiche. Nachbarbeziehungen, die über ein float hinausgehen usw usf. Sicher, ich bin kein Profi, aber es scheint mir so, als sei die Ursache der Diskussion dergestalt, dass einige notwendige Layoutanforderungen mit dynamischen Layouts nicht oder nur schwer umsetzbar sind. Die Antwort sind dann aber nicht pixelgenaue Layouts, sondern Verbesserungen am Handwerkszeug. Ich werde mir bei Gelegenheit die verlinkten Videos anschauen, vielleicht beinhalten diese ja Konzepte, die meine obige Argumentation ad absurdum führt, weil damit dann alles so umsetzbar ist wie ich es mir vorstelle. "

"Flexible oder pixelgenaue Layouts : Ursachen und Gründe" vollständig lesen

Heute ganz ohne Spielerei, Design und so... CSS-Naked-Day

  • miradlo bloggt ohne Styles ohne CSS also nacktes HTML
Wie was kein Design? Warum, was ist los?

CSS Naked Day

Einen Tag lang sollen mit der Aktion keine Styles anzuzeigen, Webstandards gefördert werden. Denn ohne Styles, Bilder und Design sieht man den Seitenaufbau genauer. Manche Seiten nutzen den internationalen "ganzen Tag" das bedeutet das CSS bleibt für 48 Stunden aus, damit es weltweit alle sehen können, dann dauert der 9. April halt nicht nur 24 Stunden. Wer sich an Webstandards hält nutzt valides und semantisches Markup in (X)HTML. Die Inhalte sind sinnvoll strukturiert, mit Überschriften, Absätzen, Listen usw. An diese Regeln sollte man sich natürlich immer halten, die Aktion ist nur ein Hinweis um darauf aufmerksam zu machen. "Heute ganz ohne Spielerei, Design und so... CSS-Naked-Day" vollständig lesen

Sorry, die Funktionen dieser Seite können mit Ihrem Browser nicht genutzt werden

Gestern habe ich mal erzählt, was ich glaube wer welches Vorwissen hat. Am Ende stellte ich die provokante Frage:

Sind all diese Menschen es nicht wert, dass sie eine lesbare Webseite bekommen?

Ich finde sie sind es wert.
  • Screenshot IE 6miradlo bloggt im IE6
"Sorry, die Funktionen dieser Seite können mit Ihrem Browser nicht genutzt werden" vollständig lesen

Entschuldigung Ihr Browser ist veraltet...

Ich kenne Kunden, Freunde, Bekannte und so,  für die ist:
  • dieses Google mit dem wählt man sich ins Internet ein
  • da kann man so eine Adresse von einer Homepage eingeben, dann kommt das
  • Webdesigner? Sind das die, die eine Homepage machen?
  • Informatik? Das hat mit Computern zu tun, gell?!
  • ein Blog? Hm, sollte wohl Block heißen, wusste ich doch, dass die in dem Internet auch noch Zettel und Stift brauchen
  • ein Browser? Ähm, ich glaube nicht, dass wir das haben, den Computer hat ein freundlicher junger Mann eingerichtet damals...
  • IE, Internet Explorer? Oh, ja Internet haben wir, das ist mit dem Google, damit wählt man sich da ein.

"Entschuldigung Ihr Browser ist veraltet..." vollständig lesen

Webprojekt-Vorlage für neue Webauftritte

Je nachdem, wie häufig man ein neues Webprojekt startet, bei dem es anfangs zunächst immer um dieselben Grundlagen geht, lohnt es sich, dafür eine Vorlage, ein Basisprojekt, zu erstellen. Wir nutzen inzwischen ein ganzes Basisprojekt, in dem die relevanten Templates und Strukturen bereits enthalten sind. Schritt für Schritt geht es um folgende Vorlagen:

CSS-Vorlage

Wohl die meisten, die häufiger ein neues Projekt beginnen, nutzen ein CSS-Template. Ich ändere diese Vorlagen immer mal wieder, aber im Grunde gehe ich prinzipiell immer von derselben Struktur aus:
  • basis.css in dieser Datei definiere ich Grundelemente, wie z.B. Überschriften, Absätze usw.
  • layout.css diese Datei ist fürs eigentliche Layout zuständig und enthält die Definitionen, der div-Container, wie sie bei uns möglichst immer eingesetzt werden. Ausnahmen gibt es nur, wenn es gar nicht anders geht, ansonsten nutzen wir:
  • spezielles.css alle speziellen Definitionen stehen hier:
    • seien es genutzte Konstrukte, die stabil und browserübergreifend Bilder einbinden
    • die ein oder andere zusätzliche Klasse
    • ein spezieller zusätzlicher Container
  • etwaige sonstige Stylesheets, z.B. für den Druck, zur Anpassung der Internet Explorer per Conditional Comments, oder was sonst eventuell nötig ist
In den Vorlagen dieser Dateien stehen Grundwerte, die so meist benutzt werden. Verändert wird das Layout, individuell sind Logo und Hintergrundbilder, angepasst werden noch Farben und einige weitere Kleinigkeiten pro Projekt. Viel mehr ändert sich jedoch nur selten, denn der Hauptunterschied liegt ja im Layout des jeweiligen Projekts. Grundelemente werden immer benötigt und Farben eben ans Layout angepasst. Der Vorzug einer Vorlage ist, dass ich es dort sofort nachziehen kann, wenn mir bei einem Projekt etwas spezielles auffällt, oder ich mal wieder was vereinfachen kann.

HTML-Vorlage

Eine Vorlage der Grundstruktur bieten natürlich auch bereits die meisten Editoren, z.B. der bei uns genutzte Quanta. Wir setzen jedoch so gut wie nie ausschließlich HTML ein. Meist gibt es entweder noch einige eigene Entwicklungen in PHP oder eine Software wird darüberhinaus eingesetzt.

Software-Vorlage ::: z.B. WordPress-Blog

Je nachdem, was man häufig nutzt, bei uns zur Zeit WordPress, ist es sinnvoll sich auch da die relevanten eigenen Anpassungen als Vorlage zu nutzen. Es gibt eine Reihe von Plugins, die wir üblicherweise nutzen, da sich die jedoch sehr schnell ändern, packe ich ins Basisprojekt nicht alle relevanten Dateien. Keinesfalls gibt es dort das gesamte WordPress, sondern die jeweils aktuelle Version wird genutzt. Extra sichere ich jeweils die in einem Plugin geänderten und angepassten Dateien, nur selten unterscheiden die sich pro Blog, meist sind diese Anpassungen für alle Blogs identisch. Als Vorlage gibt es jedoch das Template, von dem ich üblicherweise ausgehe. Dieses habe ich mir aus der leeren und gut kommentierten Vorlage von texto.de erstellt. Bei gravierenden Änderungen in WordPress schaue ich mir die dort jeweils aktuelle Vorlage nochmal an und passe mein Template an. Das jeweilige Theme ist abhängig vom jeweiligen Blog, bzw. Webauftritt mit WordPress, die Grundstrukturen sind jedoch überwiegend wieder gleich.

PHP-Vorlage

Manches läuft bei uns auch in Projekten, die keine weitere Software einsetzen mittels PHP. Es ist einfach nicht sinnvoll reines HTML zu nutzen, da vieles automatisiert einfach besser geht. Jedes Projekt benötigt eine Navigation, automatisiert wird meist irgendwo ein Datum genutzt, Metadaten die nicht projektspezifisch sind werden für alle Seiten gleich eingebunden, es gibt ein Kontaktformular... Diese Grundlagen, die immer dieselben sind, stehen in unserer PHP-Vorlage. Sobald wir Neues nutzen wird das auch hier nachgezogen, beispielsweise um Spam zu vermeiden, ändert sich regelmäßig etwas.

...noch eine Vorlage?

Ja, eine habe ich noch ;-) Nein, es ist nicht direkt "eine Vorlage" hilft aber trotzdem ungemein:

Layoutbildervorlage

Sinnvoll benannte Layoutbilder bilden zunächst einmal das Gerüst, mit dem bereits ein erstes Design möglich ist. Später können die Bilder einfach reinkopiert werden, unter demselben Namen, damit spart man sich das Anpassen der Pfade. Klappt auch für Favicons, Bilder auf Fehlerseiten und ähnliches, was man häufig nutzt. Falls ich was vergessen hab, oder ihr noch einen praktischen Tipp habt, gerne...

Zoom im Browser ::: Textzoom ::: Seitenzoom ::: Bilder

Dieses Mal mit deutlicher Verspätung, sonst gibt's ja neue Artikel um kurz nach Mitternacht... Gestern reichte es einfach nicht mehr und heute vormittag gab's hier kein Netz. Heute abend wollte ich eigentlich erst noch ein Bild hochladen, bevor ich diesen Artikel veröffentlichte, ich habe irgendwann aufgegeben... Dazu ein anderes Mal mehr, hier ist es bereits eine Stunde später (2:14 Uhr) und morgen früh wollen wir ans Tote Meer... Inzwischen gibt es ja bereits einige Monate den Firefox mit Seitenzoomfunktion, nicht nur mit dem Textzoom. Der Internet Explorer 7 hat diese ursprünglich zuerst bei Opera angebotene Funktion ja ebenfalls, allerdings in einer Form, die völlig unsinnig gelöst wurde.

Wozu überhaupt Seitenzoom?

Nun, den Textzoom gibt es ja schon lange, selbst im Internet Explorer 6, lässt sich die Schrift zweimal vergrößern, falls die Angaben zur Schriftgröße in Pixeln angegeben wurden. Die anderen Browser vergrößern schon lange unabhängig davon in welcher Einheit die Schriftgröße angegeben wurde. Auch gibt es keine Beschränkung des Zooms, falls das Layout es zulässt kann unbegrenzt der Text vergrößert werden.

Ist Seitenzoom dann nicht überflüssig?

Das kommt drauf an. Je nach Layout vergrößert sich mittels Textzoom ja tatsächlich ausschließlich der Text, eine, z.B. auf - 800 Pixel Breite beschränkte - Seite kann somit nicht breiter als eben diese 800 Pixel werden. Das heißt, selbst wenn auf dem Bildschirm genug Platz wäre, um mittels Textzoom vielfach zu vergrößern, so klappt es häufig nicht, weil der vergrößerte Text keinen Platz mehr hat. Siehe auch die Unterschiede zu festem und flexiblem Layout. Andererseits lassen sich flexible Layouts entwerfen, bei denen die Angaben für die Breite, in Abhängigkeit der genutzen Schriftgröße, gemacht werden. In diesem Fall lässt sich eine Seite bei höherer Auflösung auch entsprechend vergrößern. Wäre die Grundbreite bei etwa 800 Pixel, aber in 'em' angegeben, dann ließe sich bei einer Auflösung von 1600 die doppelte Breite nutzen, die Schrift könnte also extrem vergrößert werden und noch immer müsste nicht gescrollt werden.

Warum entwerfen also nichthref="http://miradlo.net/bloggt/index.php?136-s"">festem und flexiblem Layout. Andererseits lassen sich flexible Layouts entwerfen, bei denen die Angaben für die Breite, in Abhängigkeit der genutzen Schriftgröße, gemacht werden. In diesem Fall lässt sich eine Seite bei höherer Auflösung auch entsprechend vergrößern. Wäre die Grundbreite bei etwa 800 Pixel, aber in 'em' angegeben, dann ließe sich bei einer Auflösung von 1600 die doppelte Breite nutzen, die Schrift könnte also extrem vergrößert werden und noch immer müsste nicht gescrollt werden.

Warum entwerfen also nicht alle solche flexiblen Layouts?

Es wäre doch perfekt grundsätzlich flexible Layouts anzubieten, damit alle Besucher genau das einstellen können, was für sie am besten passt. Warum tun das also nicht alle Webautoren? Der Hauptgrund ist, dass damit die pixelgenaue Kontrolle verloren geht. In einem festen Layout mit fixer Breite können Webautoren beispielsweise Hintergrundbilder nutzen, die auf den Pixel genau zueinander ausgerichtet werden. Insbesondere Grafikdesigner, die sich auch mit Druckerzeugnissen befassen, wollen häufig auch bei Webseiten ein absolut exaktes 'Bild' erhalten. Entworfen wird daher meist ein Bild, so als wäre es für ein Plakat oder eine Broschüre. Das Problem ist jedoch, dass Webseiten keine Druckerzeugnisse sind. Im Druck weiß man ganz genau welche Größe das Endprodukt haben wird, der Entwurf wird genau dafür optimiert. Das Web ist jedoch kein Druck und hier gibt es unzählige Variationen Für den Designer ärgerlich, für die Besucher von der Idee her traumhaft, kann ich im Web, an meinem Rechner aussuchen, was für mich persönlich am besten ist. Die einen haben zwar einen großen Monitor, aber eine niedrige Auflösung, andere nutzen einen kleineren Bildschirm, z.B. am Laptop mit einer höheren Auflösung. Mancher kann auch sehr kleine Schriften noch gut lesen, andere wollen am eigenen Rechner nicht mit der Lupe arbeiten und stellen sich ihre Schriftgrößen deshalb mehrfach vergrößert ein.

Flexibilität von Webseiten

Grundsätzlich schätze ich die Flexibilität, die Webseiten bieten, die Möglichkeit eine Seite eben je nach Wünschen und Voraussetzungen des Lesers anzuzeigen.

Bilder skalierbar einbinden

Für diejenigen, die sich alles vergrößert anzeigen lassen, wären daher höher aufgelöste Bilder ein Vorteil. Leider hat das jedoch auch Nachteile:
  • übertragene Datenmenge
  • Ladezeit
Die übertragene Datenmenge wäre bei hochauflösenden Bildern, dann ja auch für diejenigen größer, die die Bilder in kleinerem Format betrachten. Da sich häufig gerade die, die eine schlechtere Verbindung haben, nicht aussuchen können, ob sie eine bessere und schnellere Verbindung möchten, mag ich schon das nicht. Die Ladezeit ist das nächste Problem. Sie vergrößert sich logischerweise schon mit der größeren Datenmenge. Hinzu kommt noch, dass ich den Bildern, um sie skalierbar zu halten auch nicht die Größenangaben mitgeben kann, sonst skaliert da nichts. So schön die Idee also einerseits ist, so schwierig finde ich die Entscheidung. Bei Websites mit sehr wichtigen Bildern, beispielsweise bei der Seite einer Malerin war der Kompromiss jetzt Galerien einzubauen, die Vorschaubilder aus den eingebundenen Bildern zeigen. Diese Bilder sind noch immer stark fürs Web optimiert. Es gibt jedoch eine zusätzliche Galerie, die Bilder in recht hoher Auflösung anbietet, aber erst wenn sich jemand auch dafür entscheidet. Diese Lösung gefällt mir ganz gut, denn so werden die mit sehr langsamer oder schlechter Verbindung nicht zu hochauflösenden Bildern gezwungen. Diejenigen, die jedoch interessiert sind und genau schauen wollen, die haben die Möglichkeit, das zu tun.

Skalierbare Hintergrundbilder

Je nach Größe eines Hintergrundbilds besteht für mich dasselbe Problem, wie bei im Quellcode eingebundenen Bildern. Klar, manches Hintergrundbild wäre auch in skalierbarer Version klein genug, um das Problem zu umgehen. Im Moment bevorzuge ich Layouts mit sich wiederholenden Hintergrundbildern auch im Kopfbereich, z.B. henss.eu damit muss das Hintergrundbild nicht skalierbar sein, um trotzdem mit verschiedenen Auflösungen noch gut zurechtzukommen. Beides sind trotzdem natürlich rein dekorative Bilder, bei denen es nicht so wichtig ist, ob sie in optimaler Qualität sichtbar sind, mit zweifacher Zoomstufe im Firefox sah es bei meinen Tests auch noch ganz gut aus. Was ich nicht mag, sind feste Layouts, optimiert, z.B. auf 800*600, bei denen ich dann mit meiner Auflösung einen zu zweidrittel leeren Bildschirm habe.

Unterm Strich

Die Möglichkeit Hintergrundbilder zu nutzen, statt Bilder in den Quelltext einzubinden finde ich gut. Denn, ich finde es klasse, dass sich inzwischen die rein dekorativen und nur fürs Layout nötigen Bilder, im Hintergrund einbinden lassen und eben nicht im Quellcode.

Das bietet ja mehrere Vorteile:

  • die Ladezeit ist geringer, weil - zumindest die meisten - Browser ein Layoutbild dann auch mehrfach nutzen
  • bei geschicktem Einsatz, lässt sich oft sogar ein und dasselbe Bild für mehrere Bereiche des Layouts nutzen, weil es passend verschoben wird
  • aufs Laden von Hintergrundbildern kann bei langsamen Verbindungen verzichtet werden
Deshalb meine ich, auf Dauer muss es da noch bessere Wege geben, und wie auch Dieter in seinem Kommentar schon schrieb, die Möglichkeit auch Hintergrundbilder zu skalieren, sollte geschaffen werden. Denn sonst führt es irgendwann wieder zu Murks. So wie Tabellen für Layouts genutzt wurden, weil es nichts anderes gab, werden sonst womöglich irgendwann wieder Bilder in den Quelltext eingebunden, um sie skalierbar anbieten zu können. Das halte ich jedoch, aus den genannten Gründen, für eine schlechte Lösung.href="http://miradlo.net/bloggt/index.php?46-s"">Dieter in seinem Kommentar schon schrieb, die Möglichkeit auch Hintergrundbilder zu skalieren, sollte geschaffen werden. Denn sonst führt es irgendwann wieder zu Murks. So wie Tabellen für Layouts genutzt wurden, weil es nichts anderes gab, werden sonst womöglich irgendwann wieder Bilder in den Quelltext eingebunden, um sie skalierbar anbieten zu können. Das halte ich jedoch, aus den genannten Gründen, für eine schlechte Lösung.

Webdesign ::: Checkliste um Webauftritte und Blogs zu testen

Wer Webseiten erstellt oder verschiedene Themes in Blogs einsetzt, sollte vor allem bei neuen Layouts, aber auch bei Änderungen testen. Es gibt die unterschiedlichsten Arten das zu tun, wir bei miradlo nutzen dazu eine Checkliste, um nichts zu vergessen. Einer der wichtigsten Punkte bereits während des Erstellens neuer Webseiten sind die regelmäßigen Prüfungen in den Validatoren, Validator-Links siehe Glossar zu Validatoren. Wir passen unsere Checkliste immer mal wieder an, der ein oder andere hat sich auch weitere eigene Punkte notiert oder diese Liste ergänzt. Unsere Liste ist aufgeteilt in Gruppen von Tests:

Benutzerfreundlich

  • nur soviel Pflichtfelder wie nötig, nicht gleich den Stammbaum, nur um Kontakt aufzunehmen
  • nicht eindeutige Linktexte mit zusätzlichem title, klar unterscheidbare verschiedene Namen für Links (nicht zehnmal "mehr" oder "weiterlesen")
  • spezielles CSS für print und handheld (klappt aus Zeitgründen grad noch nicht immer)
  • Sitemaps sobald der Auftritt eine umfangreichere Navigation hat (bei einem 10-Seiten-Auftritt ohne Unternavigation halte ich eine Sitemap für überflüssig)
  • Fehlerseiten mit vollständiger Navigation (error und forbiddeen für 404, 401 und 403)
  • favicon zur Orientierung
  • fremdsprachige Texte bekommen z.B. ein <div lang="en"></div> (allerdings bei "denglischen" Begriffen spare ich mir das)
  • Links haben verschiedene Auszeichnungen für ihre Zustände (visited, hover, focus, active sind unterscheidbar definiert, so dass sich besuchte Links unterscheiden und auch bei Tastaturnavigation erkennbar ist, bei welchem Link man grad steht)

"Webdesign ::: Checkliste um Webauftritte und Blogs zu testen" vollständig lesen

Progressive Enhancement ::: CSS 3 einerseits jedoch IE 6 andererseits

Progressive Enhancement? im Deutschen könnte man stufenweise Verbesserung oder Erweiterung des Layouts dazu sagen. Hinter diesem Begriff verbirgt sich ein Konzept sich beim Design nicht mehr an den ältesten Browsern zu orientieren und nur zu nutzen, was auch diese umsetzen, sondern Stück für Stück auch kleine Extras für moderne Browser einzubauen. Einen guten Artikel mit Beispielen dazu gibts bei Dieter.

PNG-Transparenz und hover einsetzen

  • Firefox Standardansicht
  • winkt mittels hover im Firefox
  • IE 6 graue Kästen statt Transparenz
In den Sonnenseiten der Webkrauts berichtet Nicolai Schwarz über eine Spielerei bei Qwitter mit den CSS-Sprites. Wie in den Abbildungen des Firefox zu sehen ist, winkt das Männchen. Realisiert wird das schlicht mittels eines Hover-Effekts durch CSS-Sprites, wie es beispielsweise im Artikel von Stefan David beschrieben wird. Eine schöne und einfach ohne JavaScript umzusetzende Spielerei. Die Designer von Qwitter beschlossen, dass sie sich nicht die Mühe machen mit zusätzlichem Aufwand einen ähnlichen Effekt im IE6 zu erzielen. Wie auf dem Screenshot des IE 6 zu erkennen ist, haben die Bilder des Gesichts, des Arms und des Logos PNG-Transparenzanteile, die dieser nur als grauen Hintergrund darstellt. Der Hovereffekt klappt hier ebenfalls nicht, denn der IE 6 akzeptiert hover ausschließlich für Links. Klar, kann man darüber diskutieren, dass die Nutzer des IE 6 hier nicht dasselbe geliefert bekommen. Allerdings wäre es in diesem alten Browser (so grade eben aus diesem Jahrtausend) nur mit sehr viel mehr Aufwand und nicht ohne JavaScript lösbar. Für einen netten, aber inhaltlich nicht notwendigen Effekt ist solch ein Aufwand wohl kaum gerechtfertigt. Die meisten Webentwickler verwenden seit Jahren mehr Zeit für die Anpassungen an den IE 6, als für jeden anderen Browser. Fast alle anderen Browser orientieren sich an den Webstandards und benötigen nur selten einmal spezielle Anpassungen. Insbesondere der IE 6 ist jedoch deutlich aufwändiger von vielen Designideen zu überzeugen, siehe auch den Beitrag Webstandards oder Internet Explorer.

Webseiten für den IE 6

Manch eine Webseite für speziell für den IE 6 erstellt und funktioniert auf keinem anderen Browser richtig. Leider ist es je nach Webauftritt jedoch noch immer eine große Zahl an Besuchern, die den IE 6 nutzen.

Warum nutzen immernoch so viele den IE6?

Wie schon im Artikel über das Metatag für den IE 8 beschrieben, viele Entwickler schrieben ihre Webapplikationen lange Zeit ausschließlich für den Marktführer, also über einige Jahre speziell für den IE 6. Da dieser sicher kaum an Standards hält funktionieren viele Anwendungen ausschließlich mit dem IE 6 oder mit einem Nachfolger, der sich so verhält, als sei er ein IE 6. Applikationen sind teuer, daher benutzen noch viele Firmen den IE 6, um die darauf angepassten Programme nutzen zu können. Hinzu kommen all die Besucher, die eine ältere Windowsversion, wie Windows 2000 nutzen, denn für dieses Betriebssystem wurde leider keine Version, des deutlich standardkonformeren IE 7 angeboten.

Warum sollte man den IE 6 überhaupt noch berücksichtigen?

Klare Sache, wegen seines Marktanteils. Inzwischen ist er zwar weit davon entfernt noch Marktführer zu sein, wie das lange der Fall war. Einen großen Teil hat der IE 7 übernommen, jedoch auch seit Einführung des Firefox (Hinweis an die Jüngeren: ja, es gab eine Zeit mit Internet und ohne den Firefox;-) ) verlor der Internet Explorer deutlich an Bedeutung. Inzwischen werden viele Diskussionen geführt, was man tun könnte, um den IE 6 endlich loszuwerden. Manch einer hat die Nase voll und liefert zumindest bei eigenen Seiten für den IE 6 nur noch den reinen Text aus. Andere passen ihr Layout teilweise an und liefern an den IE 6 mit einem Hinweis auf den Firefox-Download aus. Für Kundenseiten bleibt den meisten bislang kaum etwas anderes übrig, als das jeweilige Layout weitgehend auch für den IE 6 anzupassen. Rund 20% Besucher, die nach wie vor den IE 6 nutzen, sind auf manchen Seiten keine Seltenheit.

Lösung durch Progressive Enhancement

Aus obigen Gründen, ist es meist nicht möglich völlig auf die Darstellung im IE 6 zu verzichten. Statt jedoch bei Layoutentwürfen nur darüber nachzudenken, wie etwas auch im IE 6 umgesetzt werden kann, bietet es sich an schrittweise vorzugehen. Schritt- oder stufenweise ist es wie im genannten Beispiel durchaus möglich bereits zusätzliche Verbesserungen und Erweiterungen einzuführen, ohne dass der IE 6 völlig vernachlässigt wird. In CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.href="http://miradlo.net/bloggt/index.php?3206-s"">CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.
tweetbackcheck