Der Leitfaden für Profis zum reaktionsschnellen Webdesign

Inhalt

• Reaktionsschnelle Bilder
• Performance
• Bedingtes und faules Laden
• Responsive Typografie
• Medienabfragen in JavaScript
• Progressive Enhancement
• Layout
• CSS-Rasterlayout
• Schließlich

Responsive Webdesign klingt unglaublich einfach. Entscheiden Sie sich für flexible Raster für das Layout, verwenden Sie flexible Medien (Bilder, Videos, Iframes) und wenden Sie Medienabfragen an, um diese Messungen zu aktualisieren und den Inhalt in jedem Ansichtsfenster optimal anzuordnen. In der Praxis haben wir gelernt, dass es nicht so einfach ist. Winzige Probleme, die bei jedem Projekt auftreten, kratzen uns am Kopf und schnitzen gelegentlich sogar Fingernagelgräben auf unsere Schreibtische.

Seit ich den Responsive Design Weekly Newsletter kuratiert habe, hatte ich das Glück, mit vielen Mitgliedern der Web-Community zu sprechen und ihre Erfahrungen zu hören. Ich wollte genau herausfinden, was die Community wirklich lernen wollte, und verteilte eine Umfrage an die Leser. Hier sind die Top-Ergebnisse:

1. Reaktionsschnelle Bilder
2. Verbessernde Leistung
3. Responsive Typografie
4. Medienabfragen in JavaScript
5. Progressive Enhancement
6. Layout

Vor diesem Hintergrund habe ich eine Reihe von Podcasts durchgeführt, in denen einige unserer Branchenführer nach ihren Gedanken gefragt wurden. In ihren Antworten war sich ein Punkt einig: Konzentrieren Sie sich darauf, die Grundlagen richtig zu machen, bevor Sie sich über aufregende und fortgeschrittene Techniken Gedanken machen. Indem wir die Dinge auf die Grundlagen zurückführen, können wir eine robuste Benutzeroberfläche für alle erstellen, die auf Funktionen basiert, wenn das Gerät oder der Benutzerkontext dies zulässt.

"Also ... was ist mit diesen fortschrittlichen Techniken?", Höre ich Sie fragen. Ich denke, Stephen Hay hat es am besten zusammengefasst, als er sagte: „Die ultimative RWD-Technik besteht darin, zunächst keine fortgeschrittenen RWD-Techniken zu verwenden. Beginnen Sie mit strukturierten Inhalten und bauen Sie sich auf. Fügen Sie einen Haltepunkt nur hinzu, wenn das Design unterbrochen wird und der Inhalt dies vorschreibt und ... das war's. "

In diesem Artikel beginne ich mit den Grundlagen und füge je nach Situation Komplexitätsebenen hinzu, um auf diese fortgeschrittenen Techniken aufzubauen. Lass uns anfangen.

Reaktionsschnelle Bilder

Fluidmedien waren ein wichtiger Bestandteil von RWD, als es erstmals von Ethan Marcotte definiert wurde. Breite: 100%; , maximale Breite: 100%; funktioniert noch heute, aber die reaktionsschnelle Bildlandschaft ist viel komplizierter geworden. Mit zunehmender Anzahl von Bildschirmgrößen, Pixeldichte und zu unterstützenden Geräten wünschen wir uns eine bessere Kontrolle.

Die drei Hauptanliegen wurden von der Responsive Images Community Group (RICG) definiert:

1. Die Kilobyte-Größe des Bildes, das wir über den Draht senden
2. Die physische Größe des Bildes, das wir an Geräte mit hoher DPI senden
3. Das Bild wird in Form einer Art Direction für die jeweilige Größe des Ansichtsfensters zugeschnitten

Yoav Weiss hat mit Hilfe von Indiegogo den größten Teil der Arbeit an der Blink-Implementierung erledigt - Googles Gabel für WebKit. Wenn Sie dies lesen, wird es in Chrome und Firefox ausgeliefert. Safari 8 wird srcset ausgeliefert, das Größenattribut ist jedoch nur in nächtlichen Builds verfügbar und picture> ist noch nicht implementiert.

Mit dem Eintreffen von Neuem in unserem Webentwicklungsprozess kann es schwierig sein, loszulegen. Lassen Sie uns Schritt für Schritt ein Beispiel durchgehen.

