Es gibt sie immer noch: Websites, optimiert für Internet Explorer 6, 1024×768 und „16bit Color“. Doch das Verständnis für das Web und seine Freiheiten hat sich weiterentwickelt. Obige Raritäten sind kein Ärgernis mehr, sondern eine Erinnerung an „gute“, alte Zeiten. Das Web ist frei, standardisiert und zugänglich für jedermann. Selbst Fortschrittsbremsen wie Adobe (Flash) oder Microsoft (IE6, IE7, IE8, Silverlight) scheinen dem Trend zu folgen. Doch sieht die Zukunft wirklich so rosig aus?
HTML-5-Boilerplate und die „Spezialfälle“
Betrachtet man die Websitevorlage HTML 5 Boilerplate kann es einem schon etwas mulmig werden. Allein die Datei index.html, also die Datei, in die die eigentlichen Inhalte gehören, hat vor allem Ergänzungen für Spezialfälle.
Das Starttag <html> wird ersetzt durch:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!-- Consider adding a manifest.appcache: h5bp.com/d/Offline --> <!--[if gt IE 8]><!--> <!--<![endif]-->
Aus 6 mach 363 Zeichen. Und es folgen weitere kleine Tweaks:
- Internet Explorer mit Chrome-Frame laden
- Icons für Apple-Geräte einbinden
- Viewport für Mobilgeräte einstellen
- JS-Modernizr laden
Dies ist ein Auszug aus der index.html. Von der CSS-Vorlage möchte ich gar nicht anfangen: Dort bekommt so ziemlich jeder bekannte Browser sein eigenes Layout-Reset.
Facebook Open Graph
Und der Trend geht weiter. Bei Linux und ich ist zu lesen, wie Christoph folgendes Problem löst:
Google Plus und Facebook das richtige Thumbnail zu euren Artikeln verpassen. Der Grund für das falsche Thumbnail ist einfach und schnell zu beheben: Das Theme fügt den Banner als Img-Element ein. Eine klare Verletzung der Trennung von Inhalt und Layout. Facebook und Google verhalten sich durchaus korrekt, wenn sie ein solch prominentes Bild als Artikelbild ansehen.
Die vorgeschlagene Lösung ist in meinen Augen bedenklich: Christoph beschreibt einen Ansatz mit Facebook Open Graph, einem Protokoll, dass auch den Rest des Webs mit Facebook verknüpfen soll. So kann man auch Facebook mitteilen, welches denn das Artikelbild ist. Und nicht nur das: Auch der Titel des Artikels, seine URL, Sprache und Beschreibung können so notiert werden. Nach Standard- und Dublin-Core-Metaelementen also eine weitere Variante, die eigene Website mit redundanten Daten zu befüllen. Anders als vorher aber nicht einem sinnvollen Standard folgend, sondern den Bedürfnissen eines großen Unternehmens. Und da ist es wieder: „Diese Seite ist optimiert für Facebook.“
Web der Standards? Der Kampf geht weiter…
Schon diese zwei Beispiele zeigen, dass Browser- und Dienstspezialisierung heute wie damals ein großes Thema ist. Wirkte das Web in Zeiten von HTML 4 für Jahre gefestigt, kommen seit Version 5 ständig neue Anforderungen und Wünsche hinzu. Diese werden gern mit proprietären Erweiterungen realisiert. Das muss auch nicht immer schlecht sein. Es sind positive Schübe in richtige Richtungen dabei.
Als Webdesigner muss man sich dieser Trends aber bewusst sein. Es sind Workarounds, keine Lösungen. Und die werden teuer erkauft. Schnell machen ein paar Ausnahmebehandlungen mehr als die Hälfte einer HTML-Vorlage aus. Oder man behebt einen Theme-Fehler mit zwölf Metaelementen und durchschnittlich 1000 Zeichen redundanter Information. Solange es bei „allen“ läuft, mag das für die meisten akzeptabel sein.
Es ist wichtig, dass Standards neuen Anforderungen nachkommen und Notlösungen ersetzen. Dass Suchmaschinenoptimierung bisher Google-Optimierung war, wurde stets stillschweigend hingenommen. Kommen jetzt noch Facebook-, Twitter und Pinterestoptimierung hinzu, wird es problematisch. Lassen sich die Webdesigner darauf ein, werden solche Firmen das auch ausnutzen. Es ist wichtig Grenzen zu ziehen. HTML-Elemente wie <link rel="apple-touch-icon"> oder Facebooks Open-Graph-Metaelemente brechen mit Standards, statt sie zu erweitern. Dies ist der falsche Weg.
Diese Grenzen dürfen nicht überschritten werden. Andernfalls sind am Ende diejenigen, die sich für ein Internet der Standards und der Vielfalt einsetzen, die Verlierer. Und schlussendlich auch alle Nutzer des Webs.
Das Einbinden des Header-Bildes über den img Tag stammt afaik daher, dass die Macher des Templates Elmastudio das Theme „responsive“ halten möchten. Es soll also auf einem Smartphone, wie einem Tablet und auch einem Desktop-PC gut aussehen, ohne dass man extra eine mobile Seite einrichten muss. Wenn ich diese Flexibilität nur durch einen nicht saubere Trennung von Layout und Inhalt erreiche, dann ist das mir bei meinem Template den Stilbruch wert.
Grüße
Christoph
Das stimmt, hier hängt der CSS-Background in seinen Fähigkeiten etwas hinterher. Aber background-size ist ja zumindest vorgesehen (http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size0) und wird von allen großen Browsern (außer so einer proprietären Microsoft-Entwicklung) unterstützt.
Besonders interessant an diesem Fall finde ich aber, dass es eben nicht nur ein Stilbruch ist, sondern zu einem realen Problem wurde (= falsches Bild wird ausgelesen). Das hätte man wohl nie voraussehen, aber durch Einhaltung der Konventionen vermeiden können.
Aber ist das nicht ein Problem der falschen Darstellung durch den Browser? Oder sehe ich das verkehrt?
Wenn der Browser das verkehrt macht, dann ist er doch schuld.
Hm? Es geht zum Beispiel um Google+: Wenn man da einen Artikel verlinkt, holt sich Google automatisch ein Bild von der Seite dazu, um es daneben anzuzeigen. Bei Linux und ich wurde dafür immer der Banner genommen – was natürlich nicht so ganz das ist was man will.
Ich meine, dass mit den background-image. Die Angaben darin kann man doch eindeutig machen. Wenn dein ein Handy nicht damit klar kommt, ist es doch deren Problem.
Background-image ist ja schon alt und sollte überall funktionieren. Damit kann man das Bild auch positionieren.
Hier geht es aber darum, die Größe zu ändern, also es z.B. zusammen zu stauchen, wenn das Display nicht so breit ist. Das ging bisher generell nicht. Mittlerweile gibt es aber wie gesagt background-size, das diese Funktion nachliefert.
Den Handys kann man das schlecht vorwerfen, ist ja CSS 3 und somit noch kein Standard.
Aber dann sind doch die Handys verkehrt. Wenn dich keine 800 Pixel Breite anzeigen können. Hä? Ich verstehe immer noch das Problem nicht.
Wenn ein Div 100% breit ist, ein Handy nur 320 Pixel in der Breite hat, dann ist das Div 320 Pixel breit. Ist das Hintergrundbild aber 600 Pixel breit, wird es mit dem Ende des Divs nach 320 Pixeln abgeschnitten. Das ist korrekt und vom Standard so vorgesehen.
Background-size erlaubt es jetzt aber, auch das Hintergrundbild auf eine Breite von 320 Pixeln zu setzen. Dann wird es nicht mehr abgeschnitten, sondern kleiner gemacht, so dass es vollständig zu sehen ist.
Dann verstehe ich das Problem wohl nicht.
Wenn jemand ein Handy hat, was nur 320 Pixel darstellen kann, dann hat er doch das Problem. Was surft er auch mit so einer Scheiße im Netz?
Oder ihm ist es egal, dass sein Handy die Designs nicht korrekt darstellen kann, dann kann er auch einfach CSS deaktivieren.
Responsive Webdesign geht ja aber gerade dahin, auch auf kleinen Geräten richtig auszusehen. Und das ist ja nun keine Nische, die man ignorieren kann. Und umso kleiner der Bildschirm, umso höher die Anforderungen. Da muss man ja eher die großen Variante ignorieren 🙂
Du redest von diesem Internet? Das wird sich über kurz oder lang eh nicht durchsetzen …
Meinst du, dass die Menschen in Zukunft (mehr als einem Jahr) immer noch Webseiten über Handys angucken? Ich dachte in Zukunft hat jeder so ein Tablett?
Oder wir machens endlich richtig: CSS raus, Semantik rein. Soll doch jedes Gerät selbst entscheiden, wie Inhalte am besten darzustellen sind. Da kommt dann RSS zum Einsatz: Recommended Stylesheets. Da kann man dann Sachen empfehlen: Wenn der Platz da ist, die Netzwerkverbindung es zulässt und der Nutzer nichts dagegen hat, dann füge doch bitte das Firmenlogo logo.png ein. Man darf auch empfehlen ob vor oder nach dem Inhalt, das wird aber von allen Browsern standardmäßig deaktiviert und auf „nach dem Inhalt“ gesetzt.
Alles Blödsinn. Bilder und Farben sind doch Informationsvergeudung.
Videos werden sich auch über lange Zeit nicht durchsetzen. Da bin ich auch stark überzeugt von.