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

Designing Website for Mobile Safari (OSDC 2010)

on

  • 8,719 views

 

Statistics

Views

Total Views
8,719
Views on SlideShare
8,439
Embed Views
280

Actions

Likes
36
Downloads
168
Comments
1

13 Embeds 280

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • mobile web design
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Designing Website for Mobile Safari @hlb, http://iamhlb.com/
  • WHY
  • Everyday Life
  • Taiwan High Speed Rails
  • Shopping.PCHome
  • mobile first
  • 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/ff/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
  • 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, Offline 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
  • Opera works... in its own way
  • Opera works... in its own way
  • Opera works... in its own way
  • Opera works... in its own way
  • Rails initializers/mime_types.rb: Mime::Type.register_alias "text/html", :mobile
  • 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
  • Redmine iPhone customized website (or webapp?) totally rewrite http://github.com/hlb/redmine_iphone_plugin
  • working in progress...
  • Technical
  • viewport: 980px
  • <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]">
  • 50x50 Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation
  • <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">
  • 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/