Going mobile - tip, tricks and tools for building mobile web-apps
•
7 likes•2,868 views
The document discusses tips and challenges for building mobile web apps. It notes that while mobile capabilities have improved, developing for the wide variety of devices, browsers, and firmwares remains difficult. Complex layouts are especially challenging due to varying screen sizes and lack of mouse/keyboard. The document recommends tools like WURFL and WALL to detect device capabilities and serve the appropriate experience, as well as testing on actual devices. It emphasizes keeping content simple, reducing requests/file sizes, and adapting to changing mobile landscapes.
More Related Content
Similar to Going mobile - tip, tricks and tools for building mobile web-apps
Similar to Going mobile - tip, tricks and tools for building mobile web-apps (20)
Recently uploaded
Recently uploaded (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.