• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • mobile web design
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,495
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
168
Comments
1
Likes
36

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing Website for Mobile Safari @hlb, http://iamhlb.com/
  • 2. WHY
  • 3. Everyday Life
  • 4. Taiwan High Speed Rails
  • 5. Shopping.PCHome
  • 6. mobile first
  • 7. Designing for iPad “ Minimize input, maximize output. Don’t waste screen estate and user attention on processing secondary functions. If it works on the iPad, with a few tweaks, it will work on a laptop. http://informationarchitects.jp/designing-for-ipad-reality-check/
  • 8. focus on goal
  • 9. empty canvas = freedom
  • 10. Decision: website or webapp?
  • 11. DO NOT make website like this boring false assumption
  • 12. native != best solution http://www.lukew.com/ff/entry.asp?1014
  • 13. http://idzr.org/404
  • 14. http://goingtorain.com/
  • 15. Akihabara http://www.kesiev.com/akihabara/
  • 16. get a real phone before designing
  • 17. Mobile Safari
  • 18. iPhone/iPod Touch/iPad Android Phones Palm Pre (?) Nokia S60
  • 19. iPhone/iPod Touch/iPad Android Phones Palm Pre (?) Nokia S60
  • 20. compatibility table http://quirksmode.org/m/table.html, http://quirksmode.org/m/css.html
  • 21. abilities HTML5, CSS3, Geolocation API, Client Side Storage, Offline Application, ...
  • 22. Case Study
  • 23. it just works http://bingo.handlino.com/machines/3586
  • 24. Shit happens <audio> plays in external player
  • 25. JavaScript var agent = navigator.userAgent; if (agent.match(/iPhone/i) || agent.match(/iPod/i) || agent.match(/iPad/i)) { $("audio").remove(); }
  • 26. Registrano customized website (with almost same logic) http://registrano.com/
  • 27. Opera works... in its own way
  • 28. Opera works... in its own way
  • 29. Opera works... in its own way
  • 30. Opera works... in its own way
  • 31. Opera works... in its own way
  • 32. Rails initializers/mime_types.rb: Mime::Type.register_alias "text/html", :mobile
  • 33. Rails application_controller.rb: before_filter :adjust_format_for_mobile def adjust_format_for_mobile ... if request.env["HTTP_USER_AGENT"] && request.env ["HTTP_USER_AGENT"][/(iPhone|iPod|Android|Fennec)/] request.format = :mobile end ... end
  • 34. Redmine iPhone customized website (or webapp?) totally rewrite http://github.com/hlb/redmine_iphone_plugin
  • 35. working in progress...
  • 36. Technical
  • 37. viewport: 980px
  • 38. <meta name="viewport" content="width = [200 to 10,000 || device-width]"> <meta name="viewport" content="height = [223 to 10,000 || device-height]"> <meta name="viewport" content="minimum-scale = [0.01 to 10.0]"> <meta name="viewport" content="maximum-scale = [0.01 to 10.0]"> <meta name="viewport" content="initital-scale= [minimum- scale to maximum-scale]"> <meta name="viewport" content="user-scalable = [yes || no]">
  • 39. 50x50 Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation
  • 40.
  • 41. <link rel="apple-touch-icon" href="/icon.png"> <link rel="apple-touch-icon-precomposed" href="/icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent">
  • 42. Limits 10 MB JavaScript object allocation 5 second JavaScript execution limit Scripts may be paused Scripts are not paused while a Quicktime movie is playing 5 MB Client Side Storage http://ejohn.org/blog/iphone-tech-talk/
  • 43. position: fixed works... in its own way When you flick and scroll, you’re moving the viewport around while the website behind it stays static. An element that has its position fixed is affixed to the body, not the viewport.
  • 44. use CSS for animation JavaScript is slow http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html
  • 45. use CSS for presentation
  • 46. rounded corner http://css3please.com/
  • 47. CSS3 Gradient Generator http://gradients.glrzad.com/
  • 48. Frameworks
  • 49. Dashcode
  • 50. Dashcode jQTouch jQuery plugin for mobile web development http://www.jqtouch.com/, http://idocs.brandonaaron.net/
  • 51. Dashcode jQTouch jQuery plugin for mobile web development http://www.jqtouch.com/, http://idocs.brandonaaron.net/ XUI javascript framework for building mobile web applications http://xuijs.com/
  • 52. Dashcode jQTouch jQuery plugin for mobile web development http://www.jqtouch.com/, http://idocs.brandonaaron.net/ XUI javascript framework for building mobile web applications http://xuijs.com/ PhoneGap Build apps in HTML and JavaScript and still take advantage of hardware SDK http://www.phonegap.com/
  • 53. Resources http://building-iphone-apps.labs.oreilly.com/ http://diveintohtml5.org/ http://webkit.org/blog/ http://googlecode.blogspot.com/search/label/ html5
  • 54. http://delicious.com/hlb/osdc2010
  • 55. “ http://more.handlino.com/