designing website for mobile safari (osdc 2010)
DESCRIPTION
TRANSCRIPT
![Page 1: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/1.jpg)
Designing Website for Mobile Safari
@hlb, http://iamhlb.com/
2010/04/24
![Page 2: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/2.jpg)
WHY
2010/04/24
![Page 3: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/3.jpg)
Everyday Life日常所需
2010/04/24
![Page 4: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/4.jpg)
Taiwan High Speed Rails
2010/04/24
![Page 5: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/5.jpg)
Shopping.PCHome
2010/04/24
![Page 6: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/6.jpg)
mobile first設計桌面版之前,先設計行動版
2010/04/24
![Page 7: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/7.jpg)
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/
2010/04/24
![Page 8: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/8.jpg)
focus on goal
2010/04/24
![Page 9: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/9.jpg)
2010/04/24
![Page 10: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/10.jpg)
empty canvas=
freedom
2010/04/24
![Page 11: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/11.jpg)
Decision:website or webapp?
2010/04/24
![Page 12: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/12.jpg)
DO NOTmake website like this
boringfalse assumption
2010/04/24
![Page 13: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/13.jpg)
native != best solution
http://www.lukew.com/ff/entry.asp?1014
2010/04/24
![Page 16: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/16.jpg)
Akihabara 秋葉原
http://www.kesiev.com/akihabara/
2010/04/24
![Page 17: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/17.jpg)
get a real phone before designing
2010/04/24
![Page 18: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/18.jpg)
Mobile Safari
2010/04/24
![Page 19: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/19.jpg)
iPhone/iPod Touch/iPad
Android Phones
Palm Pre (?)
Nokia S60
2010/04/24
![Page 20: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/20.jpg)
iPhone/iPod Touch/iPad
Android Phones
Palm Pre (?)
Nokia S60
2010/04/24
![Page 21: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/21.jpg)
compatibility tablehttp://quirksmode.org/m/table.html, http://quirksmode.org/m/css.html
2010/04/24
![Page 22: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/22.jpg)
abilitiesHTML5, CSS3, Geolocation API, Client Side
Storage, Offline Application, ...
2010/04/24
![Page 23: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/23.jpg)
Case Study
2010/04/24
![Page 24: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/24.jpg)
和多繽紛樂it just works
http://bingo.handlino.com/machines/35862010/04/24
![Page 25: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/25.jpg)
2010/04/24
![Page 26: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/26.jpg)
2010/04/24
![Page 27: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/27.jpg)
Shit happens<audio> plays in external player
2010/04/24
![Page 28: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/28.jpg)
2010/04/24
![Page 29: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/29.jpg)
2010/04/24
![Page 30: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/30.jpg)
var agent = navigator.userAgent;if (agent.match(/iPhone/i) || agent.match(/iPod/i) || agent.match(/iPad/i)) { $("audio").remove();}
JavaScript
2010/04/24
![Page 31: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/31.jpg)
Registranocustomized website
(with almost same logic)
http://registrano.com/2010/04/24
![Page 32: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/32.jpg)
2010/04/24
![Page 33: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/33.jpg)
報名
2010/04/24
![Page 34: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/34.jpg)
2010/04/24
![Page 35: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/35.jpg)
2010/04/24
![Page 36: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/36.jpg)
2010/04/24
![Page 37: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/37.jpg)
2010/04/24
![Page 38: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/38.jpg)
2010/04/24
![Page 39: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/39.jpg)
Opera works...in its own way
2010/04/24
![Page 40: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/40.jpg)
Opera works...in its own way
2010/04/24
![Page 41: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/41.jpg)
Opera works...in its own way
2010/04/24
![Page 42: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/42.jpg)
Opera works...in its own way
2010/04/24
![Page 43: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/43.jpg)
Opera works...in its own way
2010/04/24
![Page 44: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/44.jpg)
initializers/mime_types.rb:
Mime::Type.register_alias "text/html", :mobile
Rails
2010/04/24
![Page 45: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/45.jpg)
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
Rails
2010/04/24
![Page 46: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/46.jpg)
Redmine iPhonecustomized website (or webapp?)
totally rewrite
http://github.com/hlb/redmine_iphone_plugin
2010/04/24
![Page 47: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/47.jpg)
working in progress...
2010/04/24
![Page 48: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/48.jpg)
2010/04/24
![Page 49: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/49.jpg)
2010/04/24
![Page 50: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/50.jpg)
2010/04/24
![Page 51: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/51.jpg)
2010/04/24
![Page 52: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/52.jpg)
2010/04/24
![Page 53: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/53.jpg)
2010/04/24
![Page 54: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/54.jpg)
2010/04/24
![Page 55: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/55.jpg)
2010/04/24
![Page 56: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/56.jpg)
Technical
2010/04/24
![Page 57: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/57.jpg)
viewport: 980px
2010/04/24
![Page 58: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/58.jpg)
<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]">
2010/04/24
![Page 59: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/59.jpg)
Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation
50x50
2010/04/24
![Page 60: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/60.jpg)
2010/04/24
![Page 61: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/61.jpg)
<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">
2010/04/24
![Page 62: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/62.jpg)
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/
2010/04/24
![Page 63: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/63.jpg)
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.
2010/04/24
![Page 64: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/64.jpg)
use CSS for animation
JavaScript is slow
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html
2010/04/24
![Page 65: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/65.jpg)
use CSS for presentation
2010/04/24
![Page 67: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/67.jpg)
CSS3 Gradient Generator
http://gradients.glrzad.com/
2010/04/24
![Page 68: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/68.jpg)
Frameworks
2010/04/24
![Page 69: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/69.jpg)
2010/04/24
![Page 70: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/70.jpg)
Dashcode
2010/04/24
![Page 71: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/71.jpg)
Dashcode
jQTouchjQuery plugin for mobile web developmenthttp://www.jqtouch.com/, http://idocs.brandonaaron.net/
2010/04/24
![Page 72: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/72.jpg)
Dashcode
jQTouchjQuery plugin for mobile web developmenthttp://www.jqtouch.com/, http://idocs.brandonaaron.net/
XUIjavascript framework for building mobile web applicationshttp://xuijs.com/
2010/04/24
![Page 73: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/73.jpg)
Dashcode
jQTouchjQuery plugin for mobile web developmenthttp://www.jqtouch.com/, http://idocs.brandonaaron.net/
XUIjavascript framework for building mobile web applicationshttp://xuijs.com/
PhoneGapBuild apps in HTML and JavaScript and still take advantage of
hardware SDKhttp://www.phonegap.com/
2010/04/24
![Page 74: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/74.jpg)
Resources
http://building-iphone-apps.labs.oreilly.com/
http://diveintohtml5.org/
http://webkit.org/blog/
http://googlecode.blogspot.com/search/label/html5
2010/04/24
![Page 75: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/75.jpg)
http://delicious.com/hlb/osdc2010
2010/04/24
![Page 76: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/76.jpg)
長官勉勵我們:
橋梁是否有斷折,也不能擋止他倆的前進。“
http://more.handlino.com/
2010/04/24
![Page 77: Designing Website for Mobile Safari (OSDC 2010)](https://reader035.vdocuments.net/reader035/viewer/2022062617/54b7ae9e4a7959305b8b45ab/html5/thumbnails/77.jpg)
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://iamhlb.com/」。
2010/04/24