In diesem Kurzvortrag gibt Markus Dermietzel (Senior User Experience Designer bei curtis newton gmbh, vor 2013 bekannt als dw capital gmbh) Einblicke in das Responsive Web Design des Social News Aggregators virato.de. Dazu erschien im Juli 2012 ein Online-Artikel auf WEAVE.de: http://www.weave.de/weblog/interview-mit-markus-dermietzel-zu-responsive-design-beim-relaunch-von-virato. Bei Fragen melden Sie sich bei press@curtis-newton.com (Chérine De Bruijn).

1. BOSTONGLOBE.COM – RELAUCH SEPT. 2011
http://upstatement.com/portfolio/boston-globe/
Responsive [Web]Design

2. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
2

3. Design für verschiedene Devices
Die neue IPTV-Welt von sevenload 4.0 (2010) – ein Beispiel für deviceübergreifendes Design
mit identischem Content
FLASH- /HTML5-PLAYER
IPAD
IPHONE APP
DESKTOP
PHILLIPS NET TV
NINTENDO WII
3

4. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
4

5. Responsive Webdesign
Ein Design für alle Devices
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}
5

6. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
6

7. Virato.de
Ein Social News Aggregator mit Responsive UI
7

8. Virato.de
Responsive Webdesign am Beispiel des Social News Aggregators
APPLE IPHONE AMAZON KINDLE PORTRAIT MODE DESKTOP
(320 PX BREIT) (600 PX BREIT) (>975 PX BREIT) 8

9. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
9

10. Entstehung von virato.de
Konzeption Wireframes
10

11. Entstehung von virato.de
Basicdesign Screens für den Desktop / Style: Newspaper Retro-Look
»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
11

12. Entstehung von virato.de
Auswahl repräsentativer Device-Breiten, Festlegen der Breakpoints
12

13. Entstehung von virato.de
Verhalten der Layoutraster / fließende Layoutänderung
13

14. Entstehung von virato.de
HTML/CSS: @mediaqueries und »Breakpoints« für stellvertretende Devices, »mobile first«
@media only screen and (min-width:480px) {...}
14

15. Entstehung von virato.de
Simulation im Browserfenster

16. Entstehung von virato.de
Testing auf verschiedenen Devices
HTTP://WWW.RESPONSINATOR.COM/?URL=WWW.VIRATO.DE
16

17. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
17

18. Chancen und Herausforderungen
Responsive Webdesign Vor- und Nachteile
+ –
» Ein Design für alle Devices funktioniert » Ein Design für alle Devices funktioniert
immer und ist die Zukunft (Meinung u.a. nicht wenn der Usecase auf den Devices
Jeffrey Zeldman) verschieden ist (Meinung u.a. linkedIn und
Jacob Nielsen)
» Möglichkeiten der Weiterverwendung für
Hybrid Apps (linkedIn iPad App wurde zu » Anpassungen im Interaction Design sind je
95% in HTML5/CSS erstellt) nach Device nötig.
» Immer noch experimentelles Stadium, aber » Herausforderung Projektmanagement und
grundsätzlich machbar, insbesondere durch klassischer Aufteilung von Konzeption/
Kompatibiltät mit älteren Browsern mit Information Architecture, Designerstellung,
HTML5 Boilerplate, Modernizr Umsetzung. >>> in »Wasserfall«-
Workflowstrukturen schwierig
» Ideal für kollaboratives Zusammenarbeiten
von Designern und Entwicklern in iterativen
Schritten 18

19. Chancen und Herausforderungen
Responsive Webdesign für alle Usecases?
LINKEDIN IPAD APP – 95% HTML5/CSS, NO
RESPONSIVE DESIGN
http://venturebeat.com/2012/05/02/linkedin-
ipad-app-engineering/
19

20. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
20

21. Ausblick
Offenheit für Veränderungen, für neue Devices
INTERACTIVE MOBILE PROJECTORS – MOTIONBEAM (DISNEY RESEARCH 2012) GESTENBASIERTES INTERFACE IM FILM »MINORITY REPORT« (2002)
Prognostiziert für 2014 Bereits möglich z.B. mit Kinect
21

22. Ausblick
Offenheit für Veränderungen, für alle Bildschirmauflösungen
»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
22

23. Design für verschiedene Devices
Responsive Webdesign
virato.de
Entstehung von virato.de
Chancen und Herausforderungen
Ausblick
Resümee
23

24. 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 Your team of designers is very small - is that the
key to its success?
» Enges, kollaboratives Zusammenarbeiten
I work with silicon designers, electronic and mecha-
von Konzeptern, Designern und Entwicklern nical engineers, and I think you would struggle to
notwendig >> Bestes Produkt determine who does what when we get together.
We’re located together, we share the same goal,
have exactly the same preoccupation with making
» Responsive Design auch auf älteren
great products.
Browsern möglich durch HTML5 Boilerplate
und Modernizr Sir Jonathan Ive, Design Lead Apple Inc., März 2011
» Testing auf möglichst vielen native Devices 24
wichtig

25. Kontakt: gro@gro.de
Web: www.gro.de/lectures
Twitter: @dermietzel