Einführung in das Responsive Webdesign: Pseudo-Elemente, Medienabfragen und mehr

Heutzutage wird Ihre Website von einer Vielzahl von Geräten besucht: Desktops mit großen Monitoren, mittelgroße Laptops, Tablets, Smartphones und mehr.

Um als Front-End-Ingenieur ein optimales Benutzererlebnis zu erzielen, sollte Ihre Website ihr Layout an diese unterschiedlichen Geräte (dh an ihre unterschiedlichen Bildschirmauflösungen und -abmessungen) anpassen. Der Prozess, auf die Form des Benutzergeräts zu reagieren , wird (Sie haben es erraten) als responsives Webdesign (RWD) bezeichnet.

Warum lohnt es sich, Beispiele für responsives Webdesign zu studieren und sich auf RWD zu konzentrieren? Einige Webdesigner beispielsweise machen es sich stattdessen zur Lebensaufgabe, für eine stabile Benutzererfahrung in allen Browsern zu sorgen, und verbringen oft Tage damit, kleine Probleme mit dem Internet Explorer zu beheben.

Das ist ein dummer Ansatz.

Mashable nannte 2013 das Jahr des responsiven Webdesigns. Warum? Über 30 % ihres Traffics kommt von Mobilgeräten. Sie gehen davon aus, dass diese Zahl bis Ende des Jahres 50 % erreichen könnte. Im gesamten Web kamen im Jahr 2013 im Allgemeinen 17,4 % des Internetverkehrs von Smartphones. Gleichzeitig macht die Nutzung des Internet Explorers beispielsweise nur 12 % des gesamten Browserverkehrs aus, was einem Rückgang von etwa 4 % gegenüber dieser Zeit im letzten Jahr entspricht (lt zu W3Schools). Wenn Sie für einen bestimmten Browser statt für die weltweite Smartphone-Population optimieren, verpassen Sie den Wald vor lauter Bäumen. Und in einigen Fällen kann dies den Unterschied zwischen Erfolg und Misserfolg ausmachen – Responsive Design hat Auswirkungen auf Konversionsraten, SEO, Absprungraten und mehr.

Der responsive Webdesign-Ansatz

Was bei RWD häufig beschönigt wird, ist, dass es nicht nur darum geht, das Erscheinungsbild Ihrer Webseiten anzupassen; Stattdessen sollte der Fokus auf der logischen Anpassung Ihrer Website für die Nutzung auf verschiedenen Geräten liegen. Zum Beispiel: Die Verwendung der Maus bietet nicht die gleiche Benutzererfahrung wie beispielsweise der Touchscreen. Stimmst du nicht zu? Ihre reaktionsschnellen mobilen vs. Desktop-Layouts sollten diese Unterschiede widerspiegeln.

Gleichzeitig möchten Sie Ihre Website nicht für jede der zehn verschiedenen Bildschirmgrößen, auf denen sie angezeigt werden könnte, komplett neu schreiben – ein solcher Ansatz ist einfach nicht machbar. Stattdessen besteht die Lösung darin, flexible responsive Designelemente zu implementieren, die denselben HTML-Code verwenden, um sich an die Bildschirmgröße des Benutzers anzupassen.

Aus technischer Sicht liegt die Lösung in diesem Responsive-Design-Tutorial: Verwenden von CSS-Medienabfragen, Pseudo-Elementen, flexiblen Rasterlayouts und anderen Tools, um sich dynamisch an eine bestimmte Auflösung anzupassen.

Medienabfragen im Responsive Design

Medientypen tauchten zuerst in HTML4 und CSS2.1 auf, was die Platzierung separater CSS für Bildschirm und Druck ermöglichte. Auf diese Weise war es möglich, separate Stile für die Computerdarstellung einer Seite gegenüber dem Ausdruck festzulegen.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

oder

 @media screen { * { background: silver } }

In CSS3 können Sie Stile abhängig von der Seitenbreite definieren. Da die Seitenbreite mit der Größe des Benutzergeräts korreliert, können Sie mit dieser Funktion unterschiedliche Layouts für unterschiedliche Geräte definieren. Hinweis: Medienabfragen werden von allen gängigen Browsern unterstützt.

