Responsive Design

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 ganz schön 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.

Weiterlesen
Responsive Design

Rethinking The Mobile Web

Eine Präsentation von Bryan Rieger Aus dieser (sehr informativen aber auch unterhaltsamen) Präsentation habe ich gelernt, dass es nicht nur um iPhones und Android-Smartphones geht, wenn von „Mobile“ die Rede ist. Und dass es gar nicht so schwer ist, für alle mobilen Geräte zu optimieren, wenn man am richtigen Ende anfängt. Link zu Slideshare: Rethinking the Mobile […]

Weiterlesen
Responsive Design

Responsive Web Design (5)

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.

Weiterlesen
Responsive Design

Responsive Web Design (4): Fluid Images

In 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.

Weiterlesen
Responsive Design

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.

Weiterlesen
Responsive Design

Responsive Web Design (3): 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, die der Designer der Website hat mehrere Stylesheets hinterlegt. Je nachdem mit welchem Endgerät die Seite aufgerufen wird, erscheint ein anderes Layout.

Weiterlesen
Responsive Design

Responsive Web Design (2): Der Fluid Grid

Die erste der drei Techniken, die zusammen das Responsive Web-Design ausmachen ist das Fluid Grids-Prinzip. 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.

Weiterlesen
Responsive Design

Responsive Web Design (1): Einführung

Responsive Design ist eine CSS-Technik. Man legt die CSS-Datei so an, dass das Layout einer Website beweglich ist und sich an unterschiedliche Bildschirmgrößen anpassen kann. Ziel ist es, zu erreichen, dass alle Inhalte gut erkennbar und lesbar bleiben, ganz gleich, ob man mit dem Smartphone oder mit einem Desktop-Computer eine Website betrachtet.

Weiterlesen