Responsives Webdesign erfordert eine ganz andere Art des Layouts, das sowohl herausfordernd als auch aufregend ist. Die Kunst des Layouts war bereits für die Jahrhunderte komplex genug, dass sie durch feste Elemente definiert wurde. Jetzt werden die Dinge exponentiell komplizierter, da Layouts immer anpassungsfähiger werden.
Um Ihr Gehirn neu zu programmieren, um Layouts auf neue Art und Weise zu betrachten, betrachten wir einige interessante Designmuster, die von talentierten Designern im gesamten Web implementiert werden.
Klein anfangen
Eine der populärsten Methoden, die ich sehe, dass responsives Design implementiert wird, besteht einfach darin, den Inhaltsspalten der Seite, die mit abnehmender Seitenbreite immer schmaler werden, eine Fluidbreite zuzuweisen, bis der größere Sprung zu einem einspaltigen mobilen Layout erfolgt . Wir können diese Technik bei der Arbeit auf der Luxushotel-Website 137 Pillars House sehen.
Wie Sie sehen, durchläuft das Layout wirklich nur eine große Transformation. Der Rest der Anpassung ist sehr graduell und beschränkt sich lediglich auf das ursprüngliche Layout.
Dies scheint zu sein, wie viele Designer ihre sprichwörtlichen Zehen einsetzen, um das Wasser des responsiven Designs zu testen. Es ist ein großartiger Ort, um anzufangen, da dies viel weniger Zeit und Aufwand als mehrere große Transformationen erfordert und gleichzeitig den Vorteil bietet, dass eine Webseite bereitgestellt wird, die in jeder Ansichtsfenstergröße gut aussieht.
Anstatt einfach nur mit Reaktionsfreude zu flirten, möchte ich Sie dazu ermutigen, den Sprung zu wagen und die riesigen Möglichkeiten zu erkunden, die Ihnen jetzt beim Layout-Design zur Verfügung stehen. Versteht mich nicht falsch, es ist nichts falsch mit dem oben genannten Ansatz, aber es ist immer eine gute Idee, Ihre Fähigkeiten einen Schritt weiter zu gehen und das auszudehnen, was Sie Ihrer Meinung nach für fähig halten.
Mondrian
Unser erstes responsives Webdesign-Muster hätte Piet Mondrian zu schätzen gewusst. Es verwendet drei einfache und große Inhaltsbereiche, die durch dicke Linien getrennt sind. Der Anfangszustand selbst ist sehr vielseitig und kann sich bei einer ziemlich starken Breitenverringerung gut halten.
Sobald es für den Anfangszustand zu eng wird, passt sich das Breitbild-Layout an und wird zu einem vertikalen Layout. Dies wird erreicht, indem Sie die beiden kleineren Kästchen auf der rechten Seite nehmen und sie unter den großen, gekennzeichneten Kästchen bewegen. Dieses Layout gliedert sich dann in unsere standardmäßige einspaltige mobile Ansicht, in der jeder Inhalt einfach unter den letzten gestapelt wird.
In der Wildnis
Wir finden dieses Muster auf der Website des Architekturbüros Andersson-Wise. Wir können sehen, dass es perfekt für die Anzeige großer, schöner Fotos ist. Um den Hauptfokus, das Foto, zu vervollständigen, sind die beiden seitlichen Kästchen einfach und mit einer Volltonfarbe gefüllt, die aus dem Bild entnommen wurde. Der Typ ist stark und sauber und verleiht der Website ein sehr anspruchsvolles Gefühl.
In Anbetracht der Tatsache, dass das Layout so kastengesteuert ist, ist es ein recht einfaches Reaktionsmuster, mit dem Sie Ihre Gedanken einpacken können. Wenn Sie über ein Minimum an Inhalten verfügen, sollten Sie einen Blick darauf werfen.
Grundlegende Galerie
Miniaturbildgalerien sind ein beliebtes Designmuster, das fast so lange wie das Web existiert. Heutzutage halten Designer sie meistens minimal: einfache Rechtecke, die gleichmäßig auf einem festen Hintergrund angeordnet sind. Dieses Format lässt sich sehr einfach umfließen, wenn sich das Ansichtsfenster ändert. Sie müssen lediglich die Anzahl der Spalten ein paar Mal reduzieren.
Wir haben diesen Prozess ausführlich in unserem Artikel zum Erstellen einer responsiven Miniaturansichtsgalerie durchgearbeitet. Prüfen Sie also unbedingt, ob Sie eine schrittweise Anleitung für den Prozess suchen.
In der Wildnis
Um dieses Muster an einem tatsächlichen Standort zu sehen, sehen Sie sich das Portfolio von Brad Sawicki an. Gleich auf seiner Homepage beginnt er mit einer einfachen dreispaltigen Galerie, die zu einem Doppel- und einem Einzelspaltenlayout zusammenfällt. Der Vorteil hierbei ist, dass die Bildgröße der Arbeitsvorschauen das verfügbare Ansichtsfenster optimal ausnutzt, sodass der Betrachter sie immer in einem schönen, großen Format anzeigen kann.
Top-Artikel
Dieses ist dem Galerielayout sehr ähnlich, es ist eher darauf ausgerichtet, einige Elemente hervorzuheben als einige. In diesem Beispiel werden vier vorgestellte Elemente verwendet, es ist jedoch genauso beliebt, oder noch mehr, stattdessen drei Elemente zu sehen.
Wie Sie sehen, beginnt das Layout mit den vier vorgestellten Elementen nebeneinander mit einigen einführenden Inhalten. Es folgt dann dem Pfad der Galerie, während es auf zwei Spalten und schließlich auf eine Spalte springt. Beachten Sie auch, wie sich der Einführungsinhalt anpasst: Die Navigation geht von rechts nach links unter der Hauptüberschrift oder dem Logo.
In der Wildnis
Das Webentwicklungsunternehmen Splendid nutzt dieses Muster auf seiner Website perfekt aus. Sie animieren sogar die Übergänge, etwas, das nur für Design-Nerds gedacht ist, die die Größe ihres Browsers ändern, um die Transformation zu sehen.
Diese spezielle Site ist eine wirklich großartige Implementierung von Responsive Webdesign. Es fühlt sich nie leicht an, sondern behandelt jede Ansichtsfenstergröße, die Sie mit pixelgenauer Finesse auf das Bild werfen können.
Spalte Flip
Dies ist eines der bisher kompliziertesten Muster. Am oberen Rand des Layouts befinden sich einige wirklich große Elemente, die Ihre Aufmerksamkeit auf sich ziehen und die Website vorstellen. Der nächste Abschnitt ist in drei Spalten unterteilt. Wenn Sie jedoch die Größe des Browsers verringern, wird die erste Spalte auf die Seite gekippt und wird zu einer Zeile, die über den beiden anderen Spalten liegt.
Es ist eine ziemlich komplizierte Transformation, aber es ist ziemlich effektiv. Sie können dies ganz einfach durchführen, indem Sie eine Medienabfrage hinzufügen, die die Elemente in dieser Spalte nach links schwimmt, und dann den Float löschen, sodass die beiden anderen Spalten erhalten bleiben.
Der letzte Schritt ist natürlich, alles noch einmal in eine breite Spalte umzufließen. Es kann viel scrollen, aber solange Sie die Seite nicht mit Inhalten überlaufen, ist das nicht so schlimm.
In der Wildnis
Die Inspiration für dieses Layout stammt von Palantir, einer anderen Entwicklungsfirma. Beachten Sie, dass Webentwickler zunächst mit responsive Design auf ihren eigenen Websites experimentieren, was sowohl eine großartige Lernerfahrung als auch ein Beispiel für Kunden sein kann.
Palantir ist ein leuchtendes Beispiel dafür, wie drastisch Ihre Transformationen im responsive Webdesign sein können. Dies ist mehr als nur das Reduzieren der Breite einer Spalte oder das vollständige Entfernen dieser Spalte. Dies bedeutet einen erheblichen Rückfluss des Seiteninhalts, um die verfügbare Breite kontinuierlich zu maximieren.
Feature-Shuffle
Dieses letzte Muster ist eine andere Auffassung von der Idee der vorgestellten Gegenstände. Ich mag es wirklich, weil es beim ersten Reflow eine leichte Kurve wirft. Anstatt einfach auf zwei Spalten zu fallen und nach links zu schweben, wird ein zweispaltiges Layout mit Versatz erstellt, in dem Abschnitte zu beiden Seiten verschoben werden.
Beim einspaltigen Layout werden die Miniaturbilder insgesamt gelöscht, um den Textinhalt stärker hervorzuheben. Dies ist natürlich optional, eines der vorherigen Einzelspaltenformate könnte genauso einfach implementiert werden.
In der Wildnis
Orestis verwendet dieses Muster auf ihrer Website. Bei den drei vorgestellten Elementen handelt es sich um die angebotenen Dienstleistungen, die jeweils durch eine farbenfrohe Illustration dargestellt werden.
Wenn Sie die Größe des Browsers ändern, werden die Dienste gestapelt, und die Bilder werden entweder nach links oder nach rechts verschoben. Es ist eine witzige, schrullige Seite, die Sie selbst ausprobieren müssen, um wirklich ein Gefühl dafür zu bekommen, wie alles funktioniert.
Weitere Muster
Bei meiner Recherche für dieses Stück bin ich auf einen Artikel von Luke Wroblewski zum selben Thema gestoßen. Anstatt sich sehr spezifische Muster anzuschauen, die ich hier gemacht habe, erledigt Luke eine erstaunliche Arbeit, indem er gängige Layouts wirklich auf die grundlegendsten Ideen herunterbricht und Ihnen zeigt, wie sie funktionieren. Es ist ein wirklich tolles Stück und ich mag es wirklich, wie er zeigt, wie das Layout sowohl innerhalb als auch außerhalb der Leinwand funktioniert.
Fazit
Ich hoffe, Ihr Verstand ist jetzt im Overdrive, wenn Sie über responsive Layouts nachdenken. Die Webdesign-Community hat eine Menge Zeit damit verbracht, die technischen Aspekte zu erörtern, wie reaktionsschnelles CSS durch Abfragen in den Medien erreicht wird. Es ist auf jeden Fall an der Zeit, sich eingehend mit den tatsächlichen Designaspekten dieser aufregenden neuen Grenze auseinanderzusetzen.
Hinterlassen Sie unten einen Kommentar und lassen Sie uns wissen, was Sie von diesen responsiven Designmustern halten. Würden Sie einen von ihnen in Ihrer eigenen Arbeit verwenden? Warum oder warum nicht?