Post on 13-Jun-2015
Using Flash as Bondojames vreeland
2007-11-10
Who is this dufus
Who is this dufus
Who is this dufus
Not a Flash developer
Who is this dufus
Not a Flash developer
Passionate about my users
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Who is this dufus
Who is this dufus
Who is this dufus
Not a Flash developer
Who is this dufus
Not a Flash developer
Passionate about my users
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Who is this dufus
Who is this dufus
Not a Flash developer
Who is this dufus
Not a Flash developer
Passionate about my users
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Who is this dufus
Not a Flash developer
Who is this dufus
Not a Flash developer
Passionate about my users
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Who is this dufus
Not a Flash developer
Passionate about my users
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Who is this dufus
Not a Flash developer
Passionate about my users
Personally indifferent in terms of platform selection
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpflickrcomphotosromanedirisinghe61596061
Ok but Bondo
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where are we now
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where are we going
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where are we going
Everywhere
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where are we going
Everywhere
Tons of places we donrsquot expect to see a ldquoweb technologyrdquo
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Showing up in odd places
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Moxi Media Center
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpflickrcomphotosfrangino115899032
iRiver U10
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Digital Cameras
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpflickrcomphotosaudioblog53030295
Kodak Easyshare-One
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Digital Cameras
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpflickrcomphotosputu385128499
Nokia N80
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Where
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
ldquoOtherrdquo devices
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpflickrcomphotosjvree496617094
Chumby
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
(Shameless plug)
Organicrsquos lobby
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Itrsquos not that widespread Is it
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Itrsquos not that widespread Is it
HP iPAQ rz1700HP iPAQ rx3400HP iPAQ rx3700HP iPAQ rw6100HP iPAQ rx3100Toshiba GENIO e550Toshiba GENIO e550GSony CLIE NX60Sony CLIE NX70VSony CLIE NZ90Sony CLIE TG50Sony CLIE UX40Sony CLIE UX50Moxi Digital Inc Moxi Media CenterMicrosoft TV MSTVNokia MediaterminalThomson Multimedia TAK TViRiver U10CorAccess Home CompanionKodak Easyshare-One Zoom Digital CameraSiemens SIMPad SL4ChumbyFujitsu F505iFujitsu F505iGPSFujitsu F505isFujitsu F506iFujitsu F700iFujitsu F700iSFujitsu F702iDFujitsu F882iES(FOMA Raku Raku PHONE III)Fujitsu F900iFujitsu F900iCFujitsu F900iTFujitsu F901iCFujitsu F901iSFujitsu F902iFujitsu F902iSHitachi W22HCasio Hitachi A5512CACasio Hitachi A5513CA(GzOne TYPE-R)Casio Hitachi W21CACasio Hitachi W21CAIICasio Hitachi W22HCasio Hitachi W31CACasio Hitachi W31H(PENCK)
Casio Hitachi W32HCasio Hitachi W41CACasio Hitachi W41HCasio Hitachi W42CA(Gz One)Casio Hitachi W42HCasio Hitachi W43CACasio Hitachi W43HKyocera A1403KKyocera A5515KKyocera A5521KKyocera W21KKyocera W21SAKyocera W31KKyocera W31KIIKyocera W32KKyocera W41KKyocera W42KKyocera W43KLG 8300LG 9800LG VX8100LG VX8500 (Chocolate)LG VX9900Mitsubishi D505iMitsubishi D505iSMitsubishi D506iMitsubishi D701iMitsubishi D701iWM(MUSIC PORTER II)Mitsubishi D702iMitsubishi D702iBCLMitsubishi D702iFMitsubishi D851iWM(MUSIC PORTER X)Mitsubishi D900iMitsubishi D901iMitsubishi D901iSMitsubishi D902iMitsubishi D902iSMitsubishi M430iMotorola A920Motorola MOTOKRZR K1mMotorola Razr V3cMotorola Razr V3mNEC N505iNEC N505iSNEC N505iSNEC N506iNEC N506iS
NEC N506iSIINEC N700iNEC N701iECONEC N702iDNEC N702iSNEC N900iNEC N900iGNEC N900iLNEC N900iSNEC N901iCNEC N901iSNEC N902iNEC N902iSNEC N902iX(HIGH-SPEED)Nokia 3230Nokia 3250Nokia 3600Nokia 3620Nokia 3660Nokia 5200Nokia 5300Nokia 5500Nokia 6125Nokia 6131Nokia 6151Nokia 6260Nokia 6300Nokia 6600Nokia 6620Nokia 6630Nokia 6670Nokia 6680Nokia 6681Nokia 6682Nokia 7390Nokia 7610Nokia 7710Nokia 8800Nokia 9200 CommunicatorNokia 9500 CommunicatorNokia E60Nokia E61Nokia E62Nokia E70Nokia E70-1Nokia N70Nokia N71Nokia N71-1Nokia N73
Nokia N75Nokia N80Nokia N90Nokia N91Nokia N91-1Nokia N92Nokia N93Nokia N93iNokia N-Gage QDNokia N-GageNokia vvE50Panasonic P505iPanasonic P505iSPanasonic P506iCPanasonic P506iCIIPanasonic P700iPanasonic P701iDPanasonic P702iPanasonic P702iDPanasonic P851iPanasonic P900iPanasonic P900iVPanasonic P901iPanasonic P901iSPanasonic P901iTVPanasonic P902iPanasonic P902iSSamsung SCH-A930Samsung SCH-A950Samsung SCH-A970Samsung SCH-A990Samsung 705SCSamsung 706SCSamsung 804SSSanyo A5507SASanyo A5508SASanyo A5522SASanyo SA700iSSanyo SA702iSanyo SA800i(Kids PHONE)Sanyo W21SASanyo W22SASanyo W31SASanyo W31SAIISanyo W32SASanyo W33SASanyo W33SAIISanyo W41SATottori Sanyo A5507SA
Tottori Sanyo A5508SA(talby)Tottori Sanyo A5510SA(Sweets)Tottori Sanyo A5514SATottori Sanyo A5518SATottori Sanyo A5518SA(Camera-less Model)Tottori Sanyo A5519SA(Sweets pure)Tottori Sanyo A5520SA(Junior Keitai)Tottori Sanyo A5520SAII(Junior Keitai)Tottori Sanyo W42SASendo XSharp 703SHSharp 703SHfSharp 705SH(SLIMIA)Sharp 802SHSharp 804SHSharp 810SHSharp 811SHSharp 902SHSharp 903SHSharp 904SHSharp 905SH(AQUOS keitai)Sharp SH505iSharp SH505iSSharp SH506iCSharp SH700iSharp SH700iSSharp SH702iDSharp SH702iSSharp SH851i(DOLCE)Sharp SH900iSharp SH901iCSharp SH901iSSharp SH902iSharp SH902iSSharp SH902iSL(DOLCE SL)Sharp SH903iSharp W41SHSiemens SX1Sony Ericsson 802SESony Ericsson_K600Sony Ericsson_K600cSony Ericsson_K600iSony Ericsson K600icSony Ericsson_K606c
Sony Ericsson_K606cSony Ericsson_K606iSony Ericsson K606icSony Ericsson_K608cSony Ericsson_K608iSony Ericsson K608icSony Ericsson_K610iMSony Ericsson P800Sony Ericsson P900Sony Ericsson P910Sony Ericsson Premini IISony Ericsson SO505iSony Ericsson SO505iCSony Ericsson SO505iSSony Ericsson SO506i(premini-II)Sony Ericsson SO506iCSony Ericsson SO506iS(premini-IIS)Sony Ericsson SO702iSony Ericsson SO902iSony Ericsson SO902iWP+Sony Ericsson_V600iSony Ericsson_V800Sony Ericsson W21SSony Ericsson_W300iSony Ericsson W31SSony Ericsson W32SSony Ericsson W41SSony Ericsson W42S(Walkman Keitai)Sony Ericsson W43SSony Ericsson W550Sony Ericsson_W550cSony Ericsson_W550iSony Ericsson W600Sony Ericsson_W810iSony Ericsson W900Sony Ericsson W900iSony Ericsson Z800Toshiba 810TToshiba 910TToshiba A5511TToshiba A5516TToshiba A5517T(Simple Phone)Toshiba W21TToshiba W31TToshiba W32TToshiba W41T(MUSIC-HDD)
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Jeez Why is it all over the place
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Jeez Why is it all over the place
Easy for designers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Jeez Why is it all over the place
Easy for designers
Easy for developers
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Jeez Why is it all over the place
Easy for designers
Easy for developers
Why do more than you need to
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
What can I play with now
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpwwwairtightinteractivecomprojectstiltviewerapp
TiltViewer
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpwwwfloorplannercom3ddemo
Floorplanner 3D
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpexploretwittercomblocks
Twitter Blocks
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httppapercritterscompcphp
Paper Critters
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httplabsdiggcom
Digg Labs
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Visualizations
Papervision 3Dhttpcodegooglecomppapervision3d
Digg Labshttplabsdiggcom
Google Analyticshttpwwwgooglecomanalytics
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpwwwgooglecomanalytics
Google Analytics
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpsnookcasnitter amp httpfunkatroncomspaz
Snitter and Spaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpwwwdigidoodcomdigimix
Digimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Desktop Goodies
Twitter AIR appshttpsnookcasnitterhttpfunkatroncomspaz
Digimixhttpwwwdigidoodcomdigimix
EG 2006
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
EG 2006
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Eye Candy
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Twitter noise
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Flickr photos by tag
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Heh
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Heh
Progressive page enhancement
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Semantic XHTML Parsing
Heh
Progressive page enhancement
Maintains SEO508
Graceful Degradation
Low bandwidth version of the site for ldquofreerdquo
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Eating the DOM
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Eating the DOM
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Ask DrZ
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
httpwwwdodgecomen
Feature Page - Flash
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Feature Page - CSS only
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Cheating on AJAX
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Cheating on AJAX
Acting as a cross domain proxy
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Font constraints
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Browser shortcomings
Font constraints
sIFRhttpnovemberbornnetsifr3look-into-the-future
Complex PNG support
On-the-fly graphical effects
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Learn from otherrsquos flubs
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Really bad user designhttpwwwslidesharenetcarsonifiedmichael-kowalski
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Build backwards from your user
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Build backwards from your user
Donrsquot do what is besteasiest for you
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Build backwards from your user
Donrsquot do what is besteasiest for you
Be willing to suffer so your users donrsquot
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Flash is not an OS
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Flash is not an OS
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Flash is not an OS
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Flash is not an OS
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Posture
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Posture
SovereignPrimary focus with a single screen
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Posture
SovereignPrimary focus with a single screen
TransientDialog boxes
DaemonicDrivers
ParasiticWidgets
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Easy on the animations
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Easy on the animations
Performance across different systems
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Easy on the animations
Performance across different systems
Really easy to go overboard
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Affordance
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Affordance
ldquoAction Possibilitiesrdquo
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Affordance
ldquoAction Possibilitiesrdquo
Give target areas plenty of space and interaction feedback
Learned affordances
Tooltips and cursor feedback
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Immediate feedback
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Immediate feedback
DownClick feedback
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Immediate feedback
DownClick feedback
Pinwheel
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Immediate feedback
DownClick feedback
Pinwheel
ProgressLoader bars
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Create a style guide
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Create a style guide
Shared libraries common components
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Create a style guide
Shared libraries common components
CSS
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Create a style guide
Shared libraries common components
CSS
uiswf
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Create a style guide
Shared libraries common components
CSS
uiswf
Animation enginesFusemxtransitionstween
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Modular design
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Modular design
No I donrsquot mean make things blocky
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Modular design
No I donrsquot mean make things blocky
Skinning components
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Modular design
No I donrsquot mean make things blocky
Skinning components
Personal library
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
A little extra umph
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSFLJavaScript Flash
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSFLJavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
ActionMonkeySpiderMonkeyTamarinWhat
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
ActionMonkeySpiderMonkeyTamarinWhat
No use to you yet
Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
LoggingWhen trace() isnrsquot enough
ldquoA better tracerdquo
LuminicBox
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information density
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information densityhttpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information density
ltdiv class=veventgt lta class=url href=httpwwwweb2concomgt
httpwwwweb2concomltagt
ltspan class=summarygtWeb 20 Conferenceltspangt ltabbr class=dtstart title=2007-10-05gtOctober 5ltabbrgt - ltabbr class=dtend title=2007-10-20gt19ltabbrgt at the ltspan class=locationgtArgent Hotel San Francisco CAltspangtltdivgt
httpwwwweb2concomWeb 20 Conference October 5-19 at the Argent Hotel San Francisco CA
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information density
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information density
Building blocks for semantic XHTML
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
Super simple data parsing firstName John lastName Smith address streetAddress 21 2nd Street city New York state NY postalCode 10021 phoneNumbers [ 212 732-1234 646 123-4567 ]
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
Super simple data parsing
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
JSONJavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Donrsquot just eval() please
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Are you done talking yet
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Are you done talking yet
Donrsquot go looking for ldquonailsrdquo
Think like your users
Build yourself a toolkit
Play with something new
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg
Thanks Questions
Special thanks to Andrew Bell - (httpwwwtcimhcom) - for all creature sketches
james vreelandjamesvorgjmesvorg