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.
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?
Guter Artikel. Responsive Design ist ganz klar immer wieder eine Herausforderung an das Design.
Hier spielt eine sehr enge Zusammenarbeit mit Technologie und Kreation eine wichtige Rolle.
https://goldengridsystem.com
https://bradfrost.github.com/this-is-responsive/patterns.html
Das Thema Bootstrap kam hier schon vereinzelt auf. Deshalb dazu noch ergänzend für eine gute Grundlageneinarbeiten folgender Link: https://www.catmoney.de/bootstrap-tutorial/
Mein letztes Responsive-Projekt habe ich ebenfalls mit einem Angepassten Bootstrap Column-Set aufgebaut. Der aktuell größte Nachteil momentan ist meiner Meinung nach, dass Bootstrap wieder und wieder mit “.row”-Wrappern arbeitet um Verschachtelungen zu ermöglichen. Das führt zum Beispiel bei der Integration in diverse CMS’ zu Problemen, da entweder umständlich Templates angepasst werden müssen oder wieder und wieder weitere Layer eingebunden werden müssen.
Mein Tipp deshalb um Bootstrap flexibler zu machen: Die “.row”s fliegen raus. Anstatt dessen wird pro Span eine weitere Klasse “.nested” erstellt, die die Margins und Widths des Elements überschreibt, die Span somit vergrößert. Das Ergebnis: Ich kann mit nur einer weiteren Klasse alle Elemente (egal ob span2, span3 oder span12) verschachteln ohne neue Layer einzubinden. Das wiegt die Umschreibung des CSS’ später locker wieder auf.
Hier ein hilfreiches Tool um erste Mockups für verschiedene Geräte zu erstellen und diese für ein erstes Look & Feel mit dem Kunden abstimmen zu können:
https://www.drweb.de/magazin/rapid-prototyping-mit-dem-foundation-framework-35888/
Mobile Sites VS Responsive Sites
Hallo und vielen, vielen Dank für den tollen Artikel!
Das Buch könnte mir wunderbar bei einem aktuellen Projekt helfen, daher würde ich mich wahnsinnig freuen, wenn ich gewinnen würde.
Hier gibt es einen schönes Video als Einstieg ins Thema:
https://www.video2brain.com/de/videos-91505.htm
Viel Glück auch allen anderen und herzliche Grüße aus Berlin :-)
Danke für den Artikel!
Hier gibt viele passende Tools zum Thema:
https://t3n.de/news/50-kostenlose-einsteigertools-384829/
Nicht nur das Layout, sondern auch Typografie sollte beim responsive Webdesign mehr Beachtung finden. Ein toller ausführlicher Artikel dazu ist hier zu finden:
https://www.designmadeingermany.de/2011/54591/
kleiner link zum Thema:
responsive caaaaaat https://roxik.com/cat/
danke an elma studio, haben mir das responsive design nähergebracht.
Das Buch zu gewinnen wär prima!
danke, bin gerade dabei mich einzuarbeiten, ein Buch wäre hilfreich
Responsive Webdesign – die Basics [mit Linktipps]
https://liechtenecker.at/responsive-webdesign-die-basics/
Guter Artikel :)
Responsive Typography schön erklärt:
https://informationarchitects.net/blog/responsive-typography-the-basics/