Nach Monaten (gef\u00fchlten Jahrhunderten) hatte ich wieder Zeit, an meiner Internetseite – diesem Blog genauer gesagt – etwas zu schrauben. Seit IE 6 von Microsoft selbst zu Grabe getragen wurde und IE 9 langsam an Verbreitung zunimmt habe ich etwas unruhig geschlafen. Auch wegen der vielen mobilen Browser…<\/p>\n
<\/p>\n
Die neuen Gestaltungsm\u00f6glichkeiten, die die modernen Browser bieten, und die mobile Front mit ihren 480px Breite machten ein Update notwendig. Bewusst habe ich auf Unterst\u00fctzung von IE6 verzichtet. Stattdessen sollen die webkits dieser Welt besser ausgelastet werden.<\/p>\n
Die neuen M\u00f6glichkeiten werden nicht um ihrer selbst Willen eingesetzt. Es geh\u00f6rt zur Usability, dem Leser eine angepasste und auf seinem Ger\u00e4t gut lesbare Version bereit zu stellen. Man nennt es „responsiv“. Die \u00e4sthetische Wirkung geh\u00f6rt zwar nicht dazu aber es beeinflusst den Leser. (Auf Internetseiten mit ansprechender Optik verweilen die Benutzer l\u00e4nger als auf h\u00e4sslichen. Wie weit diese Tatsache auch die Bereitschaft, l\u00e4ngere Ladezeiten oder andere Unwegbarkeiten hinzunehmen, beeinflusst, ist mir unbekannt. Sch\u00e4tze es aber als f\u00f6rderlich ein.)<\/p>\n
Mein anf\u00e4nglicher Plan, das responsive Framework responsivegs<\/a> einzusetzen, schlug nach einem Testversuch mit einer Kopie der Startseite des Blogs fehl. Die starren Breitenangaben des Grids machten die Erhaltung des Designs (bewusst f\u00fcr die volle Browser-Breite und sehr „rechtslastig“ entwickelt) unm\u00f6glich. Die flexible und ebenfalls responsive Alternative responsify<\/a> erwies sich als sehr praktikabel. Nachdem ich mit dem Generator das Grundsystem erstellt habe, konnte ich das HTML st\u00fcckweise umkopieren und das Ergebnis vergleichen. Die Breiten- und Abstandsangaben in Prozent erlauben die volle Ausnutzung des Platzes im Browser. Leider nicht ganz ohne Probleme: Einige Aufl\u00f6sungen f\u00fchren zum Fehlen eines Pixels in der rechten Spalte. Daf\u00fcr kann das Framework ja nichts… (Nur IE7 bekommt auch eines Sonderbehandlung, weil es sich gewaltig verrechnet.)<\/p>\n Die media-queries waren leider nicht ganz so, wie ich es mir vorgestellt hatte. Ich musste (f\u00fcr die Android-Ger\u00e4te und -Browser, die ich einsetze) etwas nachbessern. Mal ist die Navigation (auf dem Desktop ab ca. 800px rechts) unter dem Artikel zweispaltig (Tablets) und mal einspaltig (Handys). Logo und Slogan bleiben immer oben auf dem Banner mit einem leichten Transparenz-Verlauf des Hintergrunds.<\/p>\n Bei aller Framework-Nutzung und Orientierung an mobilen Ger\u00e4ten (und deren Bandbreiten)… Eines kann keiner ohne eine eigene Version f\u00fcr diese Ger\u00e4te umgehen: das Herunterladen hoch aufgel\u00f6sten Bilder. Die Banner z. B. werden nur teilweise gezeigt aber ganz heruntergeladen… Da habe ich auf media-queries von Modernizr zur\u00fcckgegriffen und setzte dem HTML-Tag eigene Klassen, in der Hoffnung, dass die Browser nicht jede url, die irgendwo im CSS vorkommt, auch herunterladen versuchen. Dazu dient die CSS-Regeln „html.px480 header“, „html.px860 header“ und als default „header“. Bei „header“ suche ich (wie bisher) ein Bild aus und merke mir seinen Namen per Coockie, damit nich auf jeder Seite ein neues Banner-Bild angefordert werden muss.<\/p>\n Ich ergriff die Gelegenheit, die sich durch die Einbindung der Modernizr ergeben, und setzte gleicht auf HTML5. Aside, Footer und Article st\u00f6ren die alten Browser recht wenig. Mit einigen Attributen konnte ich ohne gro\u00dfe M\u00fche sogar den Screenreadern unter die Arme greifen. Per Role-Attribute gibt man den Sehbehinderten die M\u00f6glichkeit, durch die Seitenteile semantisch zu navigieren. Mit einer Tastenkombination soll es angeblich m\u00f6glich sein, sofort die Navigationsleiste oder den Artikelinhalt zu erreichen. (Wenn man sich vorstellt, dass diese Menschen sich ansonten alles erst anh\u00f6ren m\u00fcssen, um sich in der Struktur der Seite zu orientieren, dann nimmt man die Accessibility etwas ernster…)<\/p>\n