Responsives Webdesign.


Responsive Screendesign

Was bedeutet Responsives Webdesign?


Responsive Webdesign bedeutet, daß Webseiten nicht nur in einem starren Raster für die Darstellung auf einem querformatigen Desktop-Computerbildschrim gestaltet und konzipiert werden, sondern, dass sich das Layout einer Website automatisch verändert und an verschiedene Geräte, mit denen der User auf das Internet zugreift (Handys, Tablets, Wearables/Uhren) anpasst. D.h. dass es nicht nur eine Darstellung der Website gibt, sondern mehrere, je nachdem, mit welchen Gerät man die Seite aufruft.

 

Die Notwendigkeit dazu liegt auf der Hand: da sind zunächst unterschiedliche Screengrößen, die unterschiedlich viel Inhalt auf einmal zeigen können.  Zudem kann man mit Tablets und Handys vom Hochformat auf ein Querformat wechseln, was wiederum die Breite und Höhe des Screens vertauscht. Zudem stehen über die mobile Internetverbindung in der Regel nicht so schnelle Datentransferraten zur Verfügung, was längere Ladezeiten zur Folge hat.

Aber nicht nur die technische Seite spielt hierbei eine Rolle, sondern ebenfalls die Umstände in denen der Mensch sich gerade befindet. In der Regel ist die Internetnutzung unterwegs mit dem Smartphone für die schnelle, sofortige Information, weniger für zeitintensivere Dinge, die man eher Zuhause am Tablet oder am Desktoprechner macht.

Gestalterische und inhaltliche Anpassungen


Inhalte auf die mobile Nutzungssituation anpassen:

  • Wie schon eingangs erwähnt werden die mobilen Endgeräte in der Regel unterwegs zwischendurch genutzt. In der Bahn, auf dem Weg zur Arbeit, in Wartebereichen etc. Das bedeutet, dass die Zeit meistens beschränkt ist und es eher darum geht „auf die Schnelle“ Informationen zu erhalten. Das bedeutet, dass man lange Texte vermeiden sollte und lediglich die wichtigsten Informationen bereit stellen sollte. D.h. die Texte sollten schnell erfassbar sein und die wichtigsten Kern-Informationen und -Botschaften enthalten. Sozusagen die Beschränkung auf das Wichtigste.

 

Die wichtigsten Bausteine des responsive Webdesign:

 

Um die Webseiten „responsiv“ zu machen gibt es drei unabdingbare Bereiche, die es zu beürcksichtigen gilt:

 

  1. Kein starres Grid

D.h. vereinfacht gesagt, dass sich die einzelnen Blöcke, aus denen eine Website besteht (man kann sich das als Zeilen und Spalten vorstellen), jeweils anders anordnen, wenn weniger Platz in der Breite zur Verfügung steht. Sind auf der Desktop-Webseite beispielsweise vier Spalten nebeneinander in einer Zeile, so sind es beispielsweise auf dem Tablet zwei Spalten in zwei Zeilen oder auf dem Handydisplay jeweils eine Spalte in vier Zeilen

 

2. Keine festen Schriftgrößen

Normalerweise wird für jede Standardtextangabe (Überschriften-Varianten in H1 bis H6) und für den Fließtext eine Textgröße in pixel vorgegeben. Dies führt aber dazu, dass die Größe der Schrift auf jedem Display gleich bleibt und damit eine Überschrift beispielsweise auf einem kleinen Display nicht ganz dargestellt wird und über den Rand hinausragt.

Um dies zu vermeiden arbeitet man beim Responsive Webdesign mit relativen Schriftgrößen (em und rem), was dafür sorgt, dass die Schriftgröße in Abhängigkeit von der Screengröße (viewport) definiert wird. Darüber hinaus kann es notwendig sein, einzelne Überschriften und Textpassagen nochmal manuell an die jeweilige Formatadaption (Handy, Tablet) anzpassen.

 

3. Keine festgelegten Bildgrößen

Ebenso, wie bei den Schriften müssen auch die Bilder/Videos relativ zur Bildschirmbreite angelegt werden.

Damit ein solches responsives Webdesign umgesetzt werden kann, wird in dem Code eine sogenannte „Viewport-Abfrage“ gemacht. D.h. es wird die Information abgefragt, welche Pixelbreite der Screen des Geräts, mit dem der User eine Seite aufruft, aufweist. Damit deckt man auch das Problem ab, ob das Gerät im Hochformat oder Querformat bedient wird. Da es eine Vielzahl von verschiedenen Displaygrößen bei mobilen Endgeräten gibt, werden die Seitenlayouts für Pixel-Bandbreiten (von/bis) angelegt.

Usability (Bedienbarkeit) Anpassungen:

