Adaptive Webdesign vs. Responsive Webdesign.

Dabei stehen alle Mittel, die man zur Umsetzung von reaktionsfähigen Websites als Web-Entwickler braucht, bereits heute zur Verfügung. Unterschieden werden hier zwei Ansätze: Adaptive Webdesign und Responsive Webdesign. Gemeinsamkeiten der beiden client-seitigen Ansätze. Beide Ansätzen folgen dem "One document"-Grundsatz: Jedes Gerät und jeder Browser erhält dasselbe HTML-Dokument. Durch sogenannte Media Queries, die Teil von CSS 3 sind, gibt es die Möglichkeit, Elemente des HTML-Dokumentes in Abhängigkeit von den zur Verfügung stehenden Bildschirmpixeln in der Horizontalen zu stylen. Adaptive Webdesign. Beim Adaptive Webdesign ("anpassungsfähiges Webdesign") werden weiterhin statische Breiten in Pixel für Elemente verwendet wie beim althergebrachten Webdesign - mit dem Unterschied, dass es mehrere Designs gibt, zwischen denen Auflösungsunabhängig "hart" umgeschaltet wird, wenn das Browserfenster die entsprechende Breite aufweist. Es gibt also beispielsweise ein Design für Bildschirme bis 320px/480px Breite (z.B. altes iPhone™ im Hochkant-/Landscape-Modus), eines für Bildschirme zwischen 481px und 768px Breite (z.B. iPad™ im Hochkant-Modus), eines für 769px bis 1024px Breite (iPad™ im Landscape-Modus), und eines für alle höher aufgelösten Anzeigen. Solange die "Umschalt-Grenzen" nicht erreicht sind, bleibt jedes Design für sich komplett statisch. Responsive Webdesign. Beim Responsive Webdesign werden - genau wie beim Adaptive Webdesign - auch Pixelgrenzen für die Umschaltung der Styles definiert. Das Design in jeder Stufe ist jedoch flexibel! Dies wird erreicht auf Basis eines flexiblen Rasters, welches Breiten in % der zur Verfügung stehenden Breite definiert. So passt sich das Design, meist bis zu einer Obergrenze von um die 1280 Pixeln, dynamisch an den Raum an, der da ist. Diese Obergrenze wird meist aus dem Grunde definiert, damit Zeilen nicht zu lang werden. Sehr lange Zeilen stören den Lesefluss empfindlich.