Responsive Webdesign – Grundlagen

Klassisch: Separate mobile Web-Seiten

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In früheren Zeiten hat man separate Web-Seiten für mobile Geräte erstellt. Diese basieren darauf, dass man ausliest, was für ein Gerät die Seite anfordert und dann eine angepasste Version ausliefern lässt.

Transkript

Die klassische Methode im Umgang mit den unterschiedlichen Geräten ist es, separate Versionen für die unterschiedlichen Geräteklassen zu definieren. Das heißt, etwa eine Version für Desktop, Laptops, eine für Tablets und eine für Smartphones. Das basiert üblicherweise darauf, dass man den User Agent, das heißt die Browser-Kennung ausliest. Und dann die jeweils ermittelte Version ausliefert. Wenn Sie das einmal testen können, dann können Sie den User Agent verändern in Ihrem Browser. Das geht beispielsweise mit Safari und Chrome direkt. Und bei Firefox gibt es dieses Plugin, wo ich gerade die Seite aufgerufen habe. Und wenn Sie das installiert haben, dann haben Sie einen zusätzlichen Menüpunkt, wo Sie den User Agent ändern können. Hier sind nur ein paar vorgegeben, Sie können noch weitere hinzufügen. Ich habe es hier mal auf iPhone eingestellt. Ich könnte ja auch natürlich eine neuere iPhone-Kennung hier ergänzen. Und wenn Sie dann eine Webseite aufrufen, die Anpassungen vornimmt aufgrund des User Agent's, dann sehen Sie die andere Version. So ist es beispielsweise bei der Lufthansa. Das ist die mobile Version von der Lufthansa. Hingegen hier sehen Sie die normale Version, also die Desktop-Variante der Lufthansa, die ganz anders aufgebaut ist. Schauen wir uns die mobile Version einmal genauer an. Hier muss ich erstmal sozusagen angeben: Sprache und Land und so weiter. Und dann ist das reduziert hier auf die Punkte, wo Lufthansa davon ausgeht, dass es die wichtigsten sind, wenn man mobil unterwegs ist. Was ist das Gute, was ist das Schlechte an dieser Herangehensweise? Vorteil von eigenen mobilen Versionen ist natürlich, dass Sie die Quellcodeanordnung ganz frei gestalten können und wirklich optimieren können, für kleine Review-Ports beispielsweise. Sie können auch optimierte Bilder bereitstellen, die genau die richtige Größe haben. Sie können eventuell auch besondere Inhalte für Smartphones bereitstellen, wenn Sie einen Hinweis machen wollen, auf eine App, die es auch gibt. Dann wäre das natürlich ein guter Platz. Es gibt aber auch eine Reihe von Problemen mit solchen separaten mobilen Webseiten. Die Zuordnung, ob etwas jetzt die mobile Version kriegen soll, oder die normale Desktop-Variante, geschieht aufgrund des User Agent's, das ist eine Kennung, die der Browser sendet. Und diese Kennung ist relativ kryptisch. Es gibt immer neue Versionen, die neue Kennungen senden und man kann sich dabei einfach auch vertun. Das heißt, es kann passieren, dass man einem mobilen Gerät die Desktop-Variante sendet oder umgekehrt. Deswegen ist es auf jeden Fall auch immer wichtig, dass wenn man so etwas macht, dem Benutzer die Möglichkeit gibt zu wechseln. Hier finden Sie den Punkt, zum Beispiel zur Webseite bei der mobilen Version. Und bei der Desktop-Variante finden Sie hier den Punkt Mobile Version, worüber Sie auch wechseln können. Was ein weiterer Problempunkt sein kann, ist dass Sie häufig die mobile Variante mit reduzierten Features vorfinden. Das heißt, dort ist nicht so viel möglich, wie auf der in Anführungszeichen normalen Seite. Und das ist natürlich an sich problematisch, denn Sie wissen eigentlich nie genau, welche Features der Benutzer wirklich braucht. Und außerdem kann es auch sein, dass der Benutzer nicht jetzt ein mobiler Nutzer ist, wie man das sich so klassisch vorstellt, der gerade an der Bushaltestelle steht und noch schnell was nachschauen muss bevor er in den Bus einsteigt. Der mobile Nutzer könnte ja auch jemand sein, der gar nicht mobil ist, sondern auf seiner Kautsch liegt und nicht gerade hoch zum PC gehen will, und deswegen schnell auf dem Smartphone etwas nachschaut, oder vielleicht auch gemütlich auf dem Smartphone etwas nachschaut. Und dann ist die Frage: warum soll der weniger Features haben? Außerdem gibt es auch immer mehr Nutzer, für die das Smartphone sozusagen die normale Zugangsmöglichkeit fürs Internet ist, wo das nicht einfach die zusätzliche Möglichkeit ist, sondern die normale Version und die normale Art ins Internet zu gehen. Und dann ist natürlich auch problematisch, wenn man da die Features reduziert. Ein weiteres Problem ist, dass die Umleitung oft nicht gescheit funktioniert. Das heißt, Url's werden natürlich verschickt, per E-Mail, werden bei Twitter gepostet oder sonst etwas. Und wenn dann es keine direkte, richtig gemachte Umleitung ist, dann kann es passieren, dass jemand einen Link auf eine Desktop-Seite bekommt, er geht mit dem mobilen Gerät drauf und wenn das grade schlecht gemacht ist, dann ist es wirklich was, wo man die Nutzer sehr ärgert. Dann führt man die Nutzer auf die Startseite der mobilen Version. Oder es kann auch passieren: Sie kommen zwar auf die richtige Seite, aber der Text, um den es eigentlich geht, der ist in dieser Version gekürzt, äußerst unschön. Was so alles schief gehen kann bei mobilen Versionen oder bei Web-Seiten für mobile Geräte überhaupt finden Sie immer aktuell in dieser sehr schönen Seite hier: WTF Mobile Web, wo Sie viele Informationen da finden und sehen, sich einfach inspirieren lassen können, was Sie nicht machen sollen. Also, hier zum Beispiel klassischer Fall von dieser Kennung ist, dass man annimmt: "Ok, das ist iOS, das ist auf jeden Fall jetzt ein iPhone und dann biete ich dem eine besondere Funktionalität auf". Stimmt aber in diesem Fall gar nicht, weil es ein iPad ist. Das ist natürlich ein blöder Fall. Es gibt weiter andere Sachen, die ganz klassisch sind, schief gehen können - ist dass man hier ein Button hat, wo man irgendwas sich anhören kann, aber es setzt auf, vielleicht Flash, keine Ahnung was und das funktioniert nicht. Das ist natürlich sehr ungünstig und Sie sehen hier auch Beispiele. Was Sie einfach wirklich nie machen sollten, ist dem Benutzer vorzuschreiben, dass er sein Smartphone irgendwie drehen soll, weil es dann besser aussieht. Also, der Benutzer hat die Kontrolle darüber und die sollte man ihm lassen. Und wir müssen unsere Webseiten so anpassen, dass es auch funktioniert. Wenn Sie statt einer mobilen Web-Seite eine Web-Seite nach dem Responsive Web Design erstellen, dann treten bestimmte Probleme einfach gar nicht auf. Sie machen normalerweise bei einer Web-Seite nach dem Prinzip des Responsive Web Design keine Ermittlung aufgrund des User Agents, deswegen kann da auch nichts schief gehen. Sie reduzieren auch keine Features, deswegen ist das auch kein Problem. Und die problematische Umleitung, dass jemand eben einen Link schickt von einem Gerät und das im anderen Gerät, der dann nicht funktioniert - das Problem haben Sie auch nicht, weil beim Responsive Web Design dieselbe Basis immer ausgeliefert wird. Trotzdem haben so separate mobile Web-Seiten auch ihre Berechtigung. Beispielsweise, wenn Sie nichts an der bestehenden Web-Seite ändern können, aber trotzdem etwas brauchen, womit mobile Nutzer oder Nutzer von Smartphones besser umgehen. Oder, wenn Sie beispielsweise einen ganz anderen Kontext berücksichtigen müssen. Bei den mobilen Nutzern Beispiel wäre: Sie wollen eine Abstimmung machen, während einer Veranstaltung. Dann wäre das natürlich sinnvoll das wirklich für die mobilen Nutzer zu optimieren, weil niemand sonst diese Version braucht. Das war ein kleiner Einblick in die Möglichkeiten, separate mobile Versionen zu erstellen. Das Wichtigste ist immer: diese automatische Umleitung funktioniert aufgrund von User Agent's und da kann man sich natürlich auch täuschen und es kann eine falsche Zuordnung geben.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!