going mobile - tip, tricks and tools for building mobile web-apps
Post on 19-Jun-2015
3.154 Views
Preview:
TRANSCRIPT
Going mobile - tips, tricks and tools for building...
....mobile web-apps.
Joshua May
/whois notjosh
• Joshua May
• Web developer
• Tinkererer
So, how’s mobilethese 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..
+
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 firmware revisions
• Resolutions
• Fonts
• Capabilities
• Orientation
:(
Put in familiar terms..
versus
Nokia’s webkitOpenwaveOpera mini & mobilePocket IE
many many MANYversions
onmany many MANY
devices(and resolutions)Docomo (..& more!)
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.
<head><style type=”text/css”....</style></head>
If you’re lucky
<link rel="stylesheet" type="text/css" href="mystyle.css" />
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)
• 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
o noes!!
WURFL!
What’s WURFL?
• 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).
<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>
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
• WirelessAbstractionLibraryL ........?!?!
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)
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.comexample.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 flight information
Business? Don’t give me an email contact form!
And then, the inevitable
Tomorrow’s new device will ruin your site
Lots of fish, 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
top related