Ein Leitfaden für Responsive Web Design und Best Practices

Erfahren Sie mehr über Responsive Web Design und wie Sie die Best Practices verwenden, um das Beste aus Ihrem Online-Geschäft herauszuholen.


Entwerfen für Responsive Web Design

Mittlerweile surfen mehr Menschen mit mobilen Geräten im Internet als mit Desktops oder Laptops. Ungefähr 51% des Website-Verkehrs kommt jetzt von jemandem auf einem mobilen Gerät. Bei einer so großen Anzahl mobiler Benutzer ist es entscheidend, dass Online-Unternehmen sicherstellen, dass ihre Website ein responsives Webdesign (RWD) verwendet und mit den neuesten Best Practices für RWD auf dem neuesten Stand ist.

Was ist Responsive Web Design??

Einfach ausgedrückt besteht RWD im Entwerfen eine Website Das passt sich fließend jeder Bildschirmgröße an – sei es die neueste Apple Watch mit 272 Pixel Breite oder ein Plasma-Fernseher mit dazwischen liegenden normalen PCs, Tablets und Mobilgeräten.

Responsive Web Design Beispiel

Zur weiteren Erläuterung unten als passendes Beispiel für responsives Webdesign auf der Apfel Webseite. Im Folgenden finden Sie einen Vergleich der Desktop- und Smartphone-Ansicht der Website nebeneinander:

RWD-Vergleich eines Desktop- und Smartphone-Screenshots

Der Inhalt ist in beiden Ansichten gleich, aber das Layout und das Design der Benutzeroberfläche unterscheiden sich. In der Smartphone-Bildschirmansicht sind die Website-Bereiche gestapelt, um das vertikale Scrollen zu erleichtern, und das Navigationsmenü befindet sich hinter einem jetzt bekannten Hamburger-Symbol. Die anklickbaren Links am unteren Rand der Seite sind ebenfalls breit und hoch genug, um Fingertippgesten aufzunehmen.

Im Zentrum von RWD steht eine tiefe Sorge um die Webbenutzererfahrung. Die meisten Menschen besuchen Ihre Website heute von verschiedenen Orten aus mit einer Vielzahl unterschiedlicher Geräte – dem Desktop-Computer bei der Arbeit, dem Smartphone in der U-Bahn und dem Tablet vor dem Schlafengehen. Unabhängig davon, welches Gerät sie zum Zeitpunkt ihrer Website verwenden, erwarten die Benutzer, dass es nur funktioniert. Wenn Sie RWD richtig verwenden, bleibt die Benutzererfahrung auf Ihrer Website konsistent und angenehm, unabhängig davon, auf welchem ​​Gerät sich Benutzer befinden.

Das volle Potenzial von Responsive Web Design nutzen

