Responsive Design liegt nicht nur im Trend, sondern ist auch zu einer echten Notwendigkeit geworden. Aus diesem Grund musst Du zwingend wissen, mit welchen Tricks und Tipps Du das responsive Design deiner mobilen Website verbesserst.
Schließlich nutzen immer mehr Nutzer das Web beinahe ausschließlich nur noch über ihre Mobilgeräte.
Wird eine Seite nicht gut genug dargestellt oder hat der Nutzer Probleme mit der Usability, kommt es sehr schnell zu Absprüngen.
Nicht für Google, sondern für die Nutzer
Inhaltsverzeichnis
Selbstverständlich spielt die Suchmaschine eine wichtige Rolle für jede Webseite. Schließlich möchte man auch von den Nutzern gefunden werden. Doch wer die eigene Seite vornehmlich nur für die Suchmaschine gestaltet, macht einen folgenschweren Fehler.
Zum einen sind die Algorithmen der Suchmaschinen mittlerweile so gut geworden, dass sie auch Faktoren und die Usability überprüfen, zum anderen bewerten Suchmaschinen wie Google auch, wie lange sich Besucher auf deiner Seite aufhalten.
Ist die Seite also nicht für den Kunden und den Besucher entwickelt, springen viele der Besucher sehr schnell wieder ab. Dies kann zu einer spürbaren Verschlechterung in den Rankings führen.
Ratgeber klärt endlich auf! Die 7 Gründe warum 98,7 % aller Webseiten kein Geld (im Internet) verdienen, warum Deine Webseite zu wenig Besucher hat und Du nicht unter den Top 3 bei Google rankst... 
Denke also in jedem Fall daran, dass du auch und ganz besonders mobile Webseiten so gestaltest, dass deine Besucher hiervon am stärksten profitieren.
Hierzu gibt es einige Tipps und Möglichkeiten, um dem Kunden einen möglichst umfassenden Service zu bieten.
Was ist überhaupt ein responsive Design?
Wer nicht für Mobilgeräte eine separate Webseite aufsetzen möchte, nutzt in der Regel ein responsives Design. Ein solches Design passt die Darstellung der Webseite an die Größe des verwendeten Endgerätes an. Somit kann auf allen gängigen Geräten eine optimale Darstellung von Webseiten ermöglicht werden.
Bedenke in jedem Fall den Nutzungskontext
Wenn Du eine mobile Webseite erstellst oder deine bestehende Webseite mit einem responsiven Design ausstatten möchtest, solltest Du immer den Kontext bedenken, in welchem der Besucher Deine Seite aufruft.
Wenn Du beispielsweise eine Seite mit Rezepten anbietest, wird der Nutzer auf der mobilen Seite vor allem die Zutaten oder die Zubereitung abfragen. Zentral im Bildschirm aufploppende Bilder von Gerichten würden in der Regel als störend empfunden.
Dies lässt sich auf viele Webseiten und Angebote im Netz übertragen.
Wenn du also grundsätzlich den Kontext kennst, in welchem deine Seite häufig von Kunden aufgerufen wird, weisst du welche Informationen für den Kunden relevant sind oder welche Interaktionen er auf deiner Seite durchführen möchte.
Ein gutes responsives Design einer Webseite stellt den Kunden also in seinen Grundbedürfnissen zufrieden und ist an den Nutzungskontext optimal angepasst.
Informationen sinnvoll aufbereiten
Im direkten Zusammenhang mit dem Nutzungskontext stehen die Informationen auf deiner mobilen Webseite. Auch wenn die Smartphones immer größer werden, nehmen sich nur wenige Menschen Zeit, große Textblöcke zu lesen.
Die Inhalte müssen also für die mobil optimierte Webseite anders aufbereitet werden, als es bei einer herkömmlichen Webseite der Fall wäre. Für Desktop-Webseiten gilt beispielsweise, dass der Kunde die Information möglichst ohne einen weiteren Klick erfassen können sollte.
Mobile Webseiten hingegen sind besser dafür geeignet, die Informationen in kleine Segmente zu unterteilen und den Nutzer somit zwischen den Elementen hin- und herschalten zu lassen. Fasse aus diesem Grund die Inhalte und Informationen für eine mobile Webseite auf die wesentlichen Informationen zusammen. Nur so kannst du effektiv einen Absprung der Besucher verhindern.
Ladezeiten als Besucher-Schreck
Ladezeiten spielen leider noch immer eine Rolle. Dies liegt allerdings unter anderem auch daran, dass Deutschland beim Mobilfunk oftmals noch deutlich ausbaufähig ist. Eine langsam ladende Seite, welche beispielsweise auch noch mit zu großen Bildern künstlich verlangsamt wird, kann bei einer schlechten Mobilverbindung zu einem Belastungstest für den Nutzer werden.
Studien haben ergeben, dass bei Ladezeiten über drei Sekunden die ersten Nutzer abspringen. Mit jeder weiteren Sekunde steigt die Zahl der Absprünge deutlich an.
Es gibt viele Tools und Möglichkeiten die Ladezeit der eigenen Seite zu überprüfen und diese anschließend zu optimieren. Dies solltest du in jedem Fall regelmäßig durchführen, um den Erfolg der eigenen mobilen Webseite nicht zu gefährden.
Inhalte hierarchisch anordnen
Die meisten Nutzer sind es gewohnt nach bekannten und tradierten Formen der Präsentation zu suchen. Dies gilt ganz besonders für mobile Webseiten. Eine klare Hierarchie der einzelnen Elemente sollte aus diesem Grund in jedem Fall eingehalten werden.
Strukturieren lassen sich die verschiedenen Elemente durch Überschriften und Call-to-action-Buttons. Der Nutzer weiß, dass eine H1 oder H2 Überschrift in der Regel wichtigere Informationen enthält als ein Kapitel, welches mit einer H3-Überschrift eingefügt wurde. Er kann somit die Inhalte einer Seite schneller scannen und erfassen und ist hierdurch viel einfacher zufriedenzustellen.
Bilder und mobile Webseiten
Wenn du eine mobil optimierte Webseite erstellen möchtest, spielen Bilder oftmals eine weitaus geringere Rolle, als du glaubst. Während auf Desktop-Webseiten Bilder dem gesamten Auftritt eine Struktur verleihen können, sind Bilder auf mobilen Webseiten oftmals eher störend.
Zum einen verlängern Bilder die Wartezeit deutlich, zum anderen kann ein Bild wichtige Inhalte verdrängen oder die Usability der Webseite maßgeblich verändern.
Überlege aus diesem Grund bei jedem Bild, ob dies für den Besucher der Webseite einen wichtigen Wert hat. Ist dies nicht der Fall, solltest du das Bild entfernen.
Bilder für mobile Webseiten müssen so bearbeitet werden, dass der Nutzer im Optimalfall das gesamte Bild auf einen Blick erfassen kann. Zudem sollten nur die relevanten Bildausschnitte wirklich gezeigt werden. Dies spart Bildgröße und verringert somit nochmals die Ladezeit spürbar.
Darstellungsbereiche und Schriftanpassungen
Ein responsive Design bedeutet, dass sich deine Webseite an das genutzte Endgerät anpasst. Also auch, dass sich die Größe der Webseite entsprechend verändert.
Hierzu ist es notwendig, dass der Darstellungsbereich der Webseite klar definiert wird und es sogenannte responsive Design Breakpoints gibt, welche dem System anzeigen, ab welcher Bildschirmbreite die Darstellung verändert werden muss. Sind diese Elemente nicht vorhanden, wird auch auf dem Mobilgerät nur eine normale Desktop-Webseite angezeigt.
Und dies führt gleich zu mehreren Problemen. Zum einen muss der Nutzer im schlimmsten Fall nicht nur hoch- oder runter-scrollen, sondern auch nach rechts, um die gewünschten Informationen zu erfassen. Auch die Schrift ist in den meisten Fällen viel zu klein.
Die Zahl der Absprünge wächst bei so einer Darstellung praktisch sekündlich an. Durch das Setzen der entsprechenden Seiten-Markierungen und Breakpoints lassen sich diese Probleme gut verhindern.
Ratgeber klärt endlich auf! Die 7 Gründe warum 98,7 % aller Webseiten kein Geld (im Internet) verdienen, warum Deine Webseite zu wenig Besucher hat und Du nicht unter den Top 3 bei Google rankst...
Die mobile Bedienbarkeit der Webseite garantieren
Zunächst einmal gilt es die Webseite im responsive Design für den Besucher nutzbar zu machen. Das bedeutet auch, dass ein entsprechendes Menü integriert werden muss.
Das Menü sollte für den Nutzer nicht nur von jedem Punkt der Seite erreichbar sein, sondern muss sich auch mit den Fingern gut bedienen lassen. Hierbei spielt sowohl die Größe der einzelnen Touch-Elemente als auch der Abstand zwischen den einzelnen Elementen eine wichtige Rolle.
Liegen diese zu nah beieinander, kann der Nutzer keine präzisen Eingaben mehr tätigen. Dies sorgt für Frust und dient somit nicht der Usability.
Auch sollte die Struktur des Menüs für den Nutzer einfach und einprägsam sein. Zu viele verschachtelte Elemente sind in einer Touch-Bedienung in der Regel nicht sauber zu gestalten.
Lieber die Menüs simpel halten, dafür aber dem Nutzer eine gute und einfache Bedienbarkeit garantieren. Dies sorgt für Zufriedenheit und die gewünscht hohe Präzision.
Passende Technologien verwenden
Wenn du eine mobile Webseite erstellst, solltest du in jedem Fall an die verfügbaren Technologien auf Smartphones und Tablets denken. Denn für viele Web-Designer alltägliche Formate wie Flash oder auch Java können auf einem Smartphone oder Tablet nicht dargestellt werden.
Das bedeutet für dich, dass du gegebenenfalls vorhandene Medien in diesen Formaten abändern und anpassen musst. Es gilt die einfachen und dennoch enorm mächtigen HTML-Tags zu verwenden, um Videos oder andere animierte Inhalte exakt nach Wunsch in die mobile Webseite zu integrieren.
Nur so kann eine reibungslose Darstellung auf allen Endgeräten garantiert werden.
Teile doch einfach diesen Beitrag mit Kollegen, Freunden oder Bekannten, wenn er dir gefallen hat. ?
