Responsive Webdesign

Almut M. Logo
M. Nantscheff

„So sieht kompetenter, schneller Service aus: Web-Programmierung und Gestaltung auf Zuruf, passgenau, unbürokratisch und schnell. Klasse Zusammenarbeit!“
Mario Nantscheff, Managementberatung und Weiterbildung

Responsive Webdesign

Noch viele Websites sind auf einem mobilen Endgerät fast unbenutzbar, weil das Design auf feste Breiten ausgelegt wurde, die den Bildschirm eines Smartphones oder Tablets sprengen.

Hier ist Handlungsbedarf im Webdesign angesagt, denn seit einigen Jahren schon werden Websites zunehmend von Tablets und Smartphones aus besucht.

Die Vielzahl an Bildschirmgrößen - die auch noch im Landscape- und Portraitmodus berücksichtigt werden müssen - macht es heutzutage unumgänglich, eine Website von Anfang an "responsive" zu entwickeln. Der Aufwand dafür ist geringer, als eine bestehende Website “responsive zu machen”, die mit einem fixen Layout für Desktop-PCs entwickelt wurde.

screensizes responsive webdesign
Viele Bildschirmgrößen müssen im Responsive Webdesign beachtet werden.

Touchscreen statt Maus

Um das Nutzererlebnis der mobilen Besucher nicht enttäuschend werden zu lassen, ist es unumgänglich das Webdesign "responsive" anzulegen und weitere Aspekte zu beachten, die auf Touchscreens relevant sind. So muss z. Bsp. die Navigations- und Benutzerführung für Touchscreens überdacht werden und für die Bedienung mit den Fingern statt mit dem Mauszeiger optimiert werden. (Größere Linkflächen, Abstände...)

Weniger ist mehr

Seiten mit großen Hierarchieen und tiefverschachtelten Navigationen sollten, wenn möglich, vereinfacht werden.

Auch umfangreiche Tabellen sind auf Smartphones nicht einfach darzustellen. Es gibt zwar diverse technische Lösungen, eine Tabelle dennoch auf dem Bildschirm eines Smartphones zugänglich zu machen, dennoch sind sie nur als Notlösung zu betrachten, da sie keine optimale User-Experience bieten können.

Eine Website für mobile Geräte zu planen, ist also eine gute Gelegenheit das eigene Inhaltskonzept zu überdenken und sich zu fragen, welche Inhalte wirklich wichtig sind und welche entbehrlich.

Sollte es unmöglich sein, Strukturen und Inhalte der Website zu vereinfachen, kann eine extra .mobi-Seite, bzw. eine Content Adaption Lösung in Betracht gezogen werden.

Bilder im responsive Webdesign

Bilder für verschiedene Bildschirmgrößen, -auflösungen und v. a. auch für langsame Internetverbindungen bereitzustellen, sind eine Herausforderung für jeden Webdesigner. Je nach Anforderungen an die Website und Budget kommen Lösungen wie das <picture>-Element, Mediaqueries und Javascriptlösungen zur Anwendung oder auch der “One-Size-Fits-All”-Ansatz.

Mobiles Inhaltskonzept

Responsive Webdesign? Content Adaption? Oder eine extra mobi.Website ? Es gibt verschiedene Möglichkeiten, eine Website für mobile Geräte anzubieten — jede mit ihren Vor- und Nachteilen:

  • Responsive Webdesign
  • Content Adaption (RESS: Responsive Web Design with Server-Side Components)
  • Eine extra .mobi Website

 

Responsive Webdesign

  • Gleiche Seite / Gleicher Inhalt für alle: dadurch weniger Wartungsaufwand für den Seitenbetreiber.
  • der User findet — egal von welchem Gerät aus er die Website besucht — den selben Inhalt vor.
  • Performanceprobleme durch evtl. schlechte Internetverbindungen auf Mobilgeräten, weil derselbe Inhalt für alle bereitgestellt und erst auf dem Gerät des Users an den Bildschirm angepasst wird (durch CSS Mediaqueries).

Content Adaption

  • Der Server prüft vorab, welches Gerät die Website abrufen will und sendet demensprechend nur den speziell für dieses Gerät optimierten Inhalt. Dies geschieht durch "Useragent-Detection". Dadurch kann die Seitenladezeit und das Nutzererlebnis verbessert werden, da nur relevante Daten vom Server gesendet werden.
  • Höherer Entwicklungsaufwand durch komplexere Technik.

.mobi Website

  • Optimiert für Mobilgeräte, individueller Inhalt kann bereitgestellt werden.
  • Es müssen zwei Websites gewartet werden.
  • Es gibt zwei URLs, die sich der Website-Besucher merken, bzw. zwischen denen umgeleitet werden muss: z.Bsp. website.com und mobi.website.com.

Sind Sie überzeugt, dass auch Ihre Website den Schritt ins "Responsive-Zeitalter" machen sollte, um Ihren Websitebesuchern und Ihrem Unternehmen so einen Mehrwert zu bringen?