Responsives Design, auch als adaptives Layout bezeichnet, meint eine automatische Anpassung des Seiteninhalts an das jeweilige Endgerät. Um auf einem kleinen Smartphone eine Internetseite ebenso gut anschauen zu können wie auf einem großen Computer-Bildschirm, wird der grafische Aufbau an die jeweilige Größe angepasst. Dies funktioniert über so genannte HTML5- und CSS3 Media-Queries.

Neben der grafischen Anpassung sind allerdings noch weitere Aspekte zu berücksichtigen. Der Finger ist beispielsweise bei weitem nicht so präzise wie ein Mauszeiger, das „Klicken“ kleiner Bedienelemente sollte also möglichst umgangen werden. So könnte z.B. das Durchblättern einer Bildergalerie durch „Swipen“ (also über den Bildschirm „Wischen“) statt “Klicken” realisiert werden.
Wo ein “Klicken” dennoch erforderlich ist, sollten die jeweiligen Bedienelemente, z.B. Buttons, nicht kleiner als ca. 7 x 7 mm sein, um gut per Touch bedienbar sein zu sein.

Was bei dem “mobil machen” einer Webseite außerdem beachtet werden sollte, finden Sie hier.

Eine Übersicht über gängige „Touch-Gesten“ (auch als Download) gibt es auf folgender Seite.

Bildquelle: unsplash.com