1. „The control which designers know in the print
medium, and often desire in the web medium, is simply
a function of the limitation of the printed page. We
should embrace the fact that the web doesn’t have the
same constraints, and design for this flexibility. But first,
we must accept the ebb and flow of things.“
John Allsopp, April 2000
Montag, 10. Februar 14

2. RESPONSIVE DESIGN
KUCE GOES RESPONSIVE
@marcbaechinger
Montag, 10. Februar 14

3. A SCREEN IS A SCREEN IS A SCREEN
Montag, 10. Februar 14

4. RESPONSIVE DESIGN
Montag, 10. Februar 14

5. FLUID COMPONENTS
Name
Name
Town
Town
Age
Age
Gender
Gender
OK
Montag, 10. Februar 14
OK

6. media queries
device detection
client-side vs. server-side
screen size
Montag, 10. Februar 14
user agent header

7. LAYOUT BREAKDOWN
Montag, 10. Februar 14

8. PIXEL RANGES
Diagram found on the web by Phillipp Schröder. thx
Montag, 10. Februar 14

9. DEVICE CLASSES
Montag, 10. Februar 14

10. Montag, 10. Februar 14

11. Montag, 10. Februar 14

12. SWISSCOM KUNDENCENTER
„KUCE GOES RESPONSIVE“
Montag, 10. Februar 14

13. AUSGANGSLAGE
• KuCe
äusserst erfolgreich in Betrieb seit 2000 (13 Jahre)
• nahezu
• legacy
Screens aus Desktop-Zeiten (HTML-Tables/Flash)
• laufend
Montag, 10. Februar 14
600 Screens mit komplexer Anbindung an Backends
erweitert durch neue Usecases

14. AdressAdressAdressänderungen
Adressänderungen
änderungen
änderungen
FestnetzFestnetzFestnetzumleitungen
Festnetzumleitungen
umleitungen
umleitungen
PasswörterPasswörterPasswörterManagement
PasswörterManagement
Management
Management
TV SenderTV SenderTV Senderreihenfolge
TV Senderreihenfolge
reihenfolge
reihenfolge
ComboxComboxComboxSettings
ComboxSettings
Settings
Settings
AnrufAnrufAnrufSperrsets
AnrufSperrsets
Sperrsets
Sperrsets
RouterRouterRouterAktivierung
RouterAktivierung
Aktivierung
Aktivierung
RechnungsRechnungsRechnungsinformation
Rechnungsinformation
information
information
SIM-KartenSIM-KartenSIM-KartenSperrung
SIM-KartenSperrung
Sperrung
Sperrung
Montag, 10. Februar 14

15. Montag, 10. Februar 14

16. Dev Team (25+ devs)
browser
Montag, 10. Februar 14
sso
frontend
server
app
server
backend

17. ANFORDERUNGEN
1
cross-device application delivery
2
Optimierung für Touch-Geräte
3
Rückwärtskompatibilität zu legacy Content
4
konstanter Aufwand für Applikationsentwicklung
5
parallel zu daily business (25+ devs)
Montag, 10. Februar 14

18. *.html
*-phone.css
Desktop
tab
Montag, 10. Februar 14
fon
*-tablet.css
*-desktop.css

19. MASTERTEMPLATES
UND
KOMPONENTEN
Montag, 10. Februar 14

20. RESPONSIVE IN 3 SCHRITTEN
1
HTML - Migration der Mastertemplates
2
HTML - Contentmigration zu CSS Grid
3
CSS - Stylesheets für Tablet und Phone
Montag, 10. Februar 14

21. Montag, 10. Februar 14

22. Montag, 10. Februar 14

23. Montag, 10. Februar 14

24. Montag, 10. Februar 14

25. Montag, 10. Februar 14

26. Montag, 10. Februar 14

27. 3
1
1
2
3
4
5
6
Montag, 10. Februar 14
2
4
5
6

28. ERWEITERUNGEN IM
TECH STACK
CSS
JavaScript
Media queries (W3C Standard)
Feature detection (Modernizr)
CSS-Grid (Twitter Bootstrap)
Jasmine Unittests
Less CSS-Preprocessor
Montag, 10. Februar 14
Karma Testrunner

29. VORGEHEN
Montag, 10. Februar 14

30. CROSS-FUNCTIONAL TEAM
Montag, 10. Februar 14
Frontend-Entw.
Backend-Entw.
UX-Designer
Product owner
Tester

31. Sprint 0
User Story 3
User Story 5
User Story 2
User Story 4
User Story 6
Device detection
User Story 1
User Story 3
Master templates
Montag, 10. Februar 14
Sprint 2
User Story 1
Aufbau
HTMLStyleguide
Sprint 1
User Story 2
User Story 4

32. LIVE DEMO
Montag, 10. Februar 14

33. HERAUSFORDERUNGEN
1
UX-Design (Komponentenmapping)
2
CSS-Management
3
Desktop first!
4
legacy JavaScript
Montag, 10. Februar 14

34. ERFOLGSFAKTOREN
1
cross-functional Team
2
Komponentenansatz und -bibliothek
3
UI-Konvergenz auf Komponenten
4
kontinuierliche Migration ermöglicht Lernprozesse
Montag, 10. Februar 14

35. Q&A
Montag, 10. Februar 14

36. RESULTATE
1
Optimierte Bedienung verschiedener Kanäle
2
Kontinuität vorhandener Skills und Systeme
3
Komponentenkatalog für künftige Entwicklung
4
Buildunterstützung für Frontendartefakte
5
verbesserte Testabdeckung von Frontendartefakten
Montag, 10. Februar 14