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?

1 2

Dieser Beitrag hat 177 Kommentare

  3. Dazu habe ich neulich auch schon diesen interessanten Beitrag gefunden:
    https://viljamis.com/blog/2012/responsive-workflow/
    (zwar auf Englisch aber die Problematik wird auch hier deutlich)

    Projektmethoden wie Scrum sind nicht nur im Bereich Programmierung interessant, sondern im Gesamtprojekt. Wer kennt nicht das berühmte “dynamische Pflichtenheft” in den klassischen Projekten ;-)

    Schöner Beitrag!

    Danke!
    Carola

    Antworten

  5. Dein Artikel gibt einen schönen Überblick über RWD. Und ich kann nur zustimmen, schon heute sollte man neue Websites auf jeden Fall Responsive erstellen. Wobei es natürlich nach wie vor Projekte gibt, bei denen das nur schwer möglich ist, und man vielleicht doch eine eigene mobile Version oder sogar eine App erstellen muss, z.B. Shops.

    Als kleine Linktipp: Sven Wolfermann hatte auf der T3CON12 einen interessanten Vortrag zum RWD-Prozess gehalten, seine Slides sind auch sehr interessant: https://maddesigns.de/rwd-process/#1

    Und natürlich würde ich mich freuen, das Buch zu gewinnen.

    Grüße
    Wolfgang

    Antworten

  6. Gute Artikel, das Buch sieht interessant aus. Also hier meine Links ;)

    Die Webseite von unitedpixelworkers ist einer meiner Lieblings “Reaktionsfähigen” Webseiten, denn diese hatte mich damals auch für das Thema sensibilisiert.

    Die Seite von microsoft ist ja seit dem Design wechsel auch responsive.

    Und hier noch eine nette Infografik für Leute die dem ganzen vielleicht noch skeptisch gegenüber stehen.

    Antworten

  7. für Menschen wie mich, die so etwas eher hobbiemäßig betreiben sind CSS Frameworks dabei sehr hilfreich, die eigene Seite gleich auf responsive Design umzustellen. Eines meiner Lieblingsframeworks ist das yaml framework, dass auf solche Probleme eingeht und es ermöglicht, mit nur einer HTML Datei und dem entsprechenden CSS auf verschiedene Auflösungen von Anzeigegeräten zu reagieren.

    https://www.yaml.de/

    Antworten

  10. Klasse Einführung. Das Thema verfolge ich nun schon länger, allerdings nicht so aktiv wie gewünscht. In den Entscheiderkreisen ist es meiner Meinung nach noch nicht angekommen. Vor allem die Mehraufwände sind in Projekten noch schwer zu “verkaufen”. Eine Frage der Zeit.

    Erst gestern habe ich bei t3n einen interessanten Artikel zum Thema RWD und Typographie gelesen:
    https://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/

    Viele Grüße
    Mario

    Antworten

  17. Danke für den Artikel! Ich selbst bin Designerin und arbeite u. a. im Bereich Webdesign. Die erwähnten Herausforderungen/Probleme kommen mir leider sehr bekannt vor und es scheint noch keine Lösung vom Himmel gefallen zu sein. Deshalb versuche ich mich selbst zu belesen. Einen Tipp möchte auch ich euch zu diesem Thema nicht vorenthalten: https://styletil.es/ . Eine kleine schöne Anleitung zum Thema Style Tiles. Na und zu guter letzt würde ich mich natürlich wahnsinnig über das Buch und einer Erleuchtung freuen.

    Antworten

  19. Ein sehr guter Artikel, gerade der Ansatz mit der Entwicklung von Stiltafeln vor dem eigentlichen Layout-Prozess gefällt mir sehr sehr gut. Für größere Kunden habe ich schon des öfteren mal eine solche Stiltafel erstellt, dann aber eher aus bestehenden Elementen aus dem Print-Material, um den Look des Kunden ins Website Layout transportieren zu können.

    Die Umsetzung und Adaption dieser einzelnen Elemente in ein globales Stylesheet und eine einheitliche Identifikation der Elemente über Projektgrenzen hinweg wäre hier perfekt.
    Twitter Bootstrap ist hier sicherlich ein Vorbild.

    An der Verlosung würde ich natürlich auch sehr gerne teilnehmen, daher hier mein Link zu einem Artikel der einige “Best practices” zeigt:
    https://www.tripwiremagazine.com/2012/06/responsive-website-design.html

    Antworten

  22. Hallo Cristoph,

    sehr schöner Beitrag, der insbesondere gelungen das Dilemma der Webdesigner widerspiegelt, dem Endkunden das ‘Responsive’ nahzubringen.

    Ich finde, dass inbesondere die Entwickler und Designer rund um WordPress hier schon ziemlich gute Arbeit geleistet haben.

    Wir haben für unseren Blog https://www.trendish.de/ mit dem DesignFolio Theme von Presscoders eine wirklich schöne und ausbaufähige Plattform gefunden und sind insbesondere froh, dass mit dem Fitvids Plugin nun auch die eingebundenen Videos problemlos auf mobilen Browsern ‘downgesized’ werden.

    Und recht hast du, Responsive Webdesign ist mehr als nur ein Trend!

    LG
    Andreas

    Antworten

  24. Hey Christoph,

    Du lieferst mit Deinem Artikel eine gelunge Zusammenfassung der gegenwärtigen Problemstellung. Der Ausblick, Responsive Webdesign in einem flexiblen Workflow zu bearbeiten, “spricht mir aus der Seele“. Dieser Schritt stellt uns (UXler und Kreative) zugleich neue wie spannende Herausforderungen im gemeinsamen Arbeitsumfeld.

    Der Aussage “Photoshop & Co. müssen nicht aus dem Workflow verbannt werden.“ kann ich rundum zustimmen. Dazu schrieb Tom Giannattasio vor einiger Zeit den Artikel In Defense Of Photoshop, in dem es um die Entthronung Photoshops hinsichtlich der neuen Möglichkeiten durch HTML/CSS-Prototypen geht. Gelungen finde ich in diesem Zusammenhang auch den Artikel Make Your Mockup in Markup von Meagan Fisher.

    Nicht zuletzt liefert ZURB mit seinem Foundation Framework, stellvertretend für eine ganze Reihe aktuell verfügbarer Frameworks, eine exzellente Grundlage für das Rapid Prototyping.

    Besten Gruß
    Claudio.

    Antworten

  27. Sehr guter und lesenswerter Beitrag, dessen Inhalt aus meiner Sicht leider hierzulande viel zu wenig Beachtung findet, leider auch vom designtagebuch.
    Da ich sehr häufig unterwegs bin, nutze ich mehr als die Hälfte der Zeit, die ich im Internet surfe mobile Geräte. Obwohl mobile Browser gute Fähigkeiten haben auch “normale” Seiten auf kleinen Bildschirmen darzustellen, bin ich sehr häufig enttäuscht, dass sich nur Wenige die relative überschaubare Mühe machen (häufig reicht eine sinnvolle html-Struktur und etwas CSS), das Design an unterschiedliche Darstellungsformate anzupassen.
    Für mich stellt mittlerweile das Vorhandensein eines responsive Layouts eines der wichtigsten Kriterien dar, anhand derer ich entscheide, ob ich die Webseite nutze oder gleich weiter surfe.

    Wie Achim schreibt, habe auch ich den Eindruck, dass es sehr häufig tatsächlich daran liegt, dass grundlegende Aspekte des Printdesign einfach zu sehr Einfluss nehmen. Viele Kreative sind scheinbar nicht bereit, die Flexibilität eines Browserfensters bzw. die unterschiedlichen Bildschirmgrößen als etwas zu betrachten, was mehr Platz für Freiheit und Kreativität bietet. Dabei sehe ich auch die Designer und Entwickler in der Pflicht Kunden von den Vorzügen einer flexiblen Gestaltung zu überzeugen.

    Grundsätzlich sind die “Kollegen” jenseits des Atlantiks offensichtlich viel offener bzw. fortschrittlicher und daher hole ich mir daher sehr häufig Rat von dort.
    Ein Blog, den ich auch zu diesem Thema regelmäßig lese ist webdesignerwall.com und da liefern beispielsweise folgende Artikel hilfreiche Tipps:
    webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
    webdesignerwall.com/tutorials/design-process-of-shopdock

    Antworten

  28. Das Thema ist sehr interessant. Aus eigener Erfahrung kann ich sagen das es wirklich gut ist schnell in den Browser zu kommen. Meine aktuelle Seite die ich vor ein paar Tagen neu gemacht habe ist auch vollkommen Responsive: https://www.davidhellmann.com

    Ich habe die Startseite in Photoshop angefangen aber nicht wirklich weit. Im Grunde nur den Header und ein paar Elemente. Dann ging es direkt in den Browser und PS wurde nur noch genutzt um Grafiken zu bauen die benötigt wurden.

    Die Seite an sich hab ich erst in der großen Größe gebaut und dann ca. 1-2h gebraucht dann lief es bis runter auf das Smartphone.

    Problem ist das Kunden halt immer noch meist erst statische Screens sehen wollen > diese dann freigeben und dann erst die Entwicklung beginnt. Das wird man wohl auch nicht so schnell raus bekommen da es “gelernt ist” das so zu machen.

    Antworten

  29. Über „Responsive Webdesign“ habe ich mir noch nie wirklich Gedanken gemacht, allerdings im Workflow trotzdem schon intuitiv eingesetzt. Ein sehr interssantes Thema. Glücklicherweise arbeitet unser Grafikbereich eng mit unserer IT zusammen, sodass sowohl im Vorfeld als auch im Design- und Entwicklungsprozess größere und kleinere Schwierigkeiten abgesprochen und gelöst werden können.

    radio eins (https://www.radioeins.de/) hat seit Anfang November einen neuen Internetauftritt und hat versucht auf „Responsive Design“ umzusatteln. Leider nicht ganz so erfolgreich, wie man es sich hätte wünschen können. Die Monitoransicht funktioniert ausgezeichnet, für Smartphones gibt einige Div-Blöcke, die offenbar statische Breiten haben … und für alles dazwischen (z. B. iPad) gibt es leider erst gar keine gesonderte Auflösung. Trotzdem ist der Auftritt eigentlich ganz schön anzusehen.

    Antworten

  30. Interessanter Artikel – obwohl ich das “Problem” etwas weit hergeholt finde.

    Hier sind einige Codebeispiele und auch schöne Beispiele zu sehen.
    Klick Here

    Interessant – finde allerdings das es mehr nach ner netten Spielerei aussieht. Mir ist zumindest das Problem bisher nicht aufgefallen. Naja evt kann das Buch meine Meinung ändern ;) also auch mein Senf dazu.

    Antworten

  33. Danke für die tolle Einführung! Vor allem der Aspekt des Workflows, fand ich interessant. Ich würde gerne ein Framework empfehlen: https://www.getskeleton.com/. Es basiert glaube ich auf dem oben genannten YAML, hat aber einige praktische Best Practices mit dabei.

    Außerdem möchte ich erwähnen, dass das Thema Responsive Web Design im wesentlichen drei Aspekte behandeln soll:
    1- Displaygröße
    2- Displayauflösung
    3- Touc first Bedienung
    Der erster Punkt wurde ausführlich behandelt.
    Zum zweiten Punkt empfehle ich diesen Artikel: https://coding.smashingmagazine.com/2012/08/20/towards-retina-web/. Die Anzahl an HD-Displays wird künftig wachsen, und die bisherigen 72 dpi-Icons sehen total unscharf aus.
    Zum dritten Punkt kommen Aspekte wie Größe der clickbaren Elemente für Touch aber auch ein Paradigmenwechsel in der Interaktion. Bisher war das Event Mouseover die wichtigste Interaktion beim Webdesign. Bisher konnten wir clickbare Flächen erst bei Mouseover entdecken und durch Farbänderung oder ähnliches navigieren. Nun jetzt geht das nicht mehr. Bisher auf dem iPad habe ich gesehen, dass Mouseover schwierig ist (https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/). Ich weiß es nicht ob iOS Safari die MouseOver events weiterhin so interpretieren wird, aber für mich heißt es auf MouseOver im Design und Implementierung zu verzichten. Anstatt dessen ist onClick(Tap) der universelle Event im Web Design. (https://globalmoxie.com/blog/desktop-touch-design.shtml)

    Antworten

  45. Danke für den Artikel. Bleibt nur zu hoffen, dass Kunden sich auf diese Art des Workflows einlassen können, was vermutlich gerade bei Konzernen etwas schwierig werden dürfte, da die Art der Abstimmung bisher meistens ja eher das Gegenteil von informell ist.

    In dem Zusammenhang würde ich gerne auf einen Artikel von Luke Wroblewski zum Thema “Mobile First“ hinweisen. Er schlug vor inzwischen drei Jahren vor, sich bei der Entwicklung von Websites und Anwendungen, die auch auf den kleinen Screens mobiler Endgeräte laufen sollen, zuerst auf die Konzeption und das Design für die kleinere Darstellung zu fokussieren und erst anschließend die größeren Auflösungen zu bedienen. Das hat zugleich auch den Vorteil, dass auch die größeren Screens von der Konzentration auf die Kernfunktionalitäten und einen optimierten Ablauf profitieren.

    Mein derzeitiger Favorit ist https://coworkchicago.com/, ich selbst habe vor kurzem mal eine Seite für einen Rechtsanwalt für Versicherungsrecht gemacht (https://ra-fassl.de/, für die ich das responsive Framework Foundation verwendet habe. Alternativ wäre Bootstrap von twitter noch ein interessanter Startpunkt.

    Ehrlich gesagt bin ich aber schon wieder dabei, mich von dem Gedanken von responsive Design im ursprünglichen Sinn (also komplett skalierbare Bilder etc.) zu verabschieden und mehr in die Richtung von https://framelessgrid.com/ zu gehen.

    Antworten

  46. Wie die praktische Arbeit aussehen kann, wenn man dem Kunden keine Grafiken sondern HTML-Entwürfe vorlegt, beschreibt Matt Griffin sehr praxisnah auf A List Apart. Er klärt mit einem Kunden zuerst die Hierarchie der Website und entwickelt dann einen Rohentwurf, der bereits reaktionsfähig ist und auf unterschiedlichen Geräten beurteilt werden kann.

    Antworten

  52. Was ich persönlich sehr interessant finde, ist dass der Guardian aktuell an seiner mobilen Website arbeitet und dabei in Zukunft auch auf responsive Design setzen will. Darüberhinaus wird der Fortschritt und Überlegungen auch auf einem Blog dokumentiert: https://www.guardian.co.uk/help/developer-blog/2012/oct/18/responsive-design-guardian-introduction
    Die Beta-Version kann auch schon unter https://beta.guardian.co.uk/ angesehen werden – aktuell ist die neue Version aber nur für mobile Geräte gedacht (mobile first).

    Antworten

  66. 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.

    Antworten

  68. 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/

    Antworten

  69. 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/

    Antworten

  72. 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.

    Antworten

  86. Da sind ja bereits eine ganze Menge schöner Artikel und Verweise zusammengekommen. Offenbar haben sich viele von uns schon mit der Thematik „Responsive Webdesign“ beschäftigt oder auf die ein oder andere Weise genähert.

    Ich stehe immer öfter potentiellen Kunden (und auch Kollegen) gegenüber, die schon mal davon gehört haben (mehr aber auch nicht). Sie fragen um Rat über das Was und Wie und Warum und überhaupt. Meist geht es ja letztendlich um Geld bzw. zusätzliche Investitionen.

    Den Artikel hier (PDF, ca 550 kb) zum Thema gebe ich dazu gerne vorab mal in die Hand, um beim interessierten Laien bzw. Kunden einen Schimmer von Ahnung zu erzeugen, bevor ich mir den Mund fusselig rede.

    Antworten

  88. Habe keinen passenden Link, find das Thema aber total interessant und möchte eigentlich auch nur ein Danke fürs Verfassen/Veröffentlichen/Teilen da lassen.

    Antworten

  90. Huhu,

    vielen Dank für diese Zusammenfassung. Ich bin kein Webdesigner, sondern eher der Techniker und Verantwortlich für Server, CMS-Lösungen etc.
    Aber leider meistens auch das Bindeglied zwischen Designer und Kunden. =) So eine Art Projektleiter.

    Endlich habe ich es schriftlich, dass ein Grafiklayout nicht immer so 100% auch im Web aussehen muß. =) Sowas will ja mancher Kunde nicht wissen. Aber wenn die dann schon mit ihren diversen Browsern, Auflösungen etc. ankommen, geht bei denen auch die Erkenntnis ein.

    Als netten Link und lesenswert erachte ich auch:

    https://www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html

    Vielleicht gewinne ich ja das Buch. Lesenswert ist es allemal. =) Und vielleicht kann ich dann auch manchen Designer noch besser verstehen. *g*

    Gruesse,

    Marcel

    Antworten

  96. 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

    Antworten

  97. 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.

    Antworten

  104. Also eine art “Meta-Datei” mit dem sammeln und definieren fester Elemente für sämtliche Seiten ist eigentlich ab gewisser Projektgrößen zumindest in meinem Workflow standard. Trotzdem sehr gut, es nochmal zu erwähnen. Nichts desto trotz glaube ich, es wird nach wie vor Screendesigner geben müssen und auch Fireworks/PSD Entwürfe entscheidender Seiten. Vermutlich scheitert diese gewünschte “Verzahnung” am Budget der Kunden, die über den Entwicklungsprozess (welcher sich ja bekanntlich immer länger zeiht als erwartet) vermutlich nicht noch ein Programmierer parallel bezahlen werden. Trotzdem ein sehr interessantes Thema, ein empfehlenswerter Artikel von den IA’s über responsive Typografie, welche immer vernachlässigt wird.
    https://informationarchitects.net/blog/responsive-typography-the-basics/

    Antworten

  105. Vielen Dank für diesen tollen Artikel, das Thema ist mehr als aktuell. Anbei ein Beitrag zum Thema aus dem Hause Robinizer Design Studio (Erstellung des Responsive-Designs) in Zusammenarbeit mit dem Hoffmann und Campe Verlag (verantwortlich für die redaktionellen Inhalte).

    https://www.projectm-online.com

    Antworten

  111. Hi,
    wir haben bei der Entwicklung unseres Verlagsproduktes aus der Sparte Healthcare https://www.uterus-myomatosus.net von Anfang an auf responsive Design gesetzt. Dem voraus gingen Lehrjahre als ausgebildete Grafikerin in Agenturen, wo ich für biegsame Accountmanager starre Printlayouts 1:1 für das Web übernehmen musste.Vielleicht hat RWD auch etwas mit geistiger Flexibilität zu tun. Für uns ist die Zukunft der Informationsvermittlung digital, am besten optisch und inhaltlich durchdacht, auf den Leser und seine Gewohnheiten zugeschnitten und auf mobilen Endgeräten ohne Conversion-Abbruch genießbar. Es hilft, sich dabei an Fibonacci zu orientieren. Über auf Papier eingefrorenes kompaktes Wissen aka Buch würde ich mich sehr freuen! :D

    Antworten

  124. Im Grunde mache ich das schon seit geraumer Zeit so. Oder ähnlich. Ich gehe eigentlich immer zunächst vom Quellcode aus, den ich (mit einem groben Blick auf das zukünftige Layout) sinnvoll strukturiere, danach verpasse ich den Tags ein allgemeines Aussehen (Farben, Schriften, Abstände), das den Stilvorgaben (aus dem Print-Bereich) entspricht, und erst danach erstelle ich mit den Blöcken das Screen-Layout, den Standard für die großen Bildschirme und per Mediaqueries die Anpassungen für die kleineren. Danach kommen dann noch Verhaltens-Erweiterungen mit Javascript dazu. Und das alles läuft natürlich nicht ohne kleinere Schleifen und Rücksprünge ab, weil man dann doch wieder den Quellcode anpassen muss und danach nochmal die Styles usw.

    Mit dem konkreten Schema unter der Bezeichnung Responsive Webdesign hab ich mich aber noch nicht weiter beschäftigt, daher nur ein Link auf die Wikipedia: https://de.wikipedia.org/wiki/Responsive_Design

    Antworten

  125. […] Die große Herausforderung im Webdesign heißt heute “responsive”! Das hat jeder schon mal gehört – aber wissen Sie auch, was sich eigentlich genau dahinter verbirgt ? Das Designtagebuch hat uns dazu am 16.11.2012 eine sehr schöne Erklärung geliefert. Kurz: Responsive Webdesign ist die Erstellung einer Website, die auf allen Bildschirmen der Welt sichtbar und voll funktionsfähig ist. Eigentlich ist das gar nichts Neues – kein Trend – sondern alt Bewährtes neu entdeckt: “Ö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.” (ausführlich online nachzulesen im Designtagebuch) […]

    Antworten

  128. Hallo Achim,

    ich bin ja sowohl Design- als auch Programierlaie. Als solcher drängt sich mir die Frage auf, ob es offenbar noch keine Tools gibt, die gerade das Erstellen von Responsive Designs gut unterstützen? Müsst Ihr armen Designer etwa wirklich mit 20 verschiedenen Geräten/Browsern das Ergebnis testen?

    Ich hatte neulich eine Lösung von Adobe für die “Dynamisierung von Grafiken” gesehen, bei dem nicht nur die optimale Bildgröße (Pixel) sondern sogar die Farben und Texturen von Stoffen in Produktkonfiguratoren vorgestellt wurde (war es Scene 7?). Wenn so etwas schon geht, sollte doch irgendjemand auch Tools für Responsive Designs bauen können, bei denen der Designer/Entwickler darauf vertrauen kann, dass in “Cross-Browser” vernünftig aussieht?

    Gibby

    Antworten

  131. Vielen Dank für den schönen Artikel!
    Ich freu mich schon darauf, als Designer aktiv in den Konzeptionsprozess und die Entwicklungsphase eingebunden zu werden. Gerade bei großen webbasierten Projekten (die weit über eine “normale” Homepage hinausgehen) fühlt man sich immer eher als Feuerwehr oder als Störer, wenn man im Entwicklungsprozess einen neuen Vorschlag zur Verbesserung macht…
    Aber ich bin ganz optimistisch, dass ich die Welt trotzdem schöner machen kann ;) (Und mit dem Buch noch mehr ;))

    Antworten

  133. Hier noch ein super Videobeitrag, in dem Stephen Hay das Thema Workflow unter “Responsive Bedingungen” einmal beleuchtet. Ein interessanter Ansatz, der den klassischen Wir-machen-ein-Photoshop-Layout-und-adaptieren-dann-auf-andere-Medien-Weg ablösen könnte.
    Gerade im Zusammenspiel mit den angesprochenen Stiltafeln könnte das eine neue, aber vielversprechende Lösung sein:
    https://vimeo.com/45915667

    Antworten

  141. 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/

    Antworten

  142. 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

    Antworten

  143. 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.

    Antworten

  144. “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.

    Antworten

  146. *******************************************

    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.

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

    Antworten

  151. Aus meiner Erfahrung kann ich dazu auch beisteuern, dass bei der heutigen Komplexität der digitalen Produkte die Rolle des Designers am Ende der Produktionskette zeitlich und wirtschaftlich nicht tragbar ist. Der Designer sollte möglichst früh in den iterativen Prozess (viele kleine Schritte) einbezogen werden. Gute Grundlagen liefern dafür die Arbeitsmodelle aus dem Usability-Bereich oder dem Design-Thinking.
    https://www.penova.de/2012/10/design-thinking-kompakt/
    https://lucidii.com/?page_id=432
    Die andere wichtige Frage ist: Was soll der Designer alles können, um so zu arbeiten? Da spielen die Photoshop-Kenntnisse eher eine Nebenrolle, oder?

    Antworten

  152. Wie auch schon andere poste ich hier diesen Link denn ich denke er zeigt noch eine andere gute Möglichkeit aus.

    On off Canvas – Lösung

    Leider finde ich es schwer und aus der Parxis zeigt es sich das viele Kunden die Notwendigkeit nicht verstehen und auch den Mehraufwand nicht bezahlen wollen. Sagt mir mal einer ein gutes Argument damit der Kunde sagt ja ich zahle das!

    Oder gehört es nun zur Leistung dazu für die meisten Endgeräte etwas mit zu entwickeln?

    Lg Peet

    Antworten

  154. Ich kann mich meinen Vorednern nur anschliessen .. sehr interessant und aufschlussreich das Ganze. Mit WordPress und dem richtigen Theme funktioniert das responsive Webdesign schon mal ganz gut. Leider habe ich bisher noch kein Tool oder Programm gefunden dass alle Endgeräte simuliert und nach Fehlern oder Schwachstellen sucht. Habt Ihr eine Idee oder einen Tipp ?

    Antworten

  156. Responsive Design sollte inzwischen kein Ding mehr sein. Die Herhausforderung liegt darin bestehende Seiten mit minimalem Einsatz anzupassen. Ich bin auch kein Fan von effektvollen scripten, da ich lieber auf schnelle Ladezeiten setzte. Wenigstens ist Responsive Design 2013 endlich in aller Munde!

    Antworten

  160. Responsive Webdesign wird immer wichtiger. Die Anzahl mobiler Geräte steigt ständig an. Da Responsive Design die Anordnung der Elemente dynamisch anpasst, sollte man aufpassen, dass sich die Webseite auf allen Geräten ähnlich verhält.
    Ob eine Webagentur dass Wasserfallmodell nutzt oder andere Entwicklungszyklen ist eine wichtige Frage. Einen “besten” Entwicklungsprozess gibt es nicht. Das hhängt immer von Webagentur und Projekt ab.

    Antworten

  162. 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

    Antworten

  163. 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

    Antworten

  164. 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.

    Antworten

  167. 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 https://www.dreiwerken.de/

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

    Grüße aus dem Norden.
    Sandro

    Antworten

  168. 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

    Antworten

  169. 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.

    Antworten

  170. […] 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 […]

    Antworten

  173. Today is competition world and yes, this is the biggest challenge for a web designer to create website for mobile, desktop, watch etc.

    Antworten

  177. Wird tatsächlich zunehmend zur Herausforderung für uns als Webdesigner. Super Artikel! Vor allem Tablets, aber hier ist zum Glück die Anzahl der Besucher nicht so riesig.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

ÄHNLICHE BEITRÄGE

An den Anfang scrollen