Responsive Design für mobile Geräte prägt das ganze Webdesign

Christian Born

– 5. Februar 2015

Die technologische Entwicklung bringt die entscheidende Neuerung für moderne Webseitengestaltung mit sich: Das Webdesign muss heute auf den Bildschirmen vieler verschiedener Endgeräte funktionieren, ob PC, Tablet oder Smart Phone. Daraus ergeben sich neue Anforderungen für das Webdesign und Webdevelopment von Internetseiten.

Neues Userverhalten mit immer mehr Geräten

Immer mehr Interessenten und Kunden besuchen Webseiten heute neben dem Desktop-PC auch mit mobilen Endgeräten wie Tablets oder Smart Phones. Diese haben übrigens genauso in den Industrie- und B2B-Sektor Einzug gehalten, wie Auswertungen gezeigt haben. Modernes Webdesign muss deshalb auf vielfältigen Geräten und Screens funktionieren, vom Widescreen- und normalen PC-Bildschirm über das Tablet bis hin zum extrem schmalen, kleinen Smart Phone Display. Zudem muss die Seite mit Klick einer Maus sowie dem Tipp oder Wischen eines Fingers nutzbar sein.

Webesign muss responsive sein (für PCs und Mobilgeräte)

Aus dem neuen „Endgeräte-Mix“ am Markt ergeben sich innovative Anforderungen an das Webdesign und Webdevelopment von Internetseiten. Damit jeder Webseiten-Besucher mit seinem Gerät die Webseite richtig bedienen kann, wurden mit HTML 5 und CSS3 neue Technologien entwickelt. Damit kann man man das Webdesign einer Internetseite so flexibel gestalten und programmieren, dass sich die Seite dem Bildschirmformat des jeweiligen Endgeräts flexibel anpasst. Die Webseite fragt aktiv den Bildschirm des Endgerätes ab – und antwortet darauf mit der Ausgabe des entsprechenden Formats. Daher der Name „responsive Design“ von lateinisch respondere, also antworten.

Bisherige Maße außer Kraft gesetzt

In der Vergangenheit wurden Internetseiten im Rahmen des „Norm-Maßes“ von maximal 1.024 Pixel Breite gestaltet und programmiert. Der Bereich rechts und links der Webseite wurde lediglich als Hintergrund ausgewiesen. Diese Regel sorgte dafür, dass eine Webseite von einem normalen Desktop-Bildschirm, aber auch im „Worst Case“ von einem kleinen Laptop-Bildschirm ohne Umstellungen betrachtet werden konnte. Mit dem Aufkommen von Breitwand-Bildschirmen und zugleich Mini-Smart-Phone-Displays geriet diese Regelung nun endgültig an ihre Grenzen. Zunächst reagierte man darauf mit sogenannten „Mobilversionen“, bei dem für die Betrachtung mit Mobilgeräten eine extra „Mobilversion“ gestaltet und programmiert wurde. Nachteil: Man musste sämtliche Bilder und Grafiken extra in kleine Formate anlegen und die Dateigrößen extra herunterspeichern, da Smart Phones viel weniger Ladezeiten zuließen. Der Aufwand für die doppelte Pflege der Webseiten war damit zu groß, gerade wenn CMS-Systeme im Einsatz waren. Konsequenz: Es musste eine neue, flexible Regelung mit mehreren Norm-Maßen her. Die Antwort war das „responsive Design“.

Die Breite der Webseite wird flexibel

Die Idee hinter dem „responsive Design“ ist: die Webseite einmalig so gestalten und befüllen zu können, dass sie für die verschiedensten Bildschirmbreiten flexibel und damit immer richtig ausgegeben werden kann. Damit ändern sich komplett die Anforderungen an die Gestaltung. Ab sofort erkennt man „alte“ Webseiten daran, dass sie über die Breite von maximal 1.024 Pixeln nicht hinausgehen. Rechts und Links ist Hintergrund. Webseiten mit „neuem Webdesign“ erkennt man auf dem Desktop-Bildschirm auf einen Blick daran, dass die Seite und die Bildgestaltung die Breite der Bildschirme optimal und flexibel nutzt, die Bilder gehen also in der Regel über die gewohnten Breiten hinaus und ergeben durch ihre Größe eine viel beeindruckender Optik. Die gesamten Webdesign-Elemente der Seite und die Textspalten werden schmäler, Bilder werden schmäler und verkleinert, so dass die Seiteninhalte im Extremfall auf dem Smart Phone hochformatig statt querformatig ausgegeben werden. Beim herkömmlichen Design bleiben die Inhalte „statisch“. Damit kann man sie auf kleineren Mobilgeräten nicht mehr lesen.

