Responsive Webdesign

Kompetenzen

Kompetenzen

An Smartphones, Tablets, Netbooks etc. angepasstes Design („Responsive Webdesign“)

Schon seit einigen Jahren ist jede neue Seite, die ich erstelle, auch an mobile Endgeräte wie Smartphones, Tablets etc. angepasst. Das heißt, die Gestaltung reagiert automatisch auf den zur Verfügung stehendn Bildschirm-Platz. Was zuvor noch Luxus und relativ selten war, gehört heute zur Standartausstattung einer modernen Webseite.

Ist ja eigentlich auch klar, der Gebrauch der mobilen Geräte wächst über alle Altersgruppen hinweg - eine Seite, die auch dort komfortabel angezeigt wird, hat nicht nur einen großen Wettbewerbsvorteil, dieses Verhalten wird inzwischen einfach erwartet.

Wie funktioniert das?

Da mobile Geräte nur über eine begrenzte Anzeigemöglichkeit, sprich einem wesentlich kleinerem Display als sonst üblich verfügen, muss das Layout so angelegt werden, dass der vorhandene Platz gut genutzt, gleichzeitig aber die Gestaltung erkennbar gleich und natürlich professionell wirkt. Weiterhin sollten Bedienelemente und Schriften nicht zu klein werden, damit Schaltflächen anklickbar und Texte lesbar bleiben - nicht immer ganz einfach.

Das Layout einer modernen Webseite wird schon länger nicht mehr direkt in HTML, sondern über die Cascading Style Sheets (CSS) festgelegt. Dies hat den großen Vorteil, dass Änderungen, z.B. an der Farbe einer Überschrift, nur einmal in der CSS-Datei vorgenommen werden müssen und sofort für alle Webseiten gelten.

Um eine Webseite nun an verschiedene Auflösungen anzupassen, stehen innerhalb von CSS die sogenannten Media Queries zur Verfügung. Mit diesen kann man festlegen, wie sich die Gestaltung, abhängig von der Anzeigenbreite, ändern soll.

Webseiten mobil

Praxisbeispiel

Hier ein Beispiel aus einen kürzlich realisierten Webprojekt; zuerst die komfortable PC-Ansicht, durch den großen Bildschirm ist alles in voller Größe sichtbar:

PC-Ansicht

Tablet, Netbook, kleines Notebook

Auf Tablets oder Netbooks ist die Bildschirm-Auflösung auf Werte zwischen 768 und 1024 Pixel reduziert. Da hier das relativ breite Menü gar nicht mehr in bedienbarer Große anzuzeigen ist, wird selbiges zu einer grauen Schaltfläche am oberen Bildschirmrand verkleinert:

Tablet-Ansicht
Smartphone-Ansicht

Am Smartphone („Handy“)

Nutzt man ein Smartphone, steht natürlich noch weniger Platz zur Verfügung. Durch ein angepasstes Design ist die Anzeige auf das Wesentliche reduziert.

Dem Ganzen sind natürlich auch gewisse Grenzen gesetzt, niemand wird umfangreiche Recherchen auf einem Smartphone machen wollen. Die wichtigsten Dinge sollten aber auch dort erreichbar sein.

Suchmaschinen-Relevanz

2015 hat Google seinen Suchalgorithmus signifikant geändern, fortan ist die „Mobilfreundlichkeit“ einer Website ein Ranking-Faktor.

Es gibt eine ganze Reihe von weiteren Vorteilen, die ein responsives Webdesign oder eine Umstellung darauf mit sich bringt:

Service

Ältere Projekte nachrüsten

Wenn Sie eine ältere Webseite einsetzen, kann die Anpassung an mobile Geräte theoretisch auch nachgerüstet werden, die Fragestellung ist hier eigentlich nur der zu betreibende Aufwand.

Falls Ihnen das bestehende Layout nicht mehr zusagt oder das CMS nicht mehr gepflegt wird, ist aber es meist einfacher, die Seite komplett neu aufzusetzen. In einigen Fällen genügt auch schon die Anpassung des CSS-Codes, näheres zu Ihrer Seite erfahren Sie gerne, wenn Sie mich kontaktieren.