responsible web design
TRANSCRIPT
![Page 1: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/1.jpg)
RESPONSIBLE WEB DESIGNScott Fegette, Adobe Systems
![Page 2: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/2.jpg)
Responsible Web Design?
Staying current with web standards and best practices
Assuring consistent display and behavior across browsers
Using cutting-edge technology in a degradable manner
Constantly revisiting individual and group workflows
![Page 3: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/3.jpg)
The Web, Circa 2000
Table-based layouts still prevalent at major sites
JavaScript used for effect, not for function
‘Swiss Army Knife’ designer/developers
Poor markup principles making redesigns painful
Let’s look at some examples...
![Page 4: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/4.jpg)
The Purist’s View
CSSDesign Layer
JavaScriptBehavior Layer
XHTML/HTMLContent/Data Layer
ColdFusionPHPJSPetc.
![Page 5: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/5.jpg)
The Purist’s View
CSSDesign Layer
JavaScriptBehavior Layer
XHTML/HTMLContent/Data Layer
Selectors(IDs/Classes)
![Page 6: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/6.jpg)
Umm… duh.
Yeah, coders are already familiar with the MVC pattern.
Designers are just now coming around.
Give ‘em a break already.
![Page 7: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/7.jpg)
(x)HTML - Content Layer
Good Semantics == Solid Foundation
POSH (Plain Old Semantic HTML)
An unofficial subset of HTML 4.01/XHTML 1.0
Semantic markup ONLY - not presentational
Avoid Bed and BReakfast markup
POSH Must Validate!
![Page 8: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/8.jpg)
Thinking Semantically
Selectors used to precisely target content elements
CSS rules for visual characteristics
JavaScript for behavioral characteristics
Name elements for purpose, not appearance
Layout-specific markup can’t always be avoided...
… but can be minimized.
![Page 9: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/9.jpg)
Microformats
http://microformats.org
Simple, open data formats
Built on existing standards
Growing support from sites and vendors
Microformats Logo created by Rémi Prévost, and made available under a Creative Commons BY-NC-SA license.
![Page 10: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/10.jpg)
Microformat Examples...
(your second break from slide deck hell.)
![Page 11: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/11.jpg)
Style and Substance
FlickrhCard, XFN, Geo
hResume, hCard
Cork’d
hReview, hCard
Upcoming.orghCalendar(took under an hour to implement!)
Microformats Logo created by Rémi Prévost, and made available under a Creative Commons BY-NC-SA license.
![Page 12: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/12.jpg)
CSS - Presentation Layer
Bad Form
Rules placed inline (i.e. <a href=”foo.php” style=”text-align:left”> )
Not-As-Bad Form
Styles in document head (i.e. <style> … </style> )
Best Form
Styles in external files (i.e. <link type=”text/css” src=”foo.css” /> )
![Page 13: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/13.jpg)
CSS - Presentation Layer
(I hope you’re thinking ‘duh’ again now.)
![Page 14: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/14.jpg)
Semantic CSS
Your code is a roadmap. Does it make sense?
Name for a style’s intent, not it’s visual representation.
Good Examples
#header#link-list.attention
Poor Examples
#bold-24pt-text#right-page-list
#red-text
![Page 15: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/15.jpg)
CSS Workflow & Management
Work iteratively and strategically
Iterate design with <head> based styles
Migrate externally for implementation
Separate CSS rules by category/function
Positional/Layout rules
Typographic rules
Application and Functional rules
Browser Hacks
![Page 16: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/16.jpg)
JavaScript - Behavior Layer
Design is becoming a technical discipline
Pages are rarely just pages anymore
Frameworks proliferating at a breakneck pace
On the dark days of DHTML
Are we still stuck in 1998?
![Page 17: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/17.jpg)
Progressive Enhancement
See also : “Graceful Degradation”
Increase page functionality as browser permits
Build solid base experience first, enhance second
Your page should remain functionalregardless of the browser’s capabilities.
![Page 18: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/18.jpg)
Unobtrusive JavaScript
Fully separate behavior from markup
Say goodbye to inline event handlers!
Attach behavior at runtime via DOM
var myRegion = document.getElementById(”news_pod”);
myRegion.onclick = function() {// do some stuff// do more stuff}
![Page 19: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/19.jpg)
The New Workflow(s)
Browsers are even more central to workflow today
Firefox/Firebug/Web Developer’s Toolbar
Pages are no longer pages, but entry points
Build Markup
Apply Selectors
CSS Styles Applied
DebugLayout
Behaviors Attached
DebugBehaviors
Party
'Baseline' Experience
![Page 20: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/20.jpg)
Pulling it All Together
Effectively designing stateful experiences
Working with code, not against it
Managing compound documents holistically
Moving towards unobtrusive JavaScript
Sneak Peek Time...
![Page 21: RESPONSIBLE WEB DESIGN](https://reader036.vdocument.in/reader036/viewer/2022071602/613d5ee7736caf36b75c882e/html5/thumbnails/21.jpg)
Thanks For Indulging!Any Questions?