Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

am

  • 4,493 Views

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 ...

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).

Statistiken

Views

Gesamtviews
4,493
Views auf SlideShare
3,822
Views einbetten
671

Actions

Gefällt mir
3
Downloads
17
Kommentare
0

10 Einbettungen 671

http://createordie.de 434
http://blog.virato.de 87
http://entwickler.com 82
http://blog.curtis-newton.com 23
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
Mehr ...

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

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

  • 1. BOSTONGLOBE.COM – RELAUCH SEPT. 2011http://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 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
  • 4. Design für verschiedene DevicesResponsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 4
  • 5. 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
  • 6. Design für verschiedene Devices Responsive Webdesignvirato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 6
  • 7. Virato.deEin Social News Aggregator mit Responsive UI 7
  • 8. 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
  • 9. Design für verschiedene Devices Responsive Webdesign virato.deEntstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 9
  • 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 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.deAuswahl repräsentativer Device-Breiten, Festlegen der Breakpoints 12
  • 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.de Testing auf verschiedenen DevicesHTTP://WWW.RESPONSINATOR.COM/?URL=WWW.VIRATO.DE 16
  • 17. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.deChancen und Herausforderungen Ausblick Resümee 17
  • 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 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 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
  • 20. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und HerausforderungenAusblick Resümee 20
  • 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-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 AusblickResü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.deWeb: www.gro.de/lecturesTwitter: @dermietzel