Front-end Architecture

An early exploration of the value of investing more seriously in front-end web development as the world was transitioning from a table-centric approach to front-end development to following Web Standards and building more maintainable front-ends.

Transcript

1. Front-End Architecture It’s an investment for the future.
2. LOW Architectural Investment HIGH Short-Term Costs Long-Term Costs
3. 5 Year Lifetime Short-Term Costs Long-Term Costs Low Investment
4. 5 Year Lifetime Short-Term Costs Long-Term Costs High Investment
5. Software Entropy & Total Cost of Ownership Maintenance, Morale, Updates, etc.
6. Explore Your Options The first solution isn’t always the best.
7. Be Proactive instead of reactive. Anticipating Impact and thinking ahead.
8. Myth of Separation Loose coupling is a target, not a goal.
9. Look for Simple solutions. Wow! This page prints beautifully!
10. Typographic Choices (and ramifications) Initial Costs Content Maintenance Code Maintenance Accessibility User-Agent Consistency Design Control Separation CSS Image Replacement sIFR Image Tags Server- Generated Images
11. In the Real World
12. http://www.DallasNews.com
13. http://www.NewYorkTimes.com
14. http://www.MySpace.com
15. http://www.MySpace.com/mikeindustries/
16. The Ingredients.
17. CSS IA DOM Scripting Accessibility Design AJAX Markup User Agents Flash Usability Content Back-End Project Mgmt.
18. User-Agents
19. CSS DOM Scripting Accessibility AJAX Markup User Agents
20. What you support influences how you construct your site. > how much sleep you’ll lose
21. I, for one, welcome our browser overlords. They’re not leaving anytime soon.
22. We’re making progress... Netscape 4, IE 5, IE 6? Firefox & IE 7
23. Markup
24. CSS DOM Scripting Accessibility Design AJAX Markup User Agents Content Back-End
25. Markup is the technical foundation. Myth of Separation http://www.garrettdimon.com/archives/front-end-architecture-markup-is-the-technical-foundation
26. The tables have got to go. The first step is admitting you have a problem. http://www.stopdesign.com/articles/throwing_tables/
27. Microformats Elegant & Semantic Simplicity http://www.Microformats.org
28. Accessibility Markup is the root of accessible sites.
29. CSS
30. CSS DOM Scripting Accessibility Design Markup User Agents Content Back-End
31. Beware of Browser Hacks No Guarantees. They’re only a patch. http://www.thinkvitamin.com/features/css/stop-css-hacking
32. Be Bulletproof. The only thing constant is change.
33. Limitless options. Selectors, Shorthand, Redundancy vs. Dependency, Separate Files, etc. http://www.digital-web.com/articles/architecting_css/
34. DOM Scripting (aka JavaScript)
35. CSS DOM Scripting Accessibility Design AJAX Markup User Agents Usability
36. The Dark Ages Browser Wars
37. The Renaissance Progressive Enhancement & Standards http://domscripting.com/blog/
38. DOM Scripting Scripting libraries and frameworks. Libraries & Frameworks
39. Scripting is for “behavior” Styling forms and handling business logic = Red Flags
40. Abusing DOM Manipulation this.style = font tags of DOM Scripting
41. AJAX
42. DOM Scripting Accessibility Design AJAX Markup User Agents Usability Content Back-End
43. ...your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should. “ ” - Jurrassic Park, 1993
44. The Traditional Model Full Page Loads Submit Business Logic
45. The New Model Partial Page Loads Submit Business Logic
46. Plan for AJAX from the beginning. Implement AJAX at the end. “ ” - Jeremy Keith
47. The Hijax Model Request Interception Submit Submit Hijax Business Logic
48. Response Format Options XML, HTML, or JSON? http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html
49. Back-End & Bandwidth MacRumors used only 32 GB of bandwidth instead of an estimated 196 GB if they had a non-AJAX version of the live keynote.
50. Accessibility & AJAX Can they play nicely? http://www.sitepoint.com/article/ajax-screenreaders-work
51. Accessibility
52. CSS IA DOM Scripting Accessibility Design AJAX Markup User Agents Flash Usability Content
53. Vision isn’t the only “disability” Alternate Devices, Search Engines, Contrast, Color-Blind, Keyboard Navigation, Decreased Mobility
54. No magic bullet. Perspective & Understanding
55. Labels are just the beginning.
56. Social Responsibility UK, Government, EU?, Target Lawsuit? > Legal
57. Inherent Benefits Clean Semantic Markup Usability (Fitt’s Law) SEO
58. Design
59. CSS IA DOM Scripting Accessibility Design AJAX Markup Flash Usability Content
60. Rise of Design The New User Experience Focus
61. Engineers vs. Designers Left-Brain vs. Right-Brain
62. The right design for the job. Undesign is the new black!
64. Usability
65. IA DOM Scripting Accessibility Design AJAX Flash Usability
66. User “Testing”. Understand people not results.
67. Heat Maps & User Testing 80% Common Sense? http://www.useit.com/alertbox/reading_pattern.html
68. Jakob Nielsen. Visual Design? Information Architecture?
69. Information Architecture
70. IA Accessibility Design Usability Content Back-End Project Mgmt.
71. Information Design Google News vs. Google Finance
72. Prototyping Choices (and ramifications) Short-Term Costs Long-Term Costs Accuracy Flexibility Sketches PDD’s Wireframes HTML Prototypes Getting Real
73. Tags for a bug tracker? Tags are loose and not precise.
74. Content
75. IA Accessibility Design Markup Content Back-End
76. The red-headed stepchild. Clients as copywriters?
77. Content Dominoes Don’t believe it matters?
78. Content will change. Remember. The only thing constant is change.
79. Flash
80. IA DOM Scripting Accessibility Design AJAX Flash Usability Markup
81. sIFR Scalable Inman Flash Replacement DOM Scripting Accessibility Design Flash Markup
82. Back-End
83. IA AJAX Markup Content Back-End
84. Presentation Layer ASPX, Rails Views, etc.
85. Elegant Integration Make an engineer happy.
    
86. Database Information Architecture & Content
87. Web Services & API’s AJAX is no place for business logic.
88. Project Management
89. CSS IA DOM Scripting Accessibility Design AJAX Markup User Agents Flash Usability Content Back-End Project Mgmt.
90. Managing change. (And the associated costs.)
91. Managing specialists. (And their very special egos.)
92. The whole is greater than the sum of its parts.
93. Thank You http://www.garrettdimon.com/fea/