So kommt Ihre Website groß raus

In letzter Zeit beobachten wir zwei divergente Trends in Sachen Webdesign und Webentwicklung. Zum einen werden die Monitore für Desktop-PCs immer größer. Full-HD-Geräte mit 1.920 Pixel Bildschirmbreite sind keine Seltenheit mehr. Auf der anderen Seite nutzen immer mehr Menschen ihre mobilen Geräte, wie Handys oder Tablet-PCs zum Surfen im Internet.

Was bedeutet dieser Trend für uns? Vor einigen Jahren war man auf der sicheren Seite, wenn man eine Website mit 960 Pixeln Breite gestaltet hat. Dies galt als Standard und sah auf damaligen Monitoren gut aus. Heute verschenkt man mit solchen Sites zu viel Platz. Sie wirken auf den großen Desktop-Monitoren wie verloren.  Für ein Smartphone oder Tablet hingegen, ist die Site zu groß und wird auf Kosten der Lesbarkeit verkleinert dargestellt. Als Webentwickler fragt man sich: Wie gestalte  ich eine Webpräsenz, die auf allen Geräten gut aussieht und perfekt lesbar ist?

Die Lösung heißt CSS3 – eine neue Version der Web-Gestaltungsvorlagen. Sie bringt viele Neuerungen mit sich, unter anderem die Media Queries. Dieses Konzept ermöglicht Webseiten, die Eigenschaften des aktuellen Gerätes (Mediums) direkt abzufragen. Sind bestimmte Eigenschaften gegeben, z. B. eine bestimmte Browserbreite, werden bestimmte Gestaltungsvorlagen für die Webseite geladen. Dies ermöglicht dem Webeentwickler, die Seite mit CSS-Anpassungen für verschiedene Geräte zu optimieren.

Bei dem neuen TWIN-Webauftritt arbeiten wir mit zwei Auflösungen: 1.280 Pixel für große Monitore und 960 Pixel für kleinere Monitore und Tablet-PCs. Ziehen Sie das Browserfenster einfach mal breiter und schieben Sie es anschließend auf ein schmales Fenster zusammen. Je nach Auflösung werden die Module per CSS-Befehl anders angeordnet oder verschwinden ganz von der Bildfläche. Auch eine Anpassung für Smartphones wollen wir in naher Zukunft realisieren.

Fazit: Eine auf mehrere Formate anpassungsfähige Website ist eine feine Sache, die der User zu schätzen weiß. Wer sich auf nur zwei unterschiedliche Formate beschränkt, hält auch den Entwicklungsaufwand und somit die Kosten im überschaubaren Bereich. Diese „Lightversion“ haben wir auch erfolgreich bei www.in-sachen-styling.de umgesetzt. Hier entfaltet die Website bei großen Monitoren ihr volles Potenzial und passt sich auch an kleinere Notebook- und Tablet-Displays ideal an.