RESPONSIVE DESIGN

www.canudo.de/responsive-design

TYLL RIEDEL

Medienentwickler @Canudo GmbH
  • Mediengestalter für Digital- & Printmedien
  • B.A. Multimedia Production an der FH-Kiel


TYLL.RIEDEL@CANUDO.DE

RESPON... WAS?

  • responsive = reaktionsfähig
  • Ethan Marcotte (Artikel von 2010)
  • responsive Architektur

  • Ein flexibles Gestaltungsraster.
  • Flexible Bilder oder Bilder die in einem flexiblen Kontext funktionieren.
  • Media Queries: Das Tüpfelchen auf dem i für das responsive Design. Media Queries erlauben es, dass Design im Kontext für verschiedene Bildschirmgrößen optimiert darzustellen.
© Brad Frost - The Principles of Adaptive Design

RESPONSIVE DESIGN IN 5 GIFs

RESPONSIVE / ADAPTIV

© Sandijs Ruluks
BOSTON GLOBE / GUARDIAN

RELATIV / STATISCH

© Sandijs Ruluks

BREAKPOINTS

© Sandijs Ruluks

MAXIMAL- & MINIMALWERTE

© Sandijs Ruluks

VEKTORGRAFIKEN

© Sandijs Ruluks

WAS ÄNDERT SICH?

Für den Rezipienten? für den Produzenten?

STATISCHER (KLASSISCHER) WORKFLOW

© Jonas Hellwig

VORTEILE

  • Gewohnter Ablauf
  • Es kann stationsweise gearbeitet werden.

NACHTEILE

  • Überflüssige Arbeiten
  • Falsche Erwartungshaltungen
  • Interaktionen / Animationen lassen sich nicht darstellen
  • Fehlerhafte Planung führt zu aufwändigen Korrekturen

FLEXIBLER WORKFLOW

© Jonas Hellwig

VORTEILE

  • Flexibles Design, Interaktionen / Animationen lassen sich in einem frühen Stadium darstellen
  • Design und Struktur folgen den Anforderungen des Inhalts (FfF)
  • Konzeptionelle Fehler können frühzeitig erkannt und gelöst werden
  • Design und Code können parallel erstellt werden

NACHTEILE

  • Umdenken aller Beteiligten
  • Designer und Entwickler müssen Hand in Hand arbeiten (Im Optimalfall ein und dieselbe Person)
  • Geber der Inhalte wird mehr gefordert

LET'S GET PHYSICAL

RESPONSIVE

ELCQ.DE


STATISCH

GEMEINSAM-GEGEN-SPIELMANIPULATION.DE/etraining

LESESTOFF

SMASHINGMAGAZINE.COM/EBOOKS

BLOG.KULTURBANAUSE.DE