19 wirklich nützliche Tutorials zum reaktionsschnellen Webdesign

Responsive Webdesign ist nicht mehr optional. Websites müssen heutzutage einfach reagieren. Zum Glück ist RWD einfacher als je zuvor zu implementieren, da es so viele großartige Tools gibt, mit denen Sie Ihre Designs erstellen und testen und sicherstellen können, dass Sie das Beste erstellen Benutzererfahrung .

Hier ist unsere Zusammenfassung einiger der besten Ressourcen, die Sie dabei unterstützen, dass Ihre Websites gut funktionieren und auf jedem Gerät gut aussehen. Möchten Sie weitere nützliche Ressourcen? Unsere Guides zu den Besten Webseitenersteller und Web-Hosting Service sind hier um zu helfen. Und wenn Sie sich Gedanken über die sichere Speicherung von Dateien machen, benötigen Sie diese brillanten Cloud-Speicher Optionen.

01. Wie man anfängt, reaktionsschnell zu denken

Responsive Webdesign-Tutorials: Wie man anfängt, reaktionsschnell zu denken



Laptoptasche für Apple MacBook Pro 15
Holen Sie sich in einen reaktionsschnellen Geisteszustand(Bildnachweis: FreeCodeCamp)

Im Dieser Beitrag auf FreeCodeCamp Kevin Powell betont, dass Responsive Web Design kein Trend mehr ist. Es ist die Art und Weise, wie Websites erstellt werden sollen, und das bedeutet, von Anfang an reaktionsschnell zu denken. Hier zeigt er, wie man in die reaktionsschnelle Stimmung kommt, während man eine vollständig reaktionsschnelle 3-seitige Website erstellt.

02. 9 Tipps zur reaktionsschnellen Typografie

Responsive Webdesign-Tutorials: 9 Responsive Typografie-Tipps

Holen Sie sich reaktionsschnelle Tipps von Experten(Bildnachweis: Adam Banks)

Responsive Webdesign benötigt natürlich dazu Responsive Typografie. Aber was bedeutet das überhaupt und wie setzen Sie es um? Wir haben sieben führende Webdesigner gefragt für ihre Tipps zum Erstellen von elegantem, lesbarem Text in jedem Ansichtsfenster.

03. Die Regeln der responsiven Web-Typografie

Die Regeln der reaktionsschnellen Web-Typografie

Befolgen Sie diese Tipps, um Ihre reaktionsschnelle Web-Typografie richtig zu machen

Responsive Web-Typografie ist schwierig - Sie müssen sowohl über Design-Chops als auch über technisches Know-how verfügen. So schwierig es auch sein mag, es ist keine Option, etwas falsch zu machen, da Typografie der Eckpfeiler des Webdesigns ist. Folgen diese Gestaltungsprinzipien und praktischen Lösungen um es richtig zu machen.

04. Entwerfen Sie eine reaktionsfähige Site mit em-basierter Größe

Entwerfen Sie eine reaktionsfähige Website mit em-basierter Größe

Erstellen Sie Ihre Seiten, damit das Design nicht beschädigt wird, wenn sich die Schriftgröße ändert

Durch die Verwendung von em-Einheiten für die Schriftgröße können Sie Komponenten auf der Seite entwerfen, die automatisch reagieren, wenn sich die Schriftgröße ändert. Mit einem cleveren Trick für eine reaktionsschnelle Schriftgröße können Sie dann eine ganze Seite erstellen, die sich dynamisch an die Breite des Ansichtsfensters des Browsers anpasst. Folgen Sie diesem Tutorial um zu lernen, wie man das 'relative' Verhalten von ems nutzt, um skalierbare und reaktionsschnelle Designs zu erstellen.

05. Prioritätshandbücher: Eine inhaltliche Alternative zu Wireframes

Priority Guides: Eine inhaltliche Alternative zu Wireframes

Erfahren Sie, warum Sie Prioritätshandbücher anstelle von Drahtgittern verwenden sollten