Auch die Höhe des Webdesigns wird flexiblisiert

Die Flexibilisierung des Designs der Bildschirmbreite(n) wirkt sich notwendigerweise auch auf die Höhe aus. Es leuchtet ein, dass ein Text weniger Höhe benötigt, wenn er über 1.024 Pixel Spaltenbreite laufen kann, als wenn ihm nur eine schmale „Smart Phone Spaltenbreite“ zur Verfügung steht. Das bedeutet: Während sich früher das Arrangement der Inhalte immer an der Höhe eines Desktop-Bildschirms und/oder Laptops orientierte, so können diese Grenzen heute nicht mehr ganz so klar gezogen werden. Mehr noch: Es ist ein auf dem Smart Phone und auf Tablets akzeptierter Fakt, dass Webseiten-Inhalte häufig nach unten gescrollt werden müssen. Das Scrollen wird so zur „conditio sine qua non“ eines jeden modernen responsiven Webdesigns. Und da dies so ist, haben sich auch schon Trends herausgebildet, die das Scrollen selbstverständlich in die Webseitengestaltung miteinbeziehen. Der Seitenaufbau wird bewusst nach unten in Abschnitte gegliedert, um die Aufnahme der Inhalte beim Scrollen der Seite via Smart Phone und Tablet zu erleichtern. Der Kulminationspunkt dieses Trends ist der so genannte „One Pager“ – eine Webseite, die nur aus einer Seite besteht, und die von oben nach unten in einem langen „Rutsch“ durchgescrollt werden kann.

Auch die Navigation wird flexibilisiert

Last not least wirken sich die radikalen Umwälzungen insbesondere auf die Navigation aus. Sie muss die Nutzung mit der Maus genauso gewährleisten wie die Nutzung mit dem Finger. Gerade Formulare, Checkboxen oder Produktkonfiguratoren müssen mobilkonform gestaltet werden, auch Telefonnummern sollten per Fingertipp anrufbar sein. Die größte Herausforderung aber besteht darin, die Navigation so in die Mobilversion zu integrieren, dass die Seiteninhalte nicht zu sehr von der Navi überdeckt sind. Das ist gerade bei großen Webauftritten mit komplexen und umfassenden Navigationen eine große Herausforderung. Gerade auch an dieser Stelle ist innovatives Webdesign gefragt, das die Navigation so gut wie möglich aus den Seiteninhalten „herausräumt“. Wenn bei der Neugestaltung einer Webseite die mobile Nutzung nicht von Anfang an im Konzept mitberücksichtigt wird, kann das hinterher zu Schwierigkeiten führen. Es lohnt sich also, die „mobile Navigation“ schon im Vorfeld in die Konzeption miteinzubeziehen.

Fazit:

Die Anforderungen an das Webdesign von heute sind durch die verschiedenen Endgeräte komplexer geworden. Das Webdesign muss von mehreren Use-Cases aus konzipiert werden. Diese müssen die verschiedenen Breiten und Höhen der Ausgabeformate möglichst optimal berücksichtigen und die Navigation auch mobilfähig machen. Das Auge des Users kann sehr schnell eine Webseite in „altem“ Webdesign von einer Webseite mit „neuem“ Webdesign unterscheiden. Bei letzterem stehen die Inhalte stets lesbar im Bildschirm und nutzen die Breite optimal aus. Auf dem PC werden die Bilder breiter und beeindruckender, hässliche Webseitenränder und nichtssagende Hintergründe sind damit engültig aus der Zeit gefallen und auch für die Wahrnehmung des Laien „unmodern“.

Christian Born