Beim Neuaufbau dieser Webseite bin ich das erste mal dem Motto "Mobile First" gefolgt. Ich habe die Seite ganz simpel gehalten und erst einmal so aufgebaut, dass sie auf meinem Smartphone gut aussieht. Das heißt, dass sie die wichtigsten Informationen liefert, ohne das Benutzer umständlich navigieren, scrollen oder zoomen muss.
Wenn so eine Webseite, die dann ja eigentlich eine sehr schmale Darstellung von Text und Bildern ist, auf einem großen 26 Zoll Bildschirm geöffnet wird, wirkt sie oft verloren. Nun könnte man für jede Bildschirmauflösung eine eigene Seite zu bauen, die man dann anhand einer jeweils anderen URL aufruft. Oder auch automatisch via Scripten die Größe erkennen lassen und dann auf bestimmte Seiten umleiten.
Stattdessen habe ich in diesem Fall nur mit CSS gearbeitet und dabei nur eine CSS-Funktion genutzt, die alle gängigen Browser unterstützen: Die Media Queries!Wenn du diese Webseite mit einem Browser am Desktop aufgerufen hast, dann verkleinere doch mal das Fenster und sieh den Unterschied. Wenn das Fenster ganz schmal wird, gewinnt man einen Eindruck, wie die Webseite auf einem SmartPhone aussehen würde. Aber auch auf Smartphones und Tablet kann ein Unterschied bemerkbar sein, je nach dem in welchem Seitenformat — hoch oder quer — die Seite betrachtet wird.