Responsive [Web]Design

BOSTONGLOBE.COM – RELAUCH SEPT. 2011

http://upstatement.com/portfolio/boston-globe/

2

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

3

Design für verschiedene DevicesDie neue IPTV-Welt von sevenload 4.0 (2010) – ein Beispiel für deviceübergreifendes Design

mit identischem Content

PHILLIPS NET TV

IPAD

NINTENDO WII

IPHONE APP

FLASH- /HTML5-PLAYER

DESKTOP

4

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

5

Ein Design für alle Devices

Responsive Webdesign

ETHAN MARCOTTE

RESPONSIVE WEBDESIGN

Verlag: A Book Apart, New York, 2011

http://www.abookapart.com/products/responsive-web-design

responsive (engl.) »ansprechbar; antwortend; »reagierend; empfänglich {adj}

6

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

7

Ein Social News Aggregator mit Responsive UI

Virato.de

8

Responsive Webdesign am Beispiel des Social News Aggregators

Virato.de

APPLE IPHONE

(320 PX BREIT)

AMAZON KINDLE PORTRAIT MODE

(600 PX BREIT)

DESKTOP

(>975 PX BREIT)

9

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

10

Konzeption Wireframes

Entstehung von virato.de

11

»Ein emotional aufgeladener Retro-Zeitungslook mit Grunge-Elementen, der das Design des Newsaggregators der Anmutung einer Printzeitung annä-hert und so die Kluft zwischen den beiden Elementen schmälert.«

blog.virato.de

Basicdesign Screens für den Desktop / Style: Newspaper Retro-Look

Entstehung von virato.de

12

Auswahl repräsentativer Device-Breiten, Festlegen der Breakpoints

Entstehung von virato.de

13

Verhalten der Layoutraster / fl ießende Layoutänderung

Entstehung von virato.de

14

HTML/CSS: @mediaqueries und »Breakpoints« für stellvertretende Devices, »mobile fi rst«

Entstehung von virato.de

@media only screen and (min-width:480px) {...}

Entstehung von virato.deSimulation im Browserfenster

16

Testing auf verschiedenen Devices

Entstehung von virato.de

HTTP://WWW.RESPONSINATOR.COM/?URL=WWW.VIRATO.DE

17

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

18

Responsive Webdesign Vor- und Nachteile

Chancen und Herausforderungen

Ein Design für alle Devices funktioniert »nicht wenn der Usecase auf den Devices

verschieden ist (Meinung u.a. linkedIn und

Jacob Nielsen)

Anpassungen im Interaction Design sind je »nach Device nötig.

Herausforderung Projektmanagement und »klassischer Aufteilung von Konzeption/

Information Architecture, Designerstellung,

Umsetzung. >>> in »Wasserfall«-

Workflowstrukturen schwierig

Ein Design für alle Devices funktioniert »immer und ist die Zukunft (Meinung u.a.

Jeffrey Zeldman)

Möglichkeiten der Weiterverwendung für »Hybrid Apps (linkedIn iPad App wurde zu

95% in HTML5/CSS erstellt)

Immer noch experimentelles Stadium, aber »grundsätzlich machbar, insbesondere durch

Kompatibiltät mit älteren Browsern mit

HTML5 Boilerplate, Modernizr

Ideal für kollaboratives Zusammenarbeiten »von Designern und Entwicklern in iterativen

Schritten

+ –

19

Responsive Webdesign für alle Usecases?

Chancen und Herausforderungen

LINKEDIN IPAD APP – 95% HTML5/CSS, NO

RESPONSIVE DESIGN

http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering/

20

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

21

Offenheit für Veränderungen, für neue Devices

Ausblick

INTERACTIVE MOBILE PROJECTORS – MOTIONBEAM (DISNEY RESEARCH 2012)

Prognostiziert für 2014GESTENBASIERTES INTERFACE IM FILM »MINORITY REPORT« (2002)

Bereits möglich z.B. mit Kinect

22

»The most popular size is every size.

If you‹re not thinking in a mobile-first, content-first way, if you`re not planning an adaptive or respon-sive redesign, if you still think we have a standard canvas that ‘everybody’ uses, and if you can`t feel the hot breath of mobile singeing the hairs on the back of your neck, you don`t deserve to be a desig-ner, or a consultant, or whatever these people think they are.«

Jeffrey Zeldman, founder of Happy Cog

Offenheit für Veränderungen, für alle Bildschirmaufl ösungen

Ausblick

23

Design für verschiedene Devices

Responsive Webdesign

virato.de

Entstehung von virato.de

Chancen und Herausforderungen

Ausblick

Resümee

24

Your team of designers is very small - is that the

key to its success?

I work with silicon designers, electronic and mecha-nical engineers, and I think you would struggle to determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making great products.

Sir Jonathan Ive, Design Lead Apple Inc., März 2011

Resümee und Diskussion

Responsive Design bedeutet: 1 Design für »alle Devices und Bildschirmauflösungen

Die Methode und der Begriff »Responsive »Webdesign wurden von Ethan Marcotte

erarbeitet und als erstes publiziert.

Basicdesign für eine Breite (z.B. Desktop), »Entwicklung beginnt mit »Mobile first«

Aus dem Mobile-CSS werden im CSS die »Designs für die anderen Devices erstellt

Enges, kollaboratives Zusammenarbeiten »von Konzeptern, Designern und Entwicklern

notwendig >> Bestes Produkt

Responsive Design auch auf älteren »Browsern möglich durch HTML5 Boilerplate

und Modernizr

Testing auf möglichst vielen native Devices »wichtig

Kontakt: gro@gro.deWeb: www.gro.de/lecturesTwitter: @dermietzel