Responsive Design

Transcript

1. RESPONSIVE DESIGN Status Quo - iico Berlin 2013 - Peter Grosskopf
2. Vorstellung 2 Peter Grosskopf (32) Gründer Entwickler/ Designer Dozent Münster Geschäftsführer Zweitag GmbH
3. 3 Motivation
7. Mobile Browsing 12% 10% 8% 6% 4% 2% 0% 2010 2011 2012 2009 Quelle: NetMarketShare - Statista Okt 10,3% Mobile Browsing knackt die 10% Marke Weltweiter Anteil mobiler Endgeräte an der Internetnutzung 7
8. Mobile Browsing Anteil mobiler Endgeräte 0 5 10 15 20 Südamerika Europa Ozeanien Nordamerika Welt Afrika Asien Mai 2011 Mai 2012 Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012 nach Kontinenten Quelle: Statcounter - Statista 8
9. 9 required? Action
10. „Erst Strategie, dann CGI!“* Evaluation: Wer sind meine Nutzer? Welche Devices nutzen sie? In welchem Kontext nutzen sie mein Angebot? Danach: Auswahl der geeigneten Technologie Mobile-Strategie *Geflügeltes Wort aus den Anfangszeiten des Web :-) 10
11. Technologiewahl Je nach Zielsetzung und Strategie gibt es verschiedene technologische Ansätze mobile site responsive hybrid native ... 11
12. Responsive Design Begriff von Ethan Marcotte erstmals erwähnt in Artikel bei A List Apart Seine Definition: Flexibles Raster, Flexible Grafiken, Media Queries 12
13. Beispiele http://rbmaradio.com 13
14. Beispiele http://mediaqueri.es* *Inspirationen sammeln 14
15. Funktionsweise Einbau von Media Queries examples.css Media Queries = Abfrage von Medieneigenschaften, wie Display-Breite und Ausrichtung @media only screen and (max-width: 1050px) { /* ... */ } @media only screen and (max-device-width: 480px) { /* ... */ } @media only screen and (orientation: landscape) { /* ... */ } 15
16. Breakpoints Breite, an dem das Design umbricht Smartphone Portrait Mode < 480 High-End Smartphone, iPad < 1024 Restliche Geräte, Desktop, ... >= 1024 ... 16
17. Layout Patterns 17 Mostly Fluid Column Drop Layout Shifter Off Canvas http://www.lukew.com/ff/entry.asp?1514
18. Frameworks Helfen bei den ersten Schritten und bei der Fehlervermeidung foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap 18
19. Vorteile von RWD + Geringer Wartungsaufwand + Konsistente Markendarstellung + Keine Redirects + Zukunftssicher + Nur eine Technologie (HTML/CSS) 19
20. Nachteile von RWD - Nur online nutzbar - hoher Testaufwand - Browserunterstützung - Geräteoptimierung / Performance 20 - keine UI-Komponenten
21. Herausforderung Geräte nach wie vor unterschiedlich! Konsequenz: Unterstützung unterschiedlicher Hardware und Interaktionskonzepte => Nicht mit Responsive Design alleine abbildbar 21
22. RWD meets Adaptive 22 User Agent Sniffing / Feature Detection Smartphone Tablet Desktop ... Für Geräteklassen optimierte Versionen Responsive Responsive Responsive Responsive
23. Entwicklungsprozess Graceful Degredation Mobile 
 First • Design für Desktop-Nutzer • Aufwändiges Design schlanker machen • Performance? • Kompromisse • Design für Mobile-Nutzer • Flache/Simple Navigation • Wenig Grafiken/Slideshows - Performance optimiert • Kann auf Desktop aufgeblasen wirken 23
24. Entwicklungsprozess Darüber hinaus: Entwickler = Designer Mut zum Prototyping 24
25. Fazit Das Mobile Web ist da Mit Responsive Design lassen sich schnell Erfolge erzielen Aber: Design für alternative Endgeräte erfordert dedizierte Auseinandersetzung mit den Charakteristika des jeweiligen Gerätes Responsive Design erfordert ein Umdenken im Entwicklungsprozess Responsive Design ist der erste Schritt ins Mobile Web 25
26. 26 Danke