Start dt-Aktionen

Responsive Webdesign – Eine Herausforderung für Webdesigner

170

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?

170 Kommentare

1 7 8 9
  1. Prima Artikel.
    Nachdem ich mich endlich auch mal mit diesem Thema auseinander gesetzt habe war klar, das mein Blog dringend ein neues Theme braucht.
    Gar nicht so leicht, da das richtige zu finden & dann noch alle Plugins zu überprüfen, ob diese auch responsive sind.
    Bin gespannt, was der Umstieg noch so an Hürden mit sich bringt!

    Danke auf jeden Fall für die Anregung & Gruß aus Köln
    Heike

  2. Ein wirklich toller Artikel und ein richtig gutes Buch, dass ich mir auch gerade zu Gemüte führe…

    Was meiner Meinung nach das schwerste an Responsive Webdesign ist (für mich als Designer) ist die veränderte Herangehensweise an ein Projekt zu verinnerlichen und nicht immer auf die jahrelang gelernten Methoden zurückzufallen.

    Auch die Behandlung von Bildern im Responsive Webdesign finde ich sehr schwierig, da es keine wirklich gut funktionierende Methode gibt (zumindest noch nicht). Ich hoffe, dass sich bald das picture Tag durchsetzt und dann auch schnell in den Browsern funktioniert.

    Viele Grüße aus Köln
    Marcus

  3. Um Responsive Webdesign wird man nicht mehr herumkommen. Weder als Designer, noch als Kunde. Die mobile Suche nimmt zu und der Anspruch des Besuchers ebenso.

  4. Hi, ich habe von responsive Webdesign erst vor kurzem gehört und es hat mich gleich gepackt. Der Artikel hier kommt mir gerade recht. :) Ich versuche gerade alles Mögliche an Infos über das Thema zusammen zu bekommen. Bin total begeistert, dass es noch so viele Seiten über da Thema gibt. Meine Lieblingsseite, auf der ich mich am Anfang am meisten informiert habe, ist http://www.dreiwerken.de/

    Danke für den tollen Beitrag und die vielen Links. :D

    Grüße aus dem Norden.
    Sandro

  5. Hey, schöner Artikel, macht richtig Lust sich das Buch zu kaufen & sich noch mehr mit dem Thema auseinander zu setzen.

    Ich denke Responsive Webdesign wird immer wichtiger, vorallem, wenn man Zukunftstechnologie wie Google Glass oder Apple iWatch verfolgt. Fixe Größen sind von gestern, heute muss sich alles anpassen, Evolution pur – auch im Internet. Vielleicht gibt es auch bald runde Internetfähige Geräte? Wahrscheinlich arbeitet Apple bereits an dem iBall.

    Bei so einem Thema müssen Webdesigner einfach am “Ball” bleiben. :D

  6. Eine sehr schöne Zusammenstellung der Grundlagen responsiven Webdesigns.
    Und ganz richtig: Nur Breitenänderungen reichen nicht aus: display:none; visibility:hidden –> viele Teile sollten auf kleinen Geräten ausgeblendet werden. Außerdem müssen Schriftgrößen sowie die Anordnungen der Inhalte auf dem jeweiligen Display mit viel Handarbeit angepasst werden.

    Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

  7. […] Mit diesem modularen Aufbau im Hinterkopf kann der Entwurf in nur einer Größe entstehen. In der Ausarbeitung sind dann die verschiedenen Anordnungen nur noch zu überprüfen und gegebenenfalls nachzujustieren. Insgesamt konzentriert sich der Grafiker auf den grundsätzlichen Website-Charakter sowie ganz detaillierte Einzelelemente. Die Abbildung kompletter Seiten dagegen wird überflüssig. Christoph Zillgens hat den Designaspekt ausführlich im Design-Tagebuch diskutiert […]

1 7 8 9

Kommentieren


2 + = 10

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