System is processing data
Please download to view
...

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

by curtis-newton-gmbh-formerly-known-as-dw-capital-gmbh

on

Report

Category:

Design

Download: 0

Comment: 0

4,310

views

Comments

Description

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).
Download Responsive Web Design am Beispiel von Virato (Social News Aggregator)

Transcript

  • 1. BOSTONGLOBE.COM – RELAUCH SEPT. 2011http://upstatement.com/portfolio/boston-globe/ Responsive [Web]Design
  • 2. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee2
  • 3. Design für verschiedene DevicesDie neue IPTV-Welt von sevenload 4.0 (2010) – ein Beispiel für deviceübergreifendes Designmit identischem ContentFLASH- /HTML5-PLAYER IPAD IPHONE APPDESKTOP PHILLIPS NET TV NINTENDO WII3
  • 4. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee4
  • 5. Responsive WebdesignEin Design für alle DevicesETHAN MARCOTTERESPONSIVE WEBDESIGNVerlag: A Book Apart, New York, 2011http://www.abookapart.com/products/responsive-web-design» responsive (engl.)» ansprechbar; antwortend;reagierend; empfänglich {adj}5
  • 6. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee6
  • 7. Virato.deEin Social News Aggregator mit Responsive UI 7
  • 8. Virato.deResponsive Webdesign am Beispiel des Social News AggregatorsAPPLE IPHONEAMAZON KINDLE PORTRAIT MODE DESKTOP(320 PX BREIT)(600 PX BREIT)(>975 PX BREIT) 8
  • 9. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee9
  • 10. Entstehung von virato.deKonzeption Wireframes 10
  • 11. 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 Newsaggregatorsder Anmutung einer Printzeitung annä-hert und so die Kluft zwischen denbeiden Elementen schmälert.«blog.virato.de11
  • 12. Entstehung von virato.deAuswahl repräsentativer Device-Breiten, Festlegen der Breakpoints12
  • 13. Entstehung von virato.deVerhalten der Layoutraster / fließende Layoutänderung 13
  • 14. Entstehung von virato.deHTML/CSS: @mediaqueries und »Breakpoints« für stellvertretende Devices, »mobile first«@media only screen and (min-width:480px) {...}14
  • 15. Entstehung von virato.deSimulation im Browserfenster
  • 16. Entstehung von virato.deTesting auf verschiedenen DevicesHTTP://WWW.RESPONSINATOR.COM/?URL=WWW.VIRATO.DE16
  • 17. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee17
  • 18. 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 mitInformation Architecture, Designerstellung, HTML5 Boilerplate, ModernizrUmsetzung. >>> in »Wasserfall«- Workflowstrukturen schwierig » Ideal für kollaboratives Zusammenarbeiten von Designern und Entwicklern in iterativen Schritten 18
  • 19. Chancen und HerausforderungenResponsive Webdesign für alle Usecases?LINKEDIN IPAD APP – 95% HTML5/CSS, NORESPONSIVE DESIGNhttp://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering/19
  • 20. Design für verschiedene DevicesResponsive Webdesignvirato.deEntstehung von virato.deChancen und HerausforderungenAusblickResümee20
  • 21. 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
  • 22. AusblickOffenheit 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-firstway, if you`re not planning an adaptive or respon-sive redesign, if you still think we have a standardcanvas that ‘everybody’ uses, and if you can`t feelthe hot breath of mobile singeing the hairs on theback of your neck, you don`t deserve to be a desig-ner, or a consultant, or whatever these people thinkthey are.«Jeffrey Zeldman, founder of Happy Cog22
  • 23. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen AusblickResümee 23
  • 24. Resümee und Diskussion» Responsive Design bedeutet: 1 Design füralle Devices und Bildschirmauflösungen» Die Methode und der Begriff »ResponsiveWebdesign wurden von Ethan Marcotteerarbeitet und als erstes publiziert.» Basicdesign für eine Breite (z.B. Desktop),Entwicklung beginnt mit »Mobile first«» Aus dem Mobile-CSS werden im CSS dieDesigns für die anderen Devices erstelltYour team of designers is very small - is that thekey to its success?» Enges, kollaboratives ZusammenarbeitenI work with silicon designers, electronic and mecha-von Konzeptern, Designern und Entwicklern nical engineers, and I think you would struggle tonotwendig >> 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 älterengreat products.Browsern möglich durch HTML5 Boilerplateund Modernizr Sir Jonathan Ive, Design Lead Apple Inc., März 2011» Testing auf möglichst vielen native Devices24wichtig
  • 25. Kontakt: gro@gro.deWeb: www.gro.de/lecturesTwitter: @dermietzel
  • Fly UP