Fluid Layouts mit CSS

Die Meisten Leser dieses Blogs haben regelmässig etwas mit Computern und Smartphones zu tun. Ja klar, wie sollten sie den Blog sonst lesen. Allerdings meine ich damit eher den Umgang im professionellen Sinne, genauer noch: Webdesign. Wie ihr wisst beschäftige ich mich häufig damit und baue selbst auch Webseiten. Das Template für diesen Blog zum Beispiel.

Da in der heutigen Zeit fast jedes Handy auch eine Webseite anzeigen kann, ist es um so wichtiger eine Version der Homepage für das Handy bereitzustellen. Allerdings ist es bei einem grösseren Webprojekt sehr aufwändig eine zweite Version zu bauen, die mit dem Handy angezeigt werden kann und noch immer die gleiche oder eine vergleichbare Funktionalität besitzt. Als Beispiel dafür kann man 9GAG nennen. Die Desktop-Version des Webseite ist sehr aufwändig gestaltet mit vielen Effekten, grossen Buttons und Werbeanzeigen. Die Mobile Version dagegen beinhaltet genau die nötigsten Funktionen: das Umschalten der Seiten, anzeigen eines Beitrages, Kommentieren über Facebook, und noch ein paar andere. Wenn man allerdings einen Beitrag liken will ist man gezwungen die Desktop Variante der Seite aufzurufen, welche auf einem kleinen Bildschirm wie dem eines Handys (ausser dem Galaxy Note) kaum bedienbar ist.

Eine Variante, dieses Problem zu umgehen ist die Verwendung von Media Queries in CSS. Diese Queries definieren bestimmte Regeln die beim darstellen der Seite beachtet werden und beispielsweise bei kleineren Bildschirmauflösungen verschiedene Teile der Webseite anders darstellen. Ich habe vor Kurzem begonnen ein Designentwurf für ein Webprojekt zu realisieren.

Die Seite selbst ist knapp 1000 Pixel breit, also zu breit für ein Smartphone. Auf dem Handy könnte sie zwar angezeigt werden, aber man müsste hin und her scrollen um den Inhalt komplett zu sehen, was nicht gerade angenehm beim Lesen ist.

Mit der Verwendung der Media Queries ist es wie erwähnt bei kleinen Auflösungen möglich, verschiedene Elemente auszublenden oder anders darzustellen. Wenn man die Webseite mit dem iPhone betrachtet wird beispielsweise die Headline im Header ausgeblendet und das Logo mittig ausgerichtet.

So ist es möglich die gleiche Webseite zu verwenden, ob sie auf einem Computer oder einem Smartphone angezeigt wird, ohne auf einem der Geräte irgendwelche Kompromisse einzugehen.