Obwohl das Entwerfen einer Website, die auf allen Bildschirmgrößen gut aussieht, ein großer Schritt in die richtige Richtung ist, ist es wichtig, dass Sie hier nicht aufhören. Damit Ihr Unternehmen RWD vollständig nutzen kann, müssen Sie RWD in eine umfassendere Strategie mit dem einbinden Multi-Device-Consumer in seiner Mitte. Das heisst:

  • Bieten Sie mobilen Benutzern keine abgespeckte Version Ihrer Desktop-Website an, auf der sie nur eingeschränkt verwendet werden können. Tipp: Verfolgen Sie weiterhin die Aktionen mobiler Benutzer auf Ihrer Website. Wenn Sie feststellen, dass Benutzer auf Ihrer Website landen, Ihre Inhalte jedoch kaum verbrauchen oder keine Zeit damit verbringen, stoßen sie wahrscheinlich auf eine Art Straßensperre.
  • Gehen Sie nicht genauso mit dem mobilen Benutzer um wie mit dem Desktop-Benutzer. Nutzen Sie das Potenzial eines Mobilgeräts voll aus. Wenn Sie beispielsweise ein Restaurant besitzen, können mobile Kunden Ihr Unternehmen ganz einfach lokalisieren oder eine Reservierung vornehmen, indem Sie die Leistungsfähigkeit von Technologien wie nutzen HTML5 Geolocation und Telefonnummerneingaben auf Ihrer Website.
  • Sei dir bewusst Seitengeschwindigkeit. Nach Recherchen der Nielsen Norman Group, 47% der Besucher erwarten, dass eine Website in weniger als 2 Sekunden geladen wird, und 40% der Besucher verlassen die Website, wenn der Ladevorgang länger als 3 Sekunden dauert. Dies gilt umso mehr, wenn es um mobile Benutzer geht, die unterwegs sind und häufig Bandbreitenbeschränkungen haben.
  • Sei dir dessen bewusst nicht spielbarer Inhalt. Einige Technologien wie Flash Player werden auf Mobilgeräten nicht umfassend unterstützt. Daher ist es ratsam, dass Sie sie nicht auf Ihrer Website verwenden und vermeiden, von Ihren Seiten aus auf sie zu verlinken. HTML5-Video und -Audio sind sicherlich eine viel bessere Option als proprietäre Technologien. Es ist auch eine gute Idee, eine Abschrift Ihres Videoinhalts hinzuzufügen. In der Tat bevorzugen einige Benutzer möglicherweise geschriebene Inhalte gegenüber Video oder Audio, einige unterstützende Technologien können nur mit schriftlichem Material arbeiten, und Google kann besser Daten darüber erfassen, worum es bei Ihren Video- oder Audioinhalten geht.
  • Vermeide das Benutzen Dialoge und Popups Dadurch wird verhindert, dass Benutzer Ihre Inhalte sehen oder mit ihnen interagieren. Diese sind manchmal auch auf Mobilgeräten schwer zu schließen, auf denen die Bildschirmfläche begrenzt ist, was bei Ihren Kunden zu Frustration führt.
  • Zahlen Aufmerksamkeit zu berühren! Wenn Ihre Website auf Maus-Hover-Ereignissen basiert, um versteckte Inhalte anzuzeigen, funktioniert diese Funktion auf Mobilgeräten nicht. Mobile Geräte funktionieren nicht mit einer Maus. Stattdessen interagieren Benutzer mit Inhalten mithilfe von Berührungsgesten wie Tippen und Wischen. Entscheiden Sie sich daher dafür, versteckte Inhalte durch Klicken anzuzeigen, anstatt mit der Maus darüber zu fahren. Stellen Sie außerdem sicher, dass das Design Ihrer Website die Tatsache berücksichtigt, dass die Fingerspitzen größer als ein Mauszeiger sind, indem Sie genügend Platz für die bequeme und reibungslose Interaktion mit Links auf Ihrer Seite einräumen.

Vorteile einer RWD-Site

Für eine Sache, Google empfiehlt ausdrücklich den RWD-Ansatz für eine mobilfreundliche Website. Weitere Vorteile von RWD sind:

  • Eine einzige URL erleichtert Benutzern das Teilen und Verknüpfen Ihrer Inhalte.
  • Die Pflege einer einzelnen Website ist kostengünstiger als die Pflege mehrerer Seiten für denselben Inhalt.
  • Weiterleitungen zu einer mobilen Site wirken sich auf die Seitenladegeschwindigkeit für Benutzer auf einem mobilen Gerät aus. Außerdem ist eine Umleitung basierend auf der Browsererkennung fehleranfällig, was die Benutzererfahrung Ihrer Website beeinträchtigen kann. Durch die Einführung von RWD werden diese Probleme einfach dadurch gelöst, dass Sie durch die Verwendung derselben Website sowohl für Desktop- als auch für mobile Ansichten keine Benutzer auf eine mobile spezifische Website umleiten müssen.
  • Mit einer sich schnell ändernden Landschaft unterschiedlicher Geräte ist es nahezu unmöglich, mehrere Versionen derselben Website zu erstellen und zu aktualisieren, die speziell auf die Bildschirmgröße und die Funktionen der einzelnen Geräte zugeschnitten sind.

Reagiert Ihre Website? Probier es aus!

Verwenden Sie die Google Mobile-freundlicher Test um schnell zu testen, ob Ihre Website reagiert. Einfach kopieren & Fügen Sie die URL Ihrer Website in das Textfeld ein und überprüfen Sie das Ergebnis.

Fazit

Um Ihre Website besser für das Ökosystem mit mehreren Geräten auszurüsten, ist ein reaktionsschnelles Webdesign ein Muss. Die einfache Installation eines selbsternannten Responsive-Themas reicht jedoch nicht aus, um eine gute Leistung Ihrer Website zu gewährleisten und Ihre Kunden zufrieden zu stellen. Sie müssen RWD in Ihre Online-Geschäftsstrategie einbeziehen, wobei der Multi-Device-Consumer im Mittelpunkt steht. Dies trägt wesentlich dazu bei, dass Ihr Online-Geschäft bei Ihren Kunden und bei Google zu einem Favoriten wird.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me