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
960
Clojure for PHP Developers
ianbarber
6
1.9k
Building a Firehose
ianbarber
5
1.5k
The Cookie Law
ianbarber
1
940
Teaching Your Machine To Find Fraudsters
ianbarber
3
1k
Other Decks in Technology
See All in Technology
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.3k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.4k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
580
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
20250623 Findy Lunch LT Brown
3150
0
800
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
330
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.6k
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
130
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
2
160
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
370
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
140
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
The Invisible Side of Design
smashingmag
299
51k
Code Reviewing Like a Champion
maltzj
524
40k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Producing Creativity
orderedlist
PRO
346
40k
Six Lessons from altMBA
skipperchong
28
3.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
It's Worth the Effort
3n
184
28k
Site-Speed That Sticks
csswizardry
10
650
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