Responsive Design for the enterprise
-
Upload
marc-baechinger -
Category
Technology
-
view
880 -
download
3
description
Transcript of 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