Kontakt
Responsive Webdesign gezeigt auf einem Smartphone

Responsive Webdesign: Ratgeber für Unternehmen in 2019

Es ist kein Geheimnis, dass Responsive Webdesign der heutige Standard für Websites ist.

Tatsächlich kann die richtige Anwendung von Responsive Webdesign über deine Suchmaschinenplatzierung entscheiden, deine Verkäufe steigern und dein Unternehmen zukunftssicher ausrichten.

Zusammengefasst: Responsive Webdesign entscheidet über den Erfolg deiner Website.

Dieser Leitfaden zeigt dir, was du wissen musst, um Online erfolgreich zu sein. Lass uns direkt anfangen.

Definition

Was ist Responsive Webdesign?

Lese was Responsive Webdesign in 2019 für deine Website bedeutet.

Definition von Responsive Webdesign auf Handys und Tablets

Definition von Responsive Webdesign

In den letzten Jahren ist die Zahl der mobilen Besucher drastisch gestiegen. Heute kommen bereits über 55 % der Besucher von einem Handy.

Responsive Webdesign ist eine gestalterische und technische Denkweise, um Websites auf verschiedenen Endgeräten darzustellen. Es soll eine gleichbleibende Nutzererfahrung auf Desktop-Monitoren, Tablets und Smartphones gewährleistet werden.

Wenn deine Website also nach aktuellen Prinzipien entwickelt wurde, passt sich das Design also an die verschiedenen Bildschirmgrößen der Geräte an.

Ein Teil der Nutzererfahrung sind neben der Gestaltung auch die Ladezeiten. In Zeiten von Wi-Fi und 4G Netzwerken wird oft vergessen, dass viele Nutzer auch von unterwegs Online surfen. Sprich: Wenn deine Website ansprechend auf dem Smartphone aussieht, aber 20 Sekunden bei 2G Netz lädt, wird der Besucher deine Website frustriert verlassen.

Die dritte Komponente sind die Funktionen. Alle Interaktionen mit deiner Website, z. B. Kontaktformular, Shopping oder Mitgliederbereich, können von verschiedenen Geräten benutzt werden. In Zeiten der Digitalisierung kommen heute +50 % Besucher von Smartphones und sind so ein kritischer Faktor für jedes Unternehmen.

Ich fasse zusammen: Responsive Webdesign soll dem Besucher eine exzellente Nutzererfahrung auf allen Geräten ermöglichen.

Vorteile

Warum Responsive Webdesign implementieren?

Für Unternehmen und Selbstständige haben die wirtschaftlichen Vorteile von Responsive Webdesign in den letzten Jahren stark zugenommen.

Google auf zwei Smartphones mit Mobile First

Verbessertes Suchmaschinenranking

Um zu verstehen, warum Responsive Webdesign ein wichtiger Faktor für Suchmaschinen geworden ist, muss man zuerst verstehen, wie Suchmaschinen funktionieren.

Suchmaschinen wie Google, Bing und Yahoo haben alle ein einheitliches Ziel: Den Suchenden die besten Ergebnisse zu präsentieren. Dazu vergleichen die Suchmaschinen bei Suchanfragen ihre Datenbanken und ranken die besten Ergebnisse.

Beim Vergleich mit der Datenbank werden viele Faktoren unterschiedlich gewichtet. So spielt z. B. die Wortanzahl der Website eine Rolle, die Anzahl und Qualität der Backlinks (Links von anderen Seiten) oder die durchschnittliche Aufenthaltsdauer der Besucher.

Das alles dient dazu, die qualitativ hochwertigsten Ergebnisse, welche der Nachfrage der Suchenden am besten entspricht, aufzulisten.

Aufgrund der starken Entwicklung in Richtung mobiler Nutzung haben Suchmaschinen ihre Algorithmen angepasst. Anfangs wurde eine mobile Version der Website nur positiv bewertet. Seit dem Update vom September 2018 nutzt Google aber hauptsächlich die Smartphone Version, um die Inhalte der Website auszuwerten.

Fehlendes oder schlechtes Responsive Webdesign wird abgestraft. Um die eigene Bewertung in den Suchmaschinen zu optimieren, und einen guten Platz in den Ergebnissen zu sichern, gibt es also keinen Weg mehr um die flexible Website.

Mehrere Smartphones zeigen Responsive Webdesign

Mehr Verkäufe

In Zeiten von eCommerce kommt ein Großteil der Besucher von Smartphones. Das bedeutet auch, dass mehr Käufe denn je durch Smartphones getätigt werden.

Im Endkundengeschäft ist dieser Trend schon lange angekommen. Der große Erfolg von Unternehmen wie Amazon, Wishlist oder Nike kann zu Teilen auf die frühzeitige Optimierung für mobile Geräte zurückgeführt werden. Im Report von Tune wird geschätzt, dass Amazon bereits mehr als +700 Millionen Kunden über Smartphones hat.

