Responsive Design Day IPC Spring 2013

Responsive Design: Wohin geht die Reise?
Kommentare

Responsive Web Design (RWD) ist einer der großen Hypes der letzten Jahre. Der Begriff wurde 2010 in einem Artikel von Ethan Marcotte erstmals genannt. Doch eigentlich ist das Thema an sich schon so alt, wie das Internet selbst. Viel mehr hat sich der Grad an geforderter Responsivität in den letzten Jahren verändert. Warum? Die Antwort ist zunächst simpel: Mobile Devices! Doch dahinter steckt große Komplexität. Woher der Trend RWD eigentlich rührt und wo er hingeht, davon vermittelten Sven Wolfermann (maddesigns) und Dennis Wilson (Freiberuflicher Entwickler & Consultant) auf dem Responsive Design Day der IPC Spring 2013 einen Eindruck.

Wie wurden Webseiten früher überhaupt gebaut? Sind wir wirklich so viel weiter als damals, als Tim Berners- Lee HTML entwickelte und das Internet begründete? Jein! Jede Technologie, die wir nutzen und als den Inbegriff des Fortschritts betrachten, hat ihren Ursprung in der Vergangenheit. Best Practices konnten erst zu solchen werden, indem aus den Fehlern der Vergangenheit gelernt wurde. Und so hat sich auch RWD Schritt für Schritt zu dem entwickelt, als was wir es heute kennen.

HTML wurde seit seiner Einführung 1989 kontinuierlich erweitert: Ab 1996 gab es Tables und Maps, Framesets kamen 1997, XML Structures ab 2000, HTML5 ermöglichte schließlich Multimedia Capabilities und all die heute üblichen „Fancy Features“. Bei den Ur-Webseiten ging es primär um die Darstellung von Text. Schicke Designs, waren nicht im Sinne des Erfinders: Inhalte sollte geteilt werden, nicht Layouts. Die Denke war wissenschaftlich geprägt. Doch schnell entdeckten Unternehmen und Institutionen das Internet als Medium der Selbstdarstellung. Designer mussten her und Layout stand nun verstärkt Usability gegenüber. Beim Layout-Driven Webdesign ging man im Grunde nach den gleichen Prinzipien vor, die bereit vom Print-Design bekannt waren: Fixe Layouts, denen sich der User anpassen musste, starke Nutzung von Bildern. Demgegenüber stand die Usability, die den Fokus auf Funktionalität setzte.  Jeder Ansatz für sich alleine war unausgegoren, doch in der Symbiose … Mit der Einführung von JavaScript ca. 1999 sollte diese Symbiose angestoßen werden. Sicher, es war ein beschwerlicher Weg. Dennis Wilson erinnert sich mit Grauen an Table Layouts mit Bildern: „Eines der dunkelsten Zeitalter des Webdesigns.“ Responsiveness? Fehlanzeige! Doch es besserte sich nun stetig, z.B. wurden mehr Browser ansprechbar. Der nächste Evolutionsschritt waren Flash Websites: Viele neue Design-Möglichkeiten, pixelgenaue Layouts, dafür kam der Content zu kurz, es gab Interpretationsunterschiede. Ab 2006 erfreute sich JavaScript langsam stärkerer Verbreitung, DIV & CSS 2 ermöglichten Farben und Hintergründe, aber alles war noch recht beschränkt. CSS Float Layouts brachten flexibleres Rendern als Tabellen. 2009 sollte es schließlich steil bergauf gehen:  „JavaScript war im Business angekommen“, so Wilson, Flash wurde von Apple fallen gelassen, HTML5 und CSS3 wurden verstärkt gepusht. Mit dem riesen Fortschritt folgte aber auch die riesen Herausforderung: Die Mobil-Flut brachte nun unüberschaubare Bandbreiten an Farbtiefen, Formfaktoren etc. Das Internet wurde nun verstärkt mobil genutzt, worauf Entwickler mit Rendering und  leichtgewichtigeren Webseiten reagieren mussten: Responsive for everyone! Fortan galt es, Ranges zu adaptieren, nicht Displays.

Responsive for everyone

  • Don’t adapt. Blend! Be like water my friend! Responsive heißt, eine Seite passt sich innerhalb einer Range von-bis dynamisch an – wie Wasser eben.
  • Deliver lean bedeutet das herauszugeben, was die Leute brauchen. To respond heißt auch gehorchen, also sich dem Device, von dem man aufgerufen wird, anpassen
  • Build up. Think mobile first: Es ist einfacher Inhalte und Design von klein auf groß zu ziehen, als umgekehrt.
  • Keep your message. Don’t drop content: Inhalte beibehalten, egal welche Range

Aber Trends, wie RWD zu einem wurde, seien eigentlich Gift, findet Sven Wolfermann. Denn: „Sie verdecken all das, was eigentlich dahinter steckt, und im Fall von RWD sind das komplexe Workflows, ein ganz neue Denken.“ Das Internet hat sich verändert durch die Art und Weise, wie wir es konsumieren- und das findet vermehrt auf Smartphones oder Tablets und weniger auf dem klassischen Desktop statt. Manche raten, dass Web Apps nur noch nach dem Motto „Mobile first, web second“ designed werden sollten. Ganz so simpel sei es aber nicht, so Wolfermann: „Worum handelt es sich denn bei Mobile?“ Woher weiß man heute, wie, wo und womit User das Web aufrufen? Es gibt zwar verbreitete Breakpoints: Ein Smartphone im Portrait-Modus hat 320 Pixel , 480 im Landscape, ein Tablet wird im Landscape mit 768 Pixeln kalkuliert, 1024 Pixel haben einige größere Tablets, Notebooks und Desktops, 1200 große Bildschirme. Soweit so gut, aber was ist mit den 360 Pixeln eines Samsung Galaxy S3? 600 Pixel der 7-Zoll-Tablets im Portrait-Modus, den 568 Pixeln des iPhone 5 im Landscape? Und wie sehen die Breakpoints der Zukunft aus? Retina-Displays, unvorhersehbare neue Viewports und und und? „Breakpoints dürfen sich heute nicht mehr nach Gerät richten, sondern nach meinem Inhalt“, so Wolfermann. Dementsprechend muss auch der Responisve-Web-Design-Prozess überdacht werden: Er muss iterativer werden, so dass man flexibel auf Veränderungen reagieren kann.

Mobile first heute

  • Planung, Konzeption, Umsetzung mit Fokus auf mobilen Geräten
  • Design für Touch,
  • Konzentrations auf das Wesentliche, wichtiger Inhalt zuerst
  • auf den wachsenden Mobile Markt vorbereitet sein
  • neueste Technik nutzen und auf Innovationen reagieren– sowohl Broswertechniken als auch Mobiltechniken
  • keine Degradierung der Inhalte: Mobile first = Content first

„Desto kleiner das Gerät, desto wichtiger ist es den wichtigen Inhalt an den Anfang zu packen.“ Und vor allem: „Das Testing, dass im gewöhnlichen Workflow als vorletzter Schritt erfolgt ist, sollte nun schon früh in der Entwicklungsphase beginnen.“

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -