Ajax Flash Mistakes

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

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

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

1) Modal dialogs are seductive
(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

A nice flow 1 2

Holding hands

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

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

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

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?

Metrics get foobared by Ajax
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”.

Tuning size & accelerating media delivery
It’s really important

Animation?
Dial it back a notch, comrade

Keep them in the zone

Flash full-screening
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

Back button
(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

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

Some easy AJAX recipes

MicroLink

One-Second Mutation

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!

Finally

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

http://www.jonathanboutelle.com	208
http://blog.pekpongpaet.com	87
http://www.slideshare.net	74
http://jnenys.blogspot.com	61
http://www.lmodules.com	7
http://www.techiegyan.com	7
http://static.slidesharecdn.com	6
http://localhost	5
http://tmagdalenaibis.blogspot.com	5
http://ndamedint.blogspot.com	4
http://www.architectes.it	4
http://blog.tradrz.com	4
http://www.filescon.com	3
http://carruthk.blogspot.com	3
http://jnenys.blogspot.mx	3
http://e-uic.com	3
http://kusna.info	3
http://paws.wcu.edu	2
http://blog.arch.hawaii.edu	2
http://informaticaeducativa-adry.blogspot.com	2
http://raquel-cursillo.blogspot.com	2
http://localhost:8080	2
http://pl.cantstopgames.com	2
http://tunez.fib.upc.edu:8080	2
http://www.brijj.com	2
http://ww2.tmjh.tp.edu.tw	2
http://www.earlylearning.org	2
https://blog.gandi.net	2
http://port	1
http://192.168.234.111	1
http://vi1.home.pl	1
http://sitebuilder.yola.com	1
http://comunidades.eafit.edu.co	1
http://moodle.kursksu.ru	1
http://start.knox.nsw.edu.au	1
http://www.geekgirlblogs.com	1
http://nicd.wikispaces.com	1
http://jnenys.blogspot.com.ar	1
http://developerrr.wordpress.com	1
file://	1
http://ttnet-muzik.biz	1
http://lastdownloads.net	1
http://www.mvyx.com	1
http://www.zqwl.com	1
http://ahm-sena-cme.blogspot.com	1
http://0sathya0.blogspot.com	1
http://jonathanboutelle.com	1
http://aulavirtual2.educa.madrid.org	1
http://www.rapidsharefresh.com	1
http://knightspirits.blogspot.com	1
http://andresmackinlay.com	1

Ajax Flash Mistakes

by Jonathan Boutelle on Mar 08, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

59 Embeds 540

Statistics

Ajax Flash Mistakes — Presentation Transcript