Responsive Webdesign – Eine Herausforderung für Webdesigner

Beitrag von Christoph Zillgens

Seit Ethan Marcotte 2010 seine Grundzutaten des Responsive Web Design in einem A-List-Apart-Artikel vorgestellt hat, schritt die Entwicklung auf technischer Seite mächtig voran. Rund um Ethan drei Grundzutaten flexibles Grid, flexible Bilder und Mediaqueries haben sich mittlerweile einige »Best Practices« entwickelt.

Responsive Web Design, zu deutsch »reaktionsfähiges Webdesign« stellt aber nicht nur Webentwickler, sondern auch Webdesigner vor neue Herausforderungen. Denn die Geräte, mit denen wir Websites konsumieren, werden immer vielfältiger, z.B. in Bezug auf die Bildschirmgröße.

Diverse internetfähige Geräte mit verschiedenen Bildschirmgrößen

Abb. Diverse internetfähige Geräte mit verschiedenen Bildschirmgrößen

Um dieser Gerätevielfalt gerecht zu werden, müssen wir uns auf die Flexibilität des Webs rückbesinnen sowie einen verbesserten Workflow in Zusammenarbeit mit Entwicklern und Auftraggebern etablieren. Außerdem müssen wir unsere Annäherung an die Gestaltung dem Prozess anpassen. Diese Aspekte möchte ich im Folgenden näher erläutern.

Rückbesinnung auf Flexibilität

Responsive Webdesign ist kein aktueller Trend, sondern rückt vielmehr wieder das in den Vordergrund, was HTML-Dokumente seit jeher ausmacht: ihre Flexibilität. Öffnen wir ein »nacktes« HTML-Dokument im Browser, egal welches Dokument, egal welcher Browser, dann passen sich die Inhalte automatisch an die Fenstergröße an. Webdokumente sind also bereits von Natur aus reaktionsfähig.

Erst im Laufe der Jahre haben wir Webdesigner Websites mit unserem Wunsch nach mehr Gestaltung und dem damit verbundenen Bestreben nach Kontrolle jener Anpassungsfähigkeit beraubt. Statt die vorhandene Flexibilität zu nutzen und zu tolerieren, haben wir dem Web die aus der Printwelt vertrauten Gestaltungsprozesse übergestülpt, indem wir feste Breiten definiert und somit ursprünglich reaktionsfähige Webdokumente zu starren Seiten degradiert haben. Das soll an dieser Stelle keine Vorwurf sein, es ist einfach Teil des Lernprozesses im Umgang mit diesem jungen Medium.

Unsere aus dem Print übernommenen Werkzeuge haben uns dabei sicherlich tatkräftig unterstützt. Öffnen wir ein Grafikprogramm wie Photoshop, ist die erste Amtshandlung das Eingeben von Breiten- und Höhenangaben und somit die Festlegung auf fixe Größen. Bevor wir überhaupt richtig anfangen, werden wir gezwungen, erste Annahmen über die Dimensionen zu treffen. Wenn wir dann unsere digitale Leinwand mit Pixeln »befüllen«, erhalten wir schließlich ein starres Gemälde, das zwar eine Webseite suggeriert, aber dennoch weit entfernt ist von einem dynamischen und flexiblen Dokument. Auf diese Weise bewegen wir uns weiter weg von einer reaktionsfähigen Website.

Probleme des klassischen Wasserfallprozesses

Im Laufe Webgeschichte hat sich der sogenannte Wasserfallprozess etabliert, der grob nach einem Schema à la Planung -> Design -> Umsetzung -> Veröffentlichung abläuft.

Abb. Ein herkömmlicher Wasserfallprozess