Ein weit verbreiteter Irrglaube über teure Produkte kursiert nach wie vor. “Unsere Produkte sind zu teuer. Die werden nicht über das Handy gekauft.” – das ist oft die Reaktion, wenn es zum Gespräch über die mobile Website kommt. Dazu gibt es eine bemerkenswerte Geschichte der Plattform CHRONEXT:

CHRONEXT verkauft gebrauchte, luxuriöse Uhren. Die günstigen Modelle fangen bei € 690 an, dem Preis nach oben ist keine Grenze gesetzt. Ganz wie Amazon setzte die Online Plattform einen starken Fokus auf mobile Kunden. Auf der Konferenz NOAHConference erzählt Gründer Philipp Man, dass sie die teuerste Uhr über ein Handy für 205.000 Schweizer Franken (ca. € 180.000) verkauft haben. Ein klares Zeichen wie Wertvoll der mobile Marktsegment ist.

Die Frage ist: Wie viel Potenzial können Unternehmen durch professionelles Responsive Webdesign gewinnen? Nicht nur im B2C, sondern auch mit hochpreisigen Produkten im B2B.

Der Trend zeigt, dass die Verkäufe über Smartphones weiter wachsen werden.

Statistik zur Entwicklung von Zugriffen auf Websites von Handys

Zukunftsfähigkeit

Die Statistik “Percentage of all global web pages served to mobile phones from 2009 to 2018” von Statista zeigt eindrucksvoll die Entwicklung der mobilen Besucher.

Wo im Jahr 2009 die Smartphones erst in den Anfängen waren, gibt es 2018 schon eine große Marktdeckung. Weltweit sehen wir +50 % Besucher von mobilen Geräten, in Afrika knapp 60 % und in Asien +65 %.

Mit der vermehrten Nutzung der mobilen Geräte steigt auch das Vertrauen in die neuen Technologien. Verbraucher nutzen die handlichen Geräte bereits für sensible Vorgänge, wie Online Banking, Versicherungen und Bestellungen von teuren Produkten.

Um im Wettbewerb mit konkurrierenden Unternehmen zu gewinnen ist die moderne Webpräsenz ein entscheidender Faktor.

Ein immer wieder auftauchendes Phänomen im Internet ist “The winner takes it all”. Zum Beispiel beim Suchmaschinenranking. Der Gewinner erhält dort die meisten Klicks, während die weiteren Ergebnisse sich mit den restlichen Prozenten begnügen müssen.

Statistik zu Suchergebnissen von Websites

Es geht soweit, dass der erste Platz der Ergebnisse durchschnittlich 33 % der Klicks bekommt. Platz zwei bekommt 18 % und Platz drei nur noch 11 %. Alle anderen Wettbewerber erhalten kaum bis keine Klicks. Deshalb wird unter SEO Experten oft gesagt: “The Best Place to Hide a Dead Body is Page Two of Google”.

Unternehmen nutzen Responsive Webdesign, um den ersten Platz zu gewinnen und somit die Suchergebnisse zu dominieren. Eine Investition um Unternehmenswachstum zu fördern und sich langfristig einen Platz im Markt zu sichern.

Methoden

Wie wird Responsive Webdesign im Detail umgesetzt?

Responsive Webdesign bietet viele Möglichkeiten die gestalterischen Probleme eines kleinen Bildschirms zu lösen. Ein Thema, das unzählige Bücher füllt. Die folgenden Punkte stellen daher nur die, meiner Meinung nach, wichtigsten Prinzipien dar.

Vergleich von Responsive Layout vs. Adaptive Layout

Responsive Layout vs. Adaptive Layout

Um eine Website gestalterisch auf verschiedenen Endgeräten umzusetzen werden überwiegend zwei Methoden genutzt. Diese Methoden ändern wie das Layout der Website aufgebaut ist.

Beim Adaptiven Webdesign wird die Website fix in verschiedenen Stufen gestaltet. Es gibt z. B. je eine Version für Desktop, Tablet und Smartphones. Die verschiedenen Größen werden ab einer bestimmten Breite des Bildschirms geladen.

Der Hauptvorteil des Adaptiven Webdesigns ist die kostengünstige Umsetzung. So nehmen die verschiedenen Varianten verhältnismäßig wenig Zeit in Anspruch. Durch die fixen Stufen kann außerdem das Design besser vorbereitet werden und anspruchsvollere Ästhetik umgesetzt werden.

