Internetauftritt - Einer für alle

Ein Webdesign für smartphone, tablet, labtop und desktop

veröffentlicht am: 30.04.13, Autor: Peter Scheel

Responsive Design einer für alle

Die Zukunft hat begonnen und diese Zukunft heißt "mobil". Heute stellt sich nicht mehr die Frage, ob man einen Internetauftritt hat, sondern ob dieser Internetauftritt auf allen Gerätetypen wie beispielsweise smartphone, tablet, laptop oder desktop richtig angezeigt wird.

Die Frage ist, wie erreicht man genau diesen Anspruch. Und diese Frage wollen wir in diesem Artikel nachgehen.

iPhone und sonst gar nichts

Noch vor einigen Monaten bzw. Jahren war die webdesign-Welt noch einfacher: bei den mobilen Geräten gab es eigentlich nichts anderes als das iPhone. Dies setzte den Standard und auf dieses Gerät wurden mobile Internetauftritte zugeschnitten. Man entwickelte einen Desktopauftritt und parallel dazu eine mobile Variante, die für das iPhone optimiert wurde.

Wie gesagt: "war", denn wie so oft hat sich dies in den letzten Monaten radikal geändert. War Apple noch bis vor kurzen Marktführer bei smartphones, so wurde diese, was Absatzzahlen angeht, von Samsung bereits deutlich überholt.

Machen Sie sich einmal den Spaß und schauen Sie sich eine für iPhone optimierte Website auf einem tablet an - schaut nicht immer schön aus!

Der mobile-Markt boomt

Mittlerweile gibt es eine Inflation von mobilen Geräten sowohl im smartphone als auch im tablet Bereich. Es nützt Ihnen nun herzlich wenig, wenn Ihr mobiler Internetauftritt auf iPhones optimiert ist. Denn viele Besucher Ihrer Internetseite werden Sie nun nicht mehr über ein iPhone, sondern vielleicht über ein Samsung Galaxy besuchen wollen.

Immer nur ein snapshot

Was ich Ihnen hiermit klarmachen möchte ist, dass Sie, falls Sie im Webdesign sich auf spezielle Geräteversionen festlegen, immer nur auf den jeweils aktuellen Stand optimieren können. Dies birgt die Gefahr, dass eventuell zukünftige Geräteversionen Ihren Internetauftritt nicht einwandfrei darstellen werden.

Gibt es denn aus diesem Dilemma einen Ausweg? - Ja den gibt es.

Wie kann man unterschiedliche Geräte erkennen?

Zunächst einmal müssen wir schauen, wie Sie überhaupt ein Gerät identifizieren können: Der Browser des Benutzers sendet beim Aufruf einer Internetseite an den Server verschiedene Informationen mit. Unter anderen auch den sogenannten user agent string. Dieser, leider nicht standardisierte, Freitext gibt Auskunft über das Gerät. Beim iPhone 5 sieht dieser beispielsweise so aus:

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Aus diesem Freitext ist nicht einmal bei allen Geräten mit 100%iger Sicherheit zu sagen, ob es sich um ein Mobilgerät handelt!

D.h. Um ein Gerät eindeutig identifizieren zu können, müssen Sie auf eine externe Datenbank zugreifen. Hierfür gibt es zahlreiche Ansatzmöglichkeiten wie zum Beispiel WURFL, php-mobile-detect oder ähnliche.

Meines Erachtens ist dies in der heutigen Zeit mit der Vielfalt der Geräte kein gangbarer Weg mehr. Da diese Datenbanken meist dem aktuellen Technologiestand hinterherhinken und somit die Gefahr in sich bergen, die Geräte nicht richtig zu erkennen und somit nicht richtig zu bedienen. Außerdem kostet der Abruf dieser Datenbank Zeit, die der Benutzer durchaus spürbar beim Seitenaufbau bemerkt.

Egal wer du bist, sag mir nur deine Auflösung

Die Alternative ist, unabhängig vom Hersteller und Geräte Version ein Kriterium zu finden, Internetseiten unterschiedlicher Auflösung aufzubauen. Das Stichwort ist bereits gefallen. Es reicht aus, die native Auflösung des Gerätes in Erfahrung zu bringen. Diese Information wird leider nicht vom Browser an den Server übertragen, kann aber mithilfe eines kleinen Skriptes während des Seitenaufbaus der Internetseite bestimmt werden.

Media Queries und CSS3

Meist ist das nicht einmal notwendig und es reicht aus, mithilfe von CSS3 media queries unterschiedliche CSS Dateien zu laden und so auf unterschiedliche Auflösungen der Geräte reagieren zu können:

<link rel="stylesheet" type="text/css" href="tablet.css" media="screen and (min-width: 481px) and (max-width: 980px)"/>

Obige Anweisung würde zum Beispiel die CSS Datei tablet laden, falls das Gerät, welches die Internetseite anfordert, eine horizontale Auflösung zwischen 481 und 980 Pixeln hätte.

Auf diese Weise lässt sich in Kombination mit einem flüssigen Layout (fluid layout) ein Webdesign aufbauen (responsive design), bei dem eine Quelle für alle Gerätetypen verwendet werden kann. Dies hat meines Erachtens das meiste Potenzial, in Zukunft flexible Internetseiten aufzubauen und ist zur Zeit das Mittel meiner Wahl.

Fröhliches Surfen!

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de