Das Dokument beschreibt Best Practices in der Front-End-Entwicklung, mit Fokus auf technische Optimierung, Benutzerfreundlichkeit und Wettbewerbsfähigkeit. Es betont die Bedeutung von Planung, Iteration und den Einsatz von modernen Webstandards zur Schaffung barrierefreier und benutzerfreundlicher Websites. Auch das globale Wachstum des Internets und die Herausforderungen durch unterschiedliche Zugangsarten und Technologien werden angesprochen.

1. BEST PRACTICES
der Front-End Entwicklung

2. ZIELE
Technisches Optimum anstreben
Größtmögliche Benutzerzahl erreichen
Wettbewerbsvorteil schaffen
Zukunftsorientiert entwickeln

3. »Continuous improvement is better than delayed perfection«

5. INITIATIVE

6. INITIATIVE
PLANUNG

7. INITIATIVE
PLANUNG
IDEEN
KONZEPT

8. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES

9. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI

10. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT

11. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

12. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

13. INITIATIVE
PLANUNG
IDEEN
KONZEPT Coding
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

14. INITIATIVE
PLANUNG
IDEEN
KONZEPT Coding
+
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

15. INITIATIVE
PLANUNG
IDEEN
KONZEPT Coding
+
SCRIBBLES
MOCKUPS
‣ Accessibility
WIREFRAMES
‣ Usability
‣ UI Elements
DESIGN / UI ‣ UI Experience
‣ Clickpaths
DEVELOPMENT ‣ Scalability
‣ Content
TESTING ‣ SEO

16. INITIATIVE
PLANUNG
IDEEN
KONZEPT Coding
+
SCRIBBLES
MOCKUPS
‣ Accessibility R
WIREFRAMES
‣ Usability Ü
C
‣ UI Elements K
DESIGN / UI ‣ UI Experience F
‣ Clickpaths R
A
DEVELOPMENT ‣ Scalability G
‣ Content E
TESTING ‣ SEO N

17. Erfolgsraten von IT-Projekten
0 15 30 45 60

18. Erfolgsraten von IT-Projekten
34
51
15
0 15 30 45 60

19. Erfolgsraten von IT-Projekten
Erfolgreich 34
51
15
0 15 30 45 60

20. Erfolgsraten von IT-Projekten
Erfolgreich 34
Kompliziert 51
15
0 15 30 45 60

21. Erfolgsraten von IT-Projekten
Erfolgreich 34
Kompliziert 51
Abbruch 15
0 15 30 45 60

22. Erfolgsraten von IT-Projekten
Erfolgreich 34
Kompliziert 51
Abbruch 15
0 15 30 45 60
Quelle: Dr. Dobbs »The World Of Software Development« - Software Development Success Rates (24th April 2009)

23. Warum IT-Projekte fehlschlagen
0 15 30 45 60

24. Warum IT-Projekte fehlschlagen
57
39
35
0 15 30 45 60

25. Warum IT-Projekte fehlschlagen
Mangelnde Kommunikation 57
39
35
0 15 30 45 60

26. Warum IT-Projekte fehlschlagen
Mangelnde Kommunikation 57
Fehlende Planung 39
35
0 15 30 45 60

27. Warum IT-Projekte fehlschlagen
Mangelnde Kommunikation 57
Fehlende Planung 39
Keine Qualitätskontrolle 35
0 15 30 45 60

28. Warum IT-Projekte fehlschlagen
Mangelnde 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)

30. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

31. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
ITERATION MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

32. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
ITERATION MOCKUPS
WIREFRAMES
DESIGN / UI
Zufriedene
DEVELOPMENT
Benutzer
TESTING

33. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES Zufriedener
ITERATION MOCKUPS Kunde
WIREFRAMES
DESIGN / UI
Zufriedene
DEVELOPMENT
Benutzer
TESTING

34. Effektivität von Entwicklungsparadigmen
Agile
Iterative
Traditional
Ad Hoc
ineffektiv effektiv

35. 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

36. Effektivität von Entwicklungsparadigmen
4.9
5.0
Qualitä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

37. Effektivität von Entwicklungsparadigmen
4.9
5.0
Qualität
2.3
0.4
6.0
5.6
Funktionalitä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

38. Effektivität von Entwicklungsparadigmen
4.9
5.0
Qualität
2.3
0.4
6.0
5.6
Funktionalitä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

39. Effektivität von Entwicklungsparadigmen
4.9
5.0
Qualität
2.3
0.4
6.0
5.6
Funktionalitä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

40. Effektivität von Entwicklungsparadigmen
4.9
5.0
Qualität
2.3
0.4
6.0
5.6
Funktionalitä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)

41. Was ist ITERATION ?

42. Was ist ITERATION ?
‣ Feedback-Schleifen in allen Phasen
‣ Phasen nicht exakt getrennt, sondern ineinander übergehend
‣ Enge Zusammenarbeit, regelmäßige Kommunikation

43. 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

44. 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

45. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
ITERATION MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

46. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES Best
ITERATION MOCKUPS Practices
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

47. Best
Practices

48. Best
Practices

49. Best
Practices
Web Standards

50. Best Progressive
Practices Enhancement
Web Standards

51. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

52. Responsive
Web Design
Best Progressive
Web Standards
Practices Enhancement

53. Web Standards

54. Web-Angebote,
die von allen Nutzern unabhängig von
körperlichen oder technischen
Möglichkeiten uneingeschränkt genutzt
werden können.
Barrierearm Zugänglich
Web Standards

55. Web-Angebote, ‣ In der EU 38 Mio. Menschen mit
die von allen Nutzern unabhängig von körperlichen Einschränkungen
körperlichen oder technischen ‣ 20% der Bevölkerung > 60 Jahre
Möglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Web
werden können. ‣ In den USA gelten 39 Mio. Menschen
als behindert (15%)
Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots
sind blinde User
Web Standards

56. Web-Angebote, ‣ In der EU 38 Mio. Menschen mit
die von allen Nutzern unabhängig von körperlichen Einschränkungen
körperlichen oder technischen ‣ 20% der Bevölkerung > 60 Jahre
Möglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Web
werden können. ‣ In den USA gelten 39 Mio. Menschen
als behindert (15%)
Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots
sind blinde User
Web Standards
Sinnvolles & 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

57. Web-Angebote, ‣ In der EU 38 Mio. Menschen mit
die von allen Nutzern unabhängig von körperlichen Einschränkungen
körperlichen oder technischen ‣ 20% der Bevölkerung > 60 Jahre
Möglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Web
werden können. ‣ In den USA gelten 39 Mio. Menschen
als behindert (15%)
Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots
sind blinde User
Web Standards
Sinnvolles & 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

58. Web-Angebote, ‣ In der EU 38 Mio. Menschen mit
die von allen Nutzern unabhängig von körperlichen Einschränkungen
körperlichen oder technischen ‣ 20% der Bevölkerung > 60 Jahre
Möglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Web
werden können. ‣ In den USA gelten 39 Mio. Menschen
als behindert (15%)
Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots
sind blinde User
Web Standards
Sinnvolles & 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

59. Web-Angebote, ‣ In der EU 38 Mio. Menschen mit
die von allen Nutzern unabhängig von körperlichen Einschränkungen
körperlichen oder technischen ‣ 20% der Bevölkerung > 60 Jahre
Möglichkeiten uneingeschränkt genutzt ‣ 4/5 Behinderten nutzen das Web
werden können. ‣ In den USA gelten 39 Mio. Menschen
als behindert (15%)
Barrierearm Zugänglich ‣ Auch Suchmaschinen Robots
sind blinde User
Sinnvolles & 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

60. Web Standards

61. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

62. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

63. Progressive
Enhancement

64. Lösung für 3 konkurrierende Ziele
‣ Einsatz aller neuen, modernen
Technologien
‣ universelle Zugänglichkeit
‣ sauberer, überschaubarer,
wartbarer und modularer Code
Progressive
Enhancement

