Kompetenzen

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

Fakt ist: der Gebrauch der mobilen Geräte wächst über alle Altersgruppen hinweg - eine Seite, die dort passend und gut lesbar angezeigt wird, hat einen großen Wettbewerbsvorteil und wird von den Suchmaschinen besser bewertet. Fakt ist auch, dass dieses Verhalten inzwischen vom Besucher erwartet wird.

Schon seit einigen Jahren ist jeder Auftritt, den ich erstelle, an mobile Geräte wie Smartphones und Tablets angepasst. In manchen Fällen lässt sich diese Eigenschaft aber auch nachrüsten.

Professionelles Webdesign Suchmaschinenoptimierung Responsive Webdesign Content-Management

Seiten neu gestalten Arzt- und Praxishomepage Schnellreparatur

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.

Cascading Style Sheets

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:

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:

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ändert, 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:

Vorteile Handy-Anpassung

Service

Ältere Projekte nachrüsten

Wenn Sie eine ältere Webseite einsetzen, kann die Anpassung an mobile Geräte eventuell 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 hier:

Schnellreparatur

Weiter: Content-Management Systeme