Designing Website for Mobile Safari (OSDC 2010)

Designing Website for Mobile Safari @hlb, http://iamhlb.com/

Everyday Life

Taiwan High Speed Rails

Shopping.PCHome

mobile ﬁrst

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/

focus on goal

empty canvas = freedom

Decision: website or webapp?

DO NOT make website like this boring false assumption

native != best solution http://www.lukew.com/ﬀ/entry.asp?1014

http://idzr.org/404

http://goingtorain.com/

Akihabara http://www.kesiev.com/akihabara/

get a real phone before designing

Mobile Safari

iPhone/iPod Touch/iPad Android Phones Palm Pre (?) Nokia S60

compatibility table http://quirksmode.org/m/table.html, http://quirksmode.org/m/css.html

abilities HTML5, CSS3, Geolocation API, Client Side Storage, Oﬄine Application, ...

Case Study

it just works http://bingo.handlino.com/machines/3586

Shit happens <audio> plays in external player

JavaScript var agent = navigator.userAgent; if (agent.match(/iPhone/i) || agent.match(/iPod/i) || agent.match(/iPad/i)) { $("audio").remove(); }

Registrano customized website (with almost same logic) http://registrano.com/

Opera works... in its own way

Rails initializers/mime_types.rb: Mime::Type.register_alias "text/html", :mobile

Rails application_controller.rb: before_ﬁlter :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

Redmine iPhone customized website (or webapp?) totally rewrite http://github.com/hlb/redmine_iphone_plugin

working in progress...

Technical

viewport: 980px

50x50 Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation

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/

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.

use CSS for animation JavaScript is slow http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html

use CSS for presentation

rounded corner http://css3please.com/

CSS3 Gradient Generator http://gradients.glrzad.com/

Frameworks

Dashcode

Dashcode jQTouch jQuery plugin for mobile web development http://www.jqtouch.com/, http://idocs.brandonaaron.net/

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/

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/

Resources http://building-iphone-apps.labs.oreilly.com/ http://diveintohtml5.org/ http://webkit.org/blog/ http://googlecode.blogspot.com/search/label/ html5

http://delicious.com/hlb/osdc2010

“ http://more.handlino.com/

http://iamhlb.com	81
http://www.slideshare.net	62
http://infuture.pixnet.net	32
http://hlb.yichi.org	30
http://endroid.blogspot.com	29
http://happydesigner.org	4
http://www.iamhlb.com	3
http://localhost	2
http://coderwall.com	2
http://keanychu.blogspot.com	1
http://translate.googleusercontent.com	1
http://maestrassigloxxi.blogspot.com.es	1

Designing Website for Mobile Safari (OSDC 2010)

by Liang-Bin Hsueh on Apr 24, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 248

Statistics

Designing Website for Mobile Safari (OSDC 2010) — Presentation Transcript