Responsive Design for the enterprise

1,574 views
1,467 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,574
On SlideShare
0
From Embeds
0
Number of Embeds
659
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Design for the enterprise

  1. 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. 2. RESPONSIVE DESIGN KUCE GOES RESPONSIVE @marcbaechinger Montag, 10. Februar 14
  3. 3. A SCREEN IS A SCREEN IS A SCREEN Montag, 10. Februar 14
  4. 4. RESPONSIVE DESIGN Montag, 10. Februar 14
  5. 5. FLUID COMPONENTS Name Name Town Town Age Age Gender Gender OK Montag, 10. Februar 14 OK
  6. 6. media queries device detection client-side vs. server-side screen size Montag, 10. Februar 14 user agent header
  7. 7. LAYOUT BREAKDOWN Montag, 10. Februar 14
  8. 8. PIXEL RANGES Diagram found on the web by Phillipp Schröder. thx Montag, 10. Februar 14
  9. 9. DEVICE CLASSES Montag, 10. Februar 14
  10. 10. Montag, 10. Februar 14
  11. 11. Montag, 10. Februar 14
  12. 12. SWISSCOM KUNDENCENTER „KUCE GOES RESPONSIVE“ Montag, 10. Februar 14
  13. 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. 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. 15. Montag, 10. Februar 14
  16. 16. Dev Team (25+ devs) browser Montag, 10. Februar 14 sso frontend server app server backend
  17. 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. 18. *.html *-phone.css Desktop tab Montag, 10. Februar 14 fon *-tablet.css *-desktop.css
  19. 19. MASTERTEMPLATES UND KOMPONENTEN Montag, 10. Februar 14
  20. 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. 21. Montag, 10. Februar 14
  22. 22. Montag, 10. Februar 14
  23. 23. Montag, 10. Februar 14
  24. 24. Montag, 10. Februar 14
  25. 25. Montag, 10. Februar 14
  26. 26. Montag, 10. Februar 14
  27. 27. 3 1 1 2 3 4 5 6 Montag, 10. Februar 14 2 4 5 6
  28. 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. 29. VORGEHEN Montag, 10. Februar 14
  30. 30. CROSS-FUNCTIONAL TEAM Montag, 10. Februar 14 Frontend-Entw. Backend-Entw. UX-Designer Product owner Tester
  31. 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. 32. LIVE DEMO Montag, 10. Februar 14
  33. 33. HERAUSFORDERUNGEN 1 UX-Design (Komponentenmapping) 2 CSS-Management 3 Desktop first! 4 legacy JavaScript Montag, 10. Februar 14
  34. 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. 35. Q&A Montag, 10. Februar 14
  36. 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

×