Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Taking Sites Mobile
Search
Ian Barber
May 23, 2012
Technology
1
510
Taking Sites Mobile
The slides from my talk about adding mobile web support to existing sites at PHP Tek 12.
Ian Barber
May 23, 2012
Tweet
Share
More Decks by Ian Barber
See All by Ian Barber
Crossing Platforms With Google+ Sign-In
ianbarber
0
140
How Google Builds Webservices
ianbarber
3
310
Mobile & Social
ianbarber
2
150
Event Stream Processing In PHP
ianbarber
7
2.3k
Building A Firehose - PHPNW
ianbarber
2
870
Clojure for PHP Developers
ianbarber
6
1.9k
Building a Firehose
ianbarber
5
1.3k
The Cookie Law
ianbarber
1
850
Teaching Your Machine To Find Fraudsters
ianbarber
3
960
Other Decks in Technology
See All in Technology
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AOAI Dev Day - Opening Session
yoshidashingo
2
440
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
In The Pink: A Labor of Love
frogandcode
139
22k
Why Our Code Smells
bkeepers
PRO
332
56k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Transcript
ian barber -
[email protected]
- @ianbarber https://github.com/ianbarber/TakingSitesMobile TAKING SITES MOBILE
80.39% 19.61% Other Mobile
None
None
MOBILE EVENTUALLY! ( MOST PLACES )
NATIVE APP 3RD PARTY SEPARATE SITE RESPONSIVE DESIGN
3RD PARTY
REDIRECTING $useragent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec| hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i| palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)| vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|
3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex| ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)| bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)| craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)| er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w| od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p| s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq| iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)| lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01| 21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1| v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf| wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))| phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]| i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)| sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it| t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-| tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750| veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)| w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/ i',substr($useragent,0,4))) http://detectmobilebrowsers.com/
None
RESPONSIVE - CONFERENCE SCHEDULE
VIEWPORT <meta name="viewport" content= "width=device-width; initial-scale=1.0" />
MEDIA QUERIES <link rel="stylesheet" type="text/css" media="only screen and (max-width: 650px)"
href="small.css" />
CSS .grid_16, .container_16, .grid_14, .container_14, .grid_11, .grid_5, .grid_4 { width:
100% !important; } .ticker * { display: none; } .grid_4 { margin-left: 10px; display: block; }
LAYOUT > 30-44px Linear Full Width Menu Nav To The
Bottom \/ > Content First Add Link to Nav Maximise Content Area
Menu
FB APP
FB APP var tofind = 20; if( ((window.innerWidth > 0)
? window.innerWidth : screen.width) <= 480 ) { tofind = 12; } <meta name="viewport" content="width=device-width; initial- scale=1.0" / > <meta name="apple-mobile-web-app-capable" content="yes" />
FB APP @media only screen and (max-width: 480px), only screen
and (max-device-width: 480px) { #gameboard { margin: 10px 8px 10px 8px; } #gameboard .imcon { margin: 5px; } }
HOVERS elem.onclick = function() { elem.onhover.call(elem); }; ADVERTS 728x90 486x60
320x50
LOCATION navigator.geolocation.getCurrentPosition( function(pos){ alert(pos.coords.latitude); alert(pos.coords.longitude) }); PHONE NUMBERS <a href="tel://1-555-555-5555">
+1 (555) 555-5555 </a>
FORMS
FORMS <form> <fieldset> <div><input type="email" id="email_addr" name="email_addr" required placeholder="Email Address"/></div>
<div><input id="postcode" name="postcode" type="text" required placeholder="Postcode" /></div> </fieldset> <fieldset> <input id="count" name="count" type="number" placeholder="Count" /> </fieldset>
IOS IMAGE UPLOADS http://picupapp.com
OFFLINE CACHE MANIFEST # Version 1.0.1 CACHE: /favicon.ico index.html stylesheet.css
images/logo.png NETWORK: /comment FALLBACK: images/ images/offline.jpg http://www.alistapart.com/articles/application-cache-is-a-douchebag/
ICONS <link rel="apple-touch-icon" href="icon.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="newipad.png"> <link
rel="apple-touch-icon-precomposed" sizes="114x114" href="iphone4.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ipad.png"> <link rel="apple-touch-startup-image" href="splash.png"> <meta name="apple-mobile-web-app-capable" content="yes">
RESPONSIVE DESIGN http://responsivepx.com
EMULATORS http://www.opera.com/developer/tools/mobile/ http://www.mobilexweb.com/emulators
iWebInspector http://www.iwebinspector.com/
ADOBE SHADOW http://labs.adobe.com/technologies/shadow/
None
ian barber -
[email protected]
- @ianbarber https://github.com/ianbarber/TakingSitesMobile THANKS!
http://flickr.com/photos/ministerio_tic/6966981073 IMAGE CREDITS http://flickr.com/photos/moriza/126238642