20 erstaunliche Beispiele für die Verwendung von Medienabfragen für Responsive Web Design

Responsives Webdesign ist derzeit eines der heißesten Themen bei Designern und Entwicklern. Wenn Sie sich nicht ganz sicher sind, worum es geht, werden wir Sie durch das führen, was es ist, wie es funktioniert und wie CSS-Medienabfragen etwas sind, das Sie benötigen, um in Ihre eigenen Designs integriert zu werden.

Um das Ganze abzurunden, werden wir mit zwanzig beeindruckenden, reaktionsschnellen Designs aufwarten, die Medienanfragen verwenden, um Erfahrungen zu präsentieren, die speziell auf verschiedene Besucher abgestimmt sind.

#

Was sind Medienabfragen?

CSS3 hat eine Menge fantastischer visueller Effekte wie Schatten und Animationen hervorgebracht, aber wie sieht es mit praktischen Verbesserungen aus? Gibt es etwas über CSS3, das die Art und Weise verbessert, in der Websites unter dem Gesichtspunkt der Benutzerfreundlichkeit erstellt werden können?

Die Antwort ist ein klares Ja. und ist weitgehend auf die Einbeziehung von Medienanfragen zurückzuführen. Medienabfragen sind unglaublich nützlich, da sie ein riesiges Problem lösen, das im Webdesign plötzlich auftrat: die Notwendigkeit, für sehr unterschiedliche Bildschirmgrößen zu entwerfen.

Die Bildschirmgrößen der Benutzer haben sich immer unterschieden, aber meist waren diese Unterschiede auf ein paar Zentimeter beschränkt, und Sie könnten darauf wetten, dass eine große Mehrheit Ihres Publikums in Parameter passt, die relativ einfach zu gestalten sind. Heutzutage haben Sie jedoch einige Benutzer auf einem 27 "Apple Cinema Display und andere auf einem 3,5" Smartphone.

Das ist ein großer Unterschied und es gibt viele Stopps auf dem Weg. Die ständig wachsende Anzahl von webfähigen Geräten macht es für Konstrukteure zunehmend schwieriger, eine statische Lösung zu präsentieren, die allen Bedürfnissen gerecht wird.

Aus diesem Bedürfnis ist die Idee eines responsiven Webdesigns entstanden, das weit über die fließenden Seitenbreiten hinausgeht und das Layout einer Seite erheblich verändert, wenn sich die Größe des Browserfensters oder die Bildschirmgröße des Geräts ändert. Medienabfragen sind eines der leistungsfähigsten Werkzeuge, um dieses Ziel zu erreichen, da der Designer spezielle CSS nach bestimmten vordefinierten Regeln festlegen kann.

Owltastic: Ein hervorragendes Beispiel für Responsive Webdesign

Die obigen Informationen sind etwas abstrakt. Schauen wir uns ein Beispiel des talentierten Designers und Entwicklers Meagan Fisher an, wie dies in der Realität funktioniert. So sieht ihre Website in meinem 13 "MacBook-Browserfenster im Vollbildmodus aus.

Wenn ich nun die Fenstergröße anpasse, passiert viel. Spalten passen ihre Breite an, das Layout wird vertikaler und die Elemente werden nicht mehr benötigt. Hier ist ein Screenshot mit zwei weiteren Seitenbreiten. Prüfen Sie, wie sehr sich das Design an verschiedene Situationen anpasst.

Beachten Sie, dass wir mit einem dreispaltigen Layout begonnen haben, das dann in ein zweispaltiges Layout umgewandelt wurde und schließlich in einem einspaltigen Layout landete, wobei mein Browserfenster so klein war, wie es gehen würde. Dies ist mehr als nur ein Designer, der sich vor anderen zeigt. Dies ist ein beeindruckender Versuch, die Website nicht nur nutzbar zu machen, sondern speziell auf die breite Palette von Geräten zu optimieren, die sie wahrscheinlich sehen werden.

Wie es funktioniert

Dies scheint eine Menge zusätzlicher Arbeit zu sein, und ich würde lügen, wenn ich sage, dass dies ein schmerzloser Prozess ist, aber die gute Nachricht ist, dass CSS- und Medienanfragen einen großen Teil der Arbeit für Sie übernehmen. Lassen Sie uns ein wenig in Owltastics Code einsteigen, um zu sehen, wie das alles funktioniert.