65. Lösung für 3 konkurrierende Ziele
‣ Einsatz aller neuen, modernen
Technologien
‣ universelle Zugänglichkeit
‣ sauberer, überschaubarer,
wartbarer und modularer Code
Reines HTML, das überfall funktioniert,
darauf setzen CSS & JS auf.
Progressive
Enhancement

66. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement

67. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement

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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.

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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.

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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-Desktop
Browsern. 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...)

72. 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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-Desktop
Browsern. 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

73. 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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-Desktop
Browsern. 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

74. 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 auch
anderes Equipment, Verbindungen, Infrastruktur und Zugang als in der westlichen Welt.
75% aller Internetuser haben das Internet bereits mobil genutzt, 29% exklusiv auf Non-Desktop
Browsern. 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
Power-User benutzen eine breite Palette von alternativen Browsern und navigieren per Tastatur

76. ‣ Es ist einfach, diese User zu ignorieren, in dem Glauben, sie seien generell
nicht technikaffin und daher nicht zur Zielgruppe gehörend.

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)

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 Environment

79. ‣ 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
Entwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist eine
grundlegend falsche Annahme.

80. ‣ 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
Entwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist eine
grundlegend falsche Annahme.
Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen.
‣ typische Bildschirmauflösung
‣ Default Font-Size

81. ‣ 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
Entwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist eine
grundlegend falsche Annahme.
Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen.
‣ typische Bildschirmauflösung
‣ Default Font-Size
Die echte Internetwelt ist viel unvorhersehbarer und unterschiedlicher.
Reine »Annahmen« erzeigen ein falsches Bild der Sicherheit.

82. ‣ 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
Entwickler gehen oft davon aus, dass alle Features »enabled« sind, aber das ist eine
grundlegend falsche Annahme.
Testing erfolgt daher auch oft in sehr sicheren und üppig ausgestatteten Umgebungen.
‣ typische Bildschirmauflösung
‣ Default Font-Size
Die echte Internetwelt ist viel unvorhersehbarer und unterschiedlicher.
Reine »Annahmen« erzeigen ein falsches Bild der Sicherheit.

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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement

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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
HTML
Funktioniert auf ALLEN Devices

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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
HTML Basic
Funktioniert auf ALLEN Devices Experience

87. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
CSS
Experience wird um Design erweitert
HTML Basic
Funktioniert auf ALLEN Devices Experience

88. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
Javascript
Erweiterung um Dynamische UI
CSS
Experience wird um Design erweitert
HTML Basic
Funktioniert auf ALLEN Devices Experience

89. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
Javascript
Erweiterung um Dynamische UI
Enhanced
Experience
CSS
Experience wird um Design erweitert
HTML Basic
Funktioniert auf ALLEN Devices Experience

90. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
Javascript Argumente
Erweiterung um Dynamische UI ‣ Anzahl an browsenden Endgeräten
Enhanced nimmt zu
Experience ‣ bestmögliche Experience für alle
CSS
Experience wird um Design erweitert Benutzer
‣ Fokus auf Inhalt und Funktionalität
‣ mehr Besucher, mehr Umsatz
HTML Basic ‣ positive Beispiele:
Funktioniert auf ALLEN Devices Experience Google, Facebook, Digg, Amazon

91. 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 the
darauf setzen CSS & JS auf. experience«
Progressive
Enhancement
Javascript Argumente
Erweiterung um Dynamische UI ‣ Anzahl an browsenden Endgeräten
Enhanced nimmt zu
Experience ‣ bestmögliche Experience für alle
CSS
Experience wird um Design erweitert Benutzer
‣ Fokus auf Inhalt und Funktionalität
‣ mehr Besucher, mehr Umsatz
HTML Basic ‣ positive Beispiele:
Funktioniert auf ALLEN Devices Experience Google, Facebook, Digg, Amazon

92. Progressive
Enhancement

93. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

94. Best Progressive
Responsive
Practices Enhancement
Web Design
Web Standards

