AJAX & Flash mistakes learnings What we learned building SlideShare Jonathan Boutelle + Kapil Mohan, Lalit Patel, Golak Sarangi & Gaurav Gupta

Jonathan Boutelle

+ Kapil Mohan, Lalit Patel,

Golak Sarangi & Gaurav Gupta

First www.jonathanboutelle.com www.slideshare.net/jboutelle

www.jonathanboutelle.com

www.slideshare.net/jboutelle

AJAX and Flash are powerful tools… With great power comes great responsibility

With great power comes great responsibility

1) Modal dialogs are seductive (if you only knew the power of the dark side…)

(if you only knew the power of the dark side…)

The real reason developers like AJAX

Good modal dialog 1 2 3 Nice! A microlink + a 1 second mutation

Bad modal dialog

Lightboxes (Popups 2.0)

You gotta open your mind up some more… Go with the flow, man

Go with the flow, man

A nice flow 1 2

3 4

Holding hands

Process Interuptus I got it I got it I got it Continuous feedback for a long-running process ;->

I got it

I got it I don’t got it OK, this is lame.

I got it

2) AJAX looks like a performance enhancer

Herky-Jerky UI antipattern

Oh THERE’s my name

Where did the slideshow go?

AJAX might lead to performance problems!

Performance vs. Scalability

Naive ajax can kill your servers

Prefetching AJAX that should really have just been javascript

AJAX that should really have just been javascript

DHTML or AJAX? A humble tab

Things to consider % of time panel is opened Cost of retrieving panel data Current page response time (without hidden panels pre-loaded) Post-fetch hidden panel on page load?

% of time panel is opened

Cost of retrieving panel data

Current page response time (without hidden panels pre-loaded)

Metrics get foobared by Ajax Especially Google Analytics Naive implementation: Bounce rate 400% higher Time on site 50% lower

Especially Google Analytics

Naive implementation: Bounce rate 400% higher

Time on site 50% lower

Still worth doing

Uploading

Depending on the kindness of strangers Google Site Search AddThis Gigya Wildfire

Users need a direct path to their data

SEO nightmares

Don’t just save the data If you don’t update the page, they don’t know their data was saved. Even if you message “Your data was saved”.

If you don’t update the page, they don’t know their data was saved.

Even if you message “Your data was saved”.

Tuning size & accelerating media delivery It’s really important

It’s really important

Animation? Dial it back a notch, comrade

Dial it back a notch, comrade

Keep them in the zone

Flash full-screening Is it OK again yet?

Is it OK again yet?

Multimedia editing

Multimedia production

Invisible Flash

Flash nuggets

Stuff people complain about But that I don’t think is a big deal

But that I don’t think is a big deal

Back button (As long as your whole website isn’t one page)

(As long as your whole website isn’t one page)

Inventing new UI conventions

Leaving offline people behind

Cool Flash stuff we haven’t found a use for yet Sockets, Local data objects FLEX

Sockets,

Local data objects

FLEX

Cool AJAX stuff we haven’t found a use for yet Data grids Offline data storage (e.g., Google gears)

Data grids

Offline data storage (e.g., Google gears)

Some easy AJAX recipes

MicroLink

One-Second Mutation

PopUp

One-second spotlight Pricew’s Slidespace pricew Male, San Francisco, CA pricew.blogspot.com Pricew’s Slidespace pricew Male, San Francisco, CA pricew.blogspot.com 2 1 Add pricew as contact Ping pricew Add pricew as contact Ping pricew Message price1 pings Liked your presentation on venture capital By jboutelle (1 second ago) Welcome to SlideShare By userx (2 days ago) This is great by coolstuff (5 days ago)

Malleable content The Brand Gap Tags Brand design The Brand Gap From: coolstuff , 1 day ago 326 views | 1 comment | 5 favorites Tags Brand design branding The Brand Gap From: coolstuff , 1 day ago 326 views | 1 comment | 5 favorites Tags Brand design branding Share this slideshow Digg this Subscribe to user Mark as inappropriate Favorite [x] tags : brand design branding marketing (Edit) 1 3 4 Share this slideshow Digg this Subscribe to user Mark as inappropriate Favorite [x] tags : brand design (Edit) From: coolstuff , 1 day ago 326 views | 1 comment | 5 favorites The Brand Gap From: coolstuff , 1 day ago 326 views | 1 comment | 5 favorites Tags Brand design branding Add/Edit tags Separate tags by spaces. Put multi-words tags within quotes, e.g., “palo alto” Cancel Update brand design 2

Temp Messages Pricew’s Slidespace pricew Male, San Francisco, CA pricew.blogspot.com Add pricew as contact Ping pricew Message pricew Liked your presentation on venture capital By jboutelle (1 second ago) Welcome to SlideShare By userx (2 days ago) 1 Pricew’s Slidespace pricew Male, San Francisco, CA pricew.blogspot.com Add pricew as contact Ping pricew Message pricew 2 Hey dude! Long time… pings Liked your presentation on venture capital By jboutelle (1 second ago) Welcome to SlideShare By userx (2 days ago) Message Sent!

Tabs

Finally

QUESTIONS? www.jonathanboutelle.com www.slideshare.net/jboutelle