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