Designing Website for Mobile Safari (OSDC 2010)

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

http://idzr.org/404

2010/04/24

http://goingtorain.com/

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

rounded corner

http://css3please.com/

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