Was ist Responsive Web Design?

Entwurfsdefinition

Responsive Web-Design ist ein Web-Design-Ansatz, der auf die Entwicklung von Websites, die eine optimale Lese-und Navigations-Erfahrung für den Benutzer, unabhängig von seiner Reihe von Geräten (Handys, Tabletten, Leser, Computer).

Eine erfolgreiche "Responsive" User Experience beinhaltet minimale Größenänderung (Zooming), Zuschneiden und multidirektionale Seitenblättern.

Der Begriff "Responsive Web Design" wurde von Ethan Marcotte in einem Artikel von A List Apart veröffentlicht im Mai 2010 eingeführt.
Er wird seine Theorie und Praxis des Ansprechens in seinem im Jahr 2011 veröffentlichten Buch "Responsive Web Design" beschreiben. Es beschränkt sich auf Anpassungen auf der Client-Seite (flexible Gitter in Prozent, flüssige Bilder und CSS3 Media Queries).
Dedizierte Website, Anwendung oder reagiert? Wir haben derzeit drei Möglichkeiten, um Web-Inhalte auf angeschlossenen Geräten zu vermitteln: eine dedizierte Website, eine native Anwendung und eine reaktionsfähige Website-Version. Seien Sie sich bewusst, dass jede Lösung Vor- und Nachteile hat: Je nach Ihren Bedürfnissen und Einschränkungen (einschließlich Budget und Zeitrahmen) kann es vollkommen angemessen sein, sich für die eine oder andere zu entscheiden. Eine eigene Website mobile web Ein dediziertes Standortprojekt besteht darin, zwei oder mehr verschiedene Entitäten je nach dem vorgesehenen Gerät zu entwerfen: eine Hauptwebsite, eine Smartphone-Website, eine Tablet-Site usw. Typischerweise erkennt ein anfänglicher serverseitiger Test den Gerätetyp und kehrt zu einer dedizierten Webadresse zurück (zB m.monsite.com). Die Vorteile von dedizierten Webseiten sind: Die Möglichkeit der präzisen Verfeinerung der Struktur des Geländes und seines Inhalts in Bezug auf das verwendete Gerät Die Fähigkeit, sich anzupassen und an eine Vielzahl von Features anzupassen (einschließlich Touch) Kann eine "schnelle" Alternative sein und auf eine komplette (und reaktionsschnelle) Neugestaltung ihrer Website warten Aber eine dedizierte Seite ist nicht frei von Nachteilen: Der doppelte Inhalt Wartung von mehreren Standortversionen und mehreren Webadressen (weniger leicht durch eine Suchmaschine indexierbar) UA schnüffeln oft voreingenommen oder nicht aktuell
Eine native Anwendung

Eine native Anwendung ist ein Produkt, das speziell in verschiedenen "Sprachen" (iOS, Android, WindowsPhone) entwickelt wurde und das in einem "Store" (AppStore, Google Play, Windows Store) herunterlädt und verweist.

Das gibt ihm einige Vorteile:

Einfache Unterstützung für native Funktionalität (Touch, Beschleunigungsmesser, Benachrichtigungen, GPS, etc.)
Eine mögliche Installation auf seinem Gerät
Eine totale "Akklimatisierung" des Gerätes (Ergonomie, Leistung, Pixeldichte)
Die Anwesenheit seiner Marke auf dem AppStore (um ihn zu nennen) und in der Lage sein, eine "Verknüpfung" auf dem Smartphone des Benutzers zu haben
... aber auch einige Nachteile:

Eine spezifische Entwicklung in mehreren Sprachen (spezifisch für iOS, Android, WindowsPhone, etc.)
Die Kosten für Entwicklung, Lizenzierung und Wartung für jedes Betriebssystem
Inhalt, der nicht durch eine Standard-Websuchmaschine indexierbar ist
Das Aktualisieren der Anwendung erfordert Benutzeraktion
Eine ansprechende Version

Zu einer Zeit, in der Hunderte von verschiedenen Bildschirmgrößen und Formaten jederzeit verbunden sind, erscheint die Responsive Web-Design-Methode als "Leichtigkeitslösung" unter ihrem Hauptziel:

