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?
Ich habe keinen Überblick mehr hier …
(Den responsinator finde ich auch erhellend …)
Das hier aber ist ein toller Überblick: https://bradfrost.github.com/this-is-responsive/patterns.html
Auch Videos, maps …
LG
anita
Natürlich hab ich es dann gleich gesehen … :-/
Also, flexible Slider für responsive Designs gibt es auch schicke:
https://flexslider.woothemes.com/
https://marktyrrell.com/labs/blueberry/
https://devpress.com/demo/responsive-slider/
Leider gibt es auch genug schreckliche, ppt-mäßige …
anita
Wenn der eine Link zum nächsten führt:
Off Canvas @ JasonWeaver.name
Definitiv eine sehr coole Variante als Lösungsansatz.
Wenn jetzt noch das Design Tagebuch selbst responsive wäre – oder in diesem Zuge neu gestaltet würde – ein Traum *g*
Super Artikel
Wer bereits mitten in der Programmierung ist und seine Prototypen testen will, sollte UNBEDINGT einen Blick auf das Tool des Franzosen Victor Coulon werfen!!!!!!! Ihr werdet es lieben, ich nutze es bereits fast täglich:-))
https://responsive.victorcoulon.fr/
Hi,
sind mittlerweile ein paar interessante Links hier aufgelistet.
Hier mein Link-Beitrag dazu, aus einer etwas anderen Sicht:
https://grochtdreis.de/weblog/2012/11/06/optimieren-ausgabe-2012/
Viele Grüße
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! https://www.insidrrr.de/go/event
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.
Und wenn man mit ReWeDe schon Zeit spart, dann sollte man auch die richtigen Tools zum Testen verwenden. Ein Einblick gibt es hier:
https://t3n.de/news/responsive-web-design-komfortabel-380139/
[…] war ein ganz guter Artikel dazu im Design Tagebuch: Responsive Webdesign – Eine Herausforderung für Webdesigner zu lesen. Ich bin auch der Meinung das man viel schneller in den Dummy / Entwicklungsmodus wechseln […]
sorry falls schon vorhanden:
muellergridsystem
max design three tips
ach so für mich wäre ne große hilfe.