Going mobile - tip, tricks and tools for building mobile web-apps
•
7 gefällt mir•2,868 views
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Going mobile - tip, tricks and tools for building mobile web-apps
Ähnlich wie Going mobile - tip, tricks and tools for building mobile web-apps (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Going mobile - tip, tricks and tools for building mobile web-apps
- 1. Going mobile - tips, tricks and tools for building... .... mobile web-apps. Joshua May
- 2. /whois notjosh • Joshua May • Web developer • Tinkererer
- 3. So, how’s mobile these days?
- 4. Short answer • Better • Faster • Stronger
- 5. Less short answer • More handsets • More capable networks • More powerful devices
- 6. Exhibit A
- 9. A dream come true • Standard • Capable • Emulator exists
- 10. Let’s take a look..
- 12. Looks good, no?
- 13. But then..
- 16. Exhibit B
- 17. The dream.. +
- 18. The dream.. +
- 19. And suddenly, reality checks in..
- 20. A world of problems awaits..
- 21. Let’s start with the obvious
- 22. No mouse
- 23. Small screen
- 25. And then less obvious (but more painful reality)
- 26. 100s of devices
- 27. 100s of firmware revisions
- 28. • Resolutions • Fonts • Capabilities • Orientation
- 29. :(
- 30. Put in familiar terms..
- 31. versus many many MANY Nokia’s webkit versions Openwave on Opera mini & mobile many many MANY Pocket IE devices Docomo (..& more!) (and resolutions)
- 32. IE6 isn’t so bad after all now, is it?
- 33. It only gets worse..
- 34. Semantic HTML (using lists properly, text-replacement with images, etc)
- 35. No.
- 36. <p>
- 37. Maybe sometimes.
- 39. If you’re lucky
- 41. Wait, what? (no)
- 42. What about these guys?
- 43. What are you saying, Josh?
- 44. COMPLEX LAYOUTS ARE HARD.
- 45. 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!”
- 46. (bet that sounds familiar)
- 47. 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.
- 48. o noes!!
- 49. RF L! WU
- 50. What’s WURFL?
- 51. • Wireless Universal Resource File L ....? • AKA: giant XML file of many devices, their sizes and capabilities • Best of all: IT’S MAINTAINED • Oh...... AND IT’S FREE (without license).
- 52. <device user_agent=quot;Nokia7110/1.0 (05quot; fall_back=quot;nokia_7110_ver1quot; id=quot;nokia_7110_ver2quot;> <group id=quot;uiquot;> <capability name=quot;table_supportquot; value=quot;truequot; /> </group> </device>
- 53. WTFL?
- 54. I still don’t get it.. • Pseduodocode O’clock: if (device_has_capability(‘images’)): <img src=”....” /> endif
- 55. WALL • On top of that, there’s the WALL • Wireless Abstraction Library L ........?!?!
- 56. 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)
- 57. Other Tools • Most related tools are associated with images • Creating thumbnails at different resolutions, etc
- 58. How do we know to serve mobile content?
- 59. Option A: Don’t
- 60. Rely on CSS
- 61. Option B: Assume
- 63. Option C: Guess
- 64. WURFL+User-Agent
- 66. Hire a slave (or 15)
- 67. Make sure they’re teenagers
- 68. Emulators exist
- 69. (but they suck)
- 70. Solution? Buy a bucket of handsets and get busy
- 71. • 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
- 72. Where does that leave us?
- 73. (feels like 1996* again) *maybe
- 74. KISS, Lowest Common Denominator
- 77. Of course, the obvious • Reduce requests • (mobile has MASSIVE latency) • Small image sizes • Cache what you can • ..etc
- 78. Passwords suck
- 79. OpenID?
- 80. Consider context
- 81. Contact manger? Give me phone numbers
- 83. Airline? Give me flight information
- 84. Business? Don’t give me an email contact form!
- 85. And then, the inevitable
- 86. Tomorrow’s new device will ruin your site
- 87. Lots of fish, big barrel..hope you brought bullets
- 88. Adapt to the changing game
- 89. mobiForge. Your online community and resource. Make friends.