Nach einer statischen Gestaltungsphase folgt also die Entwicklungsphase, in der es vor allem darauf ankommt, das vom Auftraggeber »abgesegnete« Layout bestmöglich in die Browser zu übertragen. Mittlerweile hat sich zwar schon sehr weit herumgesprochen, dass Websites nicht in jedem Browser gleich aussehen müssen. Dennoch wird mit einem statischen Website-Entwurf eine Erwartungshaltung geweckt, die nicht dem späteren Ergebnis entsprechen wird. Der Webdesigner schaufelt sich eine Grube, in die er dann freimütig hinein springt:

  • Waren bisher schon die statischen Abbildungen eines Webentwurfs im Grafikprogramm nur ein mäßiger Ersatz für eine interaktive Website, so kommt jetzt noch erschwerend hinzu, dass die unterschiedliche Darstellung auf den verschiedenen Geräten anhand eines statischen Entwurfs nicht visualisiert werden kann.
  • Diese Herangehensweise verhindert auch für den Designer eine vernünftige Auseinandersetzung mit dem grundlegenden Problem. Denn im Grafikprogramm werden eventuelle Schwachstellen eines Layouts im Zusammenhang mit kleineren oder größeren Displays nicht offensichtlich.
  • Das Festlegen von Umbruchpunkten in der Gestaltungsphase ohne vorherige Tests im Browser gleicht einem Ratespiel
  • Auch bestimmte Elemente wie Schrift und Schriftgröße können nur vernünftig im Browser und auf den verschiedenen Geräten bewertet werden. Auch das kann ein Grafikprogramm nicht leisten.

Wir müssen also unsere bestehende Arbeitsabläufe anpassen. Wie aber können wir mehr Flexibilität in den Gestaltungsprozess bringen?

175 Kommentare zu “Responsive Webdesign – Eine Herausforderung für Webdesigner

  1. Aus meiner Erfahrung kann ich dazu auch beisteuern, dass bei der heutigen Komplexität der digitalen Produkte die Rolle des Designers am Ende der Produktionskette zeitlich und wirtschaftlich nicht tragbar ist. Der Designer sollte möglichst früh in den iterativen Prozess (viele kleine Schritte) einbezogen werden. Gute Grundlagen liefern dafür die Arbeitsmodelle aus dem Usability-Bereich oder dem Design-Thinking.
    http://www.penova.de/2012/10/design-thinking-kompakt/
    http://lucidii.com/?page_id=432
    Die andere wichtige Frage ist: Was soll der Designer alles können, um so zu arbeiten? Da spielen die Photoshop-Kenntnisse eher eine Nebenrolle, oder?

  2. Wie auch schon andere poste ich hier diesen Link denn ich denke er zeigt noch eine andere gute Möglichkeit aus.

    On off Canvas – Lösung

    Leider finde ich es schwer und aus der Parxis zeigt es sich das viele Kunden die Notwendigkeit nicht verstehen und auch den Mehraufwand nicht bezahlen wollen. Sagt mir mal einer ein gutes Argument damit der Kunde sagt ja ich zahle das!

    Oder gehört es nun zur Leistung dazu für die meisten Endgeräte etwas mit zu entwickeln?

    Lg Peet

  3. Ich kann mich meinen Vorednern nur anschliessen .. sehr interessant und aufschlussreich das Ganze. Mit WordPress und dem richtigen Theme funktioniert das responsive Webdesign schon mal ganz gut. Leider habe ich bisher noch kein Tool oder Programm gefunden dass alle Endgeräte simuliert und nach Fehlern oder Schwachstellen sucht. Habt Ihr eine Idee oder einen Tipp ?

  4. Responsive Design sollte inzwischen kein Ding mehr sein. Die Herhausforderung liegt darin bestehende Seiten mit minimalem Einsatz anzupassen. Ich bin auch kein Fan von effektvollen scripten, da ich lieber auf schnelle Ladezeiten setzte. Wenigstens ist Responsive Design 2013 endlich in aller Munde!

  5. Responsive Webdesign wird immer wichtiger. Die Anzahl mobiler Geräte steigt ständig an. Da Responsive Design die Anordnung der Elemente dynamisch anpasst, sollte man aufpassen, dass sich die Webseite auf allen Geräten ähnlich verhält.
    Ob eine Webagentur dass Wasserfallmodell nutzt oder andere Entwicklungszyklen ist eine wichtige Frage. Einen „besten“ Entwicklungsprozess gibt es nicht. Das hhängt immer von Webagentur und Projekt ab.

Pingbacks

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>