So planen Sie das Content-Arrangement für Responsive Design

In einem aktuellen Beitrag habe ich darüber diskutiert, wie visueller Inhalt bezieht sich auf Layout-Design. Dieses Thema ist jedoch sehr detailliert und spaltet sich in viele Unterthemen ab, von denen eines das ist visuelle Organisation für responsive Layouts.

In diesem Beitrag möchte ich mich näher mit responsiven Inhalten befassen, um einige Best Practices zu untersuchen Inhalt für kleinere Bildschirme neu anordnen. Im UI & UX-Design gibt es für jedes Projekt keine richtige Antwort, aber es gibt eine Trends, die gut funktionieren, Und aus diesen Trends können Sie Ihre eigenen Ideen entwickeln.

Raster zu Listen neu anordnen

Jede Website verwendet eine Art Gitter, unabhängig davon, ob es sichtbar ist oder nicht. Inhalte in einem festen Raster werden auf breiteren Monitoren oft horizontal gruppiert, auf kleineren Geräten ist dies jedoch nicht sinnvoll. Das beste Mittel ist, diese Raster auf kleineren Bildschirmen aufzubrechen wandeln Sie die Elemente in Listen um.

Beispiel 1: Wellington City Council

Werfen Sie einen Blick auf die Website des Wellington City Council, die eine Reihe von Funktionen verwendet gitterartige Abschnitte auf der Startseite.

Es gibt eine kleine Diashow mit quadratischen Links reduziert wenn das Browserfenster seine Größe ändert. Der Fußzeilenabschnitt auch wird kleiner, und schließlich konvertiert in eine vertikale Liste von Links.

Bei sehr kleinen Telefonen mit einer Breite von 320px müssen Sie die Gerätegröße berücksichtigen. Im Falle eines iPhones ist das Gerät größer als breiter, sodass es sinnvoll ist, Inhalte so zu gestalten.

Beispiel 2: Mooyah-Burger

Werfen Sie einen Blick auf die Homepage von Mooyah und versuchen Sie, die Größe des Layouts zu ändern. Es gibt einen kleinen Diashowbereich, der drei Elemente auf einem Desktop-Bildschirm enthält schrumpft Anzeigen nur eines Elements auf dem Handy (Hinzufügen weiterer ausgeblendeter Folien zum Widget).

Die beiden Werbeboxen, in denen die Mooyah-App und das Menü angezeigt werden, bleiben nebeneinander fixiert bis der Bildschirm klein genug wird um sie vertikal neu anzuordnen.

Das “verbinde dich mit uns!” Abschnitt ordnet auch Inhalte so um, dass jeder soziale Beitrag bekommt so viel Platz wie möglich. Im Allgemeinen sind Breitbild-Monitore am breitesten und Smartphones am größten.

Beispiel 3: Themenmarkt

Wenn Sie ein Layout mit einem Raster entwerfen, sollten Sie dies berücksichtigen Breit & hoch Layoutstile vor dem Schreiben einer einzelnen Codezeile. Auf diese Weise wirst du bereit sein Halte Haltepunkte, die Sinn machen.

Eine Seite mit einem vollständigen Rasterlayout sollte reduzieren Sie die Größe der Boxen bevor sie auf eine neue Linie bricht. Zum Beispiel hat Themenmarkt eine feste maximale Breite von 1240 und das Raster enthält vier Blöcke pro Reihe.

Wenn der Bildschirm kleiner wird, werden diese Blöcke kleiner in der Breite reduzieren, aber eventuell Nervenzusammenbruch zu lassen Sie drei Felder pro Reihe. Bei der kleinsten Größe erhalten Sie eine Box und jede Zeile hat viel Platz Damit Text und Bilder glänzen.

Es gibt immer ein Gleichgewicht von so viele Informationen wie möglich im Blick behalten kombiniert mit der Notwendigkeit zu Text lesbar machen. Je mehr Sie Rasterlayouts erstellen, desto einfacher ist es, dies zu finden Balance der inhaltlichen Anordnung.

Spalten ausblenden oder entfernen

Breitere Monitore und mehr Browserunterstützung erlauben es Entwicklern, unglaublich komplexe Layouts zu erstellen. Ich sehe oft Blogs mit drei oder sogar vier Spalten das nimmt einen guten Teil des Bildschirms ein.

