Responsive Webdesign - Einführung und grafische Darstellung

Dieser Artikel soll einen kleinen Einblick in das Responsive Webdesign gewähren und Ihnen eine Möglichkeit geben, das Responsive Webdesign anhand von Grafiken besser nachvollziehen zu können.


Der private und berufliche Alltag hat sich in den letzten Jahren stark gewandelt. Es wird nicht nur an Computern oder Laptops mit großen Bildschirmen gesurft und gearbeitet, sondern immer mehr auf mobile Endgeräte gesetzt. Das Problem hierbei: Viele Seiten wurden (und werden heutzutag oft immer noch) nur für große Monitore, mit einer hohen Bildschirmdiagonalen designt und werden so unschön auf den kleineren Bildschirmen dargestellt.

Entwickler sollten allerdings den Anspruch haben, ihren Webauftritt stets auf jedem Endgerät gut aussehen zu lassen. Hier kommt das Responsive Design ins Spiel, durch welches virtuelle Inhalte dynamisch an Bildschirmgröße und Endgerät angepasst werden sollen. Dabei sind vielfältige Anpassungen möglich. Texte können untereinander in Zeilen statt nebeneinander in Spalten angeordnet werden, die Breite von Bildern sich automatisch verkleinern/vergrößern oder die Navigationsleiste in einem ein- und aufklappbaren Menü dargestellt werden, all das auf die jeweilige Bildschirmgröße abgestimmt.

Als Beispiel für eine responsive Darstellung, die sich automatisch dem Gerät des Benutzers anpasst, soll die Grafik unten dienen. Je nach ausgewähltem Gerät kann man gut erkennen, wie sich die gesamte Struktur anpasst.


(Schauen Sie sich diese Seite auf einem Smartphone an, werden Sie direkt sehen, dass der Tablet- und Desktopbildschirm, sowie deren Inhalte, zu groß sind. Hier kann man gut fehlendes Responsive Webdesign erkennen, was in horizontalem Scrolling und geringer Nutzerfreundlichkeit resultiert)



Impressum
Kontakt
Leistungen
Home
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Desktops:
Die Bildschirmgröße hängt vom Monitor ab und kann bei mehreren Monitoren im Verbund auch über 3000px in die Breite gehen. Auszugehen ist allerdings stets von mindestens 1024px Breite.

Tablets:
Tablets können waagerecht oder senkrecht gehalten werden und geben so eine jeweils andere Breite preis. Anzunehmen sind zwischen 480x und 960px, wobei es Tablets mit größeren Bildschirmen gibt (z.B. iPad Pro 12,9"), als auch kleineren (z.B. iPad Mini).

Smartphones:
Die Displaygröße kann sich hier stark unterscheiden. Gerade bei Smartphones müssen Web-Entwickler alle möglichen Größen genaustens testen. Zwischen 320px und 640px Breite sind hierbei die Regel. Wie bei Tablets müssen auch hier waagerechte und senkrechte Nutzungsmöglichkeiten bedacht werden.



Doch nutzen überhaupt genug Leute in Deutschland mobile Endgeräte, sodass sich eine Überarbeitung für mobile Geräte lohnt? Diese Frage ist ganz klar mit "Ja" zu beantworten. Bereits Ende 2015 besaßen über 50% aller Deutschen ein Smartphone und/oder Tablet, Tendenz steigend.

Die Vorteile des Responsive Webdesigns liegen schon fast auf der Hand. Statische Seiten wirken altmodisch und erwecken den Anschein, den mobilen Trend "verschlafen" zu haben. Da immer mehr potenzielle Kunden die Website als Aushängeschild eines Unternehmens sehen kann dies beispielsweise mit schleppender Neukundenakquisen, sinkender Konvertierungsrate und allgemeinem Imageschaden einhergehen. Responsive Webdesign schafft also eine ansprechende Optik, gesteigerte Usability und dadurch zufriedenere User.

Die mobilen Geräte unterscheiden sich wiederum selber stark voneinander. Nehmen wir den Bereich der Smartphones als Beispiel und hier das bekannte iPhone von Apple. Lange Zeit gab es das iPhone nur in einer Größe und hat sich nur von möglichen internen Speichererweiterungen oder der Farbe unterschieden. Jetzt, im Jahre 2016, bewirbt Apple drei unterschiedliche iPhones. Diese sind das iPhone 6S, das iPhone 6S Plus und das iPhone SE. Der signifikanteste Unterschied zwischen diesen ist die Bildschirmgröße, welche so viele Interessensgruppen wie möglich abdecken sollen (das gleiche gilt übrigens auch für die Produktreihe der iPads).

Entwickler stehen hier natürlich vor der Herausforderung, ihre Inhalte nicht nur für die Kateogrien Smartphone und Tablet anzupassen, sondern müssen auch hier noch zwischen verschiedenen Größen innerhalb dieser Gerätekategorien differenzieren.

Zur Veranschaulichung dient die folgende Grafik. Sie soll die momentane iPhone Generation gegenüberstellen und auch hier Veränderungen im Responsive Webdesign sichtbar werden lassen.



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Bildschirmgröße (Breite) des iPhones (ausgehend davon, dass das Gerät senkrecht gehalten wird):

iPhone 6S Plus: 414x736 Pixel

iPhone 6S: 375x667 Pixel

iPhone SE: 320x568px

Responsive Webdesign bietet also eine gute Möglichkeit, um Ihr Mobile Commerce voran zu treiben und ist ein sinnvolles Konzept der Webentwicklung, auf welches jedes Unternehmen zurückgreifen sollte.

Ich hoffe, dass der Nutzen von dynamischen Webseiten ersichtlich wurde und auch Sie in Zukunft auf Responsive Design zurückgreifen, um so einen optimalen Webauftritt für jeden User, auf jedem Gerät, zu gewährleisten.


Zurück zur Awondoo Hauptseite