Responsive Webdesign – aber nicht so!

Nachdem Designer Webseiten in Druckformate gezwängt haben und anschließend feststellen mussten, dass nun die Anzeige auf einigen Bildschirmen nicht mehr gut aussieht, soll „Responsive Webdesign“ alles richten.

Dank der vielen Frameworks ist dies auch kein Problem. Die Webseite bekommt den Twitter-Bootstrap übergestülpt, ein paar Anpassungen am CSS und in JavaScript, fertig!

In einigen Fällen sieht es auch so aus, als könnte es funktionieren, aber die Stoplersteine liegen im Verborgenem.

 

positiver erster Eindruck
Eine Webseite hat ca. 3 Sekunden um zu überzeugen: Eins – Zwei – Drei – Chance vorbei!
Die Besucher wollen schnelle Informationen. Wenn innerhalb der ersten Sekunden nicht das Gesuchte angezeigt wird, ist der Besucher schnell wieder weg.

Das Laden der JavaScript-Bibliotheken und umfangreicher CSS-Style-Definitionen kann je nach Gerät und Anbindung an Internet mehrere Sekunden benötigen.

Da hilft es auch wenig, dass der Besucher beim 2. Besuch die Seite schneller angezeigt bekommt, wenn diese Dateien vom Browser gecacht werden.

Wenn die schönen Designelemente in den ersten Sekunden noch gar nicht vorhanden sind, können Sie den neuen Besucher nicht überzeugen.

 

Intuitive Bedienbarkeit
Die intuitive Bedienbarkeit ist Voraussetzung für jede Webseite, unabhängig davon, ob diese „responsive“ gestaltet werden soll oder nicht.

Dafür ist es wichtig, dass weiterführende Links und Buttons als solche erkannt werden.

 

Download-Volumen
Bei getakteten Verbindungen, ist das Download-Volumen ein wichtiger Aspekt. Je nach Tarif wird das Surfen teurer oder die Übertragungsgeschwindigkeit nach Erreichen der Obergrenze gedrosselt.

In beiden Fällen ist es ärgerlich, wenn das Volumen für unnötigen Ballast verbraucht wird.

Dies gilt im Übrigen auch für Werbung. Wer unbedingt ungefragt Werbung einblendet, der sollte zumindest so fair sein, dass er nicht unnötig viel Volumen verbraucht. Es muss nicht gleich das ganze Werbevideo aufgedrängt werden, ein Vorschaubild mit entsprechendem Text reicht durchaus.

Es ist also sinnvoll bereits auf dem Server zu unterscheiden, ob z.B. hochauflösende Grafiken benötigt werden.
Leider gibt es dafür vom W3C und den Browserherstellern keine geeigneten Vorgaben.

Pengiun Jump

„Penguin Jump“ ein Online-Spiel und zugleich eine Demo für die verschiedenen neuen Browsertechniken.

Mit Klick auf den Pinguin springt der Pinguin nach oben, Doppelklick für eine „großen“ Sprung. Einfach loshüpfen, damit der Pinguin nicht in Nichts herunterfällt.

verwendete Technik:

  • JavaScript
  • HTML5
  • Local Storage
  • CSS3
  • Audio
  • XMLHttpRequest

verwendete Bibliotheken und Engines:

  • Crafty – JS – Gameengine

Browsertest:

  • Mozilla Firefox
  • IE 11
  • Opera 26.0
  • Google Chrome 39

Anmerkung:
Die Demo ist eklusiv für Mozilla umgesetzt, so wird z.B.

screen.mozLockOrientation("portrait");

verwendet.

Somit kann die Demo in den anderen Browsern nicht funktionieren. Eine entsprechende Erweiterung ist ggf. möglich.

Quelle: Mozilla Developper Network – Demos

Verwendung in eigenen Projekten:
Die Demo steht unter der Public Domain Lizenz 1.0 zur Verfügung.
Das bedeutet man kann und darf sich den Quelltext anschauen und weiterentwickeln. Der Download steht auf der Entwicklerseite zur Verfügung.

Browserunterstützung testen für die Matheburg

Screenshot Adventskalender
Screenshot Adventskalender
Das Spiel und der zugehörige Adventskalender 2014 verwenden aktuelle Browsertechniken, darunter SVG, CSS3 und html5.

Media-Queries
Für unterschiedliche Geräte können über Media-Queries verschiedene CSS-Eigenschaften vergeben werden. Bei der Verwendung von SVG mit eine Breite von 100%, ist dies nicht extra erforderlich, da sich das SVG passend in die Seite zoomt.

