Responsives Webdesign bezeichnet die Praxis, Websites zu erstellen, die nicht nur optisch ansprechend sind, sondern auch auf verschiedenen Bildschirmgrößen – egal ob Smartphone, Tablet oder Desktop – einwandfrei funktionieren. Wenn responsives Webdesign gut gemacht ist, bleibt es oft unbemerkt – das ist durchaus positiv, denn es bedeutet, dass alles funktioniert. Wenn allerdings der Content einer Website auf einem Bildschirm gut lesbar erscheint, das Layout auf einem anderen jedoch nicht korrekt angezeigt wird, ist das ein Zeichen dafür, dass nicht für jede Plattform und jedes Device optimiert wurde. Das kann zu Frustration bei Benutzenden und zu inkonsistenten oder schlechten digitalen Erlebnissen führen.
Eine Website, die auf verschiedenen Geräten nicht richtig angezeigt wird, sorgt für ein negatives Erlebnis. Wenn ihr versteht, wie wichtig es ist, wie eure Website auf verschiedenen Plattformen angezeigt wird, könnt ihr eine bessere User Experience schaffen.
Egal, ob ihr im Design arbeitet, Entwickelnde, Marketing-Fachleute oder Führungskräfte seid – ihr wollt sicherstellen, dass euer Website-Content effektiv Device-übergreifend optimiert ist. Ihr müsst ein Grundverständnis der wichtigsten Punkte für responsives Webdesigns entwickeln, bevor ihr anfangen könnt, darüber nachzudenken, wie ihr es auf eurer Website implementiert.
In diesem Artikel erfahrt ihr, was responsives Webdesign ist, seht einige Beispiele, wie ihr eure Website responsiver machen könnt, und lernt ein paar Best Practices kennen.
In diesem Beitrag werden die folgenden Themen behandelt:
Was ist responsives Webdesign?
Responsives Webdesign berücksichtigt Plattform, Bildschirmgröße und Bildschirmausrichtung der Benutzenden, um dynamische Änderungen daran vorzunehmen, wie Content angezeigt wird. Responsive Web-Seiten haben auf vielen verschiedenen Geräten und Bildschirmgrößen eine konsistente Qualität. Eine responsiv gestaltete Website ist optisch ansprechend, funktional und benutzerfreundlich – ganz gleich, mit welchem Device Verbrauchende darauf zugreifen.
Wenn Designer eine Website mit responsivem Design erstellen, achten sie darauf, dass das Erlebnis die vielen verschiedenen Benutzertypen berücksichtigt, die darauf zugreifen und damit interagieren. Responsives Webdesign macht Websites schneller und verbessert deren Zugänglichkeit und Navigation. Sie hilft Benutzenden, die gewünschten Informationen zu finden und ermutigt sie, auf der Website zu bleiben – was die Interaktion und den Umsatz steigern kann.
Es gibt auch interne Vorteile. Da eine responsive Website dynamisch ist und für jedes Gerät dieselbe Codebasis verwendet werden kann, sind Entwicklung und Wartung ebenfalls einfacher und schneller.
Da mobile Geräte – von Smartphones bis hin zu Tablets – inzwischen für mehr als 60 % des gesamten Web-Traffics verantwortlich sind, ist eine responsive Website entscheidend, um wettbewerbsfähig zu bleiben, und sollte für jede Firma oberste Priorität haben.
Wie ihr Breakpoints verwendet.
Ein Breakpoint im responsiven Webdesign legt fest, wann sich der Content und das Design einer Website an eine neue Bildschirmgröße anpassen, um das bestmögliche Anwendererlebnis zu bieten. Mit anderen Worten bestimmen Breakpoints, wie eine Website dargestellt wird. Sie basieren typischerweise auf der Browser-Breite.
Content kann bei unterschiedlichen Bildschirmgrößen schwer zu lesen sein. Dies lässt sich mit responsiven Breakpoints verbessern. In der Regel gibt es Breakpoints für Mobilgeräte, Tablets sowie Laptop- oder Desktop-Computer – sie lassen sich jedoch benutzerdefiniert anpassen, damit ihr alle Geräte abdeckt und für maximale Flexibilität sorgt.
Legt am besten mehrere Breakpoints fest, damit eure Benutzenden unabhängig von ihrer Bildschirmgröße ein reibungsloseres Erlebnis haben. Dies geschieht, indem ihr das Layout einer Seite in Raster unterteilt, die wiederum in Einheiten unterteilt sind, die ein Vielfaches von vier darstellen. Designer setzen in der Regel zwei oder drei Breakpoints pro Seite ein. Es wird jedoch empfohlen, die folgenden Größen zu berücksichtigen:
- Extraklein: Normalerweise basierend auf einem 4-Spalten-Raster; dieser Bereich ist für Mobile User gedacht und geht bis zu 500 Pixel.
- Klein: Deckt einen Bereich von Tablet-Größen von 500 bis 1200 Pixel ab, typischerweise innerhalb eines 8-Spalten-Rasters.
- Medium: Für Laptops konzipiert, geht dieses 12-Spalten-Raster von 1200 bis 1400 Pixel.
- Groß: Diese Größe wird für größere Monitore hochgesetzt und beginnt bei 1.400 Pixeln. Für diese Größe wird ein 12-spaltiges Raster verwendet.
Vorteile der responsiven Web-Entwicklung.
Responsive Web-Entwicklung bietet Vorteile in drei Schlüsselaspekten: User Experience oder Anwendererlebnis (UX), Suchmaschinen-Optimierung (SEO) und geschäftlicher Nutzen. Schaut euch die einzelnen Bereiche unten genauer an:
User Experience (UX).
Responsive Web-Entwicklung sorgt dafür, dass eure Web-Seiten sich automatisch an jeden Screen anpassen. Ohne responsiv gestaltete Web-Seiten sind Websites oft schwierig oder frustrierend zu bedienen und können Anwendende davon abhalten, zurückzukehren. Selbst wenn ein Benutzer auf einer nicht responsiven Seite bleibt, kann er wichtige Informationen verpassen, wenn sie durch ein ungünstiges Layout ausgeblendet sind. Dies kann sich auf die Konversionsraten auswirken und die Neigung zum Absprung von Anwendenden erhöhen.
SEO.
Ein wichtiger Ranking-Faktor für die Google-Suchmaschine ist die Mobilfreundlichkeit einer Website, wobei responsives Webdesign helfen kann. Darüber hinaus verwendet eine responsive Website für alle Websites eine einzige Codebasis, wodurch das Risiko für Strafen aufgrund von Duplikat-Content verringert wird. Das bedeutet, dass responsive Websites mit größerer Wahrscheinlichkeit weit oben in den Suchmaschinenergebnissen erscheinen – über denen eurer Konkurrenten. Dadurch steigt der Traffic auf eurer Website.
Geschäftliche Vorteile.
Kurz gesagt, die Kosten für den Betrieb einer einzigen responsiven Website sind geringer, sie ist effizienter und leichter zu warten als der Betrieb mehrerer Versionen für verschiedene Geräte. Kombiniert ihr das mit der verbesserten Benutzeroberfläche (UI) und der erhöhten Sichtbarkeit in den Suchergebnissen, ist es wahrscheinlich, dass ihr auch einen Anstieg der Conversions sehen werdet.
Techniken und Methoden für responsives Webdesign.
Nachdem ihr nun eine grundlegende Definition von responsivem Webdesign kennt, schauen wir uns einige der häufigsten Methoden an, mit denen ihr eine Website responsiv gestalten könnt.
- HTML und CSS: Diese beiden Technologien ermöglichen es, eine Website automatisch zu skalieren, auszublenden, zu verkleinern oder zu vergrößern. Während HTML Struktur und Content steuert, steuern Cascading Style Sheets (CSS) Design und Layout.
- Medienabfrage: Eine Medienabfrage ist eine CSS-Technik, mit der Websites und Programme basierend auf dem Gerätetyp oder einer bestimmten Eigenschaft – zum Beispiel der Bildschirmgröße und -auflösung – angepasst werden.
- Layout: Ein fluides Layout verwendet Prozentwerte, zum Beispiel für die Größe des Bildschirms. Im Gegensatz dazu passt ein Flexbox-Layout die Elemente so an, dass sie freien Platz ausfüllen oder verkleinert sie, um ein Überlaufen zu verhindern.
- Responsive Bilder: Mit responsivem Webdesign könnt ihr dynamische Variablen verwenden, um die Bildbreite und -höhe zu steuern.
- Geschwindigkeit: Seiten, die schneller geladen werden, weisen eine niedrigere Absprungrate auf. Wenn ihr Bilder für effizientes Laden optimiert, Caching nutzt und den kritischen Renderpfad verbessert, könnt ihr die Geschwindigkeit erhöhen.
Beispiele für responsives Webdesign.
Viele Unternehmen mit großer Online-Präsenz haben ihre Websites aktualisiert, damit sie für unterschiedliche Benutzende und Geräte responsiv sind. Schauen wir uns einige Beispiele für responsives Webdesign an.
The New York Times.
2018 verbesserte die New York Times die Geschwindigkeit und das Anwendererlebnis ihrer Website mit responsivem Webdesign. Die Aktualisierung machte die Website einheitlicher und verschaffte digitalen Leserinnen und Lesern einfachen Zugang zu allen digitalen Plattformen der Zeitung.
Nachdem die Times die mobile App zunächst benutzerfreundlicher und visuell ansprechender gemacht hatte – ganz im Stil des Papierformats –, stellte sie fest, dass ihr Desktop-Design hinterherhinkte. Diese Erkenntnis führte dazu, dass das Webdesign für Laptop- und Desktop-Benutzende verbessert wurde, sodass sie jetzt ein Erlebnis erfahren wie Benutzende der mobilen App oder Lesende der gedruckten Zeitung.
Dropbox.
Der beliebte Datei-Hosting- und Cloud-Speicher-Dienst hat seine Website ebenfalls überarbeitet und angepasst, damit sie besser auf Mobilgeräte abgestimmt ist. Beim Vergleich der beiden Layouts wird deutlich, dass die Desktop-Version (rechts) der mobilen Version (links) sehr ähnlich ist. Es gibt jedoch subtile Veränderungen bei den Gitterfarben und Schriftarten, damit die Seite lesbar bleibt.
Etsy.
Etsys Website zeigt, wie die Firma ihre Größe, Schriftarten und Menüoptionen an verschiedene Arten und Größen von Bildschirmen anpasst. Die Tablet- und Desktop-Versionen sind ähnlich aufgebaut – die einzigen Unterschiede sind die Kopfzeile-Optionen und ein leicht angepasstes Design, was auf eine Device-basierte Veränderung der Benutzerabsicht hindeutet. Wenn ihr diese Versionen mit der Art und Weise vergleicht, wie Etsys Website auf einem Mobilgerät angezeigt wird, fällt euch auf, dass die Navigation komplett verschwindet, um für mehr Übersicht zu sorgen.
Auf Mobilgeräten priorisiert Etsy eindeutig die Personalisierung und hilft der Kundschaft gleichzeitig dabei, schnell zu den Produkten zu gelangen.
GitHub.
Diese Website zeigt, worauf es bei den Geschäfts- und Conversions-Zielen einer Firma ankommt. Eines der ersten Dinge, die eine besuchende Person auf der Desktop-Version sieht, sind Produktangebote und ein Formular, mit dem sie sich bei GitHub registrieren kann.
Auf dem Mobile-Display wird die Hauptseite zum Anmelden oder Registrieren noch deutlicher hervorgehoben, ohne die zusätzlichen Inhalte und Elemente, die bei größeren Auflösungen angezeigt werden.
Slack.
Slack gruppiert seine Website-Optionen für Mobile und Tablet in einem Hamburger-Menü, während auf der Desktop-Version eine Navigationsleiste oben auf dem Bildschirm angezeigt wird. Außerdem werden auf Mobilgeräten weniger CTAs angezeigt. Die beiden CTAs im oberen Bereich der Desktop-Ansicht werden in der Mobile- und Tablet-Ansicht durch eine große Schaltfläche ersetzt, die fast den gesamten Vollbildschirm ausfüllt.
Außerdem wird mobil der Content der Web-Seite vertikal in einer Spalte komprimiert, wobei Textabsätze über und unter den Bildern angeordnet sind.
Starbucks.
Starbucks verdeutlicht, wie einfaches, ansprechendes responsives Webdesign aussieht, wenn es richtig gemacht wird. Es gibt keinen ausgefallenen Parallaxen-Effekt, aber die farbenfrohen, statischen Bilder von saisonalen Produkten kommen gut zur Geltung.
Ein Problem besteht jedoch darin, dass die Menü-Option, die auf dem Desktop ein Produktmenü ist, beim Verkleinern des Designs in ein allgemeines Hamburger-Menü integriert wird. Das könnte für euch verwirrend sein, wenn ihr nicht erwartet, Essensoptionen zu sehen, wenn ihr das Hamburger-Menü offen habt.
Best Practices für responsives Webdesign.
Jetzt, da ihr wisst, was responsives Webdesign ist und Beispiele gesehen habt, schauen wir uns die wichtigsten Best Practices an.
Content priorisieren.
Stellt sicher, dass eure Benutzenden den gewünschten Content finden können – mit möglichst wenig scrollen oder suchen. Auch wenn die Ansicht von Website-Informationen auf dem Desktop weniger scrollen erfordert, kann die Ansicht derselben Informationen auf einem Mobilgerät zu einem schlechten Anwendererlebnis führen, wenn der Content umfangreich ist und Schriftarten oder Grafiken nicht an die Bildschirmgröße angepasst werden.
Denkt daran, Content zu erstellen, der in den angegebenen Sichtbereich passt, damit eure Verbrauchenden die gesuchten Informationen leicht finden können.
Reibung reduzieren.
Startet, indem ihr das Hauptziel der Seite identifiziert und sie mit diesem Zweck im Sinn gestaltet. Vermeidet es, eure Benutzenden mit zu vielen CTAs zu überfordern. Ihr müsst jede Version eurer Website an die Bedürfnisse der Benutzerinnen und Benutzer anpassen. Ein Mobile-First-Design-Ansatz hilft Designern zu erkennen und zu entscheiden, was unbedingt auf die Website gehört, damit das Hauptziel der Firma erreicht wird. Ein Beispiel für ein Hauptziel könnte der Kauf eines Produkts oder einer Dienstleistung sein.
Wenn es an der Zeit ist, die Tablet- und Desktop-Versionen der Website aufzubauen, könnt ihr anfangen, über sekundäre Ziele nachzudenken. Dazu gehört, dass ihr Prompts zur Anmeldung für einen Newsletter hinzufügt, um spätere Käufe zu fördern – und entscheidet, welche CTAs und Mikrointeraktionen das ermöglichen. Das Wichtigste ist, dass ihr euch zuerst auf die primären Ziele der Benutzenden konzentriert und dann alle unnötige Reibung ausschaltet, die weder den primären noch den sekundären Zielen dient.
An eure Daumen denken.
Stellt sicher, dass die wichtigen Elemente der Seite auf dem Handy bequem mit dem Daumen erreicht werden können. Der wichtigste Unterschied zwischen Desktop-Benutzenden und Mobile-Benutzenden ist, dass erstere ihren Computer typischerweise auf einer Oberfläche stehen haben, während letztere ihr Device in der Hand halten.
Das verändert erheblich, wie Webdesigner Tippziele und andere Elemente gestalten, mit denen Benutzende interagieren. Beispielsweise erwarten die Menschen auf Desktops normalerweise, dass sich die Hauptnavigation oben befindet. Aber auf Mobile sollte die Navigation in der Mitte oder unten sein, weil ihr sie oben mit dem Daumen nicht gut erreichen könnt.
Gemeinsam gestalten und und entwickeln.
Denkt daran, dass responsives Webdesign ein Ansatz ist, der darauf ausgelegt ist, dass sowohl Design als auch Entwicklung auf das Verhalten und die Umgebung der Benutzenden reagieren – deshalb ist es wichtig, dass sie effektiv zusammenarbeiten. Design und Entwicklung stimmen sich ab, um herauszufinden, wie die Inhalte angeordnet werden und wie das Ergebnis aussehen soll.
Indem ihr gemeinsam designt und entwickelt, könnt ihr:
- Lesbarkeit verbessern.
- Verweildauer auf der Website erhöhen.
- Interaktionen verbessern.
- E-Commerce-Umsatz verbessern.
- Anwendererlebnis insgesamt verbessern.
Um responsives Webdesign praktisch anzuwenden, startet ihr damit, Informationen zu sammeln, die Struktur zu organisieren und das Aussehen der Website zu entwerfen. Dann könnt ihr eine Beta-Version eurer Website testen und starten.
Dem Ganzen Struktur geben.
Responsivität muss in eure Prozesse und Systeme eingebaut werden, nicht nur in eine Web-Seite oder eine bestimmte Marketing-Kampagne. Webdesignerinnen und -designer sollten ihren Fokus auf Responsivität und Funktionalität auf Komponentenebene legen.
Statt über eine ganze Produktseite nachzudenken, überlegt euch, wie der Marquee auf einer Produktseite responsiv umgesetzt wird. Denkt an Karten bzw. Vignetten, Karussells und Handlungsaufrufe (CTAs). Überlegt euch, was nötig ist, damit jede Komponente in verschiedenen Viewport-Größen und Bildschirmauflösungen zur Geltung kommt. Wenn dann eure Design-Teams Anfragen zur Seitenerstellung erhalten, haben sie die bereiten Komponenten schon parat und können den Fokus auf den spezifischen Seiten-Content legen, um das Anwendererlebnis abzurunden.
Regelmäßig testen.
Es ist entscheidend, regelmäßig Usability-Tests auf verschiedenen Plattformen durchzuführen. Testet die Navigation auf der Website. Wenn sich das Gerät ändert, sollte sich auch die Navigationsleiste ändern. Ihr müsst die Tests der Navigation-Designs auf verschiedenen Screens durchführen und sicherstellen, dass dies nicht zu einem schlechten Anwendererlebnis führt.
Ihr könnt auch Schriftarten auf mehreren Geräten testen. Vielleicht möchtet ihr für den Content eurer Website unterschiedliche Schriftarten und Designmethoden verwenden. Allerdings werden diese Schriftarten möglicherweise nicht überall unterstützt, sodass sie auf dem Gerät einer Verbraucherin oder eines Verbrauchers als zufällige Zeichen oder Codes angezeigt werden. Vergesst nicht, die Schriftarten auf mehreren Geräten zu testen, bevor ihr die Aktualisierung auf eurer Website startet.
Testet unbedingt Geräte-Browser-Kombinationen. Ihr könnt die Web- und Mobile-Traffic-Daten aus Google Analytics analysieren und die Browser, die am häufigsten für den Besuch eurer Website verwendet werden, in eure Tests aufnehmen. Abschließend testet die Geschwindigkeit eurer Website, indem ihr die Ladezeiten verschiedener Inhalte wie Bilder und Videos auf unterschiedlichen Devices, berücksichtigt.
Eure eigenen responsiven Websites erstellen.
Sicherzustellen, dass eure Website auf allen Geräten und Plattformen optimal angezeigt wird, ist ein entscheidender Teil, um euren Besuchenden ein optimales Erlebnis zu bieten.
Wenn ihr bereit seid, mit der Implementierung von responsivem Webdesign zu starten, wählt einen Teil eurer Website aus, den ihr umgestalten möchtet. Entscheidet, was der Hauptfokus der Seite sein soll, und startet dann damit, darüber nachzudenken, wie ihr das Design darauf ausrichten könnt, um euer gewünschtes Ziel zu erreichen.
Adobe Experience Manager Sites macht es euch leicht, Web-Seiten zu erstellen, die sich optimal an nahezu jedes Gerät anpassen – so bekommen eure Benutzenden immer das beste Erlebnis.
Um herauszufinden, wie Experience Manager Sites euch beim Erstellen responsiver Websites unterstützen kann, schaut euch das Überblicksvideo an oder registriert euch für eine Produkttour.
Häufig gestellte Fragen.
Was sind die drei grundlegenden Elemente, die für responsives Webdesign erforderlich sind?
Responsives Webdesign besteht aus mehreren Bestandteilen, aber die drei Kernelemente sind:
- Medienabfragen: Eine Medienabfrage ist eine Cascading Style Sheets (CSS)-Technik, die Stile basierend auf Bildschirmgröße, Auflösung oder Gerätetyp anwendet. Damit passen sich flüssige Layouts an, sodass Content auf unterschiedlichen Devices ansprechend aussieht und optimal funktioniert.
- Flexibles Rasterlayout: Diese verwenden Prozentsätze oder em-Einheiten, um die Größe und den Abstand eines Elements auf der Seite festzulegen.
- Flexible Bilder und Medien: Flexible Bilder und Medien sind so gestaltet, dass sie ihre Größe innerhalb ihrer Elemente ändern, um auf verschiedenen Screens zu funktionieren.
Ist responsives Design UX oder Benutzeroberfläche?
Aspekte der Benutzeroberfläche (User Interface, UI), wie das gesamte Layout, werden direkt vom responsiven Webdesign beeinflusst.
Responsives Design verbessert jedoch eure gesamte User Experience (UX), indem sichergestellt wird, dass ihr eine Website unabhängig von der Bildschirmgröße verwenden und navigieren könnt. Alles in allem ist responsives Design eine Kombination aus UX und Benutzeroberfläche.
Was ist der Unterschied zwischen responsivem Design und adaptivem Design? Wie unterscheidet ihr responsives Design von adaptivem Design?
Empfehlungen für euch
https://business.adobe.com/fragments/resources/cards/thank-you-collections/experience-manager-sites
