Designing Website for Mobile Safari
@hlb, http://iamhlb.com/
2010/04/24
WHY
2010/04/24
Everyday Life日常所需
2010/04/24
Taiwan High Speed Rails
2010/04/24
Shopping.PCHome
2010/04/24
mobile first設計桌面版之前，先設計行動版
2010/04/24
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
focus on goal
2010/04/24
2010/04/24
empty canvas=
freedom
2010/04/24
Decision:website or webapp?
2010/04/24
DO NOTmake website like this
boringfalse assumption
2010/04/24
native != best solution
http://www.lukew.com/ff/entry.asp?1014
2010/04/24
Akihabara 秋葉原
http://www.kesiev.com/akihabara/
2010/04/24
get a real phone before designing
2010/04/24
Mobile Safari
2010/04/24
iPhone/iPod Touch/iPad
Android Phones
Palm Pre (?)
Nokia S60
2010/04/24
iPhone/iPod Touch/iPad
Android Phones
Palm Pre (?)
Nokia S60
2010/04/24
compatibility tablehttp://quirksmode.org/m/table.html, http://quirksmode.org/m/css.html
2010/04/24
abilitiesHTML5, CSS3, Geolocation API, Client Side
Storage, Offline Application, ...
2010/04/24
Case Study
2010/04/24
和多繽紛樂it just works
http://bingo.handlino.com/machines/35862010/04/24
2010/04/24
2010/04/24
Shit happens<audio> plays in external player
2010/04/24
2010/04/24
2010/04/24
var agent = navigator.userAgent;if (agent.match(/iPhone/i) || agent.match(/iPod/i) || agent.match(/iPad/i)) { $("audio").remove();}
JavaScript
2010/04/24
Registranocustomized website
(with almost same logic)
http://registrano.com/2010/04/24
2010/04/24
報名
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
Opera works...in its own way
2010/04/24
Opera works...in its own way
2010/04/24
Opera works...in its own way
2010/04/24
Opera works...in its own way
2010/04/24
Opera works...in its own way
2010/04/24
initializers/mime_types.rb:
Mime::Type.register_alias "text/html", :mobile
Rails
2010/04/24
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
Redmine iPhonecustomized website (or webapp?)
totally rewrite
http://github.com/hlb/redmine_iphone_plugin
2010/04/24
working in progress...
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
2010/04/24
Technical
2010/04/24
viewport: 980px
2010/04/24
<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
Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation
50x50
2010/04/24
2010/04/24
<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
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
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
use CSS for animation
JavaScript is slow
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html
2010/04/24
use CSS for presentation
2010/04/24
CSS3 Gradient Generator
http://gradients.glrzad.com/
2010/04/24
Frameworks
2010/04/24
2010/04/24
Dashcode
2010/04/24
Dashcode
jQTouchjQuery plugin for mobile web developmenthttp://www.jqtouch.com/, http://idocs.brandonaaron.net/
2010/04/24
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
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
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
http://delicious.com/hlb/osdc2010
2010/04/24
長官勉勵我們：
橋梁是否有斷折，也不能擋止他倆的前進。“
http://more.handlino.com/
2010/04/24
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://iamhlb.com/」。
2010/04/24
