Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung

Seite 3 / 3

Der Superheld: „Progressive Enhancement“

Bei der progressiven Verbesserung (Progressive Enhancement) geht es hauptsächlich um Trennung. Wir trennen Markup von CSS, wir trennen Inhalt von Design, wir trennen JavaScript von beidem und wir sollen sogar CSS selbst trennen. Die Idee hinter diesen Trennungen ist, dass der Inhalt immer anzeigbar und die Kernfunktionalität gegeben sein muss, egal ob JavaScript deaktiviert wurde oder ob das CSS für das gewünschte Medium (zum Beispiel Papier) nicht geeignet ist.

Die eigentliche Verbesserung beim Progressive Enhancement bezieht sich auf die Erfahrung, die ein Benutzer mit eurer Website oder App macht. Die Darstellung des Inhalts und die Funktionalität des Webprojektes müssen immer gewährleistet sein, erst dann können erfahrungsverbessernde Maßnahmen gesetzt werden. Der Fokus liegt also auf dem Inhalt, nicht auf der Darstellung: Information muss in jedem Browser darstellbar sein.

Gegenüberstellung „Progressive Enhancement“ vs. „Graceful Degradation“ am Beispiel von Mobile-First.
Gegenüberstellung „Progressive Enhancement“ vs. „Graceful Degradation“ am Beispiel von Mobile-First.

Somit klärt sich auch die Frage, warum Aaron Gustafoson in seinem Buch nicht von „Responsive Web-Design“ spricht. Für ihn ist der „Adaptive-Web-Design“-Ansatz ein Synonym für „Progressive Enhancement“. Das heisst, es steht nicht die Darstellung im Vordergrund, sondern die Barrierefreiheit.

Der vermeintliche Bösewicht: „Graceful Degradation“

Als das Gegenteil kann man die „Graceful Degradation“ bezeichnen. Bei diesem Denkansatz entwickelt man für moderne Browser, und sollte ein älterer Browser die Website ausgeben müssen, wird eine geringere Anwendererfahrung in Kauf genommen. Erinnert ihr euch noch? „Bestimmt für Internet Explorer 6 mit einer Auflösung von 1024x768“?

Und was ist jetzt eigentlich Mobile-First?

Ganz im Sinne des „Progressive Enhancement“ steht auch hier der Inhalt im Vordergrund. Wobei Mobile-First ein Denkmuster ist, bei dem vom Kleinen ins Große gedacht wird. Als Entwickler startet man also bei einer kleinen Auflösung und muss entscheiden, welcher Inhalt initial angezeigt wird und wie der Informationsgehalt bei einer Vergrößerung des Viewports mitwachsen kann.

Mobile-First ist somit stark mit der Informationsarchitektur beziehungsweise der Content-Strategie verknüpft und bezieht sich eher darauf, was angezeigt wird und nicht, wie es technisch umgesetzt werden sollte. Es ist daher eher ein Denkansatz als ein technisches Design-Pattern.

Luke Wroblewski über Mobile-First. (Foto: SuperPope / flickr.com, Lizenz: CC-BY)

Dieser Ansatz zwingt Entwickler also zu einem Umdenken hin zum eigentlichen Informationsgehalt und weg von technischen Spielereien – und das ist gut so.

Fazit

Durch die stetige Weiterentwicklung des Webs stößt man auch als Entwickler auf Herausforderungen, die ein Umdenken von bestehenden Paradigmen fordern. Beginnend vor mehr als zehn Jahren, als „wir“ uns vom Wahn der Kontrolle über die „Canvas“ befreit haben, zum bewussten Entwickeln für verschiedene Auflösungen und Viewports bis hin zur Barrierefreiheit, die uns lehrt, dass Inhalte eigentlich wichtiger sein sollten als die Darstellung selbst und „uns“ somit von einer würdevollen Herabstufung zu einer progressiven Verbesserung von unseren Webprojekten führten.

Was wird der nächste Paradigmenwechsel sein, was meint ihr?

Startseite
  • Seite:
  • 1
  • 2
  • 3

Bitte beachte unsere Community-Richtlinien

10 Reaktionen
Frank

@eigentor: Das ist es ja, der Brotkasten bleibt meistens leer, wenn man immer seine Überzeugung durchsetzen will. Aber wenigstens kann man meistens die schlimmsten Unfälle vermeiden.

@Lars Mielke: Typographie und die Regeln der Präsentation gelten auch im Webdesign und auch für Responsive Webdesign. Aber anders als im Buchdruck muss man sich daran gewöhnen, dass man keine feste Länge x Breite mehr hat.
Aber eine Seite kann sowohl für Mobiles als auch für PCs gut gestaltet sein.

Meistens ist es der Kunde, der mit eigenen Inhalten die Seite verunstaltet.
Es ist schon viel wert, wenn man ihnen rote, gelbe, grüne und blaue Textpassagen in einem Absatz abgewöhnen kann. Womöglich noch blinkend in Fettschrift.

