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
580
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
160
How Google Builds Webservices
ianbarber
3
340
Mobile & Social
ianbarber
2
180
Event Stream Processing In PHP
ianbarber
7
2.4k
Building A Firehose - PHPNW
ianbarber
2
950
Clojure for PHP Developers
ianbarber
6
1.9k
Building a Firehose
ianbarber
5
1.4k
The Cookie Law
ianbarber
1
940
Teaching Your Machine To Find Fraudsters
ianbarber
3
1k
Other Decks in Technology
See All in Technology
技術書典18結果報告
mutsumix
2
180
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.1k
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.3k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
140
libsyncrpcってなに?
uhyo
0
120
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
130
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.6k
Optimizing for Happiness
mojombo
378
70k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Unsuck your backbone
ammeep
671
58k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Music & Morning Musume
bryan
47
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
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