SlideShare ist ein Scribd-Unternehmen logo
Mayflower GmbH I 2
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Medientechnologien
I @jowe
Mayflower GmbH I 5
Geschichte
I 2010: Ethan Marcotte, Responsive Architektur
I CSS Level 3
I „Wichtigste Entwicklungen des Jahres 2012“
I Heterogene Browserlandschaft
I Herausforderung für Konzeptionisten, Webdesigner und
Webentwickler
Mayflower GmbH I 7
#1: Dem Kunden erklären
Mayflower GmbH I 8
#1: Dem Kunden erklären
Lösung: demonstrieren
Mayflower GmbH I 9
#2: Linearer Designprozess
Mayflower GmbH I 10
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts
Mayflower GmbH I 11
#3: Navigation
Mayflower GmbH I 12
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns
Mayflower GmbH I 13
#4: Bilder
Mayflower GmbH I 14
#4: Bilder
Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG
Mayflower GmbH I 15
#5: Tabellen
Mayflower GmbH I 17
#6: Konvertieren alter Seiten
Mayflower GmbH I 19
#7: IE
Mayflower GmbH I 21
#8: Testing
Mayflower GmbH I 23
#8: Testing
Mayflower GmbH I 34
Einbettung in iFrame
I Fit to Content
I Mobile oder Desktop?
I Polyfill
I W3C: <seamless />
I Navigation: <base />
I Videos
I #Beispiel
Mayflower GmbH I 35
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href
Mayflower GmbH I 36
Formulare nach Device
I Mobile: Rückrufservice
I Desktop: Detaillierte Angaben
I JS Validierung
I Logik über CSS Klassen?
I 2 verschiedene Formulare
I 2 verschiedene Links
Mayflower GmbH I 37
Responsive Webdesign
“Empty your mind! Be formless, shapeless, like
water. If you put water into a cup, it becomes
the cup. Put it into a bottle, it becomes the
bottle, you put into a teapot, it becomes the
teapot. Now water can flow, or it can crash: Be
water, my friend!”
(Bruce Lee: Fernsehinterview)
Mayflower GmbH I 38
Feedback
Responsive Webdesign

Weitere ähnliche Inhalte

Ähnlich wie Responsive Webdesign

Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
Mayflower GmbH
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsMaria Herrmann
 
Modul webd
Modul webdModul webd
Modul webdGianna-B
 
Dokumentation
DokumentationDokumentation
Dokumentationo0plum0o
 
Dokumentation
DokumentationDokumentation
Dokumentationo0plum0o
 
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
TANNER AG
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo GmbH
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototypingHausammann
 
Firmendarstellung BergMedien
Firmendarstellung BergMedienFirmendarstellung BergMedien
Firmendarstellung BergMedien
Gregor Berg
 
Bewerbung
BewerbungBewerbung
Bewerbung
guest5191bd7
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developerchristianschweinhardt
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.chEin OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
Gabriel Imthurn
 
Honki Digital Agentur - Präsentation
Honki Digital Agentur - PräsentationHonki Digital Agentur - Präsentation
Honki Digital Agentur - Präsentation
Marta Czapkova
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...butest
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...butest
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...butest
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...butest
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...butest
 
Artstudio20101
Artstudio20101Artstudio20101
Artstudio20101
Anna Litwin
 

Ähnlich wie Responsive Webdesign (20)

Mobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit WebtechnologienMobile Anwendungsentwicklung mit Webtechnologien
Mobile Anwendungsentwicklung mit Webtechnologien
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
Modul webd
Modul webdModul webd
Modul webd
 
Dokumentation
DokumentationDokumentation
Dokumentation
 
Dokumentation
DokumentationDokumentation
Dokumentation
 
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
 
Firmendarstellung BergMedien
Firmendarstellung BergMedienFirmendarstellung BergMedien
Firmendarstellung BergMedien
 
Bewerbung
BewerbungBewerbung
Bewerbung
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.chEin OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
Ein OER-Lehrmittel für das Fach Musik - www.lernumgebungen.ch
 
Honki Digital Agentur - Präsentation
Honki Digital Agentur - PräsentationHonki Digital Agentur - Präsentation
Honki Digital Agentur - Präsentation
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
 
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
Praktikumsbericht als docx - HTW Berlin - Hochschule für Technik ...
 
