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
490
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
130
How Google Builds Webservices
ianbarber
3
300
Mobile & Social
ianbarber
2
140
Event Stream Processing In PHP
ianbarber
7
2.3k
Building A Firehose - PHPNW
ianbarber
2
820
Clojure for PHP Developers
ianbarber
6
1.8k
Building a Firehose
ianbarber
5
1.2k
The Cookie Law
ianbarber
1
810
Teaching Your Machine To Find Fraudsters
ianbarber
3
920
Other Decks in Technology
See All in Technology
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
Pedestrian-Centric大規模交通安全映像解析向けWoven Traffic Safety (WTS) データセットの紹介
kbuster
0
140
Databricks:『生成AI World Cup』のご案内
databricksjapan
1
110
Signals Unleashed: The Full Guide
rainerhahnekamp
0
350
0→1開発における技術選定において一番大切なこと
bicstone
1
310
Why we expect the Microservices
shkitayama
2
320
SREとその組織類型
tatsuo48
8
1.4k
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
22
4.2k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
100
Tebiki株式会社 エンジニア採用資料
tebiki
0
4k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
240
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.7k
Featured
See All Featured
Fireside Chat
paigeccino
19
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
118
38k
Unsuck your backbone
ammeep
662
57k
Designing the Hi-DPI Web
ddemaree
275
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
BBQ
matthewcrist
79
8.7k
Build your cross-platform service in a week with App Engine
jlugia
224
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Adopting Sorbet at Scale
ufuk
67
8.6k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.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