Responsive Webdesign
Eine Website für alle Bildschirmgrößen
Dynamisches Design für flexible Internetnutzer
Wichen noch vor ein paar Jahren die Monitorgrößen der meisten Internetnutzer wenig voneinander ab, sind diese mittlerweile mit sehr unterschiedlichen Geräten im Web unterwegs: An riesigen Bildschirmen über 1600 Pixel in der Breite, mit dem Tablet in Auflösungen ab 600 Pixel und mit dem Smartphone (ca 300 Pixel). Damit Websites auf jede dieser Darstellungsgrößen nicht nur gut aussehen, sondern optimal genutzt werden können, erfordert es eine neue Art von Webdesign: responsive Webdesign.
Responsive Webdesign reagiert, wie die englische Bezeichnung ausdrückt, über eine Abfrage an das wiedergebende Gerät (Media Query) mit dem jeweils passenden Ausgabelayout der Website: Bilder werden bei einer dynamischen Website verkleinert, Inhalte anders positioniert, die Navigation anders angeordnet. Damit das funktioniert, muss der Aufbau sowie die Formatdefinitionen (CSS) der Website speziell darauf ausgerichtet sein, responsiv ausgeliefert zu werden.
Da Websites mit responsiv-dynamischem Webdesign aufwändiger in der Erstellung sind und auch eine gewisse Einschränkung der Freiheiten für kreative Website-Layouts darstellen, empfiehlt es sich, zunächst die Zielstellung der Website zu überprüfen. Es könnte sinnvoller sein, nicht die gesamte Website in dynamischem Format zu programmieren, sondern eine ganz spezielle sowohl inhaltlich als auch gestalterisch abgespeckte Website-Variante eigens für das Smartphone zu erstellen. Die CSS-Media Queries erkennen den Website-Besuch mit Smartphone und liefern die Alternativseiten mit den für die Handy-Nutzung wichtigsten Inhalten im kleinen Format - bei einem Restaurant etwa aktuelle Tageskarte, der direkte Kontakt und die Anfahrt oder Parkplatzangaben.
Beispiele
Ein Beispiel für responsive und dynamisches Webdesign ist die Website, die Sie gerade benutzen - unsere Firmenwebsite. Je nach der Auflösung des von Ihnen benutzten Endgerätes verschieben sich die Inhalte und verkleinern sich die verwendeten Bilder.