Andererseits machen es sich manche Agenturen recht einfach, indem sie Textwüsten bauen. Eine Überschrift und der Rest ist Fließtext ohne Zwischenüberschriften oder irgendwelche Auflockerungen für das Auge.
Das ist dann im wahrsten Sinne des Wortes billig und deren Kunden halten es für günstig.
Aber so ist es halt.

Antworten
eigentor

Und noch einer
@Frank: Wenn dich das so stört, gäbe es einen Ausweg. Dann müßtest du allerdings Überzeugung vor Brötchenverdienen stellen. Ich mache es häufiger, und der Brotkasten ist schon mal leer.

Konkret so: Projekte ablehnen, bei denen der Kunde sich nicht auf den moderneren Ansatz einläßt.

Antworten
eigentor

aha, nun hab sogar ich den Unterschied zwischen adaptive und Responsive verstanden.
Das war für mich immer Nebel.
Schöner Artikel.

Antworten
Lars Mielke

Und mit diesem Kommentar noch einmal eine Rolle rückwärts ...

Mir sträuben sich innerlich und äußerlich die Haare, wenn behauptet wird, die größte Leistung des Webdesign bestünde darin, sich aus der Knechtschaft der Typographie und des Buchdrucks befreit zu haben. Ich möchte hinsichtlich dieses Irrglaubens auch nicht weiter ausholen, aber mir ist eine vom Layout her unflexible aber gut gestaltete Webseite lieber als diese Zumutungen, die ich im Umfeld der ganzen "wir machen es jetzt alles anders, weil wir es endlich können" Designer.

Antworten
David Hellmann

Wenn ich das so lese machen wir nur noch weiße Textseiten...

Antworten
Frank

Die gute Nachricht les ich wohl, allein es gibt die Kunden und die Grafikdesign-Büros :-/

Was nützen all die schlauen Gedanken die man sich macht, wenn der Kunde sich dann für das "Bunte" der Konkurrenz entscheidet, weil es billiger ist und einfach schön aus sieht.
Den Ansatz mit Responsive Design hatten wir schon damals im "Tabellendesign", als man versuchte, flexible HTML-Tabellen aufzubauen, die dank mangels hochauflösender Monitore nicht "unendlich" breit werden konnten aber durch "Grafikbremsen" auch nicht unendlich klein.

Damals gab es "pixelgenaue" Designumsetzungen und was soll ich sagen?
Auch heute noch wird von Agenturen und Grafikbüros gefordert, dass das Design pixelgenau umgesetzt wird (hier müsste ich drei !!! dahinter setzen, weil es wirklich welche gibt, die mit dem Pixelmesstool am Bildschirm die pixelgenaue Umsetzung der Abstände und Größen prüfen).

Solange sogar größere Kunden lieber die "schöne Bunte ich-bin-auch-im-Web Seite" wählen und absolut nicht verstehen was differenzierte Besucheransprache heißt, wird man schöne bunte Seiten machen.
Solange Grafiker nur Grafik können und keine Ahnung vom Web und den technischen Möglichkeiten aber auch Einschränkungen haben, werden wir auch pixelgenaue Designs basteln ("basteln" trifft es richtig), weil der Workflow falsch ist: Denn nicht der Grafiker mit oft wenig Ahnung vom Webdesign sollte die Vorgaben machen, sondern derjenige der das Web-Konzept entwirft und das System und die Möglichkeiten kennt.

Die Realität ist leider die, dass wir immer noch bunte Druckprospekte möglichst 1 zu 1 ins Web umsetzen (müssen), dass Kunden sich stets vom Bunten blenden lassen und dass "Konzeption" nichts wert ist, weil man es als Laie nicht sieht, nicht greifen kann und es trotzdem Geld kosten soll.

Ich glaube, dass ein nächster Paradigmenwechsel die "differenzierte Besucheransprache" sein könnte. Besucher mit Mobilgeräten sind eventuell nicht die gleiche Zielgruppe wie Besucher mit Tower-PC und großen Monitoren.
Das Design könnte sich entsprechend so anpassen, dass Informationen die für Mobilgeräte-Nutzer erfahrungsgemäß weniger wichtig sind, nur am Rande zu finden sind. Jedoch Besucher die eher im Büro sitzen, haben vielleicht andere Informations-Schwerpunkte die sie finden möchten.

Antworten
dot_SB

@Sabine: Ich hoffe, dass dies schon jetzt stattfindet. Jeder Responsive Konzeption sollte eine Content-Strategie und -Hierachisierung vorangehen, sonst verfällt Responsive Design wieder zu einem dieser visuellen Nichtsnutz-Effekte.

Antworten
Sebastian Frost

Gutes RoundUp, die Grafik bzw. Erklärung zu Progressive Enhancement bzw. Graceful Degradation trifft dennoch nicht ganz den Kern (ist sogar etwas irreführend), hatte das hier schon mal angesprochen: http://blog.kulturbanause.de/2013/08/mobile-first-progressive-enhancement/

Antworten
Sabine

Content First so ungefähr 2017

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.