95. Responsive
Web Design

96. »Ich bin 320px breit«
»Das ist dein Design«
Responsive
Web Design

97. »Ich bin 320px breit«
»Das ist dein Design«
CSS Zen
Volle Kontrolle über das
Design einer Webseite
Responsive
Web Design

98. »Ich bin 320px breit«
»Das ist dein Design«
CSS Zen Media Queries
Volle Kontrolle über das Abfrage konkreter Device
Design einer Webseite Eigenschaften
Responsive
Web Design

99. »Ich bin 320px breit«
»Mobiles Browsen
wird Desktop-
basierten Zugriff
»Das ist dein Design«
innerhalb der
nächsten 3-5 Jahre
CSS Zen Media Queries ablösen«
Volle Kontrolle über das Abfrage konkreter Device
Design einer Webseite Eigenschaften
Responsive
Web Design

100. »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
Volle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens
Design einer Webseite Eigenschaften
3G unterstützen
Responsive
Web Design

101. »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
Volle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens
Design einer Webseite Eigenschaften
3G unterstützen
Responsive
Web Design
Herausforderungen
‣ 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)

102. »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
Volle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens
Design einer Webseite Eigenschaften
3G unterstützen
Responsive
Web Design
Herausforderungen
‣ 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)

103. »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
Volle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens
Design einer Webseite Eigenschaften
3G unterstützen
Responsive
Web Design
Herausforderungen 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.)

104. »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
Responsive
Volle Kontrolle über das Abfrage konkreter Device internetfähig, von denen die meisten mindestens
Web Design
Design einer Webseite Eigenschaften
3G unterstützen
Herausforderungen 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.)

105. Responsive
Web Design

106. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

107. Responsive
Web Design
Best Progressive
Practices Enhancement
Web Standards

108. INITIATIVE
PLANUNG
Responsive
Web Design
IDEEN
KONZEPT
SCRIBBLES Best Progressive
ITERATION MOCKUPS Practices Enhancement
WIREFRAMES
DESIGN / UI
Web Standards
DEVELOPMENT
TESTING

109. INITIATIVE
PLANUNG
Responsive
Web Design
IDEEN
KONZEPT
SCRIBBLES Best Progressive
ITERATION MOCKUPS Practices Enhancement
WIREFRAMES
DESIGN / UI
Web Standards
DEVELOPMENT
TESTING

110. INITIATIVE
PLANUNG
Responsive
Web Design
IDEEN
KONZEPT
SCRIBBLES Best Progressive
ITERATION MOCKUPS Practices Enhancement
WIREFRAMES
DESIGN / UI
Web Standards
DEVELOPMENT
TESTING

111. INITIATIVE
PLANUNG
IDEEN
KONZEPT
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

112. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
SCRIBBLES
MOCKUPS
WIREFRAMES
DESIGN / UI
DEVELOPMENT
TESTING

113. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

114. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

115. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

116. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was 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

117. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

118. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

119. INITIATIVE ‣ Leistungen kommunizieren & anbieten
‣ Auf Vorteile hinweisen
PLANUNG ‣ Wettbewerbsvorteil verdeutlichen
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

120. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

121. INITIATIVE
PLANUNG ‣ Meilensteine / Pakete für:
‣ Scribbles, Mockups, Wireframes
IDEEN ‣ Klickbare Prototypen
KONZEPT ‣ Basic Experience
Was 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

122. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

123. INITIATIVE
PLANUNG
IDEEN ‣ Zielgruppe
KONZEPT ‣ Rollenmodelle
Was 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

124. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

125. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was 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

126. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

127. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was 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

128. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

129. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was 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

130. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was können wir konkret tun?
‣ Iteration SCRIBBLES
‣ Webstandards
MOCKUPS
‣ Progressive Enhancement WIREFRAMES
‣ Responsive Web Design
DESIGN / UI
DEVELOPMENT
TESTING

131. INITIATIVE
PLANUNG
IDEEN
KONZEPT
Was 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)

132. 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.