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 überarbeite derzeit die Website meines Praktikums-Betriebs.

    Gute Links wurden in den vorigen 47 Kommentaren bereits in Hülle und Fülle genannt. Manchmal ist es im Responsive Webdesign jedoch erforderlich, mobile Geräte und Tablets bereits auf Serverebene zu erkennen, zum Beispiel, um für geringe Bandbreite optimierte Videos zur Verfügung zu stellen.

    Das Projekt Mobile Detect liefert eine fertige Lösung für PHP:
    https://github.com/serbanghita/Mobile-Detect/blob/master/Mobile_Detect.php

    Gerade Videos für alle Geräte verfügbar zu machen, ist furchtbar. Es wurde dank HTML5 – das Vereinheitlichung schaffen sollte – sogar noch schlimmer.

    Als “best practice” hat sich bei mir dieses Skript hier etabliert, das in allen Browsern ein passendes Video zur Verfügung stellt:
    https://mediaelementjs.com/

    Ich codiere meine Videos daher nur noch in 2 Formaten: webm und h.264. Für h264 nehme ich den Adobe Media Encoder. Den einzig tauglichen webm-Encoder habe ich auf dieser Seite gefunden:
    https://video.online-convert.com/convert-to-webm

    Den Rest erledigt das Skript für mich und stellt entweder den browsereigenen Player zur Verfügung – oder eben Flash.

    Um meine Style-Sheets auch einigermaßen wartbar zu halten, arbeite ich inzwischen nur noch mit {.less}, einem Parser für CSS.
    http://www.lesscss.de

    Mit {.less} kann man bspw. Variablen (z.B. Pixelwerte, Farben) definieren und in gegebener Stelle einfügen oder verrechnen lassen. Auch lassen sich Klassen als Objekt- und Absatzformate definieren, vergleichbar mit den uns vertrauten Funktionen in InDesign. Mit den verschachtelten Formaten behalte ich stets den Überblick und habe inzwischen eine CSS-Vorlage, bei der es genügt, Schriftart und Farbschema zu ändern, um das Gerüst für das nächste Webprojekt anzupassen.

    Natürlich ist mit Responsive Web Design das Flash-Plugin (außer als Fallback für Videos) gestorben. Um trotzdem kleine Animationen einfach umzusetzen, sollte man Illustrator hernehmen und dieses Plugin ausprobieren:
    https://visitmix.com/labs/ai2canvas/

    Der Responsive-Gedanke hört übrigens nicht bei Websites auf: Auch Mailings können und müssen für verschiedene Clients und Geräte optimiert werden. Campaign-Monitor liefert hier umfassenden Einblick in seine Technologie, mit Ratgebern und Übersichtstabellen:

    https://www.campaignmonitor.com/guides/
    https://www.campaignmonitor.com/css/

    Gerne hätte ich auch noch auf meine Testergebnisse für den richtigen Einsatz von QR-Codes verlinkt, doch ich komme voraussichtlich erst Ende des Monats dazu, etwas zu schreiben. Denn QR-Codes sind oft der Zugangsschlüssel für mobile Websites. Und wenn die schon nicht “responsive” gestaltet sind, kann die Website noch so gut sein.

    Wer trotzdem interessiert ist, kann sich die Seite https://alexplus.de/dossiers/ schon mal bookmarken.

  2. Vielen Dank für den interessanten Artikel.
    Ich bin gespannt, wie und wann der Workflow in die Agenturen einzieht. Vor allem einen Kunden klar zu machen, dass er erstmal lange nicht sieht, was er gekauft hat (Layout) sehe ich als grösste Herausforderung.
    Beispiel für eine responsive Lightbox gibt es hier: https://www.frescojs.com/

  3. Danke für den Artikel. Kann man das Bild von dir eigentlich nutzen? Natürlich mit Angabe der Quelle.

    Responsiv Design ist immer schwer dem Kunden beizubringen. Gerade, wenn die Ansprüche nicht so hoch sind. Die eigenen wachsen, die des Kunden müssen erst geweckt werden. Ich denke, dass wird noch ein langer Prozess.

    Ich habe ein richtig schönes jQuery Tool gefunden, mit denen man Tabellen auch responsiv gestalten kann: https://www.mobifreaks.com/wp-content/demos/Responsive-and-SEO-Friendly-Data-Tables-with-js/

Kommentare sind geschlossen.

An den Anfang scrollen