Adaptives CSS-Layout – eine neue Ära des flüssigen Layouts

Mobiles Webdesign hat viele Vorteile, aber nur, wenn es richtig eingesetzt wird. Durch geeignete Techniken kann die Seite auf großen Bildschirmen, kleinen Bildschirmen und kleinen PDA-Bildschirmen gut dargestellt werden. Allerdings ist eine schlechte Codestruktur für ein flüssiges Layout katastrophal. Daher müssen wir praktikable Lösungen für die Mängel der meisten Strömungsdesigns finden.

Wenn Sie als Designer die Extrameile gegangen sind, um ein funktionales, fließendes Layout zu erstellen, gehen Sie doch noch einen Schritt weiter und machen Sie es mit allen Auflösungen kompatibel, anstatt es auf die meisten Bildschirme zu beschränken. Mit einigen Techniken können Sie ein unerwartet anpassungsfähiges Layout erstellen, das auch bei sich ändernden Bildschirmauflösungen funktional erhalten bleibt.

In diesem Artikel besprechen wir bewährte Methoden zum Erstellen von 100 % funktionalen responsiven CSS-Layouts und stellen eine detaillierte Liste weiterer Tutorials und Praktiken bereit:

Sie können auch auf frühere Artikel verweisen:

1. Feste, fließende und flexible Layouts: Welches ist das Richtige für Sie?
   In diesem Artikel werden die Vor- und Nachteile der einzelnen Layouttypen erläutert. Jedes davon kann zur Erstellung eines erfolgreichen Website-Layouts verwendet werden, solange seine Benutzerfreundlichkeit erhalten bleibt;
2. Flexibles Layout: die kommenden Herausforderungen
   Besprechen Sie die zukünftigen Herausforderungen des flexiblen Layouts.
3. Bildschirmauflösung und bessere Benutzererfahrung
   Wir stellen das Problem der Bildschirmauflösung vor und dann persönliche Skripte für den Durchschnittsbenutzer.

1. Fließendes Layout mit Raster

Die meisten von uns haben vom 960-Rastersystem zum Entwerfen von Webseiten mit fester Breite gehört. Durch die Verwendung des 960-Rastersystems sind Designs mit fester Breite den flüssigen Layouts vorzuziehen. Es gibt jedoch eine Möglichkeit, ein gitterbasiertes Flex-Layout zu erstellen. Technisch gesehen unterscheidet sich die Codestruktur des elastischen Layouts von der des flüssigen Layouts, bietet dem Benutzer jedoch fast den gleichen Effekt.

Was ist ein Flow-Layout?

Fließende Gitter werden durch den intelligenten Einsatz von Divs, Prozentsätzen und einfachen mathematischen Berechnungen erstellt. Diese Idee stammt von Ethan Marcotte, der erkannte, dass „em“ eine Verbesserung gegenüber der Schriftgröße darstellt. Wir gehen hier noch einmal auf dieses Grundkonzept ein, aber für ein umfassendes und detailliertes Verständnis dieses Ansatzes lesen Sie „Flowing Grid“, ein umfassendes Tutorial zum Erstellen gitterbasierter flexibler Layouts.

Die Idee besteht darin, relative Größen zu verwenden, Prozentsätze und Ems zu kombinieren und einfache Aufteilungen zu verwenden, um die entsprechenden Pixelbreiten zu ermitteln, die in Designs mit fester Breite verwendet werden.

Vorteil :

1. Mit diesem Ansatz können Sie ein Rasterlayout erstellen, bei dem es den Anschein hat, als sei die Breite nur einmal festgelegt.
2. Benutzer können dieses Layout mit voreingestellten Schriftgrößen anzeigen und ihre proportionale Größe beibehalten;
3. Layoutstile sind browserübergreifend kompatibel;
4. Wenn man sie erst einmal verstanden hat, lassen sich die meisten Probleme im Strömungsdesign leicht beheben.