Diese Definition ist durch die Einstellung grundlegender Eigenschaften möglich: max-width , device-width , orientation und color . Andere Definitionen sind ebenfalls möglich; Aber in diesem Fall sind die wichtigsten Dinge, die zu beachten sind, die Mindestauflösung (Breite) und die Ausrichtungseinstellungen (Querformat vs. Hochformat).

Das folgende responsive CSS-Beispiel zeigt die Vorgehensweise zum Anstoßen einer bestimmten CSS-Datei in Bezug auf die Seitenbreite. Wenn beispielsweise 480 Pixel die maximale Auflösung des Bildschirms des aktuellen Geräts ist, werden die in main_1.css definierten Stile angewendet.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Wir können auch verschiedene Stile innerhalb desselben CSS-Stylesheets definieren, sodass sie nur verwendet werden, wenn bestimmte Einschränkungen erfüllt sind. Dieser Teil unseres responsiven CSS würde beispielsweise nur verwendet, wenn das aktuelle Gerät eine Breite von über 480 Pixel hätte:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

„Smart-Zoom“

Mobile Browser verwenden den sogenannten „intelligenten Zoom“, um Benutzern ein „überragendes“ Leseerlebnis zu bieten. Grundsätzlich wird Smart Zoom verwendet, um die Seitengröße proportional zu reduzieren. Dies kann sich auf zwei Arten manifestieren: (1) benutzerinitiierter Zoom (z. B. zweimaliges Tippen auf einen iPhone-Bildschirm, um die aktuelle Website zu vergrößern) und (2) anfängliches Anzeigen einer vergrößerten Version einer Webseite Belastung.

Da wir nur reaktionsfähige Medienabfragen verwenden können, um alle Probleme zu lösen, auf die Smart Zoom abzielen könnte, ist es oft wünschenswert (oder sogar notwendig), den Zoom zu deaktivieren und sicherzustellen, dass der Inhalt Ihrer Seite immer den Browser ausfüllt:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Indem wir initial-scale auf 1 setzen, steuern wir die anfängliche Seitenzoomstufe (d. h. die Zoomstufe beim Laden der Seite). Wenn Sie Ihre Webseite responsiv gestaltet haben, sollte Ihr flüssiges, dynamisches Layout den Smartphone-Bildschirm auf intelligente Weise ausfüllen, ohne dass ein anfänglicher Zoom erforderlich ist.

Außerdem können wir den Zoom mit user-scalable=false komplett deaktivieren.

Seitenbreiten

Angenommen, Sie möchten drei verschiedene responsive Seitenlayouts bereitstellen: eines für Desktops, eines für Tablets (oder Laptops) und eines für Smartphones. Auf welche Seitenabmessungen sollten Sie als Grenzwerte abzielen (z. B. 480 Pixel)?

Leider gibt es keinen definierten Standard für die Seitenbreiten, auf die ausgerichtet werden soll, aber die folgenden beispielhaften Responsive-Werte werden häufig verwendet:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Es gibt jedoch eine Reihe unterschiedlicher Breitendefinitionen. Beispielsweise hat 320 und höher fünf standardmäßige CSS3-Medienabfrageinkremente: 480, 600, 768, 992 und 1382 Pixel. Zusammen mit dem gegebenen Beispiel in diesem Tutorial zur responsiven Webentwicklung könnte ich mindestens zehn weitere Ansätze aufzählen.

Mit jedem dieser angemessenen Inkrementsätze können Sie die meisten Geräte ansprechen. In der Praxis besteht normalerweise keine Notwendigkeit, alle oben genannten Beispiele für Seitenbreiten separat zu behandeln – sieben verschiedene Auflösungen sind wahrscheinlich zu viel des Guten. Meiner Erfahrung nach werden 320px, 768px und 1200px am häufigsten verwendet; Diese drei Werte sollten für die Ausrichtung auf Smartphones, Tablets/Laptops bzw. Desktops ausreichen.

