30 nützliche responsive Webdesign-Tutorials
Wir sind also am Ende unserer "Responsive Web Design week", Der heutige Beitrag wird der letzte der Serie sein. Wir möchten Ihnen helfen, Ihre Fähigkeiten bei der Manipulation dieser Codes so zu verbessern, dass sie auf verschiedenen Geräten nach Belieben reagieren. Und um dies zu tun, sind wir dabei 30 Responsive Webdesign-Tutorials online gefunden. Diese Liste erhebt keinen Anspruch auf Vollständigkeit, aber Sie werden mit den Grundlagen des Entwerfens einer anpassungsfähigen Website vertraut sein, die für alle Arten von Bildschirmgrößen geeignet ist.
Wir beginnen mit einführenden Tutorials in "Breaking the Ice", etwa einer RWD: 101-Klasse, an der Sie teilnehmen sollten, um sich mit dem Konzept vertraut zu machen, bevor wir mit den "Start Building" -Übungen beginnen.
Zum Schluss enden wir mit einem Abschnitt "Mehr tun", in dem wir Tutorials mit horizontalen Layouts, elastischen Videos, Dropdown-Menüs und nach oben zeigenden Akkordeon-Navigationen, Thumbnails und dem Problem mit Tischen vorführen.
Aber zuerst…
Hier eine Zusammenfassung der beiden Tutorials, die unsere Autoren Anfang dieser Woche vorgestellt haben:
Responsive Website-Navigation
Von Thoriq Firdaus - [Tutorial anzeigen]
Hier finden Sie ein Tutorial, mit dem Sie Ihre eigene responsive Website-Navigation gestalten können. Einer der wichtigsten Aspekte einer Website ist, wie einfach es ist, durch verschiedene Teile der Website zu navigieren. In diesem Tutorial erfahren Sie, wie Sie dies mit CSS3 optimieren können.
Responsive Resume
Von Jake Rocheleau - [Tutorial anzeigen]
Wenn Sie ein Webprofi sind und ein Online-Lebenslauf bereits Teil Ihrer Karriere ist, sollten Sie die Gelegenheit nutzen, diesen Lebenslauf ebenfalls reaktionsschnell zu gestalten. Machen Sie es Arbeitgebern und Kunden leichter, Sie auf jedem Gerät zu finden. Und wenn Sie gerade dabei sind, ist Ihr eigener Lebenslauf ein Portfolio dessen, was Sie als Entwickler tun können.
Das Eis brechen
Wo waren wir jetzt? Ah ja, lass uns eine Eisbrecheraktion beginnen!
Anfängerleitfaden für Responsive Webdesign
Von Nick Petit - [Tutorial anzeigen]
Dieses Tutorial ist ein hervorragender Ausgangspunkt für Anfänger, da es beschreibt, was Web-Responsive Design bedeutet, wie es zum Vorschein kam, sowie Erklärungen zu Fluidgittern und Medienanfragen. Schauen Sie sich auch die Ressourcen an, die am Ende des Tutorials aufgeführt sind.
Einführung in Responsive Web Design: Video
Von Nick Petit - [Tutorial anzeigen]
Dies ist ein fast neunminütiges Tutorial, das die Oberfläche des responsiven Webdesigns, dessen Auswirkungen auf das Design einer Website und die Elemente, die bei der Erstellung eines responsiven Webdesigns eine Rolle spielen, durchdringt . Wenn Sie wissen möchten, worum es beim responsiven Webdesign geht, ohne sich vorher mit der Programmierung zu beschäftigen, sollten Sie mit diesem Video beginnen.
Wie Sie aus einer Website eine Responsive Site machen
Von Rochester Oliveira - [Tutorial anzeigen]
Dies ist ein weiteres Tutorial, das von den Grundlagen ausgeht, aber alles nach und nach aufschlüsselt, einschließlich des Betriebssystems und der Browser, für die Sie Ihre Website verwenden, sowie der Elemente, die betroffen sind, wenn die Website von verschiedenen Geräten aus betrachtet wird. Der Autor hat auch einige nützliche WordPress- und jQuery-Plugins bereitgestellt, die Ihnen die Arbeit erleichtern.
Responsive Design in 3 Schritten
Von Nick La - [Tutorial anzeigen]
In diesem Lernprogramm wird erläutert, wie Sie ein responsives Webdesign mit Metatags, HTML-Struktur und den wichtigen Medienabfragen erstellen können. Sie benötigen etwas CSS-Kenntnisse, um es zu verstehen…
Entwerfen für ein Responsive Web
Von Max Luzuriaga - [Tutorial anzeigen]
Hier ist ein Artikel, der nicht so sehr ein Tutorial ist, sondern eine Anleitung zum Erstellen von responsivem Webdesign. Das heißt, der Autor sagt Ihnen buchstäblich die Vor- und Nachteile des responsiven Webdesigns. Es gibt Erklärungen, warum bestimmte Funktionen nicht ausreichend reagieren, wie sie mit Proportionen und Modulen arbeiten, und das Beste ist, dass sie relativ kurz sind und leicht zu absorbieren sind.
Responsive Web Design: Ein visueller Leitfaden
Von Andrew Gormley - [Tutorial anzeigen]
Wenn mit Text gefüllte Lernprogramme keine praktikablen Optionen sind, versuchen Sie stattdessen dieses Video-Lernprogramm. Es ist immer noch ziemlich technisch, aber wenn Sie sich dadurch besser fühlen, müssen Sie nicht viel lesen. Es dauert etwa 25 Minuten und der Videomacher blättert tatsächlich durch die Teile, in denen er kodiert, und erklärt dann wieder, was die Codes tun.
Beginnen Sie mit dem Aufbau
Okay, lass uns anfangen, einige responsive Designs zu erstellen, angefangen mit…
Flüssigkeitsgitter
Von Ethan Marcotte - [Tutorial anzeigen]
Sagen Sie Raster, und Sie würden an "starre Strukturen" denken, an Fluid und Sie würden denken, dass es von einer Seite des Bildschirms nach unten oder oben oder nach unten fließen könnte, wenn Sie Druck auf den Browser ausüben Sie würden wahrscheinlich denken, dass Sie sich dieses Tutorial ansehen müssen, um zu verstehen, wie Fluidnetze Ihr Design reaktionsfähiger machen können.
Flüssige Bilder
Von Ethan Marcotte - [Tutorial anzeigen]
Am Ende dieses Artikels sollten Sie wissen, wer Ethan Marcotte ist. Hier ist ein Hinweis: Er ist derjenige, der das Konzept und den Begriff für Web-Responsive-Designs entwickelt hat. Sein Name wird so ziemlich in jedem anderen Tutorial in dieser Liste auftauchen. Warum sollten Sie sich nicht direkt vom Meister über flüssige Bilder beraten lassen??.
Skalierbare Navigationsmuster im Responsive Web Design
Von Michael Mesker - [Tutorial anzeigen]
Dieses Tutorial behandelt die Lektionen, die der Autor aus einem umfangreichen Responsive-Webdesign-Projekt gelernt hat. Lesen Sie in seiner 'Vorgehensweise', wie Sie Vorlagen erstellen, die einfacher zu konfigurieren sind, um benutzerfreundliche und reaktionsschnelle Ergebnisse zu erhalten. Es ist ein großartiger Blick hinter die Kulissen, um zu verstehen, wie Sie Schnittstellen für Desktop-, Tablet- und mobile Ansichten optimal gestalten.
Responsives Webdesign mit CSS3-Medienabfragen
Von Nick La - [Tutorial anzeigen]
Und ein weiteres hervorragendes Tutorial, mit dem Sie lernen können, wie man eine browserübergreifende responsive Website-Vorlage mit HTML5 und CSS3 erstellt. Es ist ein schrittweiser Ansatz und es gibt Demos eines Webdesigns vor und nach der Implementierung der Medienanfragen, um die Auswirkungen von Medienanfragen besser zu verstehen.
CSS-Effekte: Platzieren Sie Bilder zur Texthöhe
Von Zoe Mickley Gillenwater - [Tutorial anzeigen]
In diesem Lernprogramm erfahren Sie, wie Sie die Größe und den Abstand von Bildern mit fester Breite ändern können, um sie an den Begleittext anzupassen, unabhängig von der Größe des Browserfensters.
Adaptive Layouts mit Medienabfragen
Von Aaron Gustafson - [Tutorial anzeigen]
Erfahren Sie, wie Sie adaptive oder flexible Layouts mit CSS-Medienabfragen verwenden. Folgen Sie einfach der Übung, um zu lernen, wie Sie Ihr Design an die zweispaltige Ansicht oder die einspaltige Ansicht anpassen und das Design für iPhone und iPad vorbereiten.
Responsive Images: Experimentieren mit kontextabhängiger Bildgröße
Von Scott Jehl - [Tutorial anzeigen]
Hier ist ein Tutorial, bei dem der Build-from-Mobile-First-Ansatz verwendet wurde. Diese Technik gibt eine größere Größe für die Bilder an, die bei größeren Bildschirmauflösungen, ohne Bildanfragen sowie UA-Sniffing verwendet werden sollen.
TU mehr
Elastische Videos
Von Nick La - [Tutorial anzeigen]
In diesem Lernprogramm wird die Skalierung von Videos behandelt, wenn die Größe Ihres Browser-Fensters geändert wird. Es ist im Wesentlichen ein CSS-Trick und es gibt eine Demo, die den Trick im Tutorial selbst zeigt.
Teile von Bildern verstecken und aufdecken
Von Zoe Mickley Gillenwater - [Tutorial anzeigen]
Das Tutorial stammt eigentlich aus dem Buch des Autors und beschreibt, wie Teile der Bilder abhängig von der Bildschirmauflösung ein- oder ausgeblendet werden. Sie lernen, wie Sie Bilder dynamisch zuschneiden, wenn sich die Bildschirmgröße ändert, und nur einen Teil des Gesamtbildes zeigt, wenn nur wenig Platz zur Verfügung steht.
Responsive Content Navigator mit CSS3
Von Mary Lou - [Tutorial anzeigen]
Bevorzugen Sie einen schickeren Weg, damit Benutzer an Ihrer Seite navigieren können? Dann sollten Sie dieses Tutorial durchlesen, um zu lernen, wie Sie bei einigen coolen Übergängen Code schreiben: Einblenden, Slides, Rotationen und Skalieren. Die Übergänge sind im Wesentlichen Inhaltsebenen, die mit spezifischer Codierung angezeigt oder ausgeblendet wurden.
Erstellen Sie eine Responsive Web Design-Vorlage
Von Harry Atkins - [Tutorial anzeigen]
Dies ist ein kurzes Tutorial, um ein Responsive zu erstellen Webvorlage das funktioniert sowohl auf dem Desktop als auch auf dem iPhone.
Responsives horizontales Layout
Von Mary Lou - [Tutorial anzeigen]
In diesem Lernprogramm erfahren Sie, wie Sie ein horizontales Layout mit mehreren scrollbaren Inhaltsfenstern erstellen. Verwenden Die Entstehung der Arten Als Beispieltext wird jedes Kapitel des Buches in Spalten nebeneinander angeordnet, die im Vollbrowser-Modus nebeneinander angeordnet sind. Wenn Sie jedoch auf ein Mindestmaß reduzieren, ändert sich das Layout in ein vollständig vertikales "Buch"..
Konvertieren Sie ein Menü in ein Dropdown-Menü für kleine Bildschirme
Von Chris Coyier - [Tutorial anzeigen]
In diesem Lernprogramm erfahren Sie, wie Sie ein Menü in eine Dropdown-Liste konvertieren, wenn das Browserfenster eng ist oder wenn Sie sich auf einem mobilen Gerät befinden. Die Linkreihe in der oberen rechten Ecke der Seite wird in ein Dropdown-Menü umgewandelt, um Platz zu sparen, ohne die Navigationsoptionen zu beeinträchtigen.
Flexibles Slide-to-Top-Akkordeon
Von Mary Lou - [Tutorial anzeigen]
Erfahren Sie, wie Sie ein einfaches und flexibles Akkordeon-Layout mit Einblendübergängen und einstellbaren Breiten je nach Bildschirmgröße und Auflösung erstellen.
Verwendung von CSS3-Orientierungsmedienabfragen
Von Ryan Seddon - [Tutorial anzeigen]
Basierend auf der einfachen Regel, die die Modi Portrait (Höhe größer als Breite) und Querformat (Breite größer als Höhe) definiert, können Sie eine Medienabfrage schreiben, um bestimmte Stile basierend auf dem Modus, in dem Sie sie anzeigen, zu verwenden. In diesem Lernprogramm erfahren Sie, wie Sie genau dies tun können. Außerdem erhalten Sie einen Link zu einem farbverändernden Chamäleon, das diese Änderung anhand von Farbe demonstriert, wenn Sie das Browserfenster verkleinern.
Responsive Datentabellen
Von Chris Coyier - [Tutorial anzeigen]
Tabellen bereiten Kopfschmerzen, wenn es um kleine Bildschirmgrößen geht. Dies bedeutet jedoch nicht, dass Tabellen vollständig vermieden werden müssen. Erfahren Sie, wie Sie mithilfe von Medienabfragen das Format Ihrer Tabelle vollständig ändern können, wenn Sie zu mobilen Bildschirmgrößen wechseln. Sehen Sie sich die Demo an, um einen Eindruck von der Magie zu erhalten, die Sie basierend auf diesem Tutorial erstellen können.
Flüssige CSS3-Diashow mit Parallax-Effekt
Mit dem Ringflügel - [Tutorial anzeigen]
Erstellen Sie eine CSS3-Diashow, bei der zwei Hintergrundbilder verwendet werden. Wenn Sie die Position der Hintergründe ändern, wird ein Parallax-Effekt angezeigt. Abgesehen davon ist die Diashow flexibel, und die Größe ändert sich, wenn sich das Browserfenster schließt.
So erstellen Sie eine Responsive Thumbnail-Galerie
Von Joshua Johnson - [Tutorial anzeigen]
Dies ist ideal für Websites, die Miniaturansichten in einer Galerie enthalten. Durch die Größenänderung des Browser-Fensters wird das Layout so geändert, dass es zwischen zwei Spalten (kleinere Bildschirmgrößen) und fünf (maximalen) Spalten belegt. Weitere ähnliche Diashows und Slider finden Sie in unserem Artikel "Top 10 Free Responsive Image Galleries / Slideshows".
Optimierung Ihrer E-Mail für mobile Geräte
Von Ros Hodgekiss - [Tutorial anzeigen]
Sogar E-Mails können für die Anzeige von kleinen Bildschirmen wie Websites optimiert werden. In der Regel wird der Text in einer HTML-E-Mail so geändert, dass er nicht lesbar ist. In diesem Tutorial erfahren Sie, wie Sie dies und mehr verwalten.
mit Frameworks
Erstellen Sie mit Skeleton eine Responsive Mobile-Friendly Website
Von Joshua Johnson - [Tutorial anzeigen]
Skeleton ist ein fantastisches Framework, um responsive Websites damit zu erstellen. In diesem Lernprogramm erfahren Sie Schritt für Schritt, wie Sie mit dem Skeleton-Framework beeindruckende responsive Designs erstellen. Sie werden staunen, wie einfach die Implementierung ist.
Responsives Webdesign mit HTML5 & Less Framework 3
Von Louis Simoneau - [Tutorial anzeigen]
Wenn Sie Less noch nicht richtig kennengelernt haben, sollten Sie zuerst unser eigenes Less CSS-Tutorial lesen, um einen Eindruck von Less zu bekommen. In diesem Lernprogramm wurde das Less-Framework verwendet, um die Auswirkungen von Medienabfragen deutlich zu machen.
Fazit
Und das schließt unsere Sich anpassendes Webdesign Serie. Wir hoffen, dass die Themen, Tools und anderen Ressourcen dieser Serie dazu beigetragen haben, das Konzept des responsiven Webdesigns unseren Lesern zugänglich zu machen. Aber woher wissen wir, wenn Sie es uns nicht sagen?
Teilen Sie uns Ihr Feedback mit zu der Serie und wenn Sie Vorschläge für weitere Ideen haben, die Sie auf hongkiat.com sehen möchten. Schreiben Sie uns eine Zeile oder einen Kommentar unten.
