Die Grundlagen des Responsive Web Design

I. Einleitung ▲

Nehmen wir zwei einfache Beispiele. Die ersten könnten die Fenster sein, die nach der äußeren Leuchtkraft opfern. Oder die Spiegelwände, wo wir näher kommen, desto mehr scheinen sie verzerrt zu sein. Kurzum, welche Architekten in dieser Bewegung suchen, ist zu überwinden / abstrakt von den inhärenten Zwängen, die mit den verschiedenen Unterstützungen verbunden sind. In der Welt der Architektur können wir bestätigen, dass diese Unterstützungen wirklich vielfältig und zahlreich sind.

Bild nicht verfügbar
Durch ein einfaches Lichtspiel scheint dieses Gebäude eine andere Struktur zu haben. Quelle: http://www.essential-architecture.com/STYLE/STY-075.htm
Responsive Web Design wurde geboren, weil wir zunehmend mit den gleichen Problemen wie Architekten konfrontiert werden: Anpassung an die Unterstützungen.

Stattdessen hatten wir nur ein oder zwei Browser und Bildschirmgrößen unterschiedlich wenig. Jetzt haben wir eine Vielzahl von Browsern und eine große Anzahl von Auflösungen (von 240×320 bis 2515×1886 oder mehr). Aber auch die Medien: Wir können von unseren klassischen Desktop-Computern auf das Internet zugreifen, aber auch über Smartphones, Tablets etc. Allerdings wissen wir von letzterem, dass ihre Art, eine Website anzuzeigen, sich von der eines Desktop-Computers unterscheidet.

Bild nicht verfügbar
Das Web im Moment. Quelle: http://bradfrostweb.com/blog/post/this-is-the-web/
Und das haben wir jetzt. Wir starten langsam auf das Internet über Fernsehen (oft über Konsolen oder Boxen). Prototypen beginnen zu erscheinen, mit Internet auf Autoradios, Uhren, Autos, Kühlschränke … Kurz gesagt, eine neue Welt, wo wir uns anpassen müssen.

Bild nicht verfügbar
Das Web von morgen Quelle: http://bradfrostweb.com/blog/post/this-is-the-web/
II. Die drei Begriffe Responsive Web Design ▲

Um eine Webanwendung zu erstellen, die Responsive Web Design ist, müssen wir die folgenden drei Punkte festlegen:

ein Display-Gitter, das flexibel ist:
mit anderen Worten, eine Vorlage, die nicht von einer minimalen, maximalen Auflösung abhängt;
flexible medien:
um sicherzustellen, dass meine Bilder, Videos (falls nötig) nicht über den Umfang unseres Rasters / Templates hinausgehen;
eine Reihe von CSS-Regeln auf der Grundlage von Medienabfragen:
das Prinzip: setzen Sie die Bedingungen auf dem Display zu zeigen / verstecken oder sogar ändern die Rendering unserer Web-Anwendung.
Wenn wir eine Analogie zur Architektur machen, stellen die letzten drei Punkte unsere Werkzeuge dar. Soweit unsere Materialien betroffen sind, entspricht dies unseren Browsern. Dann sind einige Materialien besser als andere. Zum Beispiel ist das schäbige Holz IE6 weniger robust als Stahlbeton Chrom. Unsere Werkzeuge, so gut sie auch sein mögen, werden nicht immer leicht angewendet. Weil eine falsche Idee existiert und widersteht: Es ist nicht möglich, „Responsive Web Design“ auf alten Browsern zu machen.

Es ist glücklicherweise möglich, sich anzupassen, um dies zu erreichen. Trotzdem werden die Kosten (zwangsläufig) wichtiger und die Verwendung von JavaScript Frames / Polyfills (JavaScript-Code, um eine Lücke in HTML5 / CSS3 zu füllen) notwendig sein. Wir werden einige von ihnen während des Artikels sehen.