„The control which designers know in the print
medium, and often desire in the web medium, is simply
a function of the lim...
RESPONSIVE DESIGN
KUCE GOES RESPONSIVE

@marcbaechinger
Montag, 10. Februar 14
A SCREEN IS A SCREEN IS A SCREEN

Montag, 10. Februar 14
RESPONSIVE DESIGN

Montag, 10. Februar 14
FLUID COMPONENTS
Name

Name

Town

Town

Age

Age

Gender

Gender
OK

Montag, 10. Februar 14

OK
media queries

device detection

client-side vs. server-side

screen size
Montag, 10. Februar 14

user agent header
LAYOUT BREAKDOWN

Montag, 10. Februar 14
PIXEL RANGES

Diagram found on the web by Phillipp Schröder. thx
Montag, 10. Februar 14
DEVICE CLASSES

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

Montag, 10. Februar 14
AUSGANGSLAGE

• KuCe

äusserst erfolgreich in Betrieb seit 2000 (13 Jahre)

• nahezu
• legacy

Screens aus Desktop-Zeiten ...
AdressAdressAdressänderungen
Adressänderungen
änderungen
änderungen

FestnetzFestnetzFestnetzumleitungen
Festnetzumleitung...
Montag, 10. Februar 14
Dev Team (25+ devs)

browser

Montag, 10. Februar 14

sso

frontend
server

app
server

backend
ANFORDERUNGEN
1

cross-device application delivery

2

Optimierung für Touch-Geräte

3

Rückwärtskompatibilität zu legacy ...
*.html

*-phone.css

Desktop
tab

Montag, 10. Februar 14

fon

*-tablet.css

*-desktop.css
MASTERTEMPLATES
UND
KOMPONENTEN

Montag, 10. Februar 14
RESPONSIVE IN 3 SCHRITTEN
1

HTML - Migration der Mastertemplates

2

HTML - Contentmigration zu CSS Grid

3

CSS - Styles...
Montag, 10. Februar 14
Montag, 10. Februar 14
Montag, 10. Februar 14
Montag, 10. Februar 14
Montag, 10. Februar 14
Montag, 10. Februar 14
3
1
1

2

3
4

5
6

Montag, 10. Februar 14

2
4
5
6
ERWEITERUNGEN IM
TECH STACK
CSS

JavaScript

Media queries (W3C Standard)

Feature detection (Modernizr)

CSS-Grid (Twitte...
VORGEHEN

Montag, 10. Februar 14
CROSS-FUNCTIONAL TEAM

Montag, 10. Februar 14

Frontend-Entw.

Backend-Entw.

UX-Designer

Product owner

Tester
Sprint 0

User Story 3

User Story 5

User Story 2

User Story 4

User Story 6

Device detection

User Story 1

User Story...
LIVE DEMO

Montag, 10. Februar 14
HERAUSFORDERUNGEN
1

UX-Design (Komponentenmapping)

2

CSS-Management

3

Desktop first!

4

legacy JavaScript

Montag, 10...
ERFOLGSFAKTOREN
1

cross-functional Team

2

Komponentenansatz und -bibliothek

3

UI-Konvergenz auf Komponenten

4

konti...
Q&A
Montag, 10. Februar 14
RESULTATE
1

Optimierte Bedienung verschiedener Kanäle

2

Kontinuität vorhandener Skills und Systeme

3

Komponentenkatal...
Upcoming SlideShare
Loading in...5
×

Responsive Design for the enterprise

1,058

Published on

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

No Downloads
Views
Total Views
1,058
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×