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

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

Embed Size (px)

Citation preview

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

Going mobile - tips, tricks and tools for building...

....mobile web-apps.

Joshua May

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

/whois notjosh

• Joshua May

• Web developer

• Tinkererer

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

So, how’s mobilethese days?

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

Short answer

• Better

• Faster

• Stronger

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

Less short answer

• More handsets

• More capable networks

• More powerful devices

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

Exhibit A

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

(predictably)

Page 8: Going mobile - tip, tricks and tools for building mobile web-apps
Page 9: Going mobile - tip, tricks and tools for building mobile web-apps

A dream come true

• Standard

• Capable

• Emulator exists

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

Let’s take a look..

Page 11: Going mobile - tip, tricks and tools for building mobile web-apps
Page 12: Going mobile - tip, tricks and tools for building mobile web-apps

Looks good, no?

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

But then..

Page 14: Going mobile - tip, tricks and tools for building mobile web-apps
Page 15: Going mobile - tip, tricks and tools for building mobile web-apps

“Standard” no more!

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

Exhibit B

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

The dream..

+

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

The dream..

+

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

And suddenly, reality checks in..

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

A world of problems awaits..

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

Let’s start with the obvious

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

No mouse

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

Small screen

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

(often) num-pad input

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

And then less obvious(but more painful reality)

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

100s of devices

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

100s of firmware revisions

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

• Resolutions

• Fonts

• Capabilities

• Orientation

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

:(

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

Put in familiar terms..

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

versus

Nokia’s webkitOpenwaveOpera mini & mobilePocket IE

many many MANYversions

onmany many MANY

devices(and resolutions)Docomo (..& more!)

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

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

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

It only gets worse..

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

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

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

No.

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

<p>

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

Maybe sometimes.

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

<head><style type=”text/css”....</style></head>

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

If you’re lucky

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

<link rel="stylesheet" type="text/css" href="mystyle.css" />

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

Wait, what?(no)

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

What about these guys?

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

What are you saying, Josh?

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

COMPLEX LAYOUTS ARE HARD.

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

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!”

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

(bet that sounds familiar)

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

• 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.

It’s a new frontier

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

o noes!!

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

WURFL!

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

What’s WURFL?

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

• WirelessUniversalResourceFileL ....?

• AKA: giant XML file of many devices, their sizes and capabilities

• Best of all: IT’S MAINTAINED

• Oh...... AND IT’S FREE (without license).

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

<device user_agent="Nokia7110/1.0 (05" fall_back="nokia_7110_ver1" id="nokia_7110_ver2"> <group id="ui"> <capability name="table_support" value="true" /> </group> </device>

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

WTFL?

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

I still don’t get it..

• Pseduodocode O’clock:

if (device_has_capability(‘images’)): <img src=”....” />endif

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

WALL

• On top of that, there’s the WALL

• WirelessAbstractionLibraryL ........?!?!

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

WTFWALL

• Wraps capabilities and whatnot into functions

echo b(‘bold text’);

echo hr();

• (is bold, if you can) or..

• (might look like ‘<br>-------<br>’ on some devices)

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

Other Tools

• Most related tools are associated with images

• Creating thumbnails at different resolutions, etc

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

How do we know to serve mobile content?

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

Option A: Don’t

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

Rely on CSS

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

Option B: Assume

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

m.example.comexample.mobi

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

Option C: Guess

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

WURFL+User-Agent

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

Testing. Sounds hard.

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

Hire a slave (or 15)

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

Make sure they’re teenagers

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

Emulators exist

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

(but they suck)

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

Solution? Buy a bucket of handsets and get busy

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

• 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

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

Where does that leave us?

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

(feels like 1996* again)

*maybe

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

KISS,Lowest Common

Denominator

Page 75: Going mobile - tip, tricks and tools for building mobile web-apps
Page 76: Going mobile - tip, tricks and tools for building mobile web-apps
Page 77: Going mobile - tip, tricks and tools for building mobile web-apps

Of course, the obvious

• Reduce requests

• (mobile has MASSIVE latency)

• Small image sizes

• Cache what you can

• ..etc

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

Passwords suck

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

OpenID?

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

Consider context

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

Contact manger? Give me phone numbers

Page 82: Going mobile - tip, tricks and tools for building mobile web-apps
Page 83: Going mobile - tip, tricks and tools for building mobile web-apps

Airline? Give me flight information

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

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

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

And then, the inevitable

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

Tomorrow’s new device will ruin your site

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

Lots of fish, big barrel..hope you brought bullets

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

Adapt to the changing game

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

mobiForge. Your online community and

resource. Make friends.

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

Whew, that’ll do!

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

Questions?

• notjosh.com/blog

• twitter.com/notjosh