Responsive Design: Welche Vorteile hat der flexible Raster (Fluid Grid)?

Wenn man eine Website mit einem Responsive Design umsetzen will, hat man gut zu tun. Was auf den ersten Blick einfach aussieht, ist auf den zweiten Blick ziemlich komplex.

Was ich mich dabei immer wieder gefragt habe ist: Wozu eigentlich die Umstände mit dem flexiblen Raster (Fluid Grid)?
Die Arbeit mit Prozentangaben ist kompliziert und man muss das Verhalten des Layouts aufwändig testen. Würde es denn nicht reichen, nur mit Media Queries zu arbeiten? Dann könnte man beim festen Layout bleiben und die Seite sieht trotzdem auf unterschiedlichen Geräten gut aus.

Adaptive oder Responsive Design?

Natürlich gibt es auch für diese Idee schon ein Schlagwort: Adaptive Design. Damit wird die Methode bezeichnet, die ich oben skizziert habe: Man baut Layouts für verschiedene Bildschirmgrößen. Es gibt beispielsweise eine Ansicht fürs iPhone in der Breite 320px, eine fürs iPad im Hochformat mit der Breite 768px und eine für Desktop-Computer mit einer Breite über 1024px.
Alle drei Layouts werden mit festen Werten umgesetzt, also ganz ohne die komplizierte Prozentrechnerei. Über MediaQueries fragt man dann ab, welches Gerät die Website gerade anschauen will. Meldet sich ein iPhone, schaltet das CSS automatisch auf das passende Layout um.

Perfekt. Dann kann man sich den flexiblen Raster eigentlich sparen, oder?
Die Antwort: Es kommt darauf an.

Weiterlesen Responsive Design: Welche Vorteile hat der flexible Raster (Fluid Grid)?

Responsive Web Design (5)

Serie Responsive DesignIn den vorangegangenen Artikeln habe ich die drei Module der Responsive Design Technik erklärt, den Fluid Grid, die Media Queries und das Thema Fluid Images. In der Praxis ist der richtige Umgang mit den Modulen nicht immer ganz einfach. Es gibt ein paar kritische Punkte, mit denen man sich auseinandersetzen sollte.

Wer mit dem Smartphone eine Website aufruft, befindet sich in einer anderen Situation als jemand, der vor einem Desktop Rechner sitzt. Da ist einmal die Verbindungsgeschwindigkeit. Zwischen einer schnellen DSL-Anbindung und einem Funknetzwerk liegen Welten. Das heißt, beim Smartphone zählt jedes Byte, beim Desktop-Rechner in einer DSL-Umgebung sind Ladezeiten kein Thema mehr.

Mit dem Smartphone sucht man zudem nach anderen Informationen als vom Desktop-Rechner aus. Am Schreibtisch hat man die Muße, auch mal einen längeren Texte zu lesen. Hier werden auch die meisten Käufe in Online-Shops abgeschlossen. Am Smartphone kauft man seltener ein, man sucht statt dessen nach ganz bestimmten Informationen. Und möchte schnell zum Punkt kommen.
Weiterlesen Responsive Web Design (5)

Responsive Web Design (4): Fluid Images

Serie Responsive DesignIn dieser Serie ging es bisher um den Fluid Grid, das flexible Raster, das sich unterschiedlichen Bildschirmgrößen anpasst und um die Media Queries. Heute ist der letzte Baustein der Responsive-Design-Technik dran, die Fluid Images. Dadurch passen sich auch die Bilder ihrer Umgebung an.

Jeder Webdesigner kennt das: Passt ein Bild in der Größe nicht ins Layout, gerät alles durcheinander. Spalten und Texte verschieben sich und die Optik ist dahin. Das würde mit einer Website passieren, die zwar einen flexiblen Raster hat, aber alle Bilder nur in einer fixen Größe vorhält.

Weiterlesen Responsive Web Design (4): Fluid Images

