RESPONSIVE DESIGNStatus Quo - iico Berlin 2013 - Peter Grosskopf
Vorstellung2Peter Grosskopf (32)GründerEntwickler/DesignerDozent MünsterGeschäftsführer Zweitag GmbH
3Motivation
4
5
6
Mobile Browsing12%10%8%6%4%2%0%2010 2011 20122009Quelle: NetMarketShare - StatistaOkt 10,3%Mobile Browsing knackt die 10% ...
Mobile Browsing05101520Südamerika Europa Ozeanien Nordamerika Welt Afrika AsienAnteilmobilerEndgeräteMai 2011 Mai 2012Ante...
9required?Action
„Erst Strategie, dann CGI!“*Evaluation:Wer sind meine Nutzer?Welche Devices nutzen sie?In welchem Kontext nutzen sie mein ...
TechnologiewahlJe nach Zielsetzung und Strategie gibtes verschiedene technologische Ansätzemobile site responsive hybrid n...
Responsive DesignBegriff von Ethan Marcotte erstmalserwähnt in Artikel bei A List ApartSeine Definition: Flexibles Raster,F...
Beispiele http://rbmaradio.com13
Beispiele http://mediaqueri.es**Inspirationen sammeln14
FunktionsweiseEinbau von Media Queriesexamples.cssMedia Queries = Abfrage von Medieneigenschaften,wie Display-Breite und A...
BreakpointsBreite, an dem das Design umbrichtSmartphone Portrait Mode< 480High-End Smartphone, iPad< 1024Restliche Geräte,...
Layout Patterns17Mostly Fluid Column DropLayout Shifter Off Canvashttp://www.lukew.com/ff/entry.asp?1514
FrameworksHelfen bei den erstenSchritten und bei derFehlervermeidungfoundation.zurb.com atthewhartman.github.io/base twitt...
Vorteile von RWD+ Geringer Wartungsaufwand+ Konsistente Markendarstellung+ Keine Redirects+ Zukunftssicher+ Nur eine Techn...
Nachteile von RWD- Nur online nutzbar- hoher Testaufwand- Browserunterstützung- Geräteoptimierung / Performance20- keine U...
HerausforderungGeräte nach wie vor unterschiedlich!Konsequenz:Unterstützung unterschiedlicher Hardware undInteraktionskonz...
RWD meets Adaptive22User Agent Sniffing / Feature DetectionSmartphone Tablet Desktop ...Für Geräteklassen optimierte Versio...
EntwicklungsprozessGracefulDegredationMobileFirst• Design für Desktop-Nutzer• Aufwändiges Design schlanker machen• Perform...
EntwicklungsprozessDarüber hinaus:Entwickler = Designer Mut zum Prototyping24
FazitDas Mobile Web ist daMit Responsive Design lassen sich schnellErfolge erzielenAber: Design für alternative Endgerätee...
26Danke
Upcoming SlideShare
Loading in...5
×

Responsive Design by Peter Grosskopf

543

Published on

Responsive Design ist momentan in aller Munde. Häufig wird es gleichgesetzt mit Design für mobile Geräte. Dabei geht es eigentlich darum Design zu schaffen, welches unabhängig vom verwendeten Endgerät ist. Endgeräte sind heutzutage neben klassischen Desktopsystemen und Laptops, zunehmend auch mobile Endgeräte wie Smartphones und Tablets, welche andere Eigenschaften und Voraussetzungen haben, die es in Bezug auf Design und Usability zu berücksichtigen gilt.

Der Vortrag zeigt auf, welche Chancen sich für Unternehmen ergeben, die mittels Responsive Design ihre Webangebote und Applikationen auf die gewandelte Nutzerschaft optimieren. Dabei werden sowohl technische Grundlagen vermittelt, aber auch fortgeschrittene Fragestellungen ("Mobile First" Entwicklungsansatz, Layout Patterns) behandelt.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
543
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Design by Peter Grosskopf

  1. 1. RESPONSIVE DESIGNStatus Quo - iico Berlin 2013 - Peter Grosskopf
  2. 2. Vorstellung2Peter Grosskopf (32)GründerEntwickler/DesignerDozent MünsterGeschäftsführer Zweitag GmbH
  3. 3. 3Motivation
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. Mobile Browsing12%10%8%6%4%2%0%2010 2011 20122009Quelle: NetMarketShare - StatistaOkt 10,3%Mobile Browsing knackt die 10% MarkeWeltweiter Anteil mobiler Endgeräte an der Internetnutzung7
  8. 8. Mobile Browsing05101520Südamerika Europa Ozeanien Nordamerika Welt Afrika AsienAnteilmobilerEndgeräteMai 2011 Mai 2012Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012nach KontinentenQuelle: Statcounter - Statista8
  9. 9. 9required?Action
  10. 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 TechnologieMobile-Strategie*Geflügeltes Wort aus denAnfangszeiten des Web :-) 10
  11. 11. TechnologiewahlJe nach Zielsetzung und Strategie gibtes verschiedene technologische Ansätzemobile site responsive hybrid native ...11
  12. 12. Responsive DesignBegriff von Ethan Marcotte erstmalserwähnt in Artikel bei A List ApartSeine Definition: Flexibles Raster,Flexible Grafiken, Media Queries12
  13. 13. Beispiele http://rbmaradio.com13
  14. 14. Beispiele http://mediaqueri.es**Inspirationen sammeln14
  15. 15. FunktionsweiseEinbau von Media Queriesexamples.cssMedia 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. 16. BreakpointsBreite, an dem das Design umbrichtSmartphone Portrait Mode< 480High-End Smartphone, iPad< 1024Restliche Geräte, Desktop, ...>= 1024... 16
  17. 17. Layout Patterns17Mostly Fluid Column DropLayout Shifter Off Canvashttp://www.lukew.com/ff/entry.asp?1514
  18. 18. FrameworksHelfen bei den erstenSchritten und bei derFehlervermeidungfoundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap18
  19. 19. Vorteile von RWD+ Geringer Wartungsaufwand+ Konsistente Markendarstellung+ Keine Redirects+ Zukunftssicher+ Nur eine Technologie (HTML/CSS)19
  20. 20. Nachteile von RWD- Nur online nutzbar- hoher Testaufwand- Browserunterstützung- Geräteoptimierung / Performance20- keine UI-Komponenten
  21. 21. HerausforderungGeräte nach wie vor unterschiedlich!Konsequenz:Unterstützung unterschiedlicher Hardware undInteraktionskonzepte=> Nicht mit Responsive Design alleine abbildbar21
  22. 22. RWD meets Adaptive22User Agent Sniffing / Feature DetectionSmartphone Tablet Desktop ...Für Geräteklassen optimierte VersionenResponsiveResponsiveResponsiveResponsive
  23. 23. EntwicklungsprozessGracefulDegredationMobileFirst• 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 wirken23
  24. 24. EntwicklungsprozessDarüber hinaus:Entwickler = Designer Mut zum Prototyping24
  25. 25. FazitDas Mobile Web ist daMit Responsive Design lassen sich schnellErfolge erzielenAber: Design für alternative Endgeräteerfordert dedizierte Auseinandersetzung mitden Charakteristika des jeweiligen GerätesResponsive Design erfordert ein Umdenkenim EntwicklungsprozessResponsive Design ist der erste Schritt insMobile Web 25
  26. 26. 26Danke
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×