Immer mehr Webseiten werden auf Smartphones oder Tablets angeschaut. Diese Geräte haben eine andere Auflösung als der normale Desktop-PC. Eine herkömmliche Webseite wird auf einem Smartphone so klein dargestellt, dass die einzelnen Links nicht mehr vernünftig anzuklicken sind. Erst ein Vergrößern der Seite macht die Schrift lesbar und die Links klickbar. Damit eine Webseite auf einem kleineren Tablet oder Smartphone bedienbar wird, muss die Webseite an die Größe des Endgeräts angepasst werden. Dazu gibt es zwei Wege.

Über eine Abfrage des UserAgents (das ist der aufrufende Browser) kann herausgefunden werden, ob ein Tablet oder Smartphone oder ein bestimmter Browser die Seite aufruft. Die Seitenanfrage wird in diesem Fall auf eine spezielle mobile Seite umgeleitet. Bei den mobilen Seiten kommt dann häufig Jquery mobile zum Einsatz, dass der Seite ein smartphone typisches Look and feel verpasst. Dies ist beispielsweise bei der Webseite der HBFSWI der Fall.

Eine andere Möglichkeit besteht darin mit so genannten Media Queries (Medienabfragen) in CSS zu arbeiten. Mithilfe einer Abfrage wird die Auflösung des aufrufenden Geräts bestimmt und auf die Seite ein bestimmtes Stylesheet (Formatvorlagensatz) angewendet. Die Projektwebseite nutzt diese Technik. Aus dem dreispaltigen Layout wird auf einem Smartphone ein einspaltiges Layout, wobei die Navigation durch eine Auswahlliste ersetzt wird. Auf Geräten mit einer Auflösung unter 1024px wird lediglich die Schriftgröße angepasst. Sie können das ausprobieren, indem Sie das Browserfenster vergrößern und verkleinern.