Website-Konzeption: Mobile first und responsive Sites

Querformatversion erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In einzelnen Fällen erfordert eine Website im responsiven Design die Erstellung einer Version im Querformat für Smartphones und Tablets.
08:59

Transkript

Jetzt haben wir also die Wireframes für die Smartphone-Version, Tablet-Version und Desktop-Version erstellt. Das ist schon einmal ganz gut, aber wie Ihnen sicher aufgefallen ist, fehlt eigentlich noch etwas. Und zwar kann ich mein Smartphone oder Tablet auch quer halten. Das heißt, ich habe dann ein Querformat, wo dann deutlich mehr Platz in der Breite, aber weniger Platz in der Höhe ist. Um die Höhe macht man sich normalerweise nicht so sehr Gedanken, das ist dann halt so, wie es ist. Über die Breite muss man sich aber fast immer Gedanken machen, wie das dann aussieht. Der Trick ist, dass man normalerweise sagen kann, wenn man das Smartphone quer hält, funktioniert es wahrscheinlich auch ganz gut in dieser Ansicht. Das heißt, auf dem Smartphone wird im Querformat dann einfach die Tablet-Version verwendet. Wie Sie sich denken können, funktioniert es für das Tablet ähnlich mit der Desktop-Version. Wenn ich das Tablet quer halte, dann zeige ich einfach die Desktop-Version. Das geht in vielen Fällen ganz gut, manchmal klappt es auch nicht ganz so gut, wenn ich nämlich zum Beispiel hier die Buttons bekomme, die für die Desktop-Version optimiert sind, die kleiner sind und anders funktionieren als die für das Tablet, die zum Tippen sind. Wenn ich auf einmal Buttons kriege, die zum Klicken sind und mit der Maus gesteuert werden sollen, dann funktioniert das Ganze natürlich nicht so gut. Das heißt, es gibt durchaus Fälle, wo es sinnvoll ist, noch mehr Versionen zu machen, in denen man die Querversion eigens berücksichtigt. In vielen Fällen aber sind Sie mit diesen drei Größen eigentlich gut bedient und decken damit vieles ab. Ein generelles Problem, was sich nicht umgehen lässt, ist, dass Sie beim responsiven Design eigentlich immer die Fenstergröße, am meisten die Fensterbreite messen. Die Breakpoints, die Sie festlegen, die schauen einfach, wie breit das Fenster ist und demnach verwenden sie die eine oder andere Version. Wir sehen uns das jetzt einmal an auf Time.com. Wenn ich einfach hier mal die Größe meines Fensters ändere, dann sehe ich, dass etwas umschnappt. Bei dieser Ansicht wird einfach die graue Titelleiste ausgeblendet, weil man davon ausgeht, dass Leute mit so kleinen Fenstern wahrscheinlich auf dem Tablet unterwegs sind. Die muss man nicht unbedingt mit diesen Zusatzhinweisen in der grauen Leiste belästigen. Wenn ich noch weiter hineingehe, das Fenster noch kleiner mache, wird alles ganz langsam kleiner, da schnappt es noch einmal um. Das ist jetzt wahrscheinlich die Ansicht, die für das Smartphone gedacht ist. Wenn ich es noch kleiner mache, sehe ich das Problem, dass diese Tap-Leiste, als wo "TAP" steht, jetzt auch auf meinem Desktop-Browser ist. Das Ganze ist natürlich nicht so schön, ich kann hier nicht tappen, wenn ich keinen Bildschirm habe, der am Desktop berührungssensitiv ist, sondern ich muss klicken. Das geht schon, es ist sozusagen ein inhärentes Problem, das werde ich nicht los, man nimmt es einfach in Kauf, weil man sagt, man macht ein responsives Design und misst einfach die Breite des Fensters. Das ist auch gar nicht so schlecht, denn wenn ich mehrere Fenster nebeneinander haben möchte, das Fenster aber nun mal so schmal ist, dann ist diese Ansicht hier auf dem Desktop eine, die hervorragend funktioniert. Deshalb nimmt man das auch in Kauf, da die Website auf allen Geräten so gut zu bedienen ist und es auch auf dem Desktop funktioniert, sodass man wegen der großen Vorteile einfach bei dieser Technik bleibt. Was man außerdem zu Testzwecken umstellen kann, ist der sogenannte "User Agent". Der User Agent ist sozusagen eine Kennung des Browsers, bei dem der Browser dem Server, bei dem er sich die Website abholt, sagt, wer er ist. Hier würde der Firefox zum Beispiel sagen, "Ich bin der Firefox in der Version 29, gib mir doch einmal die Daten, die dafür gedacht sind." Ich habe hier ein kleines Plug-In installiert, den User Agent Overrider. Die anderen Browser, wie zum Beispiel Chrome oder Safari können das standardmäßig, der Firefox aber braucht ein kleines Plug-In. Aber wenn ich das habe, funktioniert es hier ganz genauso. Wir schauen einmal hinein und sehen, dass der Browser sagt, "Mac/Firefox 29". Gehen wir einmal auf eine andere Seite, die der Lufthansa. Die schauen wir uns jetzt an. Hier sehen wir sie. Ich öffne dieselbe Seite noch einmal, nachdem ich vorher meinen User Agent umgestellt habe, und gesagt habe, dass er sich als iOS-Gerät ausgeben soll, zum Beispiel als Safari 7. Ich gebe noch einmal genau dieselbe Seite ein und stelle fest, dass mir etwas ganz anderes angeboten wird. Das heißt, hier sehe ich, dass sie kein responsives, sondern ein adaptives Design verwendet haben. Sie schauen also genau, welcher Browser kommt und geben dann je nach Gerät eine unterschiedliche Website aus. Das ist möglich und schön, aber sehr aufwändig und ist daher dem responsiven Design nur vorzuziehen, wenn man viel Zeit und auch genügend Geld hat, um sich eine doppelte Version leisten zu können. Sie sehen also, es gibt sehr viel zu bedenken. Perfektionisten tun sich bei diesem responsiven Design sehr schwer, Sie sollten alles nur so anlegen, dass es nach etwas aussieht und benutzbar bleibt, aber von pixelperfektem Layout müssen Sie sich verabschieden. Es ist manchmal schwer, den Kunden davon zu überzeugen, dass man nicht die volle Kontrolle über das Aussehen der Website auf jedem Gerät hat. Was bei mir immer am besten funktioniert: Nehmen Sie einfach zwei, drei Geräte mit, zeigen Sie ihm darauf verschiedene Websites und er wird sehen, das kann man einfach nicht leisten. Man kann nicht für jedes Gerät die Website so anpassen, dass es überall genauso aussieht, wie man es sich vorstellt. Man kann aber mit responsivem Design sehr wohl dafür sorgen, dass es überall gut aussieht und gut zu benutzen ist.

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!