Artstudio20101
Artstudio20101Artstudio20101
Artstudio20101
 

Mehr von Mayflower GmbH

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mayflower GmbH
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
Mayflower GmbH
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
Mayflower GmbH
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
Mayflower GmbH
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
Mayflower GmbH
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
Mayflower GmbH
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
Mayflower GmbH
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
Mayflower GmbH
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
Mayflower GmbH
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
Mayflower GmbH
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
Mayflower GmbH
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
Mayflower GmbH
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
Mayflower GmbH
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
Mayflower GmbH
 
Schnelle Geschäfte
Schnelle GeschäfteSchnelle Geschäfte
Schnelle Geschäfte
Mayflower GmbH
 
Test-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPCTest-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPC
Mayflower GmbH
 
PHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit ComposerPHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit Composer
Mayflower GmbH
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Max Köhler - Real-Time-Monitoring
Max Köhler - Real-Time-MonitoringMax Köhler - Real-Time-Monitoring
Max Köhler - Real-Time-Monitoring
Mayflower GmbH
 

Mehr von Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
 
Schnelle Geschäfte
Schnelle GeschäfteSchnelle Geschäfte
Schnelle Geschäfte
 
Test-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPCTest-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPC
 
PHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit ComposerPHP Dependency und Paket Management mit Composer
PHP Dependency und Paket Management mit Composer
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Max Köhler - Real-Time-Monitoring
Max Köhler - Real-Time-MonitoringMax Köhler - Real-Time-Monitoring
Max Köhler - Real-Time-Monitoring
 

Responsive Webdesign

  • 1.
  • 2. Mayflower GmbH I 2 Johannes Weber I Jahrgang 1986 I Developer bei Mayflower I Seit 2003: Onlinemedien I M.Sc – Digitale Medientechnologien I @jowe
  • 3.
  • 4.
  • 5. Mayflower GmbH I 5 Geschichte I 2010: Ethan Marcotte, Responsive Architektur I CSS Level 3 I „Wichtigste Entwicklungen des Jahres 2012“ I Heterogene Browserlandschaft I Herausforderung für Konzeptionisten, Webdesigner und Webentwickler
  • 6.
  • 7. Mayflower GmbH I 7 #1: Dem Kunden erklären
  • 8. Mayflower GmbH I 8 #1: Dem Kunden erklären Lösung: demonstrieren
  • 9. Mayflower GmbH I 9 #2: Linearer Designprozess
  • 10. Mayflower GmbH I 10 #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
  • 11. Mayflower GmbH I 11 #3: Navigation
  • 12. Mayflower GmbH I 12 #3: Navigation Lösung: gutes, einheitliches Design, Patterns
  • 13. Mayflower GmbH I 13 #4: Bilder
  • 14. Mayflower GmbH I 14 #4: Bilder Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet, progressive JPEG
  • 15. Mayflower GmbH I 15 #5: Tabellen
  • 16.
  • 17. Mayflower GmbH I 17 #6: Konvertieren alter Seiten
  • 18.
  • 19. Mayflower GmbH I 19 #7: IE
  • 20.
  • 21. Mayflower GmbH I 21 #8: Testing
  • 22.
  • 23. Mayflower GmbH I 23 #8: Testing
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34. Mayflower GmbH I 34 Einbettung in iFrame I Fit to Content I Mobile oder Desktop? I Polyfill I W3C: <seamless /> I Navigation: <base /> I Videos I #Beispiel
  • 35. Mayflower GmbH I 35 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href
  • 36. Mayflower GmbH I 36 Formulare nach Device I Mobile: Rückrufservice I Desktop: Detaillierte Angaben I JS Validierung I Logik über CSS Klassen? I 2 verschiedene Formulare I 2 verschiedene Links
  • 37. Mayflower GmbH I 37 Responsive Webdesign “Empty your mind! Be formless, shapeless, like water. If you put water into a cup, it becomes the cup. Put it into a bottle, it becomes the bottle, you put into a teapot, it becomes the teapot. Now water can flow, or it can crash: Be water, my friend!” (Bruce Lee: Fernsehinterview)
  • 38. Mayflower GmbH I 38 Feedback