Pseudo-Elemente

Aufbauend auf Ihren reaktionsschnellen Medienabfragen aus dem vorherigen Beispiel möchten Sie möglicherweise auch bestimmte Informationen programmatisch basierend auf der Größe des Geräts des Benutzers ein- oder ausblenden. Glücklicherweise kann auch dies mit reinem CSS erreicht werden, wie im folgenden Tutorial beschrieben.

Für den Anfang kann das Ausblenden einiger Elemente ( display: none; ) eine großartige Lösung sein, wenn es darum geht, die Anzahl der Bildschirmelemente für ein Smartphone-Layout zu reduzieren, bei dem fast immer nicht genügend Platz vorhanden ist.

Darüber hinaus können Sie aber auch mit CSS-Pseudo-Elementen (Selektoren) kreativ werden, zB :before und :after . Hinweis: Auch hier werden Pseudo-Elemente von allen gängigen Browsern unterstützt.

Pseudoelemente werden verwendet, um bestimmte Stile auf bestimmte Teile eines HTML-Elements anzuwenden oder um eine bestimmte Teilmenge von Elementen auszuwählen. Beispielsweise können Sie mit dem Pseudoelement :first-line Stile nur für die erste Zeile eines bestimmten Selektors definieren (z. B. gilt p:first-line für die erste Zeile aller p s). In ähnlicher Weise können Sie mit dem Pseudoelement a:visited Stile für alle a s mit Links definieren, die zuvor vom Benutzer besucht wurden. Diese können sich natürlich als nützlich erweisen.

Hier ist ein einfaches responsives Designbeispiel, in dem wir drei verschiedene Layouts für eine Anmeldeschaltfläche erstellen, jeweils eines für Desktop, Tablet und Smartphone. Auf dem Smartphone haben wir ein einsames Symbol, während das Tablet das gleiche Symbol hat, begleitet von „Benutzername“. Schließlich fügen wir für den Desktop auch eine kurze Anweisung hinzu („Geben Sie Ihren Benutzernamen ein“).

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Wenn wir nur die Pseudoelemente :before und :after verwenden, erreichen wir Folgendes:

Für mehr über die Magie von Pseudo-Elementen hat Chris Coyier einen guten Artikel über CSS-Tricks.

Also, wo soll ich anfangen?

In diesem Tutorial haben wir einige der Bausteine ​​für responsives Webdesign (d. h. Medienabfragen und Pseudo-Elemente) festgelegt und jeweils einige Beispiele dargelegt. Was machen wir jetzt?

Der erste Schritt, den Sie unternehmen sollten, besteht darin, alle Elemente Ihrer Webseite in verschiedenen Bildschirmgrößen zu organisieren.

Sehen Sie sich die Desktop-Version des oben dargestellten Layouts an. In diesem Fall könnte der Inhalt auf der linken Seite (das grüne Rechteck) als eine Art Hauptmenü dienen. Bei Verwendung von Geräten mit geringerer Auflösung (z. B. Tablet oder Smartphone) kann es jedoch sinnvoll sein, dieses Hauptmenü in voller Breite darzustellen. Mit Medienabfragen könnten Sie dieses Verhalten wie folgt implementieren:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Leider ist dieser grundlegende Ansatz oft unzureichend, wenn Ihr Front-End immer komplizierter wird. Da sich die Inhaltsorganisation einer Website oft erheblich zwischen mobilen und Desktop-Versionen unterscheidet, hängt die Benutzererfahrung letztendlich nicht nur von der Verwendung von responsivem CSS, sondern auch von HTML und JavaScript ab.

Bei der Bestimmung responsiver Layouts für verschiedene Geräte sind mehrere Schlüsselelemente wichtig. Im Gegensatz zu Desktop-Versionen, bei denen wir genügend Platz für die Inhalte haben, ist die Entwicklung von Smartphones anspruchsvoller. Mehr denn je ist es notwendig, bestimmte Inhalte zu gruppieren und die Wichtigkeit einzelner Teile hierarchisch zu definieren.

