Going mobile - tip, tricks and tools for building mobile web-apps

Going mobile - tips, tricks and tools for building... .... mobile web-apps. Joshua May

/whois notjosh • Joshua May • Web developer • Tinkererer

So, how’s mobile these days?

Short answer • Better • Faster • Stronger

Less short answer • More handsets • More capable networks • More powerful devices

Exhibit A

(predictably)

A dream come true • Standard • Capable • Emulator exists

Let’s take a look..

Looks good, no?

But then..

“Standard” no more!

Exhibit B

The dream.. +

And suddenly, reality checks in..

A world of problems awaits..

Let’s start with the obvious

No mouse

Small screen

(often) num-pad input

And then less obvious (but more painful reality)

100s of devices

100s of ﬁrmware revisions

• Resolutions • Fonts • Capabilities • Orientation

:(

Put in familiar terms..

versus many many MANY Nokia’s webkit versions Openwave on Opera mini & mobile many many MANY Pocket IE devices Docomo (..& more!) (and resolutions)

IE6 isn’t so bad after all now, is it?

It only gets worse..

Semantic HTML (using lists properly, text-replacement with images, etc)

No.

<p>

Maybe sometimes.

If you’re lucky

Wait, what? (no)

What about these guys?

What are you saying, Josh?

COMPLEX LAYOUTS ARE HARD.

Taken for granted • “Our site needs to display an image at 100% width” • “It needs to look the same portrait and landscape” • “That’s not the font the designer gave you. It’s not even the right size!”

(bet that sounds familiar)

It’s a new frontier • Finding usage statistics isn’t easy • Finding best practices isn’t easy • Finding good references/examples isn’t easy • Even “big brand” sites are (often) very bland and static, to cater for lowest common denominator.

o noes!!

RF L! WU

What’s WURFL?

• Wireless Universal Resource File L ....? • AKA: giant XML ﬁle of many devices, their sizes and capabilities • Best of all: IT’S MAINTAINED • Oh...... AND IT’S FREE (without license).

WTFL?

I still don’t get it.. • Pseduodocode O’clock: if (device_has_capability(‘images’)): <img src=”....” /> endif

WALL • On top of that, there’s the WALL • Wireless Abstraction Library L ........?!?!

WTFWALL • Wraps capabilities and whatnot into functions echo b(‘bold text’); • (is bold, if you can) or.. echo hr(); • (might look like ‘<br>-------<br>’ on some devices)

Other Tools • Most related tools are associated with images • Creating thumbnails at different resolutions, etc

How do we know to serve mobile content?

Option A: Don’t

Rely on CSS

Option B: Assume

m.example.com example.mobi

Option C: Guess

WURFL+User-Agent

Testing. Sounds hard.

Hire a slave (or 15)

Make sure they’re teenagers

Emulators exist

(but they suck)

Solution? Buy a bucket of handsets and get busy

• iPhone (closed source) SDK rules • iPhoney (open source) is part of the way • Android..well..you know about Android • Fennec is still ridiculously pre-alpha • Symbian sucks. But it’s open source now, potential? • Beyond that, you’re pretty screwed

Where does that leave us?

(feels like 1996* again) *maybe

KISS, Lowest Common Denominator

Of course, the obvious • Reduce requests • (mobile has MASSIVE latency) • Small image sizes • Cache what you can • ..etc

Passwords suck

OpenID?

Consider context

Contact manger? Give me phone numbers

Airline? Give me ﬂight information

Business? Don’t give me an email contact form!

And then, the inevitable

Tomorrow’s new device will ruin your site

Lots of ﬁsh, big barrel..hope you brought bullets

Adapt to the changing game

mobiForge. Your online community and resource. Make friends.

Whew, that’ll do!

Questions? • notjosh.com/blog • twitter.com/notjosh

Going mobile - tip, tricks and tools for building mobile web-apps

0 comments

Notes on slide 1

4 Favorites & 1 Event