Your SlideShare is downloading. ×
Designing Website for Mobile Safari (OSDC 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Website for Mobile Safari (OSDC 2010)

6,578
views

Published on

Published in: Technology

1 Comment
36 Likes
Statistics
Notes
  • mobile web design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,578
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
169
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/