Wichtig sind auch die unterschiedlichen Nutzungsmöglichkeiten Ihrer Inhalte. Wenn Ihr Benutzer beispielsweise eine Maus hat, kann er den Cursor über bestimmte Elemente setzen, um weitere Informationen zu erhalten, sodass Sie (als Webentwickler) einige Informationen hinterlassen können, die auf diese Weise gesammelt werden sollen – aber das wird nicht der Fall sein Fall, wenn sich Ihr Benutzer auf einem Smartphone befindet.

Wenn Sie außerdem Schaltflächen auf Ihrer Website belassen, die dann auf Smartphones kleiner als ein typischer Finger dargestellt werden, schaffen Sie Unsicherheit bei der Nutzung und dem Eindruck Ihrer Website. Beachten Sie, dass im obigen Bild die Standard-Webansicht (links) einige Elemente vollständig unbrauchbar macht, wenn sie auf einem kleineren Gerät angezeigt werden.

Ein solches Verhalten erhöht auch die Wahrscheinlichkeit, dass Ihr Benutzer einen Fehler macht, was seine Erfahrung verlangsamt. In der Praxis kann sich dies in geringeren Seitenaufrufen, weniger Verkäufen und insgesamt weniger Engagement äußern.

Andere Responsive-Design-Elemente

Bei der Verwendung von Medienabfragen sollte man das Verhalten aller Seitenelemente im Auge behalten, nicht nur derjenigen, auf die abgezielt wird, insbesondere bei der Verwendung von fließenden Rastern, in denen (im Gegensatz zu festen Abmessungen) die Seite zu jedem Zeitpunkt vollständig gefüllt wird Moment, indem die Inhaltsgröße proportional erhöht und verringert wird. Da Breiten in Prozenten angegeben werden, können grafische Elemente (zB Bilder) unter solch einem fließenden Layout verzerrt und verstümmelt werden. Für Bilder ist eine Lösung wie folgt:

 img { max-width: 100% }

Andere Elemente sollten auf ähnliche Weise behandelt werden. Eine großartige Lösung für Symbole in RWD ist beispielsweise die Verwendung von IconFonts.

Ein paar Worte zu Fluid Grid Systems

Wenn wir den Prozess der vollständigen Designanpassung diskutieren, betrachten wir oft das optimale Seherlebnis (aus der Perspektive des Benutzers). Eine solche Erörterung sollte eine maximal erleichterte Verwendung, Elementwichtigkeit (basierend auf sichtbaren Seitenbereichen), erleichtertes Lesen und intuitive Navigation beinhalten. Unter diesen Kategorien ist eine der wichtigsten Komponenten die Anpassung der Inhaltsbreite . Beispielsweise haben die sogenannten Fluid Grid-Systeme festgelegte Elemente, dh Elemente, die auf relativen Breiten als Prozentsätze der gesamten Seite basieren. Auf diese Weise passen sich alle Elemente im Responsive Webdesign System automatisch an die Seitengröße an.

Obwohl diese fließenden Gittersysteme eng mit dem verwandt sind, was wir hier besprochen haben, sind sie wirklich eine ganz separate Einheit, die ein zusätzliches Tutorial erfordern würde, um sie im Detail zu besprechen. Daher werde ich nur einige wichtige Frameworks erwähnen, die ein solches Verhalten unterstützen: Bootstrap, Unsemantic und Brackets.

Fazit

Bis vor kurzem war Website-Optimierung ein Begriff, der ausschließlich der Anpassung von Funktionen auf Basis verschiedener Webbrowser vorbehalten war. Neben dem unvermeidlichen Kampf mit unterschiedlichen Browser-Standards, mit dem wir heute konfrontiert sind, geht dieser Begriff heute auch von der Anpassung an Geräte und Bildschirmgrößen mit responsivem Webdesign aus. Um es im modernen Web zu platzieren, muss Ihre Website nicht nur wissen, wer sie ansieht, sondern auch wie .