SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Downloaden Sie, um offline zu lesen
RESPONSIVE DESIGN
Status Quo - iico Berlin 2013 - Peter Grosskopf
Vorstellung
2
Peter Grosskopf (32)
Gründer
Entwickler/
Designer
Dozent Münster
Geschäftsführer Zweitag GmbH
3
Motivation
4
5
6
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
Mobile Browsing
0
5
10
15
20
Südamerika Europa Ozeanien Nordamerika Welt Afrika Asien
AnteilmobilerEndgeräte
Mai 2011 Mai 2012
Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012
nach Kontinenten
Quelle: Statcounter - Statista
8
9
required?Action
„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
Technologiewahl
Je nach Zielsetzung und Strategie gibt
es verschiedene technologische Ansätze
mobile site responsive hybrid native ...
11
Responsive Design
Begriff von Ethan Marcotte erstmals
erwähnt in Artikel bei A List Apart
Seine Definition: Flexibles Raster,
Flexible Grafiken, Media Queries
12
Beispiele http://rbmaradio.com
13
Beispiele http://mediaqueri.es*
*Inspirationen sammeln
14
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
Breakpoints
Breite, an dem das Design umbricht
Smartphone Portrait Mode< 480
High-End Smartphone, iPad< 1024
Restliche Geräte, Desktop, ...>= 1024
... 16
Layout Patterns
17
Mostly Fluid Column Drop
Layout Shifter Off Canvas
http://www.lukew.com/ff/entry.asp?1514
Frameworks
Helfen bei den ersten
Schritten und bei der
Fehlervermeidung
foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap
18
Vorteile von RWD
+ Geringer Wartungsaufwand
+ Konsistente Markendarstellung
+ Keine Redirects
+ Zukunftssicher
+ Nur eine Technologie (HTML/CSS)
19
Nachteile von RWD
- Nur online nutzbar
- hoher Testaufwand
- Browserunterstützung
- Geräteoptimierung / Performance
20
- keine UI-Komponenten
Herausforderung
Geräte nach wie vor unterschiedlich!
Konsequenz:
Unterstützung unterschiedlicher Hardware und
Interaktionskonzepte
=> Nicht mit Responsive Design alleine abbildbar
21
RWD meets Adaptive
22
User Agent Sniffing / Feature Detection
Smartphone Tablet Desktop ...
Für Geräteklassen optimierte Versionen
ResponsiveResponsiveResponsiveResponsive
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
Entwicklungsprozess
Darüber hinaus:
Entwickler = Designer Mut zum Prototyping
24
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
Danke

Weitere ähnliche Inhalte

Andere mochten auch

Having the Correct Context for an Agile Transformation
Having the Correct Context for an Agile TransformationHaving the Correct Context for an Agile Transformation
Having the Correct Context for an Agile TransformationDerek Huether
 
Responsive Web Design mit TYPO3
Responsive Web Design mit TYPO3Responsive Web Design mit TYPO3
Responsive Web Design mit TYPO3Martin Huber
 
Agile Transformations that Stick
Agile Transformations that StickAgile Transformations that Stick
Agile Transformations that StickNicola Dourambeis
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...Mohamed Said Ouerghi
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?die.agilen GmbH
 
Haydn Shaw Presentation
Haydn Shaw PresentationHaydn Shaw Presentation
Haydn Shaw Presentationkatnut
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
 
"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementationdalarcon503
 

Andere mochten auch (20)

Having the Correct Context for an Agile Transformation
Having the Correct Context for an Agile TransformationHaving the Correct Context for an Agile Transformation
Having the Correct Context for an Agile Transformation
 
Responsive Web Design mit TYPO3
Responsive Web Design mit TYPO3Responsive Web Design mit TYPO3
Responsive Web Design mit TYPO3
 
4DX and Mobile Learning
4DX and Mobile Learning4DX and Mobile Learning
4DX and Mobile Learning
 
Agile Transformations that Stick
Agile Transformations that StickAgile Transformations that Stick
Agile Transformations that Stick
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
 
Haydn Shaw Presentation
Haydn Shaw PresentationHaydn Shaw Presentation
Haydn Shaw Presentation
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
4 dx update
4 dx update4 dx update
4 dx update
 
United Nations E-Government Survey 2012
United Nations E-Government Survey 2012United Nations E-Government Survey 2012
United Nations E-Government Survey 2012
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation
 

Ähnlich wie Responsive Design by Peter Grosskopf

Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung Martin Reiher
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenMarkus Eiglsperger
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobileSteven Grzbielok
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsRalf Lütke
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Christian Sauter
 
ONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur AppONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur AppNetcetera
 
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Christian Heindel
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Wolfram Nagel
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsinsertEFFECT GmbH
 
K5 Konferenz 2015 - Intro zur Marketing Session - Florian Heinemann
K5 Konferenz 2015 - Intro zur Marketing Session - Florian HeinemannK5 Konferenz 2015 - Intro zur Marketing Session - Florian Heinemann
K5 Konferenz 2015 - Intro zur Marketing Session - Florian HeinemannFlorian Heinemann
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!inovex GmbH
 

Ähnlich wie Responsive Design by Peter Grosskopf (20)

Responsive design
Responsive designResponsive design
Responsive design
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobile
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
 
ONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur AppONE Konferenz: Von der Idee zur App
ONE Konferenz: Von der Idee zur App
 
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartels
 
K5 Konferenz 2015 - Intro zur Marketing Session - Florian Heinemann
K5 Konferenz 2015 - Intro zur Marketing Session - Florian HeinemannK5 Konferenz 2015 - Intro zur Marketing Session - Florian Heinemann
K5 Konferenz 2015 - Intro zur Marketing Session - Florian Heinemann
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 

Responsive Design by Peter Grosskopf