Responsives Seitendesign: Webseite für verschiedene Geräte optimieren

Responsives Seitendesign: Webseite für verschiedene Geräte optimieren

Kleine Screens sind auf dem Vormarsch

Kleine Screens sind auf dem Vormarsch

Das Handy ist auf dem Vormarsch, was Webseitenaufrufe angeht Das lässt sich nicht erst vermuten, seit die Welt nur noch nach unten schaut. Schon mal bemerkt? Auf der Straße, in den öffentlichen Verkehrsmitteln, in Wartebereichen. Sogar beim Fernsehen als "Second Screen", um neben dem TV weitere Informationen zu konsumieren. In Deutschland sind mobile Endgeräte weiter auf dem Vormarsch und werden bald die Webseiten-Abrufe am Desktop abgelöst haben - so lässt zumindest der Trend vermuten. Weltweit betrachtet ist das schon so: Die Nutzung der Webseiten ist bereits überwiegend mobil und auf kleinen Displays ("Mobile First" lautet dort schon seit längerem die Devise für das Webdesign).

statcounter displays - Handynutzung steigt

Immer aktuelle Statistik auf Statcounter

Anpassungsfähiges responsive Design

Umso wichtiger ist es und wird es mehr und mehr, ein responsive Design für die eigene Webseite zu pflegen. Das heißt: Das Layout der Seite passt sich genau dem jeweiligen Endgerät an, egal welches das ist und welche Bildschirmgröße es hat.

Das bringt zum einen den Vorteil, dass die digitale Visitenkarte des Unternehmens auf allen Endgeräte und somit für alle Betrachter gut aussieht. Und das freut die User, denn die interessieren sich vorrangig nicht für das tolle Webdesign, sondern wollen Informationen finden. Diese Informationen müssen den Lesern natürlich möglichst komfortabel bereitgestellt werden. Andernfalls sucht sich der potenzielle Kunde einen anderen Anbieter, der ihm auf den ersten Schlag alle Informationen optisch gut aufbereitet darstellt.

Zum anderen freut das google. Denn die wollen natürlich, dass die Suchergebnisse und entsprechenden Seitenverweise und Ergebnisse deren Nutzer glücklich machen. Daher bewertet auch der Suchmaschinenriese eine entsprechend ausgereifte technische Umsetzung mit höheren Rankings.

Frau nutzt für mobile optimiertes Layout


Liquide, adaptive und mobile

Eine responsive Darstellung ist aber nur eine Möglichkeit der Umsetzung. Auch adaptiv, liquide und mobil sind Möglichkeiten.

Die Seite SEO Nerd beschreibt das ganz schön:

Die liquide Website ähnelt den Seiten mit responsive Webdesign am ehesten. Allerdings werden hier keine „Breakpoints“ gesetzt, die bei responsiven Seiten dafür sorgen, dass z.B. Bilder nur bis zu einer gewissen Größe kleiner dargestellt werden. Wird diese Größe unterschritten, dann wird das Bild bei responsiven Seiten an eine Stelle verschoben, an der es optimal dargestellt wird. Die liquide Website hingegen verkleinert das Bild einfach proportional zur Gesamtdarstellung der Seite. Das Design reagiert eben nicht auf die Umgebung, auf die sie ausgespielt wird.
Eine adaptive Website passt die Inhalte jeweils genau definierten Viewports an. Das Design der adaptiven Website fließt nicht mit den wechselnden Größen der Bildschirme mit, es gibt also auch keine „fluide“ Anpassung an die Viewports wie beim RWD.
Eine mobile Website wird mit eigener URL neben der Desktop Website etabliert. Aus Sicht der Suchmaschinenoptimierung bringt das natürlich etliche Probleme mit sich, wie etwa die Gefahr von Duplicate Content und einem Linkaufbau, der sich nun auf zwei Seiten spreizt, statt alle Backlinks auf einer Seite zu sammeln.

Sind Sie schon Mobile-ready?

Was gibt es nun für Sie zu tun? Zuerst ist zu empfehlen Ihren aktuellen Status Quo zu ermitteln. Das heißt nachzuschauen, ob Ihr Layout genau das macht: Sich den Displays anpassen. Mobil gut lesbar zu sein. Und trotzdem am Desktop gut auszusehen. Um das nicht umständlich mit den eigenen und geborgten Geräten der Familie und von Freunden zu machen, gibt es zum Glück entsprechende Tools.

Und da muss ich zugeben, stand ich auch lange auf dem Schlauch. Doch am Ende wurde auch ich erleuchtet und habe inzwischen aus zwei gefundenen Alternativen eine im Dauereinsatz, die auch Ihnen zur Erstbewertung helfen kann: am i responsive

Wir setzen dieses Tool unter anderem bei der Darstellung unserer Website-Referenzen ein. Und natürlich für Tests zwischendurch. Dort kann auf einen Blick die Seite in verschiedenen Größen ausgegeben werden. (Wer es dann noch genauer braucht, kann sich die Auflösung des Screens bei what is my screen resolution sogar selbst ganz genau einstellen.)

Analyse und Verbesserungen

Und nach der Bestandsaufnahme kommt die Analyse und die Maßnahmen: Und hier kommen dann wir ins Spiel. Denn wir unterstützen Sie bei der Anpassung Ihrer Optik. Sei es die Modifikation eines bestehenden Designs oder vielleicht sogar die Optimierung durch einen Relaunch der Seite, gleich zusammen mit grafischen oder inhaltlichen Anpassungen.

Der Mehrwert für Sie? Neben Image- und Reichweite-Gewinn: Umsatz sichern und Umsatz steigern durch zufriedene Kunden, die von Ihrem Webseiten Auftritt inhaltlich abgeholt werden und optisch positiv angetan sind. Nur so können Sie Ihre Mehrwerte auch entsprechend in Szene setzen.

 

Was denken Sie darüber? Haben Sie es schon überprüft? Oder brauchen Sie Hilfe? Lassen Sie es mich wissen: Entweder hier als Kommentar, über das Kontaktformular oder per Mail an kontakt@mekki.biz.

Noch keine Kommentare vorhanden.

Was denkst du?

bleiben wir in kontakt
Powered by Chimpify