Kleinere Geräte benötigen jedoch einen Content-Flow macht vertikal Sinn. Ich habe zwei Möglichkeiten für gefunden Umgang mit übermäßigen Seitenleisten:

1. Legen Sie sie unter den Hauptinhalt
2. Verstecken Sie sie insgesamt

Beispiel 1: Stop Press

Schauen Sie sich die Stop Press Website an. Es hat vier vertikale Spalten auf meinem Desktop-Monitor.

Die linke Spalte ist ein vertikales Navigationsmenü, die nächste Spalte ist die Hauptinhaltsspalte mit aktuellen Artikeln. Dann haben wir zwei verschiedene Sidebar-Spalten, die mit extra überlaufen “beiseite” Inhalt.

Wenn das Browserfenster seine Größe ändert, werden diese Spalten angezeigt langsam verkleinern. Zuerst geht es um die linke Navigation, die hinter einem Hamburger-Menüsymbol verborgen wird.

Der nächste Haltepunkt verbirgt die mittlere Spalte zusammen mit den oberen Schaltflächen zum sozialen Teilen. Dann verschwindet auf den kleinsten Bildschirmen die ganz rechte Seitenleiste vollständig nur die primäre Mittelsäule verlassen des Inhalts.

Unter dem Hauptinhalt wird kein Inhalt der Seitenleiste angezeigt. Es ist vollständig aus der Sicht verborgen, und dies ist eine durchaus akzeptable Wahl Seitenlast reduzieren und um die Bildlaufleiste auf einer anständigen Größe zu halten.

Auf der anderen Seite viele Blogs Bewegen Sie die Seitenleiste unter den Hauptinhalt wie bei Concept Art Empire, das verwandte Beiträge in der Seitenleiste enthält, die letztendlich dazu führen unter den Inhalt fallen.

Beispiel 2: Wishpond-Blog

Der Wishpond Blog auch Entfernt die Seitenleiste vollständig vom Bildschirm aus kleinere Ansichtsfenster. Dieser Seitenleistenbereich enthält in der Regel Werbung, Anmeldeformulare und verwandte Postlinks. Keiner dieser Inhalte ist von entscheidender Bedeutung, kann jedoch einen Mehrwert für die Besucher darstellen.

Ich folge gerne einem hybrider Ansatz wo ich die Seitenleiste unter den Inhalt schiebe, aber auch ein paar Elemente in der Seitenleiste hinter einem bestimmten Haltepunkt verbergen.

Wenn ich beispielsweise drei Anzeigenblöcke im gesamten Layout habe, blenden ich möglicherweise zwei dieser Anzeigenbereiche auf dem Handy aus. Diese macht den Inhalt der Seitenleiste zugänglich aber stört die Seite nicht mit übermäßigem Inhalt.

Beispiel 3: Madame Gautier

Ich mag es auch, wie Madame Gautier ihre verwendet “Neuesten Nachrichten” Seitenleiste auf der Startseite. Es schließlich fällt unter den Inhalt, und nimmt eine Vollsichtposition ein auf der Seite.

Fast jede Website hat mindestens eine Seitenleiste im Design. Ob dies eine seitenweite Seitenleiste ist oder nur etwas, das in einer Seitenvorlage angezeigt wird, das Side-by-Side-Designstil ist beliebt, weil es passt mehr inhalt auf dem Bildschirm.

Es ist Ihre Wahl wie mit dem Inhalt umzugehen ist. Sie können die Seitenleiste nach unten ziehen, ganz ausblenden oder eine Kombination dieser beiden Techniken verwenden. Aber du solltest deine Wahl treffen basierend auf der Relevanz der Seitenleiste, und sein Notwendigkeit zur Seite.

Ränder anpassen und drücken

Es wird immer einen Punkt geben, wo Inhalt kann nicht gequetscht werden weiter, und ein Abschnitt muss unter den anderen fallen.

Durch Margen anpassen Bevor Sie den Inhalt der Seite verringern, geben Sie den Lesern eine größere Auswahl an Inhalten.

Beispiel 1: Eine Welt

