Responsive Web Design am Beispiel von Virato (Social News Aggregator)
-
Upload
curtis-newton-gmbh-formerly-known-as-dw-capital-gmbh -
Category
Design
-
view
4.313 -
download
0
description
Transcript of Responsive Web Design am Beispiel von Virato (Social News Aggregator)
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: [email protected]: www.gro.de/lecturesTwitter: @dermietzel