Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Coding the UI: Lessons Learned from Orbitz and ebookers
Search
Mark Meeker
October 08, 2008
Technology
0
41
Coding the UI: Lessons Learned from Orbitz and ebookers
AjaxWorld - October, 2008
Mark Meeker
October 08, 2008
Tweet
Share
More Decks by Mark Meeker
See All by Mark Meeker
Building a Mobile Device Lab
meeker
0
130
Building a Live Style Guide
meeker
1
63
Front-End Operations
meeker
2
120
Simplifying Massive Changes with a Live Style Guide
meeker
0
45
Modern Browser Support
meeker
0
53
Strategies for Accessibility
meeker
0
32
Real World Web Development
meeker
0
120
Open & Acccessible
meeker
0
53
Merging Ajax and Accessibility
meeker
0
27
Other Decks in Technology
See All in Technology
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.5k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.8k
Azureの基本的な権限管理の勉強会
yhana
0
730
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
JSON攻略法.pdf
miyakemito
8
5.1k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
MapLibreとAmazon Location Service
dayjournal
1
160
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
2
260
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Documentation Writing (for coders)
carmenintech
60
3.9k
Design by the Numbers
sachag
274
18k
BBQ
matthewcrist
80
8.8k
Debugging Ruby Performance
tmm1
70
11k
Adopting Sorbet at Scale
ufuk
68
8.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Statistics for Hackers
jakevdp
789
220k
Transcript
AJAX*World* October,'2008 Mark*Meeker* CODING THE UI: LEARNED FROM ORBITZ &
EBOOKERS LESSONS
None
Dozens of apps, hundreds of VMs, thousands of services. UI
webapp (controller layer) JSP (page templating) JavaScript JSP 2.0 XHTML
1.0 CSS CSS 2.1
“As far as the customer is concerned, the interface is
the product.” - Jef Raskin
“Browsers are the most hostile software development environments possible.” -
Douglas Crockford
1,971 Revisions to 1 .css file since Oct. 2006 2.9
edits per day (if working weekends)
2007 - updates.orbitz.com 2008 - ebookers.com 2005 - CheapTickets.com 2006
- mobile.orbitz.com 2001 - Orbitz.com 2002 - OrbitzForBusiness.com
None
Single JSP files measuring in thousands of lines Massive amounts
of repeated markup 561 files with <html> tag Minimal re-use 66 tables on one page Experience
“Good judgement is the result of experience … Experience is
the result of bad judgement.” —Fred Brooks
Fresh start? http://flickr.com/photos/jeremybrooks/833157523/
Wishlist Internationalization Universality Maintain High Quality Code Promote Code Re-Use
Consistent Experience http://flickr.com/photos/litandmore/2664900676/
Internationalization http://www.flickr.com/photos/nickjacksonza/256651959/
6:50pm versus 18:50
14/11/07 versus 11/14/07
miles versus kilometers
3,000+ Labels, strings, paragraphs of text.
Traveler vs. Traveller vs. Passengers
1,500+ Images
Images Remove text as much as possible Consider cultural differences
in images choices
English
French
Japanese
Translation Small words can expand 200-300% Rule of thumb: 40%
Watch for wrapping issues (or lack thereof) Consider during design comp stage
Universality
None
Follow Web Standards
Follow Web Standards P.O.S.H. plain old semantic HTML Constant balancing
act Reduces display defects Reset Styles Validate CSS Reminder that it is an evolving code base
IE6 Support <!--[if IE 6]> <style type="text/css" media="all"> @import url(/style/layout/layoutIE6Fix.css);
</style> <![endif]-->
Firefox 3, OSX
IE 5.2, OSX
None
None
Amazon Kindle
Progressive Enhancement Content is KING! Start with semantic markup Get
working functionality with HTML only Enhance display with CSS Enhance behavior with JavaScript
Separation of Layers No in-line styles or in-line JavaScript If
it only works with JavaScript, create it with JavaScript
Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Varying levels of support Isn’t required
to be identical Not all or nothing
Graded Browser Support A-Grade White-list (well-known, measurable market share) Tested
by QA Team C-Grade Blacklist (incapable browsers, call drivers) X-Grade Everyone else
Maintain High Quality http://www.flickr.com/photos/harvypascua/46114061
High Quality Validation Build time tests (automated) static code analysis
CSS validation JSP compile Constant developer vigilance Sometimes constraints are good
Constraints Custom tags for some HTML elements anchors, images, form
elements Only allow subset of attributes no: onclick, id required: various content Able to enforce all inputs have labels Free CSS and JS support Free shared functionality
None
None
Debug Tools Logging Runtime in-application debugging Expose data to testers
Debug various types of modules Content Error message placement
File Structure Developer first Build for deploy later move files
around combine them reformat them strip comments
CSS Files Split between multiple files Typography Color Layout Modules
Nav Each declaration on its own line
Promote Re-Use (DRY) http://flickr.com/photos/kingdesmond/477389196
Composite View Separates “layout” of page from content Allows to
plug in different modules into page Used in Apache Tiles Leverage in-house framework Try and gain as much re-use of JSP code
Layout Header Footer Rail Body
Module
None
Page Definition header.jsp --> Header results.jsp --> Body sortbar.jsp -->
Rail footer.jsp --> Footer
Page Composition Page Def B/E Magic Browser
None
DRY Avoid targeting IDs for CSS or JS Custom attribute
for JavaScript Data Separation of Layers Helper code for small “controls” with the CSS to go with them Take advantage of lazy developers
Consistent Experience http://www.flickr.com/photos/kiad/491754035/
Consistent Experience Make learning how to use the site easier
for users. Reduce the number of patterns. Stick with the ones that work best. Meet users expectations on... messaging error placements interfaces
None
None
None
None
Consistent Experience Review the site for common patterns Introduce a
Pattern Library Build common “controls”
Follow the 80/20 Rule
“Simple things should be simple and complex things should be
possible.” —Alan Kay
80/20 Rule Make it easy to do the the common
task for 80% of your users Make it possible to do everything for the other 20% that need to
None
Hide/Reveal
Micro-content
80/20 Rule Patterns: Hide Reveal Tabs Pattern Pulling in content
via Ajax “Micro-content” bubbles
What’s Next? http://flickr.com/photos/reinvented/179863733/
Slides: http://markmeeker.com/events/ajaxworld2008 Email:
[email protected]
Blog: http://markmeeker.com Orbitz Jobs: http://www.orbitz.com/startmycareer Questions?