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
480
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
810
Clojure for PHP Developers
ianbarber
6
1.8k
Building a Firehose
ianbarber
5
1.2k
The Cookie Law
ianbarber
1
800
Teaching Your Machine To Find Fraudsters
ianbarber
3
910
Other Decks in Technology
See All in Technology
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
3
240
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
AMLD 2024 - Build Your Own GPT
donlelef
1
260
Challenges - Open Farming Hackdays 2024
loleg
0
550
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
バッチ処理のSLOをどう設計するか
rynsuke
7
560
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
160
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
3.9k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Atom: Resistance is Futile
akmur
258
25k
Infographics Made Easy
chrislema
237
18k
Building Adaptive Systems
keathley
29
1.8k
Rails Girls Zürich Keynote
gr2m
91
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Clear Off the Table
cherdarchuk
82
310k
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