Responsive Design for the enterprise

„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

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

Town

Age

Gender

OK

Name

Town

Age

Gender

OK

Montag, 10. Februar 14

client-side vs. server-side

device detectionmedia queries

screen size user agent headerMontag, 10. Februar 14

LAYOUT BREAKDOWN

Montag, 10. Februar 14

PIXEL RANGES

Diagram found on the web by Phillipp Schröder. thxMontag, 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 600 Screens mit komplexer Anbindung an Backends

• legacy Screens aus Desktop-Zeiten (HTML-Tables/Flash)

• laufend erweitert durch neue Usecases

Montag, 10. Februar 14

Adress-änderungen

Festnetz-umleitungen

Passwörter-Management

Rechnungs-information

TV Sender-reihenfolge

Combox-Settings

Anruf-Sperrsets

SIM-Karten-Sperrung

Router-Aktivierung

Adress-änderungen

Festnetz-umleitungen

Passwörter-Management

Rechnungs-information

TV Sender-reihenfolge

Combox-Settings

Anruf-Sperrsets

SIM-Karten-Sperrung

Router-Aktivierung

Adress-änderungen

Festnetz-umleitungen

Passwörter-Management

Rechnungs-information

TV Sender-reihenfolge

Combox-Settings

Anruf-Sperrsets

SIM-Karten-Sperrung

Router-Aktivierung

Adress-änderungen

Festnetz-umleitungen

Passwörter-Management

Rechnungs-information

TV Sender-reihenfolge

Combox-Settings

Anruf-Sperrsets

SIM-Karten-Sperrung

Router-Aktivierung

Montag, 10. Februar 14

Montag, 10. Februar 14

frontendserver

appserverbrowser

backendsso

Dev Team (25+ devs)

Montag, 10. Februar 14

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

*-phone.css *-tablet.css *-desktop.css

*.html

Desktop

tab fon

Montag, 10. Februar 14

MASTERTEMPLATES UND

KOMPONENTEN

Montag, 10. Februar 14

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

Montag, 10. Februar 14

Montag, 10. Februar 14

Montag, 10. Februar 14

Montag, 10. Februar 14

Montag, 10. Februar 14

Montag, 10. Februar 14

1 23

4

5

3

6

1

2

4

5

6

Montag, 10. Februar 14

ERWEITERUNGEN IMTECH STACK

JavaScriptCSS

Less CSS-Preprocessor

CSS-Grid (Twitter Bootstrap)

Karma Testrunner

Jasmine Unittests

Feature detection (Modernizr)Media queries (W3C Standard)

Montag, 10. Februar 14

VORGEHEN

Montag, 10. Februar 14

Frontend-Entwickler

UX-Designer

Frontend-Entw. Backend-Entw.Product owner

Tester

CROSS-FUNCTIONAL TEAM

Montag, 10. Februar 14

Master templates

Device detection

Sprint 0

User Story 1

User Story 2

User Story 1

User Story 2

User Story 3

User Story 4

User Story 5

User Story 6

User Story 4

User Story 3

Sprint 1 Sprint 2

AufbauHTML-

Styleguide

Montag, 10. Februar 14

LIVE DEMO

Montag, 10. Februar 14

HERAUSFORDERUNGEN

1 UX-Design (Komponentenmapping)

2 CSS-Management

3 Desktop first!

4 legacy JavaScript

Montag, 10. Februar 14

ERFOLGSFAKTOREN

1 cross-functional Team

2 Komponentenansatz und -bibliothek

3 UI-Konvergenz auf Komponenten

4 kontinuierliche Migration ermöglicht Lernprozesse

Montag, 10. Februar 14

Q&A

Montag, 10. Februar 14

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