Skip to content

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?

Dieser Beitrag hat 177 Kommentare

  1. Ich habe versucht mich in den letzten Monaten etwas schlau zu machen zu diesem Thema. Dabei bin ich auf das Framework Foundation gestossen. Die Arbeit damit ist doch recht einfach. Ich finde es toll, jedoch hat auch Foundation noch Verbesserungspotential wie bei den vielen komplexen JavaScripts und dem sehr umfangreichen CSS-Dateien.

    https://foundation.zurb.com/

  2. Interessanter und sehr gut geschriebener Artikel zum Thema Responsive … eine Herausforderung sowohl in Konzeption, Grafik als auch in der Umsetzung.

    Eine kleine Präsentation meinerseits zum Thema Responsive findet ihr hier
    https://speakerdeck.com/zeppelingroup/responsive-webdesign-fluch-oder-segen-fur-den-cro-aspekt-einer-website

    …. einige Punkte bei Responsive, vor allem die verlängerten Ladezeiten im Vergleich zu einer getrennten mobilen Website lassen mich doch etwas nachdenklich stimmen … ansonsten aber bin ich 100% für Responsive bei zukünftigen Projekten

  3. Einen schönen Link kann ich nicht beitragen. Also auch ohne Gewinnchance – außer Konkurrenz sozusagen – ein herzliches Dankeschön für diesen Beitrag und die vielen interessanten Links.

  4. “Die erstellten Entwürfe sollten aber zum einen nicht zu sehr ins Detail gehen, zum anderen nicht dem Auftraggeber als Pseudo-Endprodukt präsentiert werden.”

    Das klingt zwar schön in der Theorie, ist aber eine Praxis, die einem keine Aufträge einbringen wird. Der Kunde will ein Eindruck vom Endprodukt bekommen und er will diesen Eindruck gestern. Und er wird den Webdesigner beauftragen, der ihm diesen Eindruck vermittelt. Denn wenn das Endprodukt schon so gereift ist, wie es in der Skizze aussieht, kann es bis zur Erstellung der Website nicht so lange dauern, als wenn man ihm ein Bild aus Bauklötzen vorsetzt. Die Vorschau sieht mit Absicht perfekter aus als das Endprodukt, denn man will schließlich was verkaufen. Und wenn der Kunde nur den Webdesigner beauftragt, der ihm die Idee mit der größten Reife präsentiert, dann will er auch darüber hinweggetäuscht werden, dass das gezeigte nicht dem Ergebnis entspricht. Sonst würde er nicht nach diesem Kriterium entscheiden.

    Kurz: Bestimmte Teile dieses Artikels sind für freischaffende Webdesigner einfach nicht machbar, wenn sie ein Einkommen haben wollen.

  5. *******************************************

    Hier sind ja ein Menge hilfreicher Links zum Thema Responsive Design zusammengekommen. Sehr schön. Soeben habe ich die Verlosung vorgenommen. Über ein Exemplar „Responsive Webdesign“ von Christoph Zillgens freuen darf sich:

    Andrea #64

    Viel Vergnügen beim Lesen wünsche ich! Eine E-Mail an Dich ist soeben raus gegangen.
    Allen Anderen – herzlichen Dank fürs Mitmachen.

    Kreative Momente wünsch ich.

    *******************************************

Kommentare sind geschlossen.

An den Anfang scrollen