Der technische Aspekt des Responsive Webdesign – CSS Media Queries
Neben der reinen Umsetzung eines flexiblen, sich an verschiedene Bildschirmgrößen anpassenden Gestaltungsrasters gilt es auch, die unterschiedlichen Bedienkonzepte der Endgeräte zu berücksichtigen. Während Desktop-PCs mit einer Maus bedient werden, ist es beim Notebook eher das Trackpad. Tablets und Smartphone werden dagegen mit dem Finger bedient. Klassische Eingabegeräte, wie Maus und Tastatur gibt es nicht.
Das erfordert neben der reinen mobiloptimierten Darstellung der Inhalte einer responsiven Webseite, dass auch die Bedienkonzepte adaptiert und bei der Umsetzung berücksichtigt werden. Ein einfacher Textlink mag mit einer Maus recht gut zu treffen sein, aber auf einem Smartphone oder einem kleinen Tablet ist das nicht mehr so einfach. Interaktive Elemente, wie Links oder Buttons benötigen hier größere Flächen, um problemlos bedient werden zu können.
Mit den Möglichkeiten von HTML5 und CSS3 kann man mit bestimmten Ausgangswerten arbeiten um solche Optimierungen vorzunehmen. Die CSS Media Queries beispielsweise lassen es nicht nur zu, die Breite eines Viewports (Sichtbarer Bereich einer Webseite auf dem Bildschirm) abzufragen, sondern auch seine Ausrichtung, Pixeldichte oder eben, wie grob oder genau die Eingabe sein werden.
Gibt ein mobiler Browser beispielsweise zu erkennen, dass er nur 360 Pixel horizontal anzeigen kann, dann kommen die entsprechenden CSS Angaben zum Tragen, die den Media Queries für diese Größe definiert wurden. Auf solche Art und Weise lassen sich verschiedene Gerätegrößen ansprechen und mit modernem CSS optimal mit Anpassungen versorgen.
So kann man spezielle Anpassungen beispielsweise für die Ausgabe einer Webseite für Smartphones mit Touch-Eingabe oder Spielekonsolen mit Controller-Eingabe schreiben. Responsive Webdesign regelt nicht nur die Anzeige einer Webseite für verschiedene Bildschirmgrößen, sondern eben auch für verschiedene Geräteklassen. Denn heute kann eine Webseite auf jedem Bildschirm angezeigt werden, nicht nur auf den klassischen Notebooks, sondern auch in Autos, auf Fernsehern oder Spielekonsolen. Den optimalen Bedienkomfort und die angepasste Darstellung dafür übernimmt das Responsive Webdesign.