Responsive Design und Coding

Ist eine responsive Website nicht viel cooler als eine nicht-responsive? Finden wir auch.

31.01.2016

Responsive Design ist nicht gleich Responsive Programmierung

Um der großen Nachfrage nach mobiler Optimierung entgegenzukommen, bieten viele Webdeveloper oder Internetagenturen heutzutage eine responsive Programmierung an. Oft werden auch vorprogrammierte Layouts, sogenannte Templates oder Themes von Drittherstellern angeboten, mit dem Versprechen, dass diese von vornherein mobil optimiert sind.

Das Thema Mobile-Optimierung scheint also längst gelöst zu sein.

In Wirklichkeit ist es das aber nicht. Um Ihnen schnell und einfach zu erklären, wieso eine mobile Optimierung keine Kleinigkeit ist, haben wir zwei Unterteilungen definiert:

Responsive Design vs. Responsive Programmierung – der Unterschied in einer mobilen Optimierung

Wenn du eine Webseite auf einen kleineren Bildschirm anpassen möchtest, musst du theoretisch nur ein paar Kleinigkeiten im Code so anpassen, dass Menü, Schriftgrößen, Bilder und andere Elemente auf kleineren Geräten gut lesbar angezeigt werden.

Dies wäre eine einfache responsive Programmierung. Sie geht schnell, ist oft günstig und Google gibt sich damit bereits zufrieden, so dass es die Seite  in den mobilen Suchergebnissen höher als andere einordnet (siehe auch den „Google straft ab“).

Eine einfache responsive Programmierung, wie oben beschrieben ist genau das, was die meisten Internetagenturen oder Webdeveloper anbieten.

Eine einfache responsive Programmierung ist, was wir bei unseren Kunden zu vermeiden versuchen. Denn eine einfache responsive Programmierung ist noch lange keine Optimierung. Das wichtigste Element – der Kunde – wird oft bei der Programmierung vergessen. Was also fehlt ist ein echtes responsive Design mit einem klaren Konzept.

Ein echtes responsive Design

Der Zweck einer Webseite liegt darin zu kommunizieren, zu präsentieren und zu verkaufen. Ist die Webseite gut, wurde genau ausgearbeitet, wie kommuniziert werden soll und was man erreichen möchte. Und zwar oft nur auf einem großen Bildschirm.

Auf einem kleinen Bildschirm muss man anders kommunizieren. Die Benutzer sind anders und verhalten sich auch oft anders. Es genügt nicht, einfach nur den Code anzupassen, damit sich Google zufrieden gibt.

Für eine wirkliche mobile Optimierung empfehlen wir folgendes:

  • Konzept für Layout & Design auf Mobile und Tablets erstellen (im Hinblick auf Zweck der Webseite und Verhalten der Nutzer)
  • Konzept für Benutzerfreundlichkeit erstellen
  • Neues Design mit (eventuell) variierenden Texten erstellen
  • Code entsprechend neuem Design und Benutzerfreundlichkeit anpassen

Im Detail bedeutet all das einfach, dass wir deine Webseite nicht einfach nur anpassen. Wir überlegen uns ein komplett neues Konzept, um das Ziel deiner Webseite, ihre Mission auch auf einem Handy erfüllen zu können. Wir re-arrangieren nicht einfach nur das Layout, wir finden eine neue, bessere Lösung. Ein Nutzer hat auf seinem Handy viel weniger Sichtfeld, daher macht es manchmal keinen Sinn, alle Inhalte der normalen Version anzuzeigen. Also sperren wir manche Inhalte auf der mobilen Version. Manche Grafiken werden durch mobil-optimierte Grafiken ersetzt, Texte werden gekürzt, um schneller auf den Punkt zu kommen und Bilder werden ersetzt, so dass garantiert der Mittelpunkt des Bildes auch im Mittelpunkt des Layouts steht. Videos können auf dem iPhone nur in voller Größe abgespielt werden, daher müssen sie manchmal anders platziert sein. Tabellen oder Angebote müssen meist komplett neu designed werden. Und in Bezug auf Verhalten der Nutzer ist es oft so, dass man am Handy direkt eine Anruf-Option haben möchte, anstatt eine E-Mail zu schreiben.

All dies führt nicht nur dazu, dass der Benutzer sich auf unseren Seiten wohlfühlt und das Gefühl hat, als wäre die Webseite für’s Handy entworfen worden, sondern auch, dass die Webseite auf jeder Bildschirmgröße Ihren Zweck erfüllt.

www.albee.de – eine Fallstudie

Für die Online-Präsenz der Marke ALbee Professional haben wir neben einer außergewöhnlichen Webseite auch eine komplett überarbeitete mobile Version geschaffen.

Die Desktop-Version hatte viele Funktionen, die für eine mobile Version so keinen Sinn gemacht haben. Daher haben wir im Gegensatz zu einer einfachen „mobilen Anpassung“ die gesamte Seite komplett überarbeitet.

Willst du das auch?

Wir können dir bei der Umsetzung einer mobilen Strategie helfen.
Schreib uns einfach eine E-Mail und wir melden uns bei dir.