img! - Deklarieren Sie das Fallback-Bild für alle Browser, die kein Bild unterstützen. -> src = "Horse-350.webp"! - Deklarieren Sie alle Bildgrößen in srcset. Fügen Sie die Bildbreite mit dem w-Deskriptor ein, um den Browser über die Breite jedes Bildes zu informieren. -> srcset = "Pferd-350.webp 350w, Pferd-500.webp 500w, Pferd-1024.webp 1024w, Pferd.webp 2000w "! - Größen informieren den Browser über unser Site-Layout. Hier sagen wir für jedes Ansichtsfenster, das 64ems und größer ist, verwenden Sie ein Bild, das 70% des Ansichtsfensters einnimmt -> size = "(min-width: 64em) 70vw ,! - Wenn das Ansichtsfenster nicht so ist groß, dann verwenden Sie für jedes Ansichtsfenster mit 37,5 Elementen und mehr ein Bild, das 95% des Ansichtsfensters einnimmt -> (Mindestbreite: 37,5 Elemente) 95 VW! - und wenn das Ansichtsfenster kleiner als dieses ist, verwenden Sie Ein Bild, das 100% des Ansichtsfensters einnimmt -> 100vw "! - hat immer Alternativtext .--> alt =" Ein Pferd "/>

Unter Leistungsgesichtspunkten spielt es keine Rolle, ob Sie im Größenattribut die Mindest- oder Höchstbreite verwenden - aber die Quellreihenfolge spielt eine Rolle. Der Browser verwendet immer die erste passende Größe.

Denken Sie auch daran, dass wir das Größenattribut, das direkt für unser Design definiert werden soll, fest codieren. Dies kann zu Problemen beim Vorwärtsbewegen führen. Wenn Sie beispielsweise Ihre Website neu gestalten, müssen Sie alle Bilder oder Bilder erneut aufrufen und die Größen neu definieren. Wenn Sie ein CMS verwenden, kann dies im Rahmen Ihres Erstellungsprozesses überwunden werden.

WordPress hat bereits ein Plugin, um zu helfen. Es definiert das srcset für WP-Standardbildvarianten und ermöglicht es Ihnen, Größen an einer zentralen Stelle zu deklarieren. Wenn die Seite aus der Datenbank generiert wird, werden alle Erwähnungen auf img> ausgetauscht und durch das Bild-Markup ersetzt.

Basic

• Überlegen Sie, ob Sie wirklich ein Bild einfügen müssen. Ist der Bildkerninhalt oder dekorativ? Ein Bild weniger bedeutet eine schnellere Ladezeit
• Optimieren Sie die Bilder, die Sie benötigen, mit ImageOptim
• Legen Sie die Ablaufheader für Ihre Bilder auf Ihrem Server oder in der .htaccess-Datei fest (siehe Details unter "Leistung").
• PictureFill bietet Polyfill-Unterstützung für Bilder

Fortgeschrittene

• Lazy lade deine Bilder mit dem Lazy Load-Plugin von jQuery
• Verwenden Sie HTMLImageElement.Sizes und HTMLPictureElement zur Funktionserkennung.
• Mit dem erweiterten PictureFill WP-Plugin von Github können Sie benutzerdefinierte Werte für Bildbreiten und -größen definieren

Performance

Um die am schnellsten wahrgenommene Leistung auf unseren Seiten zu erzielen, benötigen wir alle erforderlichen HTML- und CSS-Funktionen, um den oberen Teil unserer Seite innerhalb der ersten Antwort des Servers zu rendern. Diese magische Zahl beträgt 14 KB und basiert auf der maximalen Größe des Überlastungsfensters innerhalb der ersten Roundtrip-Zeit (RTT).

Patrick Hamann, technischer Frontend-Leiter beim Guardian, und sein Team haben es geschafft, die 1000-ms-Grenze mit einer Mischung aus Frontend- und Backend-Techniken zu durchbrechen. Der Ansatz des Guardian besteht darin, sicherzustellen, dass der erforderliche Inhalt - der Artikel - dem Benutzer so schnell wie möglich und innerhalb der magischen Zahl von 14 KB zugestellt wird.

Schauen wir uns den Prozess an:

