Webseiten für Touch-Geräte aufbereiten

Immer öfter hört man den Slogan „Mobile first“. Dahinter versteckt sich der Rat, eine Webseite erst für mobile Endgeräte zu optimieren, und anschließend für größere Bildschirme anzupassen. Was aber, wenn schon eine Webseite existiert, die nun auch auf mobilen Touch-Geräten gut zu lesen sein soll? „Responsives Design“ ist eine der ersten Lösungen, die einem einfallen. Aber was bedeutet das genau, und was sollte man außerdem bedenken?

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: www.uxbooth.com

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