Aber das Adaptive Webdesign kommt mit großen Nachteilen. Durch die festen Stufen wird die Website auf vielen Geräten fehlerhaft dargestellt. Das Layout kann sich nicht individuell auf jede Bildschirmgröße einstellen. Außerdem kann z. B. die Version für Smartphones auf kleines Tablets geladen werden – das Resultat ist eine miserable Nutzererfahrung.

Die Alternative ist das Responsive Webdesign. Die Website wird als ein flexibles System auf den verschiedenen Geräte dargestellt. Das Layout passt sich fließend an die Bildschirmgröße an.

Die Vorteile des Responsive Webdesign sind Flexibilität und Zukunftsfähigkeit. Es werden alle Geräte und Bildschirmgrößen gleichbleibend abgedeckt. Auch zukünftige Geräte werden automatisch unterstützt. Das ist die Lösung für hochwertige Websites.

Die Nachteile sind der Zeitaufwand und geringere Gestaltungsfreiraum. Um Responsive Webdesign in eine Website zu integrieren, benötigt es mehr Zeit und ausreichendes Testen. Auch die Gestaltung der Website muss etwas loser passieren, da das Auftreten für jede Bildschirmgröße individuell ist.

Schlussendlich gibt es kein Richtig oder Falsch. Je nach Budget, Anforderungen und Zielgruppe eignet sich eine Variante besser als die Andere. Grundsätzlich setzen sich für moderne Websites aber das Responsive Webdesign durch.

Verschiedene Elemente einer Website für mobile Geräte

Bessere Nutzererfahrung durch UI Elemente

Das Ziel jeder Website ist die Besucher zu einer Handlung zu bewegen. Sei es ein Produkt zu kaufen, ein Abonnement abzuschließen, Kontakt aufzunehmen oder mit Freunden über den Inhalt zu reden.

Damit die Besucher diese Handlungen ausführen können werden auf der Website User-Interface-Elemente benutzt. Das sind eine Vielzahl von Elemente wie Links, Icons, Buttons, Sliders, Eingabe- und Suchfelder.

Damit diese Elemente auf dem Computer, Tablet und Handy gut funktionieren wird Responsive Webdesign zielführend eingesetzt. Wo auf dem Desktop Gerät noch mit einer Maus genau auf Elemente geklickt werden kann, ist es bei Smartphones unmöglich präzise Eingaben zu machen.

Deshalb sollten Buttons auf kleinen Geräten prinzipiell größer dargestellt werden. Um sicherzustellen, dass der Nutzer auch nicht versehentlich auf andere Elemente klickt, werden die Abstände zu anderen Komponenten erhöht.

Die Eingabefelder eines Formulars nehmen eine ganze Zeile ein und unterstützen verschiedene Eingabetypen. So werden bei Passwörtern das entsprechende Tastaturlayout bei Smartphones ausgewählt und bei einer Zahleneingabe das zugehörige Layout eingeblendet.

Navigationsmenüs werden ab einer gewissen Bildschirmgröße unsichtbar und können per Icon eingeblendet werden. Die dargestellten Inhalte werden neu sortiert oder komplett ausgeblendet.

Diese feinen Nuancen des Responsive Webdesigns haben das Ziel die Nutzererfahrung zu verbessern und zu mehr Unternehmenserfolg zu führen. Denn ein zufriedener Besucher wird mit höherer Wahrscheinlichkeit ein zufriedener Kunde. Ganz nach John Maeda: “Design is about the Customer.”

Beispiele von responsive Typografie in verschiedenen Größen

Gewährleiste Leserlichkeit durch Typografie

Der meistgenutzte Weg auf Websites um Informationen zum Besucher zu kommunizieren ist über Text. Das sind Werbetexte, Blogbeiträge, Produktbeschreibungen und Labels für Interface Elemente. Damit Texte auf allen Geräten leserlich sind, und der Besucher mit der Website interagieren kann, wird Responsive Webdesign genutzt.

Drei Faktoren sind Ausschlaggebend für die Leserlichkeit der Schrift: Schriftgröße, Satzbreite und Schriftart. Nur wenn diese beiden Punkte präzise abgestimmt sind, kann eine gute Nutzererfahrung gewährleistet werden.

Für die Schriftgröße ist ein gutes Augenmaß erforderlich. Je nach Schrifttyp muss diese etwas größer ausfallen. Um eine gute Leserlichkeit zu gewährleisten, empfiehlt es sich, nicht unter 16px Größe zu gehen. Eine beliebte Methode um verschiedene Displaygrößen anzusprechen ist die dynamische Schriftgröße. Hier wird die Schriftgröße proportional zur Bildschirmbreite berechnet.

