W
e
b
d
e
s
i
g
n

Der Pepp der Website ist oft eine Summe von Details.
Axel Tüting

Früher schimpften Webdesigner meist über die zu geringen Auflösungen, die auf dem Bildschirm zur Verfügung standen. Lange mussten wir uns mit einer Auflösung von 800x600 Pixel zufrieden geben. Als die Monitore langsam größer und erschwinglich wurden, nutzten wir gern die gesamte Breite aus. Mittlerweile ist das Surfen auf mobilen Endgeräten erschwinglich geworden und wird auch rege genutzt. Damit geht die Euphorie von uns Webdesignern wieder ein Stück weit zurück zu den Roots, wo die Bildschirme klein waren. Allerdings gibt es ja nicht nur ein Handy mit einer Standardauflösung. PC, Laptop, Tablet, Smartphone und eine unübersehbare Zahl verschiedener Handys sorgen für viel Abwechslung in den Bildschirmauflösungen.

Nun gibt es generell zwei Möglichkeiten diesen Auflösungen zu begegnen:
Zum einen können verschiedene Varianten der Webseite designt werden. Für jede gängige Auflösung eine. Da sich abfragen lässt, welches Gerät auf die Webseite zugreift, lassen sich so gezielt Webseiten für bestimmt Ausgabegeräte erstellen. Mit dieser Technik muss aber mindestens beim PC und Laptop, wo die Browsergröße variieren kann, eine Standardgröße definiert werden.

Besser wäre somit es der Webseite zu überlassen, sich der Größe dynamisch und nach Bedarf anzupassen. Glücklicherweise kann die aktuelle Größe der Browser ermittelt werden. Mit sogenannten Media Querries kann nun bei bestimmten Größen das Webdesign angepasst werden.

@media only screen and (max-width: 450px) { ... }

Mittlerweile gibt es einige Frameworks, die einem Webentwickler hier eine Menge Arbeit abnehmen. Jedoch enthalten diese Frameworks natürlich auch jede Menge Dinge, die gar nicht benötigt werden, aber dennoch natürlich mitgeladen werden und zum anderen arbeiten viele Frameworks mit Javascript. Im Browser lässt sich Javascript jedoch abschalten und, ein zwar geringer, Prozentsatz der User tun das auch. Ein "geringer Prozentsatz" ist in konkreten Zahlen jedoch ein erstaunlich "großer Batzen" an potenziellen Kunden, die hier ausgeschlossen werden. Und wenn nur einer per Handy einen Auftrag vergeben möchte, ist der Verlust eventuell höher, als die Mehrkosten bei der Implementierung.

Diese Webseite, die Sie gerade betrachten ist natürlich auch responsive. Mit CSS3 umgesetzt. Ohne Ballast. Möchten Sie es ausprobieren, verkleinern Sie einfach Ihr Browserfenster und ziehen dann die Breite des Browsers größer oder kleiner. Sie werden sehen, wie sich die Webseite der Größe dynamisch anpasst.

Oder klicken Sie hier und betrachten sich meine Site in verschiedenen Auflösungen und mobilen Endgeräten: Screenfly/Test Your Website

time4mambo benutzt Cookies. Wenn Sie auf dieser Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu. Nachteile entstehen Ihnen dabei nicht. - Was genau ist das hier?