Your SlideShare is downloading. ×
Responsive Design for the enterprise
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive Design for the enterprise

958
views

Published on

Published in: Technology, Education

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
958
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
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