1. Der Nutzer klickt auf einen Google-Link zu einer Nachricht
2. Eine einzelne Blockierungsanforderung wird an die Datenbank für den Artikel gesendet. Es werden keine verwandten Geschichten oder Kommentare angefordert
3. Der HTML-Code wird mit Critical CSS geladen
4. im Kopf>
5. Ein "Cut the Senf" -Prozess wird durchgeführt und alle bedingten Elemente, die auf den Gerätefunktionen des Benutzers basieren, werden geladen
6. Alle Inhalte, die sich auf den Artikel selbst beziehen oder ihn unterstützen (verwandte Artikelbilder, Artikelkommentare usw.), werden verzögert geladen

Wenn Sie den kritischen Rendering-Pfad auf diese Weise optimieren, ist der Kopf> 222 Zeilen lang. Der kritische Inhalt, den der Benutzer gesehen hat, liegt jedoch immer noch innerhalb der anfänglichen Nutzlast von 14 KB, wenn er gezippt wird. Dieser Prozess hilft dabei, diese 1000-ms-Rendering-Barriere zu überwinden.

Bedingtes und faules Laden

Das bedingte Laden verbessert die Benutzererfahrung basierend auf der Gerätefunktion. Mit Tools wie Modernizr können Sie diese Funktionen testen. Beachten Sie jedoch, dass ein Browser, der angibt, Unterstützung zu bieten, nicht immer vollständige Unterstützung bedeutet.

Eine Technik besteht darin, das Laden zu unterbrechen, bis der Benutzer die Absicht zeigt, diese Funktion zu verwenden. Dies würde als bedingt angesehen. Sie können das Laden in den sozialen Symbolen so lange unterbrechen, bis der Benutzer mit der Maus über die Symbole fährt oder diese berührt, oder Sie können das Laden eines Iframe-Google Map in kleineren Ansichtsfenstern vermeiden, in denen der Benutzer wahrscheinlich lieber auf eine dedizierte Kartenanwendung verlinkt. Ein anderer Ansatz ist das Schneiden des Senfs. Weitere Informationen hierzu finden Sie im obigen Kasten.

Das verzögerte Laden ist definiert als etwas, das Sie immer auf die Seite laden möchten - Bilder, die Teil des Artikels, Kommentare oder anderer verwandter Artikel sind -, die jedoch nicht vorhanden sein müssen, damit der Benutzer den Inhalt konsumieren kann.

Basic

• Aktivieren Sie das GZIP für Dateien und legen Sie die Ablaufheader für alle statischen Inhalte fest (netm.ag/expire-260).
• Verwenden Sie das Lazy Load jQuery-Plugin. Dadurch werden Bilder geladen, wenn Sie sich dem Ansichtsfenster nähern oder nach einer bestimmten Zeit

Fortgeschrittene

• Schnell oder CloudFlare einrichten. Content Delivery Networks (CDNs) liefern Ihre statischen Inhalte schneller an Benutzer als Ihr eigener Server und verfügen über einige kostenlose Ebenen
• Aktivieren Sie SPDY für http2-fähige Browser, um http2-Funktionen wie parallele http-Anforderungen zu nutzen
• Social Count ermöglicht das bedingte Laden Ihrer sozialen Symbole
• Mit der API für statische Karten können Sie interaktive Google Maps für Bilder ausschalten. Schauen Sie sich das Beispiel von Brad Frost unter netm.ag/static-260 an
• Ajax Include Pattern lädt Content-Snippets entweder aus einem Data-Before-, Data-After- oder Data-Replace-Attribut

Responsive Typografie

Bei Typografie geht es darum, Ihre Inhalte leicht verdaulich zu machen. Responsive Typografie erweitert dies, um die Lesbarkeit auf einer Vielzahl von Geräten und Ansichtsfenstern sicherzustellen. Jordan Moore gibt zu, dass Typ eine Sache ist, an der er sich nicht rühren will. Legen Sie bei Bedarf ein oder zwei Bilder ab, aber stellen Sie sicher, dass Sie einen großartigen Typ haben.

Stephen Hay schlägt vor, die HTML-Schriftgröße auf 100 Prozent festzulegen (lesen Sie: lassen Sie es einfach so), da jeder Browser oder Gerätehersteller einen angemessen lesbaren Standard für eine bestimmte Auflösung oder ein bestimmtes Gerät festlegt. Für die meisten Desktop-Browser ist dies 16px.