Eine Mischung aus Typografie und Layout ist die Satzbreite. Diese bestimmt, wie viele Buchstaben maximal in einer Zeile dargestellt werden. Wenn die Zeilen zu eng sind, muss das Auge zu oft springen und der Leser verliert sich. Wenn die Zeilen zu weit sind, verliert man sich in den langen Zeilen. Hier ist es schwer eine einheitliche Norm zu finden. Als Faustregel kann man jedoch 50 – 60 Buchstaben pro Zeile nehmen.

Die gewählte Schriftart(en) haben auch einen entscheidenden Effekt auf die Leserlichkeit. Serif liest sich in der Regel durch die typischen Serifen und Tropfen einfacher. Sans Serif kommt dagegen sehr schlicht ohne zusätzliche Merkmale und überzeugt durch Klarheit. Je nach Anwendung, Komplexität und Branding kommen verschiedene Schriftarten in Betracht. Leider gibt es hier keine silberne Kugel, sondern jede Website muss individuell betrachtet werden.

Du siehst, Typografie ist für Responsive Webdesign trickreich. Ein oft unterschätzter Faktor, der Fachwissen und Gespür für Design benötigt. Optimiere die Schrift, um deine Inhalte für alle Geräte und Nutzer zugänglich zu machen.

Bilder passen sich flexibel an mobile Geräte durch Responsive Webdesign an

Optimierte Bilder für Websites

Ein wichtiger Bestandteil moderner Websites sind Bilder. Sei es Hintergrundbilder, Fotos, Illustrationen oder Icons. “Ein Bild sagt tausend Worte” – damit das auch auf mobilen Geräten stimmt, muss Responsive Webdesign genutzt werden.

Zur mobilen Optimierung sind diese drei Werkzeuge empfehlenswert: Verschiedene Bildgrößen, Komprimierung und Lazyload. Die Kombination dieser Methoden erlaubt Flexibilität und kleine Dateigrößen – denn Bilder sind in der Regel der Faktor #1, wenn es um Ladezeiten geht.

Um die verschiedenen Bildgrößen zu verstehen, muss man verstehen wie in HTML das Bildelement funktioniert. Es ist ganz einfach. Im Code steht ein <img> Element, dass auf die URL des Bildes verweist. Der Browser weiß dann, wo er das Bild für diese Stelle herunterladen muss.

Um mehrere Varianten und Größen hinzuzufügen werden zwei Attribute hinzugefügt. Mit dem <Picture> Elemente sage ich dem Browser, dass er bei bestimmten Bildschirmgrößen ein anderes Bild an die Stelle laden soll. Mit dem “srcset” Attribut gebe ich verschiedene Pixeldichten für verschiedene Bildschirme an. So wird bei einem Retina Bildschirm die hochauflösende Variante geladen, während günstige Smartphones die kleinste Variante laden.

Standardmäßig sollten alle Bilder komprimiert sein. Moderne Algorithmen erlauben bei gleicher Qualität die Dateigröße drastisch zu reduzieren. Plattformen wie WordPress kommen von Haus aus mit automatischer Komprimierung, Alternativen sind Photoshop oder Task Runner.

Da wir die richtigen Bilder mit kleinen Dateigrößen laden, sollten wir auch den Ladezeitpunkt optimieren. Standardmäßig lädt der Browser direkt beim Öffnen alle Bilder der gesamten Website herunter. Das kann bei großen Websites zu einer langen Wartezeit und schlechter Nutzererfahrung führen. Die Lösung ist Lazyloading: Durch dynamische Scripts werden nur die Bilder geladen, die im Sichtbereich des Browsers sind.

Das Resultat der drei Werkzeuge sind drastisch schnellere Websites und eine bessere Bewertung der Suchmaschinen. Responsive Webdesign nutzt so nicht nur den Besuchern, sondern auch Unternehmen.

Unternehmenserfolg

Durch Responsive Webdesign mehr Erfolg im Internet

Die Entwicklung ist klar. Der Trend geht stärker denn je Richtung Tablets und Smartphones. Damit deine Website Wettbewerbsfähig bleiben kann, geht an der mobilen Version kein Weg mehr vorbei.

Ich hoffe, du konntest durch diesen Artikel ein besseres Verständnis zu Responsive Webdesign und dessen Anwendung gewinnen. Das flexible Design bietet nicht nur deinen Nutzern, sondern auch deinem Unternehmen viele Vorteile.

Falls dir dieser Artikel helfen konnte, freue ich mich über eine kurze Nachricht. Sende mir dazu einfach eine E-Mail oder schreibe eine Nachricht an meinen LinkedIn Account.

P.S. – Falls du dich weiter mit der Zukunft von Responsive Webdesign beschäftigen möchtest empfehle ich dir Brad Frost – Future Friendly Web Design. Brad hat sehr interessante Ansätze zur Entwicklung der Web-Landschaft.

Inspiriert?

Gestalte jetzt deine Website optimal für alle Endgeräte.

Projektanfrage senden