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
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
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
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
68.
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
75.
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.
83.
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
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.)
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.