Responsive Design by Peter Grosskopf
-
Upload
peter-grosskopf -
Category
Technology
-
view
525 -
download
0
description
Transcript of Responsive Design by Peter Grosskopf
![Page 1: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/1.jpg)
RESPONSIVE DESIGNStatus Quo - iico Berlin 2013 - Peter Grosskopf
![Page 2: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/2.jpg)
Vorstellung
2
Peter Grosskopf (32)
Gründer Entwickler/Designer Dozent Münster
Geschäftsführer Zweitag GmbH
![Page 3: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/3.jpg)
3
Motivation
![Page 4: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/4.jpg)
4
![Page 5: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/5.jpg)
5
![Page 6: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/6.jpg)
6
![Page 7: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/7.jpg)
Mobile Browsing
12%
10%
8%
6%
4%
2%
0%2010 2011 20122009
Quelle: NetMarketShare - Statista
Okt 10,3%
Mobile Browsing knackt die 10% Marke Weltweiter Anteil mobiler Endgeräte an der Internetnutzung
7
![Page 8: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/8.jpg)
Mobile Browsing
0
5
10
15
20
Südamerika Europa Ozeanien Nordamerika Welt Afrika Asien
Ante
il m
obile
r En
dger
äte
Mai 2011 Mai 2012
Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012 nach Kontinenten
Quelle: Statcounter - Statista
8
![Page 9: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/9.jpg)
9
required?Action
![Page 10: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/10.jpg)
„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
![Page 11: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/11.jpg)
Technologiewahl
Je nach Zielsetzung und Strategie gibt es verschiedene technologische Ansätze
mobile site responsive hybrid native ...
11
![Page 12: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/12.jpg)
Responsive Design
Begriff von Ethan Marcotte erstmals erwähnt in Artikel bei A List Apart
Seine Definition: Flexibles Raster, Flexible Grafiken, Media Queries
12
![Page 13: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/13.jpg)
Beispiele http://rbmaradio.com
13
![Page 14: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/14.jpg)
Beispiele http://mediaqueri.es*
*Inspirationen sammeln
14
![Page 15: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/15.jpg)
FunktionsweiseEinbau 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
![Page 16: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/16.jpg)
Breakpoints
Breite, an dem das Design umbricht
Smartphone Portrait Mode< 480
High-End Smartphone, iPad< 1024
Restliche Geräte, Desktop, ...>= 1024...
16
![Page 17: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/17.jpg)
Layout Patterns
17
Mostly Fluid Column Drop
Layout Shifter Off Canvas
http://www.lukew.com/ff/entry.asp?1514
![Page 18: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/18.jpg)
Frameworks
Helfen bei den ersten Schritten und bei der
Fehlervermeidung
foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap18
![Page 19: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/19.jpg)
Vorteile von RWD+ Geringer Wartungsaufwand
+ Konsistente Markendarstellung
+ Keine Redirects
+ Zukunftssicher
+ Nur eine Technologie (HTML/CSS)19
![Page 20: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/20.jpg)
Nachteile von RWD- Nur online nutzbar
- hoher Testaufwand
- Browserunterstützung
- Geräteoptimierung / Performance
20
- keine UI-Komponenten
![Page 21: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/21.jpg)
HerausforderungGeräte nach wie vor unterschiedlich!
Konsequenz:Unterstützung unterschiedlicher Hardware und Interaktionskonzepte=> Nicht mit Responsive Design alleine abbildbar
21
![Page 22: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/22.jpg)
RWD meets Adaptive
22
User Agent Sniffing / Feature Detection
Smartphone Tablet Desktop ...
Für Geräteklassen optimierte Versionen
ResponsiveResponsiveResponsiveResponsive
![Page 23: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/23.jpg)
EntwicklungsprozessGraceful
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
![Page 24: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/24.jpg)
Entwicklungsprozess
Darüber hinaus:
Entwickler = Designer Mut zum Prototyping
24
![Page 25: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/25.jpg)
FazitDas 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
![Page 26: Responsive Design by Peter Grosskopf](https://reader034.fdocuments.net/reader034/viewer/2022052606/558a5411d8b42a7c1e8b45e0/html5/thumbnails/26.jpg)
26
Danke