Skip to main content
Colofon
Submitted by Häßler on

Responsives Webdesign für Handy und Tablet

Wir sehen immer häufiger Webseiten mit großen plakativen Bildern und großen Schriften. Wenn wir gerade an einem großen Monitor sitzen, sind wir begeistert.

Wenn wir uns allerdings mit dem Tablett oder dem Handy durch das Internet schlagen (oder soll ich sagen: »quälen«?), machen wir auf der Stelle kehrt und suchen eine andere Quelle. Die großen Seiten sind langsam, wir verlieren den Überblick über das Angebot und brechen den Besuch ab.

Warum responsive

Kommt schlicht und schnell auf das Handy

Bei den kleinen Monitoren der mobilen Geräte legt das Webdesign mehr Wert auf den Inhalt. Das Design tritt stärker in den Hintergrund, ist aber noch so präsent, dass wir wichtige Elemente wiedererkennen.

Die Inhalte sind dieselben wie für große Monitore. Sie sind nur anders angeordnet. Wenn der Inhalt doch einmal der Ladezeit zuliebe gekürzt wird, bietet ein gutes Design einen Weg, das Design der Seite auf »konventionell« zu schalten. Nichts ist für einen Besucher so ärgerlich, wie das Warten auf eine Seite, die nur einen Teil der Inhalte freigibt.

Ältere Browser müssen nicht leiden: IE 7 und IE8 verstehen zwar nichts von responsiven Webseiten, aber diese Browser kommen auf Mobiltelefonen und auf Tabletts nicht vor.

Responsives Webdesign kommt den Suchmaschinen entgegen

Wenn Google auf einer Webseite Elemente findet, die eine Barriere auf mobilen Geräten erzeugen – z.B. zu kleine Touch-Flächen bei Links – stuft Google die Seite im Index für mobile Geräte herunter. Die Seiten erhalten einen schlechteren Rang oder werden bei der Suche auf Mobilgeräten gar nicht mehr angezeigt.Die Systeme von Google haben 8 Seiten Ihrer Website getestet und bei 100 % dieser Seiten kritische Fehler in Bezug auf die Nutzerfreundlichkeit auf Mobilgeräten erkannt. Die Fehler auf den 8 Seiten beeinträchtigen die Nutzererfahrung auf Mobilgeräten für Ihre Website deutlich. Diese Seiten werden von der Google-Suche als nicht für Mobilgeräte optimiert eingestuft, und werden entsprechend in den Suchergebnissen für Smartphone-Nutzer dargestellt.

Webseiten in voller Schönheit

Auf großen Monitoren darf sich ein responsives Design entfalten und mit großen Elementen und Schriften prunken. Der Desktop-Rechner hat mehr Power, die Verbindung ins Internet ist schneller.

Ein responsives Webdesign braucht keine Glaskugel mit den wahrscheinlichsten Monitorauflösungen und muss keine lahmen Kompromisse eingehen.

Der Weg einer konventionellen Webseite zu einem responsiven Webdesign führt über die Templates des Content Management Systems. Am Inhalt muss nichts geändert werden.

Mehr zu responsiven Webseiten

  • Responsive Bilder mit srcset und picture Drupal setzt Bilder je nach Anforderung des Besuchers: Groß und breit für den Desktop-Monitor, kleiner und ein besseres Seitenverhältnis für Handys im Hochform.
Tags
Webdesign