Responsive Web Design am Beispiel von Virato (Social News Aggregator)

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

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

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

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

Responsive WebdesignEin 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

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

Virato.deEin Social News Aggregator mit Responsive UI 7

Virato.deResponsive Webdesign am Beispiel des Social News AggregatorsAPPLE IPHONE AMAZON KINDLE PORTRAIT MODE DESKTOP(320 PX BREIT) (600 PX BREIT) (>975 PX BREIT) 8

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

Entstehung von virato.deKonzeption Wireframes 10

Entstehung von virato.deBasicdesign 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

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

Entstehung von virato.deVerhalten der Layoutraster / ﬂießende Layoutänderung 13

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

Entstehung von virato.deSimulation im Browserfenster

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

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

Chancen und HerausforderungenResponsive 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

Chancen und HerausforderungenResponsive 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

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

AusblickOffenheit für Veränderungen, für neue DevicesINTERACTIVE 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

AusblickOffenheit für Veränderungen, für alle Bildschirmauﬂö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 responsive 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

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

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

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

http://createordie.de	434
http://entwickler.com	82
http://blog.virato.de	82
http://blog.curtis-newton.com	22
http://it-republik.de	20
http://entwickler.de	16
http://businesstechnologydays.de	3
http://entwickler-magazin.de	2
https://www.entwickler.com	2
https://entwicklertage.de	2

Responsive Web Design am Beispiel von Virato (Social News Aggregator)

by curtis newton gmbh (formerly known as dw capital gmbh) on Jul 11, 2012

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 665

Statistics

Responsive Web Design am Beispiel von Virato (Social News Aggregator) Presentation Transcript