Die Fußzeile von One World ist ein gutes Beispiel. Es hat Sitewide Footer Links schwebten Recht mit einem E-Mail-Anmeldeformular auf der Linken.

Bei der Größenänderung des Layouts werden die Ränder und Füllungen zwischen diesen Elementen verkleinert. Die Linkspalten näher zusammenkommen, und das Anmeldeformular wird etwas kleiner, auch.

Nach einem bestimmten Punkt macht es einfach Sinn Legen Sie die Links unter dem Anmeldeformular ab, und gib die Fußzeile viel Platz zum Atmen.

Ja, es macht die Seite länger und ja, es ist mehr Aufwand, um so weit nach unten zu scrollen, aber bei diesen kleineren Haltepunkten können Sie davon ausgehen, dass Benutzer dies tun auf vertikal ausgerichteten Geräten.

Beispiel 2: Goldene Inseln

Ein anderes Beispiel, das ich liebe, ist die Golden Isles-Homepage mit ihrer einzigartiger navigationsstil. Wenn Sie die Größe des Browserfensters ändern, werden die Navigationslinks verlinkt zusammen drücken. Schließlich haben sie brechen Sie aus einer einzelnen Zeile in zwei Reihen, dann in Spalten mit der kleinsten Größe.

Andere Elemente auf der Seite Folge dem gleichen Muster. Dieses Beispiel zeigt die Leistungsfähigkeit von Margenänderung bevor Sie das Layout komplett neu anordnen.

Vertikaler Fluss auf kleineren Bildschirmen

Seiteninhalt sollte natürlich fließen, und Vertikale Ausrichtung macht auf dem Handy Sinn. Dies bedeutet, dass Sie In-Page-Inhaltsblöcke berücksichtigen müssen Aktualisieren Sie den Inhaltsstil entsprechend. Dazu gehören Absätze, Header, Blockquotes, ungeordnete Listen und benutzerdefinierte Inhaltsfelder.

Beispiel 1: BodyBuilding.com Single Post

Nehmen Sie zum Beispiel diesen BodyBuilding-Beitrag verwendet kleine Boxen verschiedene glute Workouts zu zeigen.

Diese Boxen enthalten Thumbnails auf der rechten Seite um die Übung zu demonstrieren. Auf kleineren Bildschirmen werden diese Miniaturansichten angezeigt brechen Sie auf eine neue Linie auf, und schließlich übereinander stapeln.

Ihr responsives CSS sollte diese winzigen Minutien für jede Seite der Website berücksichtigen.

Beispiel 2: Vanity Fair

Ein größeres Beispiel finden Sie auf der Vanity Fair-Homepage Der vorgestellte Story-Slider wird komplett neu angeordnet. Auf einem Vollbild-Desktop werden die Schlagzeilen der Storys mit einem hervorgehobenen Bild zur Seite angezeigt. Wenn der Browser die Größe kleiner ändert, wird dieser Abschnitt mit den wichtigsten Geschichten angezeigt wird ein Schiebe-Karussell.

Die Schnittstelle selbst ändert sich vollständig indem Sie Punktnavigation, Pfeile und vorgestellte Bilder für jede Story in der Liste hinzufügen. Ihre Vollbildliste der Artikel ist mehr “Vertikale”, Dieses Layout ist jedoch schwieriger für den Betrieb auf einem mobilen Bildschirm. Daher ist es besser, es in ein Karussell mit Schiebetüren zu ändern.

Denken mehr über den Benutzerfluss anstatt dein Inhaltsfluss. Inhalt Es muss nicht immer ein vertikales Layout erzwungen werden auf kleinem Bildschirm. Denken Sie nur darüber nach, wie Sie Inhalte so organisieren können unterstützt ein vertikales Durchsuchen.

Schlussgedanken

Responsives Design ist heutzutage unverzichtbar, und jeder Webdesigner und -entwickler sollte wissen, wie es funktioniert. Besucher erwarten, dass alle Websites sein werden mobilfreundlich. Immer wenn ich auf eine nicht reagierende Website stolpere, erschrecke ich beim Anblick dieser horizontalen Bildlaufleiste.

Befolgen Sie die Tipps in diesem Beitrag für Planung von Entwurfsstrategien zur Neuordnung von Inhalten für die bestmögliche Benutzererfahrung auf allen Geräten.