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.
Front-End ArchitectureIt’s an investment for the future.
View Slide
LOWArchitectural InvestmentHIGHShort-Term CostsLong-Term Costs
5 Year LifetimeShort-Term CostsLong-Term CostsLow Investment
5 Year LifetimeShort-Term CostsLong-Term CostsHigh Investment
Software Entropy &Total Cost of OwnershipMaintenance, Morale, Updates, etc.
Explore Your OptionsThe first solution isn’t always the best.
Be Proactive instead of reactive.Anticipating Impact and thinking ahead.
Myth of SeparationLoose coupling is a target, not a goal.
Look for Simple solutions.Wow! This page prints beautifully!
Typographic Choices(and ramifications)Initial Costs ContentMaintenanceCodeMaintenanceAccessibility User-AgentConsistencyDesignControlSeparationCSSImageReplacementsIFRImage TagsServer-GeneratedImages
In the Real World
http://www.DallasNews.com
http://www.NewYorkTimes.com
http://www.MySpace.com
http://www.MySpace.com/mikeindustries/
The Ingredients.
CSSIADOMScriptingAccessibilityDesign AJAXMarkupUserAgentsFlashUsabilityContentBack-EndProjectMgmt.
User-Agents
CSSDOMScriptingAccessibilityAJAXMarkupUserAgents
What you support influenceshow you construct your site.>how much sleep you’ll lose
I, for one, welcome ourbrowser overlords.They’re not leaving anytime soon.
We’re making progress...Netscape 4, IE 5, IE 6?Firefox & IE 7
Markup
CSSDOMScriptingAccessibilityDesign AJAXMarkupUserAgentsContentBack-End
Markup is thetechnical foundation.Myth of Separationhttp://www.garrettdimon.com/archives/front-end-architecture-markup-is-the-technical-foundation
The tables have got to go.The first step is admitting you have a problem.http://www.stopdesign.com/articles/throwing_tables/
MicroformatsElegant & Semantic Simplicityhttp://www.Microformats.org
AccessibilityMarkup is the root of accessible sites.
CSS
CSSDOMScriptingAccessibilityDesign MarkupUserAgentsContentBack-End
Beware of Browser HacksNo Guarantees. They’re only a patch.http://www.thinkvitamin.com/features/css/stop-css-hacking
Be Bulletproof.The only thing constant is change.
Limitless options.Selectors, Shorthand, Redundancy vs.Dependency, Separate Files, etc.http://www.digital-web.com/articles/architecting_css/
DOM Scripting(aka JavaScript)
CSSDOMScriptingAccessibilityDesign AJAXMarkupUserAgentsUsability
The Dark AgesBrowser Wars
The RenaissanceProgressive Enhancement & Standardshttp://domscripting.com/blog/
DOM ScriptingScripting librariesand frameworks.Libraries & Frameworks
Scripting is for “behavior”Styling forms and handling business logic = Red Flags
Abusing DOM Manipulationthis.style = font tags of DOM Scripting
AJAX
DOMScriptingAccessibilityDesign AJAXMarkupUserAgentsUsabilityContentBack-End
...your scientists were sopreoccupied with whether ornot they could, they didn’tstop to think if they should.“”- Jurrassic Park, 1993
The Traditional ModelFull Page LoadsSubmitBusinessLogic
The New ModelPartial Page LoadsSubmitBusinessLogic
Plan for AJAX from thebeginning. Implement AJAXat the end.“”- Jeremy Keith
The Hijax ModelRequest InterceptionSubmitSubmit HijaxBusinessLogic
Response Format OptionsXML, HTML, or JSON?http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html
Back-End & BandwidthMacRumors used only 32 GB of bandwidth insteadof an estimated 196 GB if they had a non-AJAXversion of the live keynote.
Accessibility & AJAXCan they play nicely?http://www.sitepoint.com/article/ajax-screenreaders-work
Accessibility
CSSIADOMScriptingAccessibilityDesign AJAXMarkupUserAgentsFlashUsabilityContent
Vision isn’t the only “disability”Alternate Devices, Search Engines, Contrast,Color-Blind, Keyboard Navigation,Decreased Mobility
No magic bullet.Perspective & Understanding
Labels are just the beginning.
Social ResponsibilityUK, Government, EU?, Target Lawsuit?>Legal
Inherent BenefitsClean Semantic MarkupUsability (Fitt’s Law)SEO
Design
CSSIADOMScriptingAccessibilityDesign AJAXMarkupFlashUsabilityContent
Rise of DesignThe New User Experience Focus
Engineers vs. DesignersLeft-Brain vs. Right-Brain
The right design for the job.Undesign is the new black!
Usability
IADOMScriptingAccessibilityDesign AJAXFlashUsability
User “Testing”.Understand people not results.
Heat Maps & User Testing80% Common Sense?http://www.useit.com/alertbox/reading_pattern.html
Jakob Nielsen.Visual Design? Information Architecture?
Information Architecture
IAAccessibilityDesignUsabilityContentBack-EndProjectMgmt.
Information DesignGoogle News vs. Google Finance
Prototyping Choices(and ramifications)Short-Term Costs Long-Term Costs Accuracy FlexibilitySketchesPDD’sWireframesHTML PrototypesGetting Real
Tags for a bug tracker?Tags are loose and not precise.
Content
IAAccessibilityDesign MarkupContentBack-End
The red-headed stepchild.Clients as copywriters?
Content DominoesDon’t believe it matters?
Content will change.Remember.The only thing constant is change.
Flash
IADOMScriptingAccessibilityDesign AJAXFlashUsabilityMarkup
sIFRScalable Inman Flash ReplacementDOMScriptingAccessibilityDesignFlashMarkup
Back-End
IAAJAXMarkupContentBack-End
Presentation LayerASPX, Rails Views, etc.
Elegant IntegrationMake an engineer happy.
DatabaseInformation Architecture & Content
Web Services & API’sAJAX is no place for business logic.
Project Management
Managing change.(And the associated costs.)
Managing specialists.(And their very special egos.)
The whole is greater thanthe sum of its parts.
Thank Youhttp://www.garrettdimon.com/fea/
garrettdimon
rabbitmagician1
ogiwarat
ippey
daisukeshinoku
polpielladev
chobishiba
miyabigouji
peterfriese
ntsk
ivargrimstad
holman
keithpitt
thekraken
chriscoyier
marktimemedia
brianwarren
paulrobertlloyd
shlominoach
paigeccino
morganepeng
jasonvnalue
mthomps