Weiterhin gilt es die Inhalte und den Aufbau derart zu gestalten, dass man die Seite mit einer Hand auf dem Handydisplay gut bedienen kann, alle Elemente auf der jeweiligen Screengröße an einer sinnvolle Stelle platziert und gut sichtbar sind und keine inhaltlichen Elemente verwendet werden, die sich schlecht auf kleinen Screens darstellen lassen (beispielsweise detailreiche Diagramme oder Listen).

 

Auch bei der Navigation gilt es viel zu beachten. So hat sich das sogenannte Hamburger-Menü mittlerweile für mobile Webseiten durchgesetzt.  So spart man Platz und das Menü wird nur angezeigt, wenn es gerade benötigt wird.  Darüber hinaus sollte man tief verschachtelte Menüs vermeiden. Wenn auf weitere Seiten verzweigt werden muss, dann sollte man das auf das Nötigste beschränken (bspw. eine Impressumseite und die Datenschutzhinweise). Ansonsten ist man gut beraten möglichste alle wichtigen Inhalte auf einer Scroll-Down-Page zu platzieren, die jedoch auch nicht zu lang sein sollte. Die User haben sich durch die Nutzung vieler beliebter Apps, wie Twitter, Facebook/Messenger/Instagram etc. daran gewöhnt Inhalte zu konsumieren, indem der Screen einfach nur nach oben geschoben wird (ge-swiped wird), um die Inhalte, die folgen, sichtbar zu machen. Diese gelernten Fingergesten, mit denen wir alle unsere touchfähigen Geräte bedienen, sollten bei der Gestaltung von mobilen Webseiten berücksichtigt werden, um eine gute User-Experience (Nutzererfahrung) zu erreichen. Weiterhin sollten sie es dem User so einfach wie möglich machen, mit Ihnen Kontakt aufzunehmen. Langes, lästiges Eintippen sollte möglichst vermieden werden. Besser ist es beispielsweise durch antippen einer Telefonnummer direkt einen Anruf zu starten. Ist die Eingabe von Text unabdingbar, sollte sie auf das absolut Nötigste reduziert werden.

Technische Anpassungen


Schnelle Ladezeiten:

Ein wesentlicher Faktor, den es gerade bei den mobilen Versionen zu berücksichtigen gilt, ist die Ladezeit der Seite. In der Regel steht mit dem Handy wesentlich weniger Bandbreite zur Verfügung, sodass es länger dauert Inhalte zu laden. Wenn sich die Seite nach drei, vier Sekunden noch nicht aufgebaut hat, verliert man schnell die Geduld und bricht den Vorgang ab. Auch das automatische Laden von großen Dateien sollte vermieden werden, da hierdurch der User möglicherweise ungewollt Datenvolumen und damit Geld verbraucht.

AMP – Accellerated Mobile Pages:

Was ist AMP?

Um das Laden von mobilen Webseite schneller zu machen und die mobile User-Experience (UX) damit zu erhöhen wurde AMP ins Leben gerufen. Es handelt sich dabei um die Kombination einer abgespeckten Code-Sprache zur Darstellung der Seite, mit einer proxi-basierten Zwischenspeicherung im Content Delivery Network „AMP Cache“. Durch den reduzierten, einfacheren Aufbau der Seite und der Tatsache, dass diese nicht von dem Server des Webseitenbetreibers, sondern direkt vom AMP Cache geladen wird, wird die Seite deutlich schneller auf dem mobilen Endgerät angezeigt.

 

Bedeutung von AMP für SEO

Soviel man weiss, spielt die mobile Ladezeit einer Seite zu den Faktoren, die Google bei der Beurteilung der Seite (organischer Pagerank) heranzieht, eine wesentliche Rolle. Es gibt sozusagen Pluspunkte, wenn eine Seite mobil schnell lädt. Wie wichtig Google AMP ist, zeigt sich beispielsweise daran, dass es mittlerweile einen eigenen Menüpunkt „AMP“ in dem Hauptmenü der Google Search Console gibt.

Aufgrund der Tatsache, dass die mobile Internetnutzung schon jetzt höher ist, als die Nutzung per Desktop und zudem in Zukunft immer weiter steigen wird, kann man davon ausgehen, dass AMP für Google zukünftig immer wichtiger werden wird.

Fazit


Die Zunahme der mobilen Nutzung des Internets macht es unabdingbar Internetseiten für Handys und Tablets inhaltlich und technisch zu optimieren.

Der Erfolg Ihrer Webseite wird mehr und mehr davon abhängig sein, ob diese auf mobilen Endgeräten schnell lädt und eine gute User-Experience aufweist. Ich erstelle Ihre Seite so, dass sie hier gut aufgestellt sind.

Vereinbaren Sie jetzt Ihr Beratungsgespräch - kostenlos!

Sie erreichen mich von Montag bis Freitag zwischen 10 - 18 Uhr - Tel. 0177/4643158

Angebot anfordern