Responsive Design for the enterprise

  • 887 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
887
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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