Embed Size (px)
DESCRIPTION
The slides from @oliverdore's session at ngEurope 2014 on responsive design, and how AngularJS was to realize the technical and creative challenges of building the next generation of airline website.
Citation preview
RESPONSIVE TAKES FLIGHT
@oliverdore
ABOUT WORK & CO
Work & Company was designed from the ground up to create the types of digital products and services that
can singlehandedly change the face of a brand.
2013FOUNDED
BrooklynHEADQUARTERS
EMPLOYEES
53
OPERATIONS
CASan Francisco
FRParis
BRRio de Janeiro
“Virgin America is so far and awaymy favorite airline that second place isn’t even close." — John Gruber, Daring Fireball
NOT SO LONG AGO…
HOW WE THOUGHT ABOUT THE REDESIGN
CONVERSION
RESPONSIVE
BRAND
DESIGN
PROTOTYPE
TEST
ITERATE
PROTOTYPING & USER TESTING
“There wasn’t a design phase and a development phase - it was designers and developers working together.” — Joe Stewart, Design
“This isn’t how an airline site should be.”
OUR APPROACH TO RESPONSIVE
EVERYTHING FIRST.
ARCHITECTURE
UI FRAMEWORK
RESPONSIVE COMPONENTS
FORMS
IMAGES
TECHNICAL APPROACH 1
2 3 4 5
ARCHITECTURE1
We’re not experts.
Angular was opinionated where it mattered.But it was also flexible where it mattered.
API Functional Utility
Controllers
Views Directives
RequireJS
GruntJS
Node / NPM
REST API Magnolia CMS Jenkins
Compass Susy
SASS
Ruby
UI FRAMEWORK2
RESPONSIVECOMPONENTS3
windowService
window
vx-common-window <body>
controller controller controller
directive directive
FORMS4
Travelers
Cabins
Travel Advisories
TAM
News
Cities
Warnings
ADS
Seats
Upgrades
MCS
Errors
Account
Charges
Availability
Status
Points
Fees
Payment
Session
Promotions
Avatar
Fares
Non-stop
Alerts Sales
First
Dates
Refund
DHS
Thru
Insurance
Connecting
Rewards
IMAGES5
Total Transfer Size
1682kb 1739kb1783kb
1893kb
Mo $watch(), mo problems.
TAKE OFF
"Most Impressive Industry Evolution" — UX AWARDS
"The first radical rethinking of the flight booking experience in a decade" — WIRED
"Virgin America's new site is unlike any other travel provider's site we've seen. We hope everyone else will copy it." — FAST COMPANY
![Flight! Magazin - Flight! Mai 2012 [CLASSICS]](https://img.pdfslide.tips/doc/110x75/568ca7841a28ab186d95abda/flight-magazin-flight-mai-2012-classics.jpg)
![Flight! Magazin - Flight! März 2012 [CLASSICS]](https://img.pdfslide.tips/doc/110x75/568ca7871a28ab186d95bb74/flight-magazin-flight-maerz-2012-classics.jpg)
![Flight! Magazin - Flight November 2012 [CLASSICS]](https://img.pdfslide.tips/doc/110x75/579053e41a28ab900c8e2cb0/flight-magazin-flight-november-2012-classics-5790e37ae0eb4.jpg)
![Flight! Magazin - Flight! November 2012 [CLASSICS]](https://img.pdfslide.tips/doc/110x75/568ca77d1a28ab186d9590a4/flight-magazin-flight-november-2012-classics.jpg)
