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?

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

  1. Da sind ja bereits eine ganze Menge schöner Artikel und Verweise zusammengekommen. Offenbar haben sich viele von uns schon mit der Thematik „Responsive Webdesign“ beschäftigt oder auf die ein oder andere Weise genähert.

    Ich stehe immer öfter potentiellen Kunden (und auch Kollegen) gegenüber, die schon mal davon gehört haben (mehr aber auch nicht). Sie fragen um Rat über das Was und Wie und Warum und überhaupt. Meist geht es ja letztendlich um Geld bzw. zusätzliche Investitionen.

    Den Artikel hier (PDF, ca 550 kb) zum Thema gebe ich dazu gerne vorab mal in die Hand, um beim interessierten Laien bzw. Kunden einen Schimmer von Ahnung zu erzeugen, bevor ich mir den Mund fusselig rede.

  2. Habe keinen passenden Link, find das Thema aber total interessant und möchte eigentlich auch nur ein Danke fürs Verfassen/Veröffentlichen/Teilen da lassen.

  3. Huhu,

    vielen Dank für diese Zusammenfassung. Ich bin kein Webdesigner, sondern eher der Techniker und Verantwortlich für Server, CMS-Lösungen etc.
    Aber leider meistens auch das Bindeglied zwischen Designer und Kunden. =) So eine Art Projektleiter.

    Endlich habe ich es schriftlich, dass ein Grafiklayout nicht immer so 100% auch im Web aussehen muß. =) Sowas will ja mancher Kunde nicht wissen. Aber wenn die dann schon mit ihren diversen Browsern, Auflösungen etc. ankommen, geht bei denen auch die Erkenntnis ein.

    Als netten Link und lesenswert erachte ich auch:

    http://www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html

    Vielleicht gewinne ich ja das Buch. Lesenswert ist es allemal. =) Und vielleicht kann ich dann auch manchen Designer noch besser verstehen. *g*

    Gruesse,

    Marcel

  4. Oh ja, als Webentwickler kennt man die Problematik nur zu gut. Man bekommt vom Webdesigner eine statische Photoshop-Datei und der Projektleiter sagt dann “mach das mal responsive”. Die angesprochene Rückbesinnung kommt erfreulicherwiese ja langsam zurück, aber die notwendigen Abstimmungen aller Beteiligten sind meist zeitintensiv und auch sicher nicht ganz simpel. Aber es macht ja Freude sich solchen Herausforderungen zu stellen. :-)) – Schöner Artikel, den ich weiterempfehlen werde!

    Anbei noch ein passender Link: Am 27.11.2012 findet in Köln ein Meetup mit dem Themenschwerpunkt “Responsive Design” statt. Der Eintritt ist frei, aber ein Besuch sicher nicht umsonst! http://www.insidrrr.de/go/event

  5. Finde den Artikel sehr gut.
    Ein Problem ist nur im täglichen Business, dass 80% der Kunden “in Print” denken und mit responsive wenig anfangen können, weil sie das Web und seine Funktionsweise eigentlich gar nicht verstehen (wollen?). Das Arbeiten mit Styletiles etc. setzt auf Kundenseite ein Quantum an abstraktem Vorstellungsvermögen voraus, was leider nicht immer angetroffen wird.

Pingbacks

Kommentar verfassen

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