Andererseits verwendet Moore die REM-Einheit und die HTML-Schriftgröße, um eine Mindestschriftgröße für bestimmte Inhaltselemente festzulegen. Wenn Sie beispielsweise möchten, dass die Byline eines Artikels immer 14 Pixel groß ist, legen Sie diese als Basisschriftgröße für das HTML-Element fest und legen Sie .byline {font-size: 1rem;} fest. Wenn Sie den Body skalieren: Schriftgröße: Um dem Ansichtsfenster zu entsprechen, haben Sie keinen Einfluss auf den .by-Line-Stil.

Eine gute Länge der Lesezeile ist ebenfalls wichtig - streben Sie 45 bis 65 Zeichen an. Es gibt ein Lesezeichen, mit dem Sie Ihre Inhalte überprüfen können. Wenn Sie mit Ihrem Design mehrere Sprachen unterstützen, kann auch die Zeilenlänge variieren. Moore schlägt vor,: lang (de) article {max-width: 30em} zu verwenden, um alle dortigen Probleme abzudecken.

Um den vertikalen Rhythmus beizubehalten, setzen Sie den unteren Rand gegen die Inhaltsblöcke ul>, ol>, blockquote>, table>, blockquote> usw. auf die gleiche Höhe wie Ihre Zeilenhöhe. Wenn der Rhythmus durch die Einführung von Bildern unterbrochen wird, können Sie ihn durch Hinzufügen von Baseline.js oder BaselineAlign.js beheben.

Basic

• Richten Sie Ihre Schriftart zu 100 Prozent aus
• Arbeiten Sie in relativen Einheiten
• Stellen Sie Ihre Ränder auf Ihre Linienhöhe ein, um den vertikalen Rhythmus in Ihrem Design beizubehalten

Fortgeschrittene

• Verbessern Sie die Leistung beim Laden von Schriftarten mit Enhance.js oder beim verzögerten Laden von Schriftarten
• Verwenden Sie Sass @includes für semantische Überschriften.
• Oft müssen wir den h5-Stil in einem Seitenleisten-Widget verwenden, für das ein h2-Markup erforderlich ist. Verwenden Sie die typografischen Mixins von Bearded, um die Größe zu steuern und mit dem folgenden Code semantisch zu bleiben:

.sidebar h2 {@include Heading-5}

Medienabfragen in JavaScript

Seit wir das Layout über Medienabfragen in einer Vielzahl von Ansichtsfenstern steuern können, haben wir nach einer Möglichkeit gesucht, dies auch mit der Ausführung unseres JavaScript zu verknüpfen. Es gibt einige Möglichkeiten, JavaScript für bestimmte Breiten, Höhen und Ausrichtungen von Ansichtsfenstern auszulösen, und einige clevere Leute haben einige benutzerfreundliche native JS-Plugins wie Enquire.js und Simple State Manager geschrieben. Sie können dies sogar selbst mit matchMedia erstellen. Sie haben jedoch das Problem, dass Sie Ihre Medienabfragen in Ihrem CSS und JavaScript duplizieren müssen.

Aaron Gustafson hat einen tollen Trick, der bedeutet, dass Sie Ihre Medienabfragen in Ihrem CSS und Ihrem JS nicht verwalten und abgleichen müssen. Die Idee kam ursprünglich von Jeremy Keith und in diesem Beispiel hat Gustafson sie vollständig umgesetzt.

Injizieren Sie mit getActiveMQ (netm.ag/media-260) div # getActiveMQ-watcher am Ende des body-Elements und verbergen Sie es. Dann innerhalb des CSS-Sets # getActiveMQ-watcher {font-family: break-0;} zur ersten Medienabfrage, font-family: break-1; zur zweiten, Schriftfamilie: break-2; zum dritten und so weiter.

Das Skript verwendet watchResize () (netm.ag/resize-260), um zu überprüfen, ob sich die Größe des Ansichtsfensters geändert hat, und liest dann die aktive Schriftfamilie zurück. Jetzt können Sie damit JS-Verbesserungen verknüpfen, z. B. eine Benutzeroberfläche mit Registerkarten zu einer DLL hinzufügen, wenn das Ansichtsfenster dies zulässt, das Verhalten eines Leuchtkastens ändern oder das Layout einer Datentabelle aktualisieren. Überprüfen Sie den getActiveMQ-Codepen unter netm.ag/active-260.

Basic

