Responsive Web Design am Beispiel von Virato (Social News Aggregator)
3 gefällt mir3,347 aufrufe
Das Dokument behandelt die Entstehung und Prinzipien des responsiven Webdesigns, einschließlich der Herausforderungen und Chancen, die sich aus dessen Anwendung auf verschiedene Geräte ergeben. Es hebt die Bedeutung einer mobiler ersten Designstrategie hervor und diskutiert Techniken wie Medienabfragen zur Anpassung von Layouts an unterschiedliche Bildschirmgrößen. Der Text schließt mit einem Ausblick auf zukünftige Entwicklungen im Bereich des responsiven Designs und betont die Notwendigkeit einer engen Zusammenarbeit zwischen Designern und Entwicklern.
![BOSTONGLOBE.COM – RELAUCH SEPT. 2011
http://upstatement.com/portfolio/boston-globe/
Responsive [Web]Design](https://image.slidesharecdn.com/responsivedesigndwcapitalmdermietzeljul2012-120711064456-phpapp01/85/Responsive-Web-Design-am-Beispiel-von-Virato-Social-News-Aggregator-1-320.jpg)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
- 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