Coding the UI

1. Coding the UI: Lessons Learned from ebookers and Orbitz Mark Meeker AjaxWorld Architect, UI Engineering San Jose, California Orbitz Worldwide October 21, 2008

2. UI Dozens of apps, hundreds of VMs, thousands of services.

3. CSS JavaScript CSS 2.1 JSP XHTML 1.0 JSP 2.0 (page templating) webapp (controller layer)

4. “As far as the customer is concerned, the interface is the product.” - Jef Raskin

5. “Browsers are the most hostile software development environments possible.” - Douglas Crockford

6. 1,971 Revisions to 1 .css ﬁle since Oct. 2006 2.9 edits per day (if working weekends)

7. 2001 - Orbitz.com 2002 - OrbitzForBusiness.com 2005 - CheapTickets.com 2006 - mobile.orbitz.com 2007 - updates.orbitz.com 2008 - ebookers.com

8. Experience Single JSP ﬁles measuring in thousands of lines Massive amounts of repeated markup 561 ﬁles with <html> tag Minimal re-use 66 tables on one page

9. “Good judgement is the result of experience … Experience is the result of bad judgement.” —Fred Brooks

10. Fresh start? http://ﬂickr.com/photos/jeremybrooks/833157523/

11. Wishlist Internationalization Universality Maintain High Quality Code Promote Code Re-Use Consistent Experience http://ﬂickr.com/photos/litandmore/2664900676/

12. Internationalization http://www.ﬂickr.com/photos/nickjacksonza/256651959/

13. 6:50pm versus 18:50

14. 14/11/07 versus 11/14/07

15. miles versus kilometers

16. 3,000+ Labels, strings, paragraphs of text.

17. Traveler vs. Traveller vs. Passengers

18. 1,500+ Images

19. Images Remove text as much as possible Consider cultural differences in images choices

20. English

21. French

22. Japanese

23. Translation Small words can expand 200-300% Rule of thumb: 40% Watch for wrapping issues (or lack thereof) Consider during design comp stage

24. Universality

25. Follow Web Standards

26. 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

27. IE6 Support

28. Firefox 3, OSX

29. IE 5.2, OSX

30. Amazon Kindle

31. Progressive Enhancement Content is KING! Start with semantic markup Get working functionality with HTML only Enhance display with CSS Enhance behavior with JavaScript

32. Separation of Layers No in-line styles or in-line JavaScript If it only works with JavaScript, create it with JavaScript

33. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Varying levels of support Isn’t required to be identical Not all or nothing

34. 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

35. Maintain High Quality http://www.ﬂickr.com/photos/harvypascua/46114061

36. High Quality Validation Build time tests (automated) static code analysis CSS validation JSP compile Constant developer vigilance Sometimes constraints are good

37. 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

38. Debug Tools Logging Runtime in-application debugging Expose data to testers Debug various types of modules Content Error message placement

39. File Structure Developer ﬁrst Build for deploy later move ﬁles around combine them reformat them strip comments

40. CSS Files Split between multiple ﬁles Typography Color Layout Modules Nav Each declaration on its own line

41. Promote Re-Use (DRY) http://ﬂickr.com/photos/kingdesmond/477389196

42. 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

43. Layout Header Rail Body Footer

44. Module

45. Page Deﬁnition header.jsp --> Header results.jsp --> Body sortbar.jsp --> Rail footer.jsp --> Footer

46. Page Composition B/E Page Browser Def Magic

47. 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

48. Consistent Experience http://www.ﬂickr.com/photos/kiad/491754035/

49. 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

50. Consistent Experience Review the site for common patterns Introduce a Pattern Library Build common “controls”

51. Follow the 80/20 Rule

52. “Simple things should be simple and complex things should be possible.” —Alan Kay

53. 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

54. Hide/Reveal

55. Micro-content

56. 80/20 Rule Patterns: Hide Reveal Tabs Pattern Pulling in content via Ajax “Micro-content” bubbles

57. What’s Next? http://ﬂickr.com/photos/reinvented/179863733/

58. Questions? Slides: http://markmeeker.com/events/ajaxworld2008 Email: mark@markmeeker.com Blog: http://markmeeker.com Orbitz Jobs: http://www.orbitz.com/startmycareer

Coding the UI

You are reading a preview.

Check these out next

Coding the UI

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Similar to Coding the UI (20)

More from Mark Meeker (8)

Recently uploaded (20)

Coding the UI