• Vergessen Sie JavaScript für verschiedene Ansichtsfenster. Stellen Sie den Benutzern Inhalte und Website-Funktionen so zur Verfügung, dass sie in allen Ansichtsfenstern darauf zugreifen können. Wir sollten niemals JavaScript brauchen

Fortgeschrittene

• Erweitern Sie die Methode von Gustafson, indem Sie Breakup als vordefinierte Liste von Medienabfragen verwenden und die Erstellung der Liste von Schriftfamilien für getActiveMQ-watcher automatisieren

Progressive Enhancement

Ein häufiges Missverständnis über progressive Verbesserungen ist, dass die Leute denken: "Na ja, ich kann diese neue Funktion nicht verwenden", aber im Gegenteil. Progressive Verbesserung bedeutet, dass Sie eine Funktion bereitstellen können, wenn sie nur in einem oder gar keinem Browser unterstützt wird. Mit der Zeit erhalten Benutzer eine bessere Erfahrung, wenn neue Versionen eintreffen.

Wenn Sie sich die Kernfunktion einer Website ansehen, können Sie diese als HTML bereitstellen und die gesamte Verarbeitung von der Serverseite durchführen lassen. Zahlungen, Formulare, Likes, Sharing, E-Mails, Dashboards - alles ist möglich. Sobald die Grundaufgabe fertig ist, können wir die fantastischen Technologien darüber legen, da wir ein Sicherheitsnetz haben, um diejenigen zu fangen, die durchfallen. Die meisten fortgeschrittenen Ansätze, über die wir hier gesprochen haben, basieren auf fortschreitender Verbesserung.

Layout

Flexibles Layout ist einfach zu sagen, hat aber viele verschiedene Ansätze. Erstellen Sie einfache Rasterlayouts mit weniger Markup, indem Sie den Selektor nth-child () verwenden.

/ * deklariere die erste mobile Breite für das Gitter * / .grid-1-4 {float: left; Breite: 100%; } / * Wenn das Ansichtsfenster mindestens 37,5 em groß ist, setzen Sie das Raster auf 50% pro Element * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Lösche den Float jedes zweite Element NACH dem ersten. Dies zielt auf das 3., 5., 7., 9. ... im Raster ab. * / .Gitter-1-4: n-tes Typ (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Entfernen Sie das vorherige Löschen * / .grid-1-4: n-ter Typ (2n + 1) {Löschen: keine; } / * Lösche den Float jedes 4. Element NACH dem ersten. Dies zielt auf den 5., 9. ... im Raster ab. * / .Gitter-1-4: n-tes Typ (4n + 1) {clear: left; }}

Winken Sie zum Abschied von der Position und schweben Sie für Ihre Layouts. Obwohl sie uns bisher gute Dienste geleistet haben, war ihre Verwendung für das Layout ein notwendiger Hack. Wir haben jetzt zwei neue Kinder auf dem Block, die helfen werden, all unsere Layoutprobleme zu beheben - Flexbox und Grids.

Flexbox eignet sich hervorragend für einzelne Module und steuert das Layout von Inhalten in jedem der Module. Es gibt Layouts, die wir bereitstellen möchten und die mit Flexbox einfacher zu erreichen sind. Dies gilt umso mehr für reaktionsfähige Websites. Weitere Informationen hierzu finden Sie im CSS Tricks-Handbuch zu Flexbox oder Flexbox Polyfill.

CSS-Rasterlayout

Das Raster ist eher für das Layout auf Makroebene gedacht. Das Grid-Layout-Modul bietet Ihnen eine hervorragende Möglichkeit, Ihr Layout in Ihrem CSS zu beschreiben. Ich empfehle diesen Artikel über das CSS-Grid-Layout von Rachel Andrew, während er sich noch im Entwurfsstadium befindet.

Schließlich

Dies sind nur einige Tipps, um Ihre Reaktionspraxis zu erweitern. Machen Sie einen Schritt zurück, wenn Sie sich einer neuen reaktionsschnellen Arbeit nähern, und stellen Sie sicher, dass Sie die Grundlagen richtig verstehen. Beginnen Sie mit Ihren Inhalten, HTML- und Ebenenverbesserungen und es gibt keine Begrenzung, wo Sie Ihre Designs verwenden können.

Dieser Artikel erschien ursprünglich in Ausgabe 260 von Netzmagazin.