Wireframes sind zwar das am häufigsten verwendete Tool zum Entwerfen von Websites, Apps und anderen digitalen Schnittstellen, sie sind jedoch nicht ohne Nachteile, insbesondere wenn es um responsives Design geht. Hier stellen Heleen van Nues und Lennart Overkamp ihre bevorzugte Alternative zu Drahtgittern vor: Prioritätsführer , die Inhalte und Elemente für einen mobilen Bildschirm enthalten, sortiert nach Hierarchie von oben nach unten und ohne Layoutspezifikationen.

06. Der Leitfaden für Profis zum reaktionsschnellen Webdesign

Der Profi

Erstellen Sie mit diesem Handbuch bessere Websites für jedes Gerät

Geschrieben von Justin Avery , Kurator des Responsive Design Weekly Newsletters, diese Anleitung aus dem Netzmagazin führt Webprofis durch die Grundlagen bis hin zu fortgeschritteneren reaktionsschnellen Webdesign-Techniken.

07. Entwerfen von reaktionsschnellen und geräteunabhängigen Formularen

Reaktionsformen, die sich an verschiedene Geräte anpassen

Stellen Sie sicher, dass Ihre Formulare unabhängig vom Gerät funktionieren

Formulare sind eines der wichtigsten Elemente in jedem digitalen Produktdesign. Unabhängig davon, ob Sie einen Anmeldefluss oder einen Stepper mit mehreren Ansichten benötigen, müssen Sie ihn so gestalten, dass er sowohl auf Mobilgeräten als auch auf dem Desktop effektiv funktioniert. Hier erfahren Sie, wie es geht , einschließlich hilfreicher Tipps zur Verwendung von Flexbox.

08. Erstellen Sie ein ansprechendes Layout mit CSS Grid

Designer, der eine CSS-Grid-Website erstellt

Erstellen Sie eine gut aussehende Portfolio-Site, die für alle Ansichtsfenster geeignet ist

Das CSS-Grid-Layout wird täglich von Browsern unterstützt, und obwohl es kein Ersatz für Flexbox oder Floats ist, ist es in Kombination eine großartige Möglichkeit, neue und aufregende reaktionsschnelle Layouts zu erstellen. Befolgen Sie diese Schritt-für-Schritt-Anleitung zum Erstellen einer reaktionsschnellen Portfolio-Site mit Grid.

09. Das Webdesigner-Handbuch zu Flexbox

Mit 1 2 3 4 5 gekennzeichnete Flexbox-Spalten mit einem Pfeil, der die Hauptachse anzeigt, sind horizontal

Beginnen Sie mit Flexbox

Haben Sie bereits mit Flexbox begonnen? In diesem Tutorial bietet Wes Bos eine umfassende Anleitung zu den Kernkonzepten, die Ihnen ein solides Verständnis für alles vermitteln, was Sie benötigen, um dieses leistungsstarke Tool in den Griff zu bekommen.

10. Codrops Flexbox-Referenz

Codrops Screenshot sagt

Eine vollständige Anleitung von Sara Soueidan

Dies vollständige Anleitung zur Flexbox wird von Sara Soueidan geschrieben, einer Autorin, die für ihre Fähigkeit bekannt ist, Konzepte auf eine Weise zu erklären, die leicht zu befolgen ist, ohne auf Details zu verzichten. Das Codrops-Handbuch wird regelmäßig aktualisiert, sodass es eine hervorragende Ressource ist, zu der Sie bei Bedarf zurückkehren können.

11. Stapel: Flexbox für Skizze

Mittlerer Artikel Screenshot sagt

Erhalten Sie Flexbox-Funktionen in Sketch

Stacks, Teil des Auto Layout-Plugins, bieten Ihnen die Möglichkeit, die Flexbox-Technologie in Sketch ohne Verwendung von CSS zu verwenden. Dieser Beitrag erklärt, wie Sie diese leistungsstarke Technik für ein einfach ansprechendes Design verwenden können.

12. Ein Crashkurs in technischem RWD

Ein Crashkurs in technisch ansprechendem Webdesign-Screenshot

Machen Sie sich mit den Grundlagen des reaktionsschnellen Webdesigns vertraut