Für den Anfang wird es eine Menge von Experten geben, die Floats und Prozentsätze für die Größenbestimmung verwenden. Beachten Sie im nachstehenden Ausschnitt unter Meagan verwendete Prozentsätze sowohl für die Breite des Elements als auch für den Rand. Sie ist auch akribisch, wenn es darum geht, Ihnen zu sagen, woher diese Prozentsätze in Form eines Kommentars mit ein paar schnellen Berechnungen stammen.

Das macht das Layout auf jeden Fall etwas komplizierter, aber es schafft eine gute Grundlage für flexible Seitenbreiten, noch bevor sie zu den Medienabfragen kommt. Die oben gezeigten Eigenschaften sind jedoch größtenteils das, was Sie in den Medienabfragen weiter bearbeiten sehen.

Hier sehen wir, dass Meagan eine maximale Bildschirmbreite von 800 Pixeln anvisiert hat und dann eine Reihe von Stilen definiert hat, die direkt auf Geräte zutreffen, die diese Spezifikation erfüllen. Von hier aus werden Floats, Ränder, Polsterung, Anzeige und sogar Bilder für ein optimales Layout in dieser Größe optimiert.

Insgesamt fünf verschiedene Medienabfragen werden für verschiedene Situationen eingerichtet: Max-Breite: 960px, 800px, 640px, 540px und 480px. Bei jedem dieser Schritte wird das Verhalten für diese Bildschirmgröße genau beschrieben. Hier ist der Abschnitt für max-width: 480px.

Ein interessanter Trick, auf den Sie besonders achten sollten, ist die Verwendung von flüssigen Bildern. Wenn Sie die Breite eines Bildes auf 100% setzen, passt es sich an die Breite des Containers an und ändert seine Größe, wenn sich das Browserfenster ändert. Ethan Marcotte erklärt diese Technik auf seiner Website Unstoppable Robot Ninja ausführlich.Stellen Sie sicher, dass Sie die Größe Ihres Browserfensters auf seiner Website ändern, und beobachten Sie, wie die Headerbilder reagieren.

Weitere Live-Beispiele

Um reaktionsschnelles Webdesign und Medienanfragen zu studieren, können Sie sie am besten in Aktion betrachten. Hier ist eine kurze Liste mit einigen Websites, die ich beeindruckend fand. Sehen Sie sich bei jeder Website nicht nur das Design an, sondern testen Sie es, indem Sie die Größe Ihres Browser-Fensters ändern. Schauen Sie sich auch das CSS an, um zu sehen, wie die Websites funktionieren, und überlegen Sie, wie Sie diese Techniken in Ihre eigenen Designs implementieren können.

Eine Liste getrennt: Artikelbeispiel

Trent Walton

Denken Sie an Vitamin

Deren K.

Vorträge

Über.com

Sasquatch Festival

Erdstunde

BMX-Feed

Remo - Powerstroke Pro

Die modernen Herren

Naomi Atkinson

Konvergieren SE

Sleepstreet

Alsacreations

Ein anderes Design

Yiibu

Sweet Hat Club

Laufbild Werkstatt

Ablauf

Dmig 5

Fazit

Zusammenfassend lässt sich sagen, dass die Vielzahl an Geräten, die heutzutage auf das Internet zugreifen, es erforderlich macht, Website-Designs zu erstellen, die an viele verschiedene Bildschirmgrößen angepasst werden können. CSS-Abfragen bieten eine einfache Möglichkeit, genau dies zu tun.

Um ehrlich zu sein, als ich zum ersten Mal von Medienanfragen hörte, verdrehte ich die Augen und dachte, dass dadurch alle Schritte, die wir bereits durchlaufen haben, eine weitere Arbeit hinzugefügt werden müsste, um unsere Designs als brauchbar zu machen. Je mehr ich jedoch über sie lerne und mit ihnen experimentiere, desto mehr bin ich davon überzeugt, dass Webdesign so gestaltet werden soll, wie es Steve Jobs "Post-PC-Ära" nennt.