Anpassung an jede Art von Gerät in einer Weise, die für den Benutzer transparent ist
Kosten und Verzögerungen im Allgemeinen niedriger als die oben genannten Techniken
Einfachere Projektpflege (ein einziges Stylesheet, eine einzelne HTML-Datei etc.)
Ein transparentes Update und eine Multi-Plattform-Implementierung
Die Responsive kann nach dem anfänglichen Design der Website berücksichtigt werden (obwohl dies nicht ideal ist)
Einer der unbestreitbaren Vorteile seit einiger Zeit ist, dass Google "mobile-freundliche" Websites in seine Suchergebnisse stellt:
Die Nachteile sind jedoch nicht

Gute technische Kenntnisse und ständige technologische Überwachung sind unerlässlich
Es ist notwendig, zahlreiche und vielfältige Tests während des gesamten Projekts zu planen ("Gerätelabore", Simulatoren)
Es ist schwierig, die ergonomischen und Leistungsgrenzen von Webbrowsern zu umgehen
Making responsive ist ... länger als nichts zu tun (25% der Überstunden)
Am Ende ist Responsive Web Design nur ein Mittel unter anderem, um seine Ziele zu erreichen, sollte aber nicht als die einzige Möglichkeit betrachtet werden, noch als "magische Lösung" für alle Probleme.

Darüber hinaus ist es oft der Fall, dass eine Kombination von verschiedenen Methoden verwendet wird: zum Beispiel eine Website, die sowohl gewidmet und reaktionsfähig ist, oder eine reaktionsfähige Website mit bestimmten serverseitigen Erkennungen (dies heißt RESS) und so weiter.

Die Website mediaqueri.es ist eine hervorragende Ressource für die Entdeckung anderer reaktionsfähiger Webseiten über ein Verzeichnis.
Responsive, Adaptive oder Fluid? In Frankreich und nach Wikipedia ist Responsive Web Design gleichbedeutend mit "adaptive web site". Technisch, statische, flüssige, adaptive und Responsive Webseiten sollten unterschieden werden: Ein "Statisches" Design Eine statische (oder feste) Konstruktion bezieht sich auf feste Abmessungen (zB 960px) unabhängig von der Oberfläche des Bildschirms. Die überwiegende Mehrheit der Webseiten wurde auf dieser Basis vor der Ankunft von Responsive Web Design in den Jahren 2010 gebaut. Ein "Fluid" Design Eine flüssige Website ist eine Website, in der alle Spaltenbreiten in variablen Einheiten (Prozentsätze, em, vw, etc.) ausgedrückt werden und die sich normalerweise automatisch an die Fenstergröße anpasst, bis zu einem gewissen Grad. Ein "Adaptives" Design Ein Adaptives Design ist eine Verbesserung des statischen Designs: Die Einheiten der Breite sind fixiert, aber je nach Größe des Bildschirms, die über CSS3 Media Queries erkannt wird. Ein solches Design berücksichtigt nur die Hauptbruchpunkte (320px, 480px, 768px, 1024px, etc.) und passt die Schablone entsprechend an. Am Ende finden wir uns mit so vielen festen Vorlagen wie Haltepunkte. Ein "Responsive" Design Eine Responsive-Website ist eine Erweiterung des flüssigen Designs, das mit CSS3 Media Queries-Methoden verknüpft ist, mit denen Sie die Stile (Re-Organisation der Seite zum Beispiel) nach bestimmten Kriterien ändern können, um sich vollständig an die Bildschirmgröße anzupassen die Bruchstelle.
und technisch bedeutet das RWD was?

Seit seiner ersten Bezeichnung im Jahr 2010 hat sich Responsive Web Design etwas entwickelt. Es erfordert derzeit - im Allgemeinen - die folgenden Technologien und Methoden:

Ein Fluidgitter, bei dem die Breiten der Strukturelemente von den Pixeleinheiten befreit sind
Bilder, Medien und flexible Inhalte, die es ihnen erlauben, ihre Eltern nicht zu "überwältigen", wenn sie eingeschränkt sind
Eine Anpassung der Anzeige an das Terminal-Ansichtsfenster
CSS3 Media-Abfragen, um unterschiedliche CSS-Stilregeln abhängig von der Gerätegröße, -orientierung oder dem Verhältnis anzuwenden
Möglicherweise clientseitige bedingte Anpassungen (Menüführung), basierend auf JavaScript oder jQuery
Eine "Mobile First" und "Progressive Enrichment" Philosophie erleichtert die Zugänglichkeit, Kompatibilität und Leistung der produzierten Seiten
Immer mehr Teile, die auf der Serverseite (RESS) erkannt und generiert wurden, hier noch einmal, um die Anzeige bestimmter Komponenten oder Ressourcen zu beschleunigen.
Am Ende ist Responsive Web Design nicht so einfach!