Viele Internetseiten, die für Computermonitore konzipiert wurden, erweisen sich als ungeeignet für ihre uneingeschränkte Nutzung auf Mobilgeräten wie Tablets und Smartphones. Websites mit festem und „dehnbarem“ Layout sind überholt. Zwei grundsätzlich unterschiedliche Ansätze für die Gestaltung von Websites auf unterschiedlichen Endgeräten etablierten sich: adaptives und responsives Webdesign.
Responsives Webdesign
Dieser Designansatz zielt darauf ab, das Surferlebnis auf jedem Gerät so komfortabel wie möglich zu gestalten: Die Seiten passen sich dem Gerät und seiner Bildschirmgröße automatisch an.
Merkmale eines responsiven Designs:
HTML und CSS werden für responsive Funktionen verwendet.
Das responsive Layout legt fest, wie die Website-Elemente auf verschiedenen Geräten aussehen sollen.
Alle Elemente sind in einem modularen Raster angeordnet.
Die Größe der verwendeten Layoutelemente hängt von der Bildschirmgröße ab.
CSS3-Module werden verwendet, um verschiedene Designstile und -elemente je nach Bildschirmauflösung und -größe auszuwählen.
Auf mobilen Geräten ermittelt die Website die Displaygröße und wird dann mit der optimalen Anordnung der Elemente angezeigt.
Adaptives Webdesign
Während das responsive Design darauf beruht, die Website je nach verfügbarem Platz fließend zu verändern, hat das adaptive Design einige feste Layoutgrößen. Diese Art von Design basiert auf Operationen mit verschiedenen Webseitenlayouts oder deren Zusammensetzung, um die Seiten auf bestimmten, vordefinierten Gerätetypen und Bildschirmauflösungen optimal darzustellen. Website-Elemente können ausgeblendet oder durch andere ersetzt werden. Auch das Verhalten und die Funktionen einzelner Elemente können geändert werden.
Merkmale eines adaptiven Designs:
JavaScript wird verwendet, um das Verhalten und die Funktionen von Objekten einer Webseite zu steuern.
Die Hierarchie und Verschachtelung der Elemente ändern sich je nach Geräteart.
Neue Technologien, die für die Seitenanpassung verwendet werden, werden möglicherweise von einigen veralteten Browser-Versionen nicht unterstützt.
Die Erstellung einer Website mit adaptivem Design erfordert vom Entwickler ein höheres Maß an Professionalität. Die Suchmaschine Google bevorzugt bei der Berechnung des SEO-Rankings responsive Websites. Mit der zunehmenden Vielfalt mobiler Geräte spielt das responsive Design eine immer wichtigere strategische Rolle.