CSS Grids für Responsive Design Projekte

In diesem Artikel habe ich eine Auswahl von Grid-Systemen zusammengestellt, die mir gut gefallen haben.
Es sind alles Raster, die einen Responsive-Design-Ansatz verfolgen, also mit einem Fluid Grid arbeiten und verschiedene Bildschirmgrößen bis hinunter zum Smartphone unterstützen.

The 1140px CSS Grid System

Dieses Framework wird ’s werden fürs nächste Theme. Ich habe mich in der Systematik gut zurechtgefunden, und für mich ist es der beste Kompromiss zwischen Funktionalität und Übersichtlichkeit.
The 1140px CSS Grid System
Weiterlesen CSS Grids für Responsive Design Projekte

Responsive Web Design (3): Media Queries

Serie Responsive DesignDer erste Teil dieser Serie gab eine kurze Einführung ins Thema Responsive Design. Im zweiten Teil habe ich das erste Modul dieser CSS-Technik, den „Fluid Grid“, vorgestellt. Im dritten Teil geht es um das Thema „Media Queries“.

Wie funktionieren Media Queries?

Media Queries sind Abfragen: Die Website fragt ab, wie groß der Monitor ist, den der Besucher vor sich hat. Ist es ein Desktop-Computer, ein Netbook oder ein Smartphone? Nachdem die Größe des Bildschirms festgestellt wurde, lädt der Browser ein dazu passendes Stylesheet. Das heißt, der Designer der Website hat mehrere Stylesheets hinterlegt. Je nachdem mit welchem Endgerät die Seite aufgerufen wird, erscheint ein anderes Layout.

Weiterlesen Responsive Web Design (3): Media Queries

Responsive Web Design (2): Der Fluid Grid

Serie Responsive DesignIm zweiten Teil dieer Serie geht es um die erste der drei Techniken, die zusammen das Responsive Web-Design ausmachen: Fluid Grids. Das Layout einer Website wird nicht mehr in einer fixen Größe angelegt, sondern die Elemente sind beweglich und passen sich wechselnden Bildschirmgrößen an.

Üblicherweise orientiert man sich beim Design einer Website an einem mittleren Wert für die Bildschirmgröße. Meist sind das 1024 x 768 Pixel. So kann die Seite auch auf kleineren Bildschirmen dargestellt werden und wer einen größeren Monitor hat, der hat sowieso keine Probleme.

1024 Pixel für alle?

Nach wie vor basieren die meisten Websites auf einem festen Raster, die Breiten sind fix.
In gewisser Weise ist es einfacher, mit festen Werten umzugehen. Nicht zuletzt deshalb, weil man damit die Illusion hat, das Erscheinungsbild der Website wäre auf jedem Endgerät dasselbe.
Kunden und Designer werden nervös bei dem Gedanken, dass ihre Seite nicht immer genau so aussieht wie auf ihrem Monitor im Büro.

Weiterlesen Responsive Web Design (2): Der Fluid Grid

Responsive Web Design (1): Einführung

Serie Responsive DesignIm ersten Teil dieser Artikel-Reihe geht es darum, was Responsive Web Design ist und wozu es gut ist. In den folgenden Teilen erkläre ich die einzelnen Techniken etwas genauerIm letzten Teil möchte ich das Thema in einen größeren Zusammenhang einordnen: Was bedeutet Responsive Design für das moderne Webdesign, wo gibt es Kritikpunkte, wie geht es weiter?

Was ist Responsive Web Design?

Responsive Design ist eine CSS-Technik, mit der man das Layout einer Website beweglich machen kann. Die Seite passt sich dann automatisch an unterschiedliche Bildschirmgrößen an. Ganz gleich, ob man mit dem Smartphone oder mit einem Desktop-Computer eine Website betrachtet, alle Inhalte bleiben gut lesbar.

Weiterlesen Responsive Web Design (1): Einführung