Responsive Webdesign! One size fits all!

teaser_responsiveDas Zauberwort der aktuellen Internet-Entwickung heißt „Responsive Webdesign“. Am treffendsten kann „Responsive Webdesign“ mit „reaktionsfähiges Webdesign“ übersetzt werden. Es bezeichnet das Gestalten und Umsetzen einer Website, die auf äußere Einflüsse reagieren kann dabei werden Inhalte (Texte, Bilder) und die Nutzerführung durch Menüs optimal auf die jeweilige Bildschirmgröße umgesetzt. Und das vom 27“ Cinema Display bis zum Mini-Smartphone. Um das möglich zu machen wird Responsive Webdesign in einem speziellen, optimierten Workflow erstellt.

Wieso Responsive Webdesign?

  • Im Jahr 2007 gingen noch 91% aller Nutzer mit ihrem PC ins Web, nur 30% (auch) per Laptop und nur 6% mit mobilen Geräten
  • Im Jahr 2012 nutzen noch 73% den stationären Rechner, 58%  nutzen (auch) Laptops und 22% (auch) mobile Geräte wie Smartphones
  • Bei den unter 30jährigen nutzen bereits 42% dasSmartphone intensiv, um zu surfen
    [Quelle: ARD/ZDF Onlinestudie 2012]

Diese Trends verstärken sich stetig und es wird Zeit, sie zu berücksichtigen!

Damit ist klar: Das Web ist kein Blatt Papier, das es zu bedrucken gilt! Tatsächlich ist das Endprodukt einer fertig entwickelten Website nur ein Zwischenprodukt. Niemand weiss,in welcher Umgebung und in welcher Form das Endprodukt konsumiert wird. Die Vielfalt der Endgeräte ist heute unüberschaubar – und jedes Endgerät verändert den Look & die Bedienbarkeit der Websites.

Wie Responsive Design umsetzen?

Der bisherige Workflow in der Konzipierung und Umsetzung von Webseiten stellte die realen Verhältnisse im Web auf den Kopf. Im klassichen Entwicklungsprozess eines Projekts lieferte der Designer nach der Konzeptiosphase ein fertiges grafisches Screendesign, das genau den Wünschen des Kunden entspricht. Dieses vorgegebene Layout wurde dann bestmöglich ins HTML und dann in die Browser der Endgeräte übertragen

130213_workflow_02

Das Ergebnis:

  • Webdesign, das für bestimmte Fenstergrößen opimiert war und davon abweichende nicht optimal ausnutzte
  • Interaktive Zustände und Verhaltensweisen (Dropdown, Auflappen, Hover usw.) fehlten in Photoshop-Vorlagen oft
  • Darstellung und Bedienbarkeit auf abweichenden Geräten war oft schlecht bis unmöglich
  • Insbesondere für mobile Geräte wurden separate Template Sätze notwendig, was Kosten und Pflegeaufwände erhöht

Responsives Webdesign korrigiert das durch einen neuen und besseren Workflow . Die Entwicklung leitet sich von Anfang an vom Endgerät des Nutzers ab und nicht von den oft idealtypischen Vorstellungen einer Photoshop-Grafik.

Der neue Workflow:

Für die Entwicklung einer responsive Webseite steht zu Beginn eine Bestandsaufnahme & Zusammenstellung aller Inhalte um einen übergreifenden Gesamteindruck zu bekommen. Inhalte & Menüs werden nach ersten Wireframe-Entwicklungen strukturiert.  Denn hierbei ist wichtig: „The smaller the device, the greater need to show the most important content – top to bottom.“ Sven Wolfermann, Web Developer. Daher beginnt responsive Webdesign beim kleinsten Device und endet beim größten. Es werden Umbruchstellen für Inhalte & Menüs definiert, sogenannte Breakpoints, die damit die Darstellung für das jeweilige mobile Gerät steuern. Die Entwicklung des Designs findet erst im letzten Schritt im Webbrowser statt.

130213_workflow_new

Vorteile des responsiven Designs

Weniger technischer & redakioneller Aufwand:

  • Nur ein Template-Satz zu erstellen & zu pflegen – für alle Endgeräte
  • Separate Template-Sätze für mobile Geräte sind überflüssig
  • Redaktionelle Anpassungen von Inhalten (Texten,Bildern, Menüs) auf spezielle Ausgabegeräte entfallen komple
  • Auf teuere und pflegeintensive, native Apps kann oft verzichtet werden

Bessere & sinnvollere Workflows:

  • Im veränderten Workflow folgt das Design den Inhalten und der Struktur der Website „form follows function & contents“
  • Das Design wird direkt im HTML eingepasst, aufwändige Vorarbeiten in Photoshop entfallen
  • Abstimmungen und Tests erfolgen fortlaufend im Entwicklungsprozess
  • Damit wird der bisherige Workflow, in dem sich die Inhalte dem Design starr unterordnen müssen, wieder vom Kopf auf die Füße gestellt

Optimale Usability:

  • Die Website stellt sich flexibel auf den Nutzer und sein jeweils benutztes Endgerät ein
  • Einheitliche und vordefinierte, optimale Darstellung aller Inhalte auf allen Bildschirmgrößen sorgen Hardware-unabhängig für optimale Darstellung und gute Bedienbarkeit
  • Der Nutzer hat ein funktional & grafisch perfektes Surf-Erlebnis auf allen seinen Endgeräten

Kommerzielle Aspekte:

  • Ein Template-Satz im Responsive Webdesign ist etwa 30% aufwändiger zu erzeugen, als ein herkömmlicher
  • Aber er ist wesentlich billiger, als mehrere Template-Sätze für diverse Endgeräte zu programmieren
  • Zielgruppen mit mobilem Gerät sind mit herkömmlichen Websites kaum mehr zu erreichen
  • In 2-3 Jahren wird es keine herkömmlichen Websites mehr geben, die im Wettbewerb bestehen können
  • Wer schneller umrüstet, verschafft sich einen  Wettbewerbsvorteil

Unsere Schlussfolgerung: Nur so geht Webdesign!

Unser Best Practice Case für Responsive Webdesign ist auf www.heimwerker.de zu sehen. Hier haben wir unseren eigenen Dienst auf Responsive Webdesign umgestellt.
Viel Spaß beim Durchklicken!

 

Share on Facebook1Tweet about this on TwitterShare on Google+3Pin on Pinterest0
Christoph Allefeld

Über Christoph Allefeld

Geschäftsführer und Mitgesellschafter der Marketing Factory. Ich bin seit 1998 dabei und es ist nach wie vor kein bisschen langweilig. Den tollen Kollegen und Kunden sei es gedankt.

Homepage: http://www.marketing-factory.de

      Profile:
    • twitter