Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Website-Konzeption: Mobile first und responsive Sites

Responsives Design

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Erstellung einer Website im responsiven Design stellt die Seite auf sämtlichen Geräten optimal dar. Dieses basiert auf einem Quellcode und ist äußerst wartungsfreundlich und kostensparend.
06:33

Transkript

Sie wissen, mit welcher Vielfalt an Geräten Sie zu rechnen haben und dass diese Vielfalt immer größer wird. Der erste Ansatz damit umzugehen ist, eine eigene mobile Version zu erstellen. Drei Ausprägungen gibt es von dieser mobilen Version. Das Erste ist die MOBI-Seite, zum Beispiel die Domain "www.IhreSeite.mobi". Die zweite ist eine Subdomain, wie "m.IhreSeite.de". Die dritte Variante ist eine eigene App. Möglichkeit eins, also die Domain ".mobi" ist praktisch tot. Die gibt es zwar noch, sie wurde 2006 eingeführt, aber eigentlich wurde sie nie richtig angenommen. Variante zwei, also die Subdomain "m.IhreSeite.de", ist in Ordnung, aber sehr aufwändig und Sie können auch nur unterscheiden zwischen mobil oder nicht. Das ist eigentlich nicht mehr zeitgemäß angesichts der vielen Geräte, die es heutzutage gibt. Die dritte Variante, eine eigene App, ist sehr aufwändig. Diese Arbeit machen sich hauptsächlich Nachrichtenagenturen und Verlage. Wir sehen uns das jetzt bei Spiegel Online an, die haben sich eben hier eine eigene App geleistet und Sie sehen, diese App zeigt mir die Nachrichten gleich perfekt ausgerichtet auf mein Mobilgerät. Alles ist wunderbar lesbar, hat genau die richtige Schriftgröße, da kann ich also alles genau so machen, wie es für dieses Gerät wunderbar funktioniert. Das muss ich dann auch für jedes Gerät einzeln machen. Das heißt, ich muss eine Variante für iOS erstellen, eine für Android und eine für Windows Phone erstellen. Das alles können sich nur Betreiber ganz großer Sites leisten, die sehr viel Zeit und Geld haben. Daher ist die Lösung meistens das responsive Design. Das hat einen Vorteil: Wir haben nur eine Code-Basis. Das ist sehr wartungsfreundlich und weniger fehleranfällig. Ich habe dadurch auch große Kosteneinsparung und es funktioniert auch auf Geräten, die es jetzt noch gar nicht gibt. Alles eine sehr robuste, zuverlässige Lösung. Wir schauen uns jetzt an, wie das aussehen kann, bei den Kollegen von den Cuxhavener Nachrichten. Wenn ich mir diese Webseite einmal auf dem iPad ansehe, dann sehe ich, dass alles wunderschön aussieht, große Bilder, alles schön angepasst. Ich kann einfach durchscrollen und mir die Nachrichten des Tages ganz bequem zu Gemüte führen. Wenn ich auf das iPhone gehe, dann sehe ich auch hier, dass alles angepasst ist. Die Seitenbreite ist eine ganz andere und hier haben wir jetzt ein einspaltiges Layout, verglichen hier mit dem zweispaltigem. Der Platz wird optimal ausgenutzt. Jetzt sehen wir uns zum Vergleich einmal an, wie das auf dem Desktop-Monitor aussieht. Da stellen wir fest, dass das Ganze also dreispaltig ist, die Breite des Bildschirms wird vollkommen ausgenutzt. Zusammengefasst habe ich also eine dreispaltige, eine zweispaltige und eine einspaltige Übersicht jeweils über die neuesten Nachrichten des Tages. Das Ganze basiert aber auf derselben Code-Basis und das ist eben ein echtes responsives Design. Es gibt natürlich Gegenargumente, das eine sind die Ladezeiten. Ich habe erklärt, die Code-Basis ist dieselbe für alle Geräte, das heißt, es wird jedes Mal der komplette Code auf jedes Gerät übertragen, obwohl es ja eigentlich nur ein Teil davon wirklich braucht. Ich habe nicht immer die Möglichkeit, die User Experience direkt an jedes einzelne Gerät anzupassen, sondern ich orientiere mich an der Breite des Bildschirms, was dann schon passen wird. Ist auch meistens so, natürlich gibt es aber Situationen, in denen es nicht passt. Ein weiteres Gegenargument ist, dass eine bestehenden Site aufwändig auf ein responsives Design umgearbeitet werden muss. Eine Alternative ist ein adaptives Design. Da habe ich pro Gerät oder Bildschirmgröße eine Version. Das schauen wir uns jetzt bei der Lufthansa an. Wenn ich die Webseite der Lufthansa auf meinem iPhone aufrufe, werde ich hier mit relativ großen Elementen begrüßt und kann ganz schnell wählen, wo mein Wohnsitz ist. Wenn ich das einmal getan habe und "Weiter" sage, "Deutsch" und "Deutschland" ist auf jeden Fall richtig, dann komme ich auf eine Seite, die speziell angepasst ist. Ich werde hier darauf hingewiesen, dass es eine eigene App hat, aber wenn ich das nicht möchte, komme ich auf eine Site, die speziell für dieses Gerät ist. Schaue ich mir dieselbe Seite von Lufthansa auf dem iPad an, lande ich auf einer Seite, die ganz anders aussieht. Für die Konzepter ist es eine ganz andere Nutzungssituation. Die Leute, die die Seite auf dem iPhone aufrufen, wollen vielleicht nach Ihrem aktuellen Flugstatus sehen, den Flug schnell buchen oder den Check-In machen. Dagegen die Leute, die auf dem iPad arbeiten, die wollen vielleicht allgemein recherchieren, sich inspirieren lassen, den nächsten Urlaub planen und kriegen daher eine ganz andere Experience. Eine weitere Alternative ist RESS, Responsive Webdesign and Server Side Components, nennt sich das. Das ist eine Mischung zwischen responsive und adaptive. Das heißt, hier werden Funktionen, die zum Beispiel nur mobile benötigt werden, nur für mobile von Server ausgeliefert. Dagegen ist das grundsätzliche Design ein klassisches responsives Design. Das W3C, also die Wächter über die Webstandards, empfehlen das One Web. One Web heißt, dass alle Nutzer, soweit sinnvoll, die gleichen Inhalte und Funktionen geliefert bekommen, unabhängig von dem Gerät, das sie gerade nutzen. Die Lösung ist in fast allen Fällen das responsive Design. Nur wenn Sie sehr komplexe Funktionen haben, könnte RESS oder adaptive Design die richtige Lösung sein. Das ist aber normalerweise bei mittelgroßen Sites nicht der Fall. Wenn Sie responsive arbeiten, sind Sie schon sehr viel besser als der Großteil der Betreiber aller bestehenden Websites, denn diese Lösung haben noch nicht sehr viele am Start. Das heißt, für alle kleineren und mittleren Sites ist das responsive Design eigentlich die Technik der Wahl.

Website-Konzeption: Mobile first und responsive Sites

Konzipieren Sie Websites, die für unterschiedlichste Geräte – vom Smartphone bis zum Fernseher – geeignet sind und lernen Sie die Werkzeuge und Programme kennen, die hier zum Einsatz kommen.

1 Std. 32 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:17.12.2014
Aktualisiert am:14.07.2017

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!