Für alle zusätzlichen Informationen, außerhalb des SVG’s kann es natürlich sinnvoll sein, eine Unterscheidung vorzunehmen.
Die Browserunterstützung für Media-Queries ist sehr hoch.
Details dazu werden demnächst an dieser Stelle dokumentiert.

SVG

Der Internet Explorer unsterstützt SVG‘ s erst ab der Version 9. Die SVG eigenen Programmierung in SMIL ohne JavaScript wird selbst in der aktuellsten Version des Internet Explorers nicht unterstützt. Laut Microsoft ist die Implementierung auch in absehbarer Zeit nicht geplant.

SVG erlaubt zeit- und eventgesteuerte Animationen, die ohne viel Aufwand programmiert werden können.

Da bei einem Online-Spiel ohnehin JavaScript benötigt wird, stellt dies kein unlösbares Problem dar. Die Umsetzung der Animationen im Spiel werden zumindest als Fallback in JavaScript umgesetzt.

Schade!

html5 und css3
Leider gibt es noch weitere Probleme mit dem Internet-Explorer, so wird z.B. die Vorgabe ein Inline-SVG mit 100% Breite darzustellen vom Internet-Explorer ignoriert.

Neugierig? Hier kann man schon mal einen Blick auf den Adventskalender werfen!

Das Problem?Die Herausforderung!

In der Vergangenheit wurden viele Abweichungen im Internet-Explorer mit Bowser Hacks behohen.
Ab dem Internet Explorer 10, werden bedingte Kommentare nicht mehr unterstützt. Schade eigentlich.
Ja der Internet Explorer 10 ist schon ziemlich nah an den anderen Browsern dran, was die Umsetzung des W3C-Standards betrifft, aber knapp vorbei ist eben auch vorbei!

Ab dem Internet-Explore 10 kann ein Hack mit mediaqueries eingesetzt werden:

@media -ms-high-contrast()

Quelle:www.css-hack.de/Internet+Explorer/IE+10

Dieser Hack führt allerdings dazu, dass diese Seite nicht mehr W3C-conform ist!

Der Adventskalender und das Spiel werden serverseitig mit PHP umgesetzt. Somit besteht die Möglichkeit den Browser aus dem Server-Request ($_SERVER) auszulesen.

Aber auch hier hat Microsoft uns neue Steine in den Weg gelegt, denn die Zeichenkette „MSIE“ in $_SERVER[‚HTTP_USER_AGENT‘] vom IE11 nicht mehr übergeben wird.

Für jede Herausforderung gibt es mindestens eine Lösung, auch in diesem Fall.
„Aber Zeit, sehr viel Zeit geht oft dabei verloren!“

Nach dem Internet-Explorer, noch ein Wort zu den anderen Browser im Test:

Ergebnis – Browsertest

  • Internet Explorer (getestet mit IE11 auf Win7 64 bit):
    SVG und CSS3 werden dargestellt.
    Das zu kleine Inline-SVG (Breite: 100%) wird mit einer zusätzlichen ie.css auf eine feste Breite(1000px festgelegt.)

    ToDo: ggf. Anpassung mit MediaQueries für mobile Geräte? Prüfen, ob notwendig!

  • Firefox (getestet mit Firefox 33.0): der Mozilla Firefox hat es gut, ich verwende den Firefox als Entwicklungsumgebung.
  • Opera (getestet mit Opera 25.0 auf Win7 64 bit):Die SVG-Grafik wird richtig dargestellt. Bei CCS3 fehlt die senkrechte Linie bei dem linierten Papier
    .liniert {
    background-color: #fff;
    background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    }

    Wenn statt 100% ein em-Wert, z.B. 40em verwendet wird, wird die senkrechte Linie im Opera angezeigt, allerdings zu dick. Optisch sieht es ohne Linie im Opera besser aus, deshalb ist der Punkt vorerst zurückgestellt.
  • Chrome (getestet mit Chrome 38.0 – auf Win7 64 bit):CSS3-Problem, wie Opera. SVG OK.
  • Safari (getestet mit Safari 5.1.7 – auf Win7 64 bit):SVG OK.
    Der linierte und andere CSS3-Hintergründe werden nicht angezeigt. Diese Version benötigt noch das Browser-Prefix -webkit-.
    Ab Version 7 wird kein Browser-Prefix benötigt. Die aktuelle Version ist 8.

    Für Windows steht aktuell nur die Version 5.1.7 zum Download, da die Entwicklung eingestellt ist.