Front-end Architecture - Speaker Deck

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.