Wir sollten mit der grundlegendsten Frage beginnen: Was ist Responsives Webdesign (RWD)? Wir werden sie so einfach und knapp wie möglich beantworten.
Responsive Webanwendung (Website) Design ändert seine Größe und sein Layout und unterstützt verschiedene Auflösungen, je nach der Diagonale des Bildschirms, auf dem die Anwendung angezeigt wird.
Mit anderen Worten: Eine Webanwendung wird auf verschiedenen Bildschirmen unterschiedlich dargestellt und passt sich jedes Mal an, um eine optimale Anordnung der Elemente zu erreichen.
Responsives Webdesign verfolgt im Wesentlichen zwei Ziele.
Um die bestmögliche Benutzererfahrung auf jedem Gerät zu erreichen und visuelle Konsistenz zu erzielen.
Die Darstellung der Webanwendung auf einem Bildschirm, Laptop, Telefon oder Tablet sollte sich nicht wesentlich unterscheiden.
Responsives Design (RWD-Website-Entwicklung, RWD-Technologie) entstand aus der Überzeugung, dass die Größe des verfügbaren Platzes, das Seitenverhältnis und die Bildschirmauflösung der entscheidende Kontext sind.
Sie wird als gestalterische Herausforderung betrachtet, die darauf abzielt, die Erwartungen der Nutzer zu erfüllen. Seine Beliebtheit ist auch auf die Tatsache zurückzuführen, dass mobile Geräte jedes Jahr einen größeren Anteil des Marktkuchens einnehmen.
Wir Auditieren. Wir Forschen. Wir Gestalten.
Responsives Webdesign und die Herausforderungen von Mobile
Wie mein Statistikprofessor zu sagen pflegte: "Man argumentiert nicht mit Zahlen, man interpretiert sie." Und die Zahlen deuten seit vielen Jahren darauf hin, dass die Zukunft den mobilen Geräten gehört.
Bereits 2015 hat Google empfohlen, responsive Webanwendungen zu erstellen.
Websites, die im Geiste des "Mobile First"-Konzepts erstellt wurden und auf mobile Geräte ausgerichtet sind, können damit rechnen, dass sie in den Suchergebnissen besser platziert werden. Die Veränderung war so revolutionär, dass sie in der Fachpresse einen eigenen Namen erhielt: Mobilegeddon.
Bis Ende 2020 werden mehr als 3,5 Milliarden Menschen ein Smartphone benutzen. Im Durchschnitt verbringen wir fast 3 Stunden am Mobiltelefon.
Fast 70 % der "intelligenten Benutzer" suchen über mobile Geräte nach Produktinformationen.
Ein ähnlicher Anteil kauft in Online-Shops über Mobiltelefone ein. Und so weiter. Diejenigen, die an weiteren Statistiken interessiert sind, verweise ich auf die Quelle für diese Daten. Sie können es hier finden.
Aus gestalterischer Sicht bedeuten diese Trends die Notwendigkeit von RWD-Anwendungen (Responsive Websites). Mobile First hat sich zu einem Standardkonzept entwickelt. Allerdings ist er nicht der einzige. Später werde ich in diesem Artikel mehr über den wettbewerbsorientierten Ansatz (Adaptive Design) schreiben.
Responsives Webdesign steht auch im Zusammenhang mit der Einzigartigkeit von Mobilgeräten. Die Taktilität von Mobiltelefonen und Tablets erzwingt eine andere Herangehensweise an die Gestaltung (z. B. von Schnittstellen und Menüs).
Und hier treffen wir auf die entscheidende Kluft zwischen den beiden vorherrschenden Ansätzen zur Entwicklung von Webanwendungen. Responsives Webdesign und Adaptives Webdesign.
Woher kommen Responsives Webdesign und Adaptives Webdesign?
Beide Begriffe, Ansätze und Gestaltungsmethoden verdanken ihre Popularität den Büchern zweier Autoren: Ethan Marcotte und Aaron Gustafson. Der erste Autor hat das Buch "Responsive Web Design" geschrieben, der zweite ist der Autor von "Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement".
Beide Werke haben die Entwicklung von Webanwendungen geprägt und die Designwelt in zwei Lager geteilt — die Anhänger des Responsiven Webdesigns und des Adaptiven Webdesigns. Das derzeitige Kräfteverhältnis deutet jedoch stark darauf hin, dass der erste Ansatz populärer ist.
Es lohnt sich, mehr über beide Ansätze zu erfahren, denn sie haben, wie so oft, ihre Vor- und Nachteile. Viele Variablen beeinflussen die Entscheidung für eine der beiden Möglichkeiten. Und das hängt ganz einfach von unseren Zielen, Bedürfnissen und Fähigkeiten ab.
Was ist der unterschied zwischen Responsivem und Adaptivem Design?
Alles deutet darauf hin, dass das Problem der Anpassung von Anwendungsdesigns an die derzeit auf dem Markt befindlichen Geräte weiter zunehmen wird. Die Vielfalt an Größen, Proportionen und Auflösungen erfordert eine Entscheidung über die bevorzugte Gestaltungsart.
Was ist der unterschied zwischen Responsivem und Adaptivem Design? Beginnen wir mit dem RWD-Design.
Reaktionsfähigkeit einer Anwendung bedeutet ihre reibungslose und automatische Anpassung an den verfügbaren Raum. Der Stil ändert sich je nach Zielgerät; daher ist der wichtigste Entwurfspunkt die Einfachheit.
Adaptives Webdesign verlässt sich nicht darauf, dass sich eine Anwendung reibungslos und automatisch an die Größe und Auflösung des Bildschirms eines Geräts anpasst. Anstelle eines "flexiblen" Entwurfs gibt es viele "statische" Entwürfe.
Normalerweise gibt es 6 davon — für die 6 gängigsten Bildschirmgrößen: 320, 480, 760, 960, 1200 und 1600 Pixel. Das Erscheinungsbild einer App ist auf jedem Gerät etwas anders, und der Unterschied ergibt sich nicht nur aus den Beschränkungen eines Geräts, sondern auch aus der Notwendigkeit, eine App zu entwickeln, die ein sehr gutes Benutzererlebnis bietet.
Vor- und Nachteile von Responsivem Design und Adaptivem Design
Beide Ansätze haben viele Vorteile, sind aber auch nicht ohne Makel. Die Bewertung ihrer Nützlichkeit ist weitgehend subjektiv und hängt von den Bedürfnissen und Zielen ab.
Wir werden eine gleiche Anzahl von Anträgen namhafter Unternehmen finden, die in RWD- und AWD-Modellen erstellt wurden. Schauen wir uns die wichtigsten Merkmale beider Ansätze an.
Responsives Webdesign ist:
- weniger arbeitsintensiv
- verhältnismäßig einfacher, sicherlich konsistenter
- weniger problematisch, aber nicht unproblematisch
- problematisch, wenn die Anwendung nicht von Grund auf neu erstellt, sondern aktualisiert werden soll
- SEO-freundlich — in größerem Umfang — es wird von der Suchmaschine Google empfohlen
- relativ einfach zu implementieren
- effizienter im Hinblick auf die Benutzererfahrung
- ermöglicht es Designern, die beste UX für ein bestimmtes Gerät zu erstellen
- flexibler, wenn es um weniger gängige Bildschirmgrößen geht
- bietet nicht viel Kontrolle — aber die Anwendungen sind nicht so zeitaufwendig zu pflegen
- mehr Arbeit bei der Programmierung erfordern
- leicht zu ändern und zu optimieren
- basierend auf einem mittelgroßen Muster
- weniger auf die Bedürfnisse der Benutzer eingehen.
Adaptives Webdesign ist:
- arbeitsintensiver
- weniger flexibel für nicht standardisierte Bildschirme
- die als problematischer angesehen werden
- nützlicher für die Aktualisierung oder Anpassung bestehender Websites
- SEO-unfreundlich — in vielen Fällen haben die Crawler von Google Probleme, die Identität von Inhalten in verschiedenen Versionen zu erkennen
- schwieriger zu realisieren
- bietet mehr Kontrolle, ist aber zeitaufwändiger in der Wartung
- weniger problematisch in Bezug auf die Programmierung
- viel problematischer in Bezug auf Änderung und Optimierung
- ohne eine als Referenz dienende Vorlage
- die Erwartungen der Benutzer besser erfüllen können.
Eigenständiges mobiles Design
Der Vollständigkeit halber sei erwähnt, dass es noch einen dritten Ansatz gibt, nämlich die Erstellung separater mobiler Versionen. Obwohl viele Unternehmen vor einigen Jahren eine solche Lösung verwendeten, ist sie heute nicht mehr populär oder empfehlenswert.
Diese Lösung hat sich aus mehreren Gründen nicht durchgesetzt. Dies war unter anderem auf die Suchmaschinenpolitik von Google zurückzuführen, die mobile Versionen nicht bevorzugte. Ein weiterer Grund war die Problematik der Wahrung der Konsistenz zwischen den Varianten.
Die drei Hauptprinzipien des Responsiven Designs
Responsives Design hat nicht nur seine Fans und Befürworter, sondern auch Muster von bewährten Designpraktiken hervorgebracht. Hier sind sie.
Fluid Grid Systeme
Bislang wurden Websites ähnlich wie Zeitungslayouts gestaltet. Die Platzierung, Größe, Abstände und Hierarchien der Elemente wurden in absoluten Werten ausgedrückt — in Zentimetern und Millimetern. Im Falle von Websites — Pixel. Die guten alten Zeiten, in denen das Design nur auf Desktop-Bildschirme ausgerichtet war, sind vorbei, und im Zeitalter der Mobiltelefone ist ein völlig anderer Designansatz erforderlich.
Im Fall des Responsiven Designs ist es viel sinnvoller, solche Werte relativ auszudrücken, also abhängig von zwei Variablen — der Zielgröße und dem Anzeigekontext, d. h. dem Wert der Abmessungen auf einem bestimmten Gerät.
Die Idee ist einfach, aber zum besseren Verständnis ist ein Beispiel erforderlich. Die relative Größe entspricht dem Verhältnis zwischen der Zielgröße und der Kontextgröße. Wenn also das Design mit einer Standardseitenbreite von 960 Pixeln erstellt wurde und auf einem Gerät mit einer Breite von 1280 Pixeln angezeigt wird, beträgt die relative Größe 75 %. In der Praxis bedeutet dies, dass unser Projekt 75 % der verfügbaren Fläche in Anspruch nehmen wird.
Jetzt müssen wir nur noch den Prozentsatz (Breite, Ränder usw.) in den CSS-Skripteigenschaften angeben.
Flüssiges Bild
Responsives Design bedeutet auch das Problem der Anpassung von grafischen Elementen an eine bestimmte Größe — zum Beispiel von Fotos oder Grafiken. Ein effektiver Weg, dieses Problem zu lösen, ist die Verwendung des CSS-Befehls: img {max-width: 100 %;}.
Dies gibt dem Browser einen klaren Hinweis darauf, wie das Bild skaliert werden sollte. Sie schützt die Bilder vor einer Überdehnung, wenn der verfügbare Platz größer ist.
Medienabfragen/Haltepunkte
Mithilfe von Media Queries können wir festlegen, wie eine Anwendung auf einem bestimmten Gerät und in einer bestimmten Größe angezeigt werden soll. Sie ermöglichen es uns, zu bestimmen, unter welchen Bedingungen das Layout der Website geändert werden kann und wie dies geschehen soll.
Zum Beispiel wird eine Anwendung, deren Layout in der Desktop-Version auf 3 Spalten basiert, in der mobilen Version in einer einspaltigen Variante angezeigt. Mit Haltepunkten ist es möglich, die Punkte anzugeben, an denen das Layout geändert werden soll.
Frameworks
Die Entwicklung des "Mobile First"-Konzepts hat zu einer Reihe von öffentlich verfügbaren Frameworks geführt. Daher ist es eine der besten Praktiken, sie zu verwenden. Die Suche nach Lösungen auf eigene Faust bedeutet in der Regel eine unnötige Zeitverschwendung. Bootstrap ist ein gutes Beispiel für ein empfohlenes Framework, das Sie hier herunterladen können.
Zusammenfassung
- Responsives Design (RWD) beinhaltet die Anpassung der Größe und des Layouts der Seite an das Gerät, die Diagonale und die Bildschirmauflösung, auf dem die Anwendung angezeigt werden soll.
- Responsives Webdesign ist einer der beiden vorherrschenden Ansätze für die Gestaltung von Webanwendungen. Adaptives Webdesign ist ein Ansatz, der derzeit (Ende 2020) weniger populär ist.
- RWD ist der von der Google-Suchmaschine empfohlene Ansatz.
- Beide Ansätze — RWD und AWD — haben ihre Vor- und Nachteile, und die Entscheidung für einen Ansatz ist eine Frage der Ziele, der Bedürfnisse, aber auch der individuellen Vorlieben.
- Eigenständige mobile Versionen mit dem markanten Buchstaben "m" in der Adresse (z. B. m.example.com) gehören langsam der Vergangenheit an und werden nicht empfohlen.
- Responsives Webdesign hat sich zu einem Muster bewährter Verfahren entwickelt.
- Die drei Hauptprinzipien des Responsiven Designs, die von der Interaction Design Foundation empfohlen werden, sind Fluid Grid System, Fluid Image und Media Queries/Breakpoints.
- Die Forscher der Interaction Design Foundation empfehlen, die oben genannten Prinzipien durch ein weiteres zu ergänzen, das sich auf Open-Source-Frameworks bezieht.