Jerry Cao hat im Treehouse-Blog viele nützliche Informationen zu einem relativ kurzen, lesbaren Artikel zusammengefasst.

13. Erstellen Sie flexible Layouts mit Susy und Breakpoint

Gerätebildschirme mit ansprechendem Website-Layout, angepasst an jedes Verhältnis

Sass-Erweiterungen für reaktionsschnelle Mathematik

Wenn Sie kein Framework zum Erstellen Ihrer reaktionsfähigen Website verwenden möchten, diese Sass-Erweiterungen sind eine schöne Alternative, jede mit ihren eigenen Stärken. Sie kümmern sich für Sie um die reaktionsschnelle Mathematik, damit Sie sich auf das Design konzentrieren können.

14. So erstellen Sie reaktionsschnelle Anleitungen in Adobe XD

In Adobe XD werden reaktionsschnelle Anleitungen erstellt

Adobe Experience Design (XD) ist ein UX- und Prototyping-Tool

Wenn Sie es ausprobieren möchten Adobe Experience Design (XD) , hier ist ein gutes Tutorial um Ihnen den Einstieg zu erleichtern. Es enthält eine Videodemonstration, die Sie durch jeden Klick des Prozesses führt.

15. CSS bei BBC Sport

Screenshot der BBC Sport Website

Leichtes CSS für eine große reaktionsfähige Site

Dies ist an sich kein Tutorial, aber hier wird viel gelernt. In diesem Beitrag Shaun Bent, der erste einer zweiteiligen Serie, führt uns auf eine detaillierte Tour durch CSS bei BBC Sport. Sie haben es geschafft, die CSS-Grundlage dieser riesigen Site unter 9 KB zu halten, und es ist faszinierend zu sehen, wie das gemacht wurde.

CSS Tricks Screenshot, mit dem der Artikel beginnt

Chris Coyiers klebrige Fußzeilen

Sticky Footer ... das sollte einfach genug sein, oder? Leider nicht. Es kann schwieriger sein, diese Fußzeile auf jedem Gerät an der richtigen Stelle zu platzieren, als Sie vielleicht erwarten. Zum Glück hat Chris Coyier zusammengestellt fünf Tricks das wird dir helfen, es mit zu verwirklichen calc () , Flexbox, negative Ränder und Raster.

17. Anpassung an die Eingabe

Tabelle mit komfortablen, gemütlichen und kompakten Textdesigns auf verschiedenen Bildschirmgrößen

Stellen Sie sicher, dass Ihre reaktionsfähige Site Eingaben von jedem Gerät akzeptieren kann

Bei Responsive Design geht es nicht nur darum, dass Ihre Seite auf jedem Gerät richtig angezeigt wird, sondern auch darum, dass sie gut funktioniert. Dies bedeutet, dass Eingaben in einer Welt, in der Desktops über Touchscreens und Telefone über Tastaturen verfügen, gut akzeptiert werden können. Dieser Beitrag von Jason Grigsby von Cloud Four hat einige gute Ratschläge.

18. Unsere Best Practices sind die Beeinträchtigung der mobilen Webleistung

Screenshot des Artikellesens

Leistungsüberlegungen müssen auch für Mobilgeräte gelten

Ohne Berücksichtigung können bestimmte Best Practices, die während der Desktop-Ära entwickelt wurden, sich nachteilig auf die Leistung des mobilen Webs auswirken. Dieser Beitrag Sie werden tiefer darüber nachdenken, wie Ihre Website auf Mobilgeräten gut funktioniert.

19. So erstellen Sie reaktionsschnelle Webanwendungen mit Containerabfragen

Bildschirme mit unterschiedlichen Abmessungen zeigen eine Web-App-Modellskalierung

Erfahren Sie, wie Sie Ihre Medien mithilfe von Containerabfragen skalieren können

Erfahren Sie, wie Sie eine schöne, komplexe Web-App mit Komponenten, Zuständen und Interaktionen in verschiedene Dimensionen und Auflösungen umwandeln. mit Container Querie .

Zum Thema passende Artikel: