BEST PRACTICES  der Front-End Entwicklung
ZIELETechnisches Optimum anstrebenGrößtmögliche Benutzerzahl erreichenWettbewerbsvorteil schaffenZukunftsorientiert entwic...
»Continuous improvement is better than delayed perfection«
INITIATIVE
INITIATIVEPLANUNG
INITIATIVEPLANUNG IDEENKONZEPT
INITIATIVE PLANUNG  IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES
INITIATIVE PLANUNG  IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMESDESIGN / UI
INITIATIVE PLANUNG   IDEEN  KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT
INITIATIVE PLANUNG   IDEEN  KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TESTING
INITIATIVE PLANUNG   IDEEN  KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TESTING
INITIATIVE PLANUNG   IDEEN  KONZEPT      Coding SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TESTING
INITIATIVE PLANUNG   IDEEN  KONZEPT      Coding                 + SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TEST...
INITIATIVE PLANUNG   IDEEN  KONZEPT            Coding                        + SCRIBBLES MOCKUPS               ‣   Accessi...
INITIATIVE PLANUNG   IDEEN  KONZEPT            Coding                        + SCRIBBLES MOCKUPS               ‣   Accessi...
Erfolgsraten von IT-Projekten0         15      30     45         60
Erfolgsraten von IT-Projekten            34                 51      150          15         30   45       60
Erfolgsraten von IT-ProjektenErfolgreich               34                               51                    15          ...
Erfolgsraten von IT-ProjektenErfolgreich               34Kompliziert                    51                    15          ...
Erfolgsraten von IT-ProjektenErfolgreich               34Kompliziert                    51  Abbruch           15          ...
Erfolgsraten von IT-ProjektenErfolgreich                          34Kompliziert                                     51  Ab...
Warum IT-Projekte fehlschlagen0      15     30     45      60
Warum IT-Projekte fehlschlagen                  57             39            350      15          30   45   60
Warum IT-Projekte fehlschlagenMangelnde Kommunikation                     57                                       39     ...
Warum IT-Projekte fehlschlagenMangelnde Kommunikation                     57       Fehlende Planung                39     ...
Warum IT-Projekte fehlschlagenMangelnde Kommunikation                         57        Fehlende Planung                  ...
Warum IT-Projekte fehlschlagenMangelnde Kommunikation                                               57        Fehlende Pla...
INITIATIVE PLANUNG   IDEEN  KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TESTING
INITIATIVE             PLANUNG               IDEEN              KONZEPT             SCRIBBLESITERATION    MOCKUPS         ...
INITIATIVE             PLANUNG               IDEEN              KONZEPT             SCRIBBLESITERATION    MOCKUPS         ...
INITIATIVE             PLANUNG               IDEEN              KONZEPT             SCRIBBLES     ZufriedenerITERATION    ...
Effektivität von Entwicklungsparadigmen                                          Agile                                    ...
Effektivität von Entwicklungsparadigmen                                                                       4.9         ...
Effektivität von Entwicklungsparadigmen                                                                              4.9  ...
Effektivität von Entwicklungsparadigmen                                                                                   ...
Effektivität von Entwicklungsparadigmen                                                                                   ...
Effektivität von Entwicklungsparadigmen                                                                                   ...
Effektivität von Entwicklungsparadigmen                                                                                   ...
Was ist   ITERATION ?
Was ist          ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergehe...
Was ist           ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergeh...
Was ist           ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergeh...
INITIATIVE             PLANUNG               IDEEN              KONZEPT             SCRIBBLESITERATION    MOCKUPS         ...
INITIATIVE             PLANUNG               IDEEN              KONZEPT             SCRIBBLES       BestITERATION    MOCKU...
BestPractices
BestPractices
BestPractices            Web Standards
Best      ProgressivePractices   Enhancement            Web Standards
Responsive            Web Design  Best      ProgressivePractices   Enhancement            Web Standards
Responsive            Web Design  Best      Progressive                          Web StandardsPractices   Enhancement
Web Standards
Web-Angebote,die von allen Nutzern unabhängig vonkörperlichen oder technischenMöglichkeiten uneingeschränkt genutztwerden ...
Web-Angebote,                                           ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig v...
Web-Angebote,                                             ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig...
Web-Angebote,                                                                 ‣ In der EU 38 Mio. Menschen mitdie von alle...
Web-Angebote,                                                                 ‣ In der EU 38 Mio. Menschen mitdie von alle...
Web-Angebote,                                                                 ‣ In der EU 38 Mio. Menschen mitdie von alle...
Web Standards
Responsive            Web Design  Best      ProgressivePractices   Enhancement            Web Standards
Responsive            Web Design  Best                      ProgressivePractices                   Enhancement            ...
ProgressiveEnhancement
Lösung für 3 konkurrierende Ziele  ‣ Einsatz aller neuen, modernen    Technologien  ‣ universelle Zugänglichkeit  ‣ sauber...
Lösung für 3 konkurrierende Ziele  ‣ Einsatz aller neuen, modernen    Technologien  ‣ universelle Zugänglichkeit  ‣ sauber...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträ...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell  nicht technikaffin und daher nicht zur Ziel...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
Lösung für 3 konkurrierende Ziele         »Only after the HTML  ‣ Einsatz aller neuen, modernen         markup is as clear...
ProgressiveEnhancement
Responsive            Web Design  Best      ProgressivePractices   Enhancement            Web Standards
Best                      Progressive                              ResponsivePractices                   Enhancement      ...
ResponsiveWeb Design
»Ich bin 320px breit«»Das ist dein Design«                        Responsive                        Web Design
»Ich bin 320px breit«                  »Das ist dein Design«CSS ZenVolle Kontrolle über dasDesign einer Webseite          ...
»Ich bin 320px breit«                  »Das ist dein Design«CSS Zen                          Media QueriesVolle Kontrolle ...
»Ich bin 320px breit«                                                            »Mobiles Browsen                         ...
»Ich bin 320px breit«                                         Statistiken                                                 ...
»Ich bin 320px breit«                                         Statistiken                                                 ...
»Ich bin 320px breit«                                         Statistiken                                                 ...
»Ich bin 320px breit«                                         Statistiken                                                 ...
»Ich bin 320px breit«                                         Statistiken                                                 ...
ResponsiveWeb Design
Responsive            Web Design  Best      ProgressivePractices   Enhancement            Web Standards
Responsive            Web Design  Best      ProgressivePractices   Enhancement            Web Standards
INITIATIVE             PLANUNG                                       Responsive                                       Web ...
INITIATIVE             PLANUNG                                       Responsive                                       Web ...
INITIATIVE             PLANUNG                                       Responsive                                       Web ...
INITIATIVE PLANUNG   IDEEN  KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT  TESTING
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE    ‣ Leistungen kommunizieren & anbieten                                             ‣ Auf Vorteile hinweisen  ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG       ‣ Meilensteine / Pakete für:                                       ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN       ‣   Zielgruppe               ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
INITIATIVE                               PLANUNG                                 IDEEN                                KONZ...
Frühe und regelmäßige Iteration vereinfacht  die nahtlose Implementierung der Best Practices.        Dadurch erreicht der ...
Front End Entwicklung - Best Practices
Front End Entwicklung - Best Practices
Front End Entwicklung - Best Practices
Front End Entwicklung - Best Practices
Front End Entwicklung - Best Practices
Nächste SlideShare
Wird geladen in …5
×

Front End Entwicklung - Best Practices

719 Aufrufe

Veröffentlicht am

A presentation I held in September 2011 as an internal status update on what is going on in the world of front end development.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
719
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Front End Entwicklung - Best Practices

  1. 1. BEST PRACTICES der Front-End Entwicklung
  2. 2. ZIELETechnisches Optimum anstrebenGrößtmögliche Benutzerzahl erreichenWettbewerbsvorteil schaffenZukunftsorientiert entwickeln
  3. 3. »Continuous improvement is better than delayed perfection«
  4. 4. INITIATIVE
  5. 5. INITIATIVEPLANUNG
  6. 6. INITIATIVEPLANUNG IDEENKONZEPT
  7. 7. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES
  8. 8. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMESDESIGN / UI
  9. 9. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT
  10. 10. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  11. 11. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  12. 12. INITIATIVE PLANUNG IDEEN KONZEPT Coding SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  13. 13. INITIATIVE PLANUNG IDEEN KONZEPT Coding + SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  14. 14. INITIATIVE PLANUNG IDEEN KONZEPT Coding + SCRIBBLES MOCKUPS ‣ AccessibilityWIREFRAMES ‣ Usability ‣ UI Elements DESIGN / UI ‣ UI Experience ‣ ClickpathsDEVELOPMENT ‣ Scalability ‣ Content TESTING ‣ SEO
  15. 15. INITIATIVE PLANUNG IDEEN KONZEPT Coding + SCRIBBLES MOCKUPS ‣ Accessibility RWIREFRAMES ‣ Usability Ü C ‣ UI Elements K DESIGN / UI ‣ UI Experience F ‣ Clickpaths R ADEVELOPMENT ‣ Scalability G ‣ Content E TESTING ‣ SEO N
  16. 16. Erfolgsraten von IT-Projekten0 15 30 45 60
  17. 17. Erfolgsraten von IT-Projekten 34 51 150 15 30 45 60
  18. 18. Erfolgsraten von IT-ProjektenErfolgreich 34 51 15 0 15 30 45 60
  19. 19. Erfolgsraten von IT-ProjektenErfolgreich 34Kompliziert 51 15 0 15 30 45 60
  20. 20. Erfolgsraten von IT-ProjektenErfolgreich 34Kompliziert 51 Abbruch 15 0 15 30 45 60
  21. 21. Erfolgsraten von IT-ProjektenErfolgreich 34Kompliziert 51 Abbruch 15 0 15 30 45 60 Quelle: Dr. Dobbs »The World Of Software Development« - Software Development Success Rates (24th April 2009)
  22. 22. Warum IT-Projekte fehlschlagen0 15 30 45 60
  23. 23. Warum IT-Projekte fehlschlagen 57 39 350 15 30 45 60
  24. 24. Warum IT-Projekte fehlschlagenMangelnde Kommunikation 57 39 35 0 15 30 45 60
  25. 25. Warum IT-Projekte fehlschlagenMangelnde Kommunikation 57 Fehlende Planung 39 35 0 15 30 45 60
  26. 26. Warum IT-Projekte fehlschlagenMangelnde Kommunikation 57 Fehlende Planung 39 Keine Qualitätskontrolle 35 0 15 30 45 60
  27. 27. Warum IT-Projekte fehlschlagenMangelnde Kommunikation 57 Fehlende Planung 39 Keine Qualitätskontrolle 35 0 15 30 45 60 Quelle: The Bull Survey - Failure Causes Statistics auf www.it-cortex.com (1998)
  28. 28. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  29. 29. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLESITERATION MOCKUPS WIREFRAMES DESIGN / UI DEVELOPMENT TESTING
  30. 30. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLESITERATION MOCKUPS WIREFRAMES DESIGN / UI Zufriedene DEVELOPMENT Benutzer TESTING
  31. 31. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES ZufriedenerITERATION MOCKUPS Kunde WIREFRAMES DESIGN / UI Zufriedene DEVELOPMENT Benutzer TESTING
  32. 32. Effektivität von Entwicklungsparadigmen Agile Iterative Traditional Ad Hoc ineffektiv effektiv
  33. 33. Effektivität von Entwicklungsparadigmen 4.9 5.0 2.3 0.4 6.0 5.6 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc 0.2 0.8 4.4 4.0 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6
  34. 34. Effektivität von Entwicklungsparadigmen 4.9 5.0Qualität 2.3 0.4 6.0 5.6 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc 0.2 0.8 4.4 4.0 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6
  35. 35. Effektivität von Entwicklungsparadigmen 4.9 5.0 Qualität 2.3 0.4 6.0 5.6Funktionalität 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc 0.2 0.8 4.4 4.0 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6
  36. 36. Effektivität von Entwicklungsparadigmen 4.9 5.0 Qualität 2.3 0.4 6.0 5.6Funktionalität 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc Geld 0.2 0.8 4.4 4.0 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6
  37. 37. Effektivität von Entwicklungsparadigmen 4.9 5.0 Qualität 2.3 0.4 6.0 5.6Funktionalität 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc Geld 0.2 0.8 4.4 4.0 Zeit 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6
  38. 38. Effektivität von Entwicklungsparadigmen 4.9 5.0 Qualität 2.3 0.4 6.0 5.6Funktionalität 1.8 Agile 2.7 Iterative 3.9 Traditional 3.0 Ad Hoc Geld 0.2 0.8 4.4 4.0 Zeit 0.8 0.8 0 ineffektiv 2 3 5 effektiv 6 Quelle: Dr. Dobbs »The World Of Software Development« - Software Development Success Rates (24th April 2009)
  39. 39. Was ist ITERATION ?
  40. 40. Was ist ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergehend‣ Enge Zusammenarbeit, regelmäßige Kommunikation
  41. 41. Was ist ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergehend‣ Enge Zusammenarbeit, regelmäßige Kommunikation‣ Anwendung wird in mehrere Entwicklungsphasen zerteilt‣ An deren Enden erfolgt jeweils eine Zwischenabgabe‣ Team hat so die Möglichkeit, frühzeitig zu korrigieren
  42. 42. Was ist ITERATION ?‣ Feedback-Schleifen in allen Phasen‣ Phasen nicht exakt getrennt, sondern ineinander übergehend‣ Enge Zusammenarbeit, regelmäßige Kommunikation‣ Anwendung wird in mehrere Entwicklungsphasen zerteilt‣ An deren Enden erfolgt jeweils eine Zwischenabgabe‣ Team hat so die Möglichkeit, frühzeitig zu korrigieren‣ Risikominimierung‣ Erhöhte Qualität‣ Besseres Zeitmanagement
  43. 43. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLESITERATION MOCKUPS WIREFRAMES DESIGN / UI DEVELOPMENT TESTING
  44. 44. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES BestITERATION MOCKUPS Practices WIREFRAMES DESIGN / UI DEVELOPMENT TESTING
  45. 45. BestPractices
  46. 46. BestPractices
  47. 47. BestPractices Web Standards
  48. 48. Best ProgressivePractices Enhancement Web Standards
  49. 49. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  50. 50. Responsive Web Design Best Progressive Web StandardsPractices Enhancement
  51. 51. Web Standards
  52. 52. Web-Angebote,die von allen Nutzern unabhängig vonkörperlichen oder technischenMöglichkeiten uneingeschränkt genutztwerden können. Barrierearm Zugänglich Web Standards
  53. 53. Web-Angebote, ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig von körperlichen Einschränkungenkörperlichen oder technischen ‣ 20% der Bevölkerung > 60 JahreMöglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Webwerden können. ‣ In den USA gelten 39 Mio. Menschen als behindert (15%) Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots sind blinde User Web Standards
  54. 54. Web-Angebote, ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig von körperlichen Einschränkungenkörperlichen oder technischen ‣ 20% der Bevölkerung > 60 JahreMöglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Webwerden können. ‣ In den USA gelten 39 Mio. Menschen als behindert (15%) Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots sind blinde User Web StandardsSinnvolles & valides HTML‣ Einhalten technischer Standards (W3C Validierung)‣ Trennung von Inhalt und Layout (HTML / CSS)‣ zum Inhalt passende Tags verwenden (h1-h6, p...)‣ alt-Texte, link-Titel, role-Attribute
  55. 55. Web-Angebote, ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig von körperlichen Einschränkungenkörperlichen oder technischen ‣ 20% der Bevölkerung > 60 JahreMöglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Webwerden können. ‣ In den USA gelten 39 Mio. Menschen als behindert (15%) Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots sind blinde User Web StandardsSinnvolles & valides HTML Navigierbarkeit‣ Einhalten technischer Standards ‣ Seite über Tastatur navigierbar (W3C Validierung) machen (tabindex)‣ Trennung von Inhalt und Layout ‣ Navi ohne Abhängigkeit von (HTML / CSS) Flash oder Javascript‣ zum Inhalt passende Tags ‣ Navigation als (verschachtelte) verwenden (h1-h6, p...) Liste (ul > li) definieren‣ alt-Texte, link-Titel, role-Attribute ‣ Seiteninterne Sprungmarken definieren
  56. 56. Web-Angebote, ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig von körperlichen Einschränkungenkörperlichen oder technischen ‣ 20% der Bevölkerung > 60 JahreMöglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Webwerden können. ‣ In den USA gelten 39 Mio. Menschen als behindert (15%) Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots sind blinde User Web StandardsSinnvolles & valides HTML Navigierbarkeit Lesbarkeit & Verständlichkeit‣ Einhalten technischer Standards ‣ Seite über Tastatur navigierbar ‣ Skalierbarkeit der Schriften (W3C Validierung) machen (tabindex) ‣ blinkende und animierte Texte‣ Trennung von Inhalt und Layout ‣ Navi ohne Abhängigkeit von vermeiden (HTML / CSS) Flash oder Javascript ‣ Starke Kontraste, klare Schriften‣ zum Inhalt passende Tags ‣ Navigation als (verschachtelte) ‣ Text in Bildern vermeiden verwenden (h1-h6, p...) Liste (ul > li) definieren ‣ Verständliche Sprache‣ alt-Texte, link-Titel, role-Attribute ‣ Seiteninterne Sprungmarken verwenden definieren
  57. 57. Web-Angebote, ‣ In der EU 38 Mio. Menschen mitdie von allen Nutzern unabhängig von körperlichen Einschränkungenkörperlichen oder technischen ‣ 20% der Bevölkerung > 60 JahreMöglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Webwerden können. ‣ In den USA gelten 39 Mio. Menschen als behindert (15%) Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots sind blinde UserSinnvolles & valides HTML Navigierbarkeit Lesbarkeit & Verständlichkeit Web Standards Seite über Tastatur navigierbar‣ Einhalten technischer Standards ‣ ‣ Skalierbarkeit der Schriften (W3C Validierung) machen (tabindex) ‣ blinkende und animierte Texte‣ Trennung von Inhalt und Layout ‣ Navi ohne Abhängigkeit von vermeiden (HTML / CSS) Flash oder Javascript ‣ Starke Kontraste, klare Schriften‣ zum Inhalt passende Tags ‣ Navigation als (verschachtelte) ‣ Text in Bildern vermeiden verwenden (h1-h6, p...) Liste (ul > li) definieren ‣ Verständliche Sprache‣ alt-Texte, link-Titel, role-Attribute ‣ Seiteninterne Sprungmarken verwenden definieren
  58. 58. Web Standards
  59. 59. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  60. 60. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  61. 61. ProgressiveEnhancement
  62. 62. Lösung für 3 konkurrierende Ziele ‣ Einsatz aller neuen, modernen Technologien ‣ universelle Zugänglichkeit ‣ sauberer, überschaubarer, wartbarer und modularer Code Progressive Enhancement
  63. 63. Lösung für 3 konkurrierende Ziele ‣ Einsatz aller neuen, modernen Technologien ‣ universelle Zugänglichkeit ‣ sauberer, überschaubarer, wartbarer und modularer CodeReines HTML, das überfall funktioniert,darauf setzen CSS & JS auf. Progressive Enhancement
  64. 64. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive Enhancement
  65. 65. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive Enhancement
  66. 66. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
  67. 67. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
  68. 68. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-DesktopBrowsern. 2009 wurden weltweit 4,6 Mrd. Mobilfunkverträge abgeschlossen.Jedes Endgerät hat unterschiedliche Fähigkeiten in Bezug auf‘s Browsen.(Touchscreen Tablets, Minilaptops, andere Gadgets...)
  69. 69. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-DesktopBrowsern. 2009 wurden weltweit 4,6 Mrd. Mobilfunkverträge abgeschlossen.Jedes Endgerät hat unterschiedliche Fähigkeiten in Bezug auf‘s Browsen.(Touchscreen Tablets, Minilaptops, andere Gadgets...)‣ unterschiedlicher Plugin-Support‣ installierte Fonts‣ Bildschirmgröße‣ Interaktionsnormen ‣ RIM‘s Blackberry Daumenpad ‣ Tastatureingabe ‣ Apple‘s Multitouch ‣ Amazon Kindle‘s Mini-Joystick ‣ Nintendo Wii ‣ Playstation 3 ‣ Microsoft XBox
  70. 70. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-DesktopBrowsern. 2009 wurden weltweit 4,6 Mrd. Mobilfunkverträge abgeschlossen.Jedes Endgerät hat unterschiedliche Fähigkeiten in Bezug auf‘s Browsen.(Touchscreen Tablets, Minilaptops, andere Gadgets...)‣ unterschiedlicher Plugin-Support‣ installierte Fonts‣ Bildschirmgröße‣ Interaktionsnormen ‣ RIM‘s Blackberry Daumenpad ‣ Tastatureingabe ‣ Apple‘s Multitouch ‣ Amazon Kindle‘s Mini-Joystick ‣ Nintendo Wii ‣ Playstation 3 ‣ Microsoft XBox
  71. 71. Die globale Netzgemeinde ist zwischen 2000 und 2011 um 204 % auf 1,1 Mrd. angewachsen...Internetverbreitung in Asien beträgt aber lediglich 20%, in Afrika 7%. (potentielle Märkte)Globales Wachstum bedeutet nicht nur unterschiedliche Sprachen u. Kulturen, sondern auchanderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-DesktopBrowsern. 2009 wurden weltweit 4,6 Mrd. Mobilfunkverträge abgeschlossen.Jedes Endgerät hat unterschiedliche Fähigkeiten in Bezug auf‘s Browsen.(Touchscreen Tablets, Minilaptops, andere Gadgets...)‣ unterschiedlicher Plugin-Support‣ installierte Fonts‣ Bildschirmgröße‣ Interaktionsnormen ‣ RIM‘s Blackberry Daumenpad ‣ Tastatureingabe ‣ Apple‘s Multitouch ‣ Amazon Kindle‘s Mini-Joystick ‣ Nintendo Wii ‣ Playstation 3 ‣ Microsoft XBoxPower-User benutzen eine breite Palette von alternativen Browsern und navigieren per Tastatur
  72. 72. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.
  73. 73. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)
  74. 74. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)‣ Einige User schalten bestimmte Features ab ‣ Sicherheitsgründe ‣ Privatsphäre ‣ schnelleres Laden ‣ geringere Kosten ‣ Corporate Environment
  75. 75. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)‣ Einige User schalten bestimmte Features ab ‣ Sicherheitsgründe ‣ Privatsphäre ‣ schnelleres Laden ‣ geringere Kosten ‣ Corporate EnvironmentEntwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist einegrundlegend falsche Annahme.
  76. 76. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)‣ Einige User schalten bestimmte Features ab ‣ Sicherheitsgründe ‣ Privatsphäre ‣ schnelleres Laden ‣ geringere Kosten ‣ Corporate EnvironmentEntwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist einegrundlegend falsche Annahme.Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen. ‣ typische Bildschirmauflösung ‣ Default Font-Size
  77. 77. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)‣ Einige User schalten bestimmte Features ab ‣ Sicherheitsgründe ‣ Privatsphäre ‣ schnelleres Laden ‣ geringere Kosten ‣ Corporate EnvironmentEntwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist einegrundlegend falsche Annahme.Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen. ‣ typische Bildschirmauflösung ‣ Default Font-SizeDie echte Internetwelt ist viel unvorhersehbarer und unterschiedlicher.Reine »Annahmen« erzeigen ein falsches Bild der Sicherheit.
  78. 78. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell nicht technikaffin und daher nicht zur Zielgruppe gehörend.‣ Unzureichender Browsersupport beschränkt sich nicht auf »Outdated Devices«. (Beispiel: Amazon Kindle mit monochronem Display und textbasiertem Browser)‣ Einige User schalten bestimmte Features ab ‣ Sicherheitsgründe ‣ Privatsphäre ‣ schnelleres Laden ‣ geringere Kosten ‣ Corporate EnvironmentEntwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist einegrundlegend falsche Annahme.Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen. ‣ typische Bildschirmauflösung ‣ Default Font-SizeDie echte Internetwelt ist viel unvorhersehbarer und unterschiedlicher.Reine »Annahmen« erzeigen ein falsches Bild der Sicherheit.
  79. 79. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive Enhancement
  80. 80. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementHTMLFunktioniert auf ALLEN Devices
  81. 81. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementHTML BasicFunktioniert auf ALLEN Devices Experience
  82. 82. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementCSSExperience wird um Design erweitertHTML BasicFunktioniert auf ALLEN Devices Experience
  83. 83. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementJavascriptErweiterung um Dynamische UICSSExperience wird um Design erweitertHTML BasicFunktioniert auf ALLEN Devices Experience
  84. 84. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementJavascriptErweiterung um Dynamische UI Enhanced ExperienceCSSExperience wird um Design erweitertHTML BasicFunktioniert auf ALLEN Devices Experience
  85. 85. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementJavascript ArgumenteErweiterung um Dynamische UI ‣ Anzahl an browsenden Endgeräten Enhanced nimmt zu Experience ‣ bestmögliche Experience für alleCSSExperience wird um Design erweitert Benutzer ‣ Fokus auf Inhalt und Funktionalität ‣ mehr Besucher, mehr UmsatzHTML Basic ‣ positive Beispiele:Funktioniert auf ALLEN Devices Experience Google, Facebook, Digg, Amazon
  86. 86. Lösung für 3 konkurrierende Ziele »Only after the HTML ‣ Einsatz aller neuen, modernen markup is as clear and Technologien descriptive as ‣ universelle Zugänglichkeit possible, we develop ‣ sauberer, überschaubarer, carefully separated wartbarer und modularer Code CSS and JS, both written to external files,Reines HTML, das überfall funktioniert, to enhance thedarauf setzen CSS & JS auf. experience« Progressive EnhancementJavascript ArgumenteErweiterung um Dynamische UI ‣ Anzahl an browsenden Endgeräten Enhanced nimmt zu Experience ‣ bestmögliche Experience für alleCSSExperience wird um Design erweitert Benutzer ‣ Fokus auf Inhalt und Funktionalität ‣ mehr Besucher, mehr UmsatzHTML Basic ‣ positive Beispiele:Funktioniert auf ALLEN Devices Experience Google, Facebook, Digg, Amazon
  87. 87. ProgressiveEnhancement
  88. 88. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  89. 89. Best Progressive ResponsivePractices Enhancement Web Design Web Standards
  90. 90. ResponsiveWeb Design
  91. 91. »Ich bin 320px breit«»Das ist dein Design« Responsive Web Design
  92. 92. »Ich bin 320px breit« »Das ist dein Design«CSS ZenVolle Kontrolle über dasDesign einer Webseite Responsive Web Design
  93. 93. »Ich bin 320px breit« »Das ist dein Design«CSS Zen Media QueriesVolle Kontrolle über das Abfrage konkreter DeviceDesign einer Webseite Eigenschaften Responsive Web Design
  94. 94. »Ich bin 320px breit« »Mobiles Browsen wird Desktop- basierten Zugriff »Das ist dein Design« innerhalb der nächsten 3-5 JahreCSS Zen Media Queries ablösen«Volle Kontrolle über das Abfrage konkreter DeviceDesign einer Webseite Eigenschaften Responsive Web Design
  95. 95. »Ich bin 320px breit« Statistiken ‣ Weltweit gibt es 5.3 Mrd. Mobilfunkverträge »Mobiles Browsen (77% der Weltbevölkerung) wird Desktop- ‣ 25% der US-Bürger sind »mobile-only« Web-User basierten Zugriff ‣ Jeder 4. Deutsche hat ein Mobiltelefon (20 Mio.) »Das ist dein Design« innerhalb der ‣ Smartphone-Branche wiegt 400 Mrd. EUR nächsten 3-5 Jahre (mehr als Automobil-Industrie)CSS Zen Media Queries ablösen« ‣ 2011 sind über 85% aller neuen MobilfunkgeräteVolle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestensDesign einer Webseite Eigenschaften 3G unterstützen Responsive Web Design
  96. 96. »Ich bin 320px breit« Statistiken ‣ Weltweit gibt es 5.3 Mrd. Mobilfunkverträge »Mobiles Browsen (77% der Weltbevölkerung) wird Desktop- ‣ 25% der US-Bürger sind »mobile-only« Web-User basierten Zugriff ‣ Jeder 4. Deutsche hat ein Mobiltelefon (20 Mio.) »Das ist dein Design« innerhalb der ‣ Smartphone-Branche wiegt 400 Mrd. EUR nächsten 3-5 Jahre (mehr als Automobil-Industrie)CSS Zen Media Queries ablösen« ‣ 2011 sind über 85% aller neuen MobilfunkgeräteVolle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestensDesign einer Webseite Eigenschaften 3G unterstützen Responsive Web DesignHerausforderungen‣ geringe Bildschirmgröße‣ mangelnder Platz für ausreichend Content‣ Wechselnde Lichtverhältnisse‣ Akustische Beeinträchtigungen‣ Hektisches Umfeld‣ Suboptimale Netzabdeckung‣ Verbindungskosten und -zeit‣ verschiedene gestenbasierte Interaktionsnormen (z.B. Multi-Touch: Double-Tap, Pinching)
  97. 97. »Ich bin 320px breit« Statistiken ‣ Weltweit gibt es 5.3 Mrd. Mobilfunkverträge »Mobiles Browsen (77% der Weltbevölkerung) wird Desktop- ‣ 25% der US-Bürger sind »mobile-only« Web-User basierten Zugriff ‣ Jeder 4. Deutsche hat ein Mobiltelefon (20 Mio.) »Das ist dein Design« innerhalb der ‣ Smartphone-Branche wiegt 400 Mrd. EUR nächsten 3-5 Jahre (mehr als Automobil-Industrie)CSS Zen Media Queries ablösen« ‣ 2011 sind über 85% aller neuen MobilfunkgeräteVolle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestensDesign einer Webseite Eigenschaften 3G unterstützen Responsive Web DesignHerausforderungen‣ geringe Bildschirmgröße‣ mangelnder Platz für ausreichend Content‣ Wechselnde Lichtverhältnisse‣ Akustische Beeinträchtigungen‣ Hektisches Umfeld‣ Suboptimale Netzabdeckung‣ Verbindungskosten und -zeit‣ verschiedene gestenbasierte Interaktionsnormen (z.B. Multi-Touch: Double-Tap, Pinching)
  98. 98. »Ich bin 320px breit« Statistiken ‣ Weltweit gibt es 5.3 Mrd. Mobilfunkverträge »Mobiles Browsen (77% der Weltbevölkerung) wird Desktop- ‣ 25% der US-Bürger sind »mobile-only« Web-User basierten Zugriff ‣ Jeder 4. Deutsche hat ein Mobiltelefon (20 Mio.) »Das ist dein Design« innerhalb der ‣ Smartphone-Branche wiegt 400 Mrd. EUR nächsten 3-5 Jahre (mehr als Automobil-Industrie)CSS Zen Media Queries ablösen« ‣ 2011 sind über 85% aller neuen MobilfunkgeräteVolle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestensDesign einer Webseite Eigenschaften 3G unterstützen Responsive Web DesignHerausforderungen Lösungen‣ geringe Bildschirmgröße ‣ mit relativen Größen arbeiten‣ mangelnder Platz für ausreichend Content (keine fixen Dimensionen verwenden wie 960px) ‣ Container, Zwischenräume, Textgrößen und‣ Wechselnde Lichtverhältnisse Zeilenabstände in relativen Größen definieren‣ Akustische Beeinträchtigungen (bei CSS sind das em und %)‣ Hektisches Umfeld ‣ Konzentration auf essentielle Funktionen u. Inhalte‣ Suboptimale Netzabdeckung ‣ Angepasste Experience für die gängigsten‣ Verbindungskosten und -zeit Bildschirmgrößen bereitstellen‣ verschiedene gestenbasierte Interaktionsnormen (iPhone, iPad, iPod Touch Portrait und Landscape (z.B. Multi-Touch: Double-Tap, Pinching) Modus, Android, Blackberry etc.)
  99. 99. »Ich bin 320px breit« Statistiken ‣ Weltweit gibt es 5.3 Mrd. Mobilfunkverträge »Mobiles Browsen (77% der Weltbevölkerung) wird Desktop- ‣ 25% der US-Bürger sind »mobile-only« Web-User basierten Zugriff ‣ Jeder 4. Deutsche hat ein Mobiltelefon (20 Mio.) »Das ist dein Design« innerhalb der ‣ Smartphone-Branche wiegt 400 Mrd. EUR nächsten 3-5 Jahre (mehr als Automobil-Industrie)CSS Zen Media Queries ablösen« ‣ 2011 sind über 85% aller neuen Mobilfunkgeräte ResponsiveVolle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens Web DesignDesign einer Webseite Eigenschaften 3G unterstützenHerausforderungen Lösungen‣ geringe Bildschirmgröße ‣ mit relativen Größen arbeiten‣ mangelnder Platz für ausreichend Content (keine fixen Dimensionen verwenden wie 960px) ‣ Container, Zwischenräume, Textgrößen und‣ Wechselnde Lichtverhältnisse Zeilenabstände in relativen Größen definieren‣ Akustische Beeinträchtigungen (bei CSS sind das em und %)‣ Hektisches Umfeld ‣ Konzentration auf essentielle Funktionen u. Inhalte‣ Suboptimale Netzabdeckung ‣ Angepasste Experience für die gängigsten‣ Verbindungskosten und -zeit Bildschirmgrößen bereitstellen‣ verschiedene gestenbasierte Interaktionsnormen (iPhone, iPad, iPod Touch Portrait und Landscape (z.B. Multi-Touch: Double-Tap, Pinching) Modus, Android, Blackberry etc.)
  100. 100. ResponsiveWeb Design
  101. 101. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  102. 102. Responsive Web Design Best ProgressivePractices Enhancement Web Standards
  103. 103. INITIATIVE PLANUNG Responsive Web Design IDEEN KONZEPT SCRIBBLES Best ProgressiveITERATION MOCKUPS Practices Enhancement WIREFRAMES DESIGN / UI Web Standards DEVELOPMENT TESTING
  104. 104. INITIATIVE PLANUNG Responsive Web Design IDEEN KONZEPT SCRIBBLES Best ProgressiveITERATION MOCKUPS Practices Enhancement WIREFRAMES DESIGN / UI Web Standards DEVELOPMENT TESTING
  105. 105. INITIATIVE PLANUNG Responsive Web Design IDEEN KONZEPT SCRIBBLES Best ProgressiveITERATION MOCKUPS Practices Enhancement WIREFRAMES DESIGN / UI Web Standards DEVELOPMENT TESTING
  106. 106. INITIATIVE PLANUNG IDEEN KONZEPT SCRIBBLES MOCKUPSWIREFRAMES DESIGN / UIDEVELOPMENT TESTING
  107. 107. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun? SCRIBBLES MOCKUPS WIREFRAMES DESIGN / UI DEVELOPMENT TESTING
  108. 108. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  109. 109. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  110. 110. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  111. 111. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun? ‣ Feedback-Schleifen‣ Iteration SCRIBBLES ‣ transparente Planung‣ Webstandards MOCKUPS ‣ klare Pakete / Meilensteine‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  112. 112. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  113. 113. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  114. 114. INITIATIVE ‣ Leistungen kommunizieren & anbieten ‣ Auf Vorteile hinweisen PLANUNG ‣ Wettbewerbsvorteil verdeutlichen IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  115. 115. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  116. 116. INITIATIVE PLANUNG ‣ Meilensteine / Pakete für: ‣ Scribbles, Mockups, Wireframes IDEEN ‣ Klickbare Prototypen KONZEPT ‣ Basic ExperienceWas können wir konkret tun? ‣ Enhanced Experience ‣ Mobile Experience‣ Iteration SCRIBBLES MOCKUPS ‣ Nach jedem Paket Feedback & Korrektur‣ Webstandards ‣ Kontrolle‣ Progressive Enhancement WIREFRAMES (z.B. durch Kanban, Scrum)‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  117. 117. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  118. 118. INITIATIVE PLANUNG IDEEN ‣ Zielgruppe KONZEPT ‣ RollenmodelleWas können wir konkret tun? ‣ Nutzungsszenarien ‣ Personas‣ Iteration SCRIBBLES ‣ Clickpaths‣ Webstandards MOCKUPS WIREFRAMES ‣ Legen einen konkreten Rahmen für‣ Progressive Enhancement Zielgruppe und Anf. an die App fest‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  119. 119. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  120. 120. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES ‣ Scribbles frei von subjektiven Einflussen (lediglich Flächen und Texturen)‣ Webstandards MOCKUPS WIREFRAMES ‣ frühe Prototypen‣ Progressive Enhancement (z.B. »Axure«)‣ Responsive Web Design ‣ verschiedene Screengrößen skizzieren DESIGN / UI ‣ Mapping der UI auf HTML-Elemente ‣ Kunde nimmt am Prozess teil ‣ Machbarkeit evaluieren mit Developer DEVELOPMENT TESTING
  121. 121. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  122. 122. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI ‣ Entw. der Basic & Enhanced Experience (Erst HTML-basiert, dann sexy) ‣ Prozess nah an realer Experience DEVELOPMENT (Browserfonts, Container-mäßiges Design) ‣ Verwendung der »realen« Komponenten TESTING (aus UI-Libraries wie jQuery UI, Wijmo) ‣ Machbarkeit evaluieren mit Developer
  123. 123. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  124. 124. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT ‣ Basic Experience ‣ Enhanced Experience: CSS + JS ‣ frühe Prototypen im Browser TESTING ‣ regelmäßies Feedback mit Kunden
  125. 125. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING
  126. 126. INITIATIVE PLANUNG IDEEN KONZEPTWas können wir konkret tun?‣ Iteration SCRIBBLES‣ Webstandards MOCKUPS‣ Progressive Enhancement WIREFRAMES‣ Responsive Web Design DESIGN / UI DEVELOPMENT TESTING ‣ Alle Experiences ausgiebig testen (Möglichst viele Devices/Browser/OS) ‣ Qualitätskontrolle (evtl. Outsourcing nach Indien)
  127. 127. Frühe und regelmäßige Iteration vereinfacht die nahtlose Implementierung der Best Practices. Dadurch erreicht der Kunde mehr User,und jeder User bekommt die bestmögliche Experience. Daher sollten technisches Optimum und zukunftskompatible Webseiten unser Anspruch sein.

×