Mobilism 2011: How to put the mobile in the mobile web
36
How to put the Mobile in the Mobile Web
-
Upload
jenifer-hanen -
Category
Technology
-
view
6.588 -
download
1
description
Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice. Jenifer Hanen @msjen http://blackphoebe.com/msjen
Transcript of Mobilism 2011: How to put the mobile in the mobile web
How to put the Mobile in the Mobile Web
Jenifer HanenDesign | Dev Mobile | Web
Mobile Curious?But not sure where to start?
Web Designer or Developer who is....
Let’s start on the Bunny Slopes...
But...You Say...The client does not have the budget for a separate mobile site.And this was a Gorilla Mobile Website.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Ultimate Removal Mobile Site</title><meta name="description" content="Ultimate Removal, Inc. is a demolition contractor in the tenant improvement� niche of commercial construction. Ultimate Removal, Inc. is now one of the largest tenant improvement demolition contractors in the Los Angeles area." /><link rel="shortcut icon" href="../images/favicon.ico" /><link rel="stylesheet" type="text/css" href="mobile.css"/><meta http-equiv="Cache-Control" content="max-age=600" /></head>
<body class="index">! <div id="index-container">! ! <h1 title="Ultimate Removal, Inc. | Demolition Contractor"><img src="../images/urilogosm.jpg" title="Ultimate Removal, Inc. | Demolition Contractor" alt="Ultimate Removal, Inc. | Demolition Contractor" /></h1>! ! ! <ul id="index-nav-list"><span></span>! ! ! ! <li class="index-nav"><a href="about.php" accesskey="1">About Us</a></li>! ! ! ! <li class="index-nav"><a href="#">|</a></li>! ! ! ! <li class="index-nav"><a href="services.php" accesskey="3">Services</a></li>! ! ! ! <li class="index-nav"><a href="#">|</a></li>! ! ! ! <li class="index-nav"><a href="projects.php" accesskey="7">Projects</a></li>! ! ! ! <li class="index-nav"><a href="#">|</a></li>! ! ! ! <li class="index-nav"><a href="contact.php" accesskey="8">Contact Us </a></li>! ! ! </ul>! ! ! <h2 title="Ultimate Removal, Inc. - Demolition Contractor | Tenant Improvements | High Rise-rise Specialists | Hard & Soft Demolition | Concrete Sawing & Removal"><img src="../images/uritxtsm.jpg" title="Ultimate Removal, Inc. - Demolition Contractor | Tenant Improvements | High Rise-rise Specialists | Hard & Soft Demolition | Concrete Sawing & Removal" alt="Ultimate Removal, Inc. - Demolition Contractor | Tenant Improvements | High Rise-rise Specialists | Hard & Soft Demolition | Concrete Sawing & Removal" /></h2>! ! </div>
! <div id="footer"><p>© 2009 Ultimate Removal, Inc. All rights reserved. <a href="tel:+19095240800">Tel: 909-524-0800</a></p></div>
! <script type="text/javascript">! var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");! document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));! </script>! <script type="text/javascript">! try {! var pageTracker = _gat._getTracker("UA-8949178-1");! pageTracker._trackPageview();! } catch(err) {}</script>! </body>! </html>
Strip it all the way down
! <script type="text/javascript">! var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");! document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));! </script>! <script type="text/javascript">! try {! var pageTracker = _gat._getTracker("UA-8949178-1");! pageTracker._trackPageview();! } catch(err) {}</script>
6 months after launch, 57% of users were coming to the
site via a BlackBerry browser, 23% with an iPhone, & the rest was
desktop browsers.
My Hunch was Right.
Meet Rita El Khoury Lebanese PharmacistMobilistBloggerritaelkhoury.com
iPodNokia N8
HTC Desire Z
Let’s Talk Bandwidth:
“Data plans in Lebanon are divided between prepaid and postpaid plans. Most people are on prepaid, the only deal they can get is a fixed 25MB/month for 5$ or 3$, non renewable before another month.
On postpaid, we get 3 plans: 50MB for 10$, 120MB for 15$, 250MB for 30$. Every additional MB costs 0.10$.
I am on the 120MB plan and I do just fine, most months hovering between 100 and 160mb of use. Those are all EDGE connections by the way, we have been on them for approximately 2years. 3.5G is promised to be deployed in the summer.”
- Rita El Khoury, May 2011
Data is Expensive in Lebanon
Not an Ad
“For the mobile web, I exclusively use Opera Mini. Whether on my iPod, Nokia N8 or Desire Z, Opera Mini is the only browser I will use. Its data efficiency is the reason I can view all web pages I need access to on the go without going ridiculously over my cap.” - Rita El Khoury, 2011
Without Flailing Around and SCREAMING...
CSS : The famed and lauded Media Queries
Javascript : Oh Braces, camelCase & Semicolons
Server-Side : Fear Not
Three ways to put the Mobile in the Mobile Web:
<!DOCTYPE html>
<html>...</html>
or
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN""http://www.w3.org/MarkUp/DTD/xhtml-basic11.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >...</html>
As always, we need to start with good,
semantic markup. XHTML or HTML5 Which should I use?
It depends...
Update: It was pointed out to me by Jeremy Keith & Paul Stevens that this is about DTDs, not XHTML v. HTML, will blog about this.
http://www.flickr.com/photos/jcroft/112754603/
CSS : The famed and lauded Media Queries
CSS @media types & query
In Ethan Marcotte’s Responsive Web Design article,he advocates for the use of:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />
Flexible layout
Flexible images
@media screen and (max-device-width: 480px) { .column { float: none; }}
@media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ }
li#f-watson, li#f-moriarty { margin-right: 0; }}
http://www.alistapart.com/articles/responsive-web-design/
Mr. Marcotte is not the only one who is a proponent of Responsive Web Design and Media Queries...
Stephen Hay will be presenting next onMeta Layout: A Closer Look at Media Queries
http://www.slideshare.net/slideshow/mobilism2011
For examples & inspiration: http://mediaqueri.es
CSS Media Queries Pros and Cons:Pros:* Uses CSS, relatively simple for web workers* If budget does not allow for separate mobile web site, one can make it apart of current website that accounts for screen sizes.
Cons:* Does not take into consideration bandwidth or kind of connection - mobile data or wifi?* While there are a few image reduction solutions, they are not quite there yet.* Umm.. Cough Cough... Internet Cough Explorer Cough...* Most importantly for data sippers, all scripts and media objects are loaded by the mobile browser even if the @media gives a different layout & images for the small screen.
Meet CJ! 3rd Culture Kid CompSci by DegreeBlogger by Lovezomgitscj.com.com
iPadNokia(s)
Many Mobiles
Mobile Sites Are A Must:
“I think a lot of folks assume that everyone out there has a 3G plan, that's unlimited or has a lot of leeway. In India's case, that's definitely not true, and as such folks tend to avoid websites that might be too data intensive, or use way too much flash. A Mobile-friendly version is a must here, if you want people to visit your site.
And unfortunately, at least here in Delhi, Free Wifi can be hard to find, so heading to a coffee shop to leach off their Wifi is not an option.” - CJ, May 2011
Why Mobile Sites Are A Must:
\-|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
Javascript : Oh Braces, camelCase & Semicolons
Javascript opens up our options for Mobile detection, which then allows us to create a better experience for the mobile web viewer.
It can be as simple as using Javascript to detect if it is a mobile device, not just by user agent strings but by features of the mobile web browser.
With Javascript there are several approaches:
The Cudgel : User Agent Mobile Browser Detection(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|
iris|kindle|lge |maemo|midp|mmp|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.test(a)||/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.test(a.substr(0,4)))
window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
From http://detectmobilebrowser.com/
The Ballet Dancer : Mobile Browser Feature Detection
From http://modernizr.com/
// Modernizr v1.7 www.modernizr.comwindow.Modernizr=function(a,b,c){function G(){e.input=function(a){for(var b=0,c=a.length;b<c;b++)t[a[b]]=!!(a[b]in l);return t}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)l.setAttribute("type",f=a[d]),e=l.type!=="text",e&&(l.value=m,l.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&l.style.WebkitAppearance!==c?(g.appendChild(l),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(l,null).WebkitAppearance!=="textfield"&&l.offsetHeight!==0,g.removeChild(l)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=l.checkValidity&&l.checkValidity()===!1:/^color$/.test(f)?(g.appendChild(l),g.offsetWidth,e=l.value!=m,g.removeChild(l)):e=l.value!=m)),s[a[d]]=!!e;return s}("search tel url email datetime date month week time datetime-local number range color".split(" "))}function F(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+p.join(c+" ")+c).split(" ");return!!E(d,b)}function E(a,b){for(var d in a)if(k[a[d]]!==c&&(!b||b(a[d],j)))return!0}function D(a,b){return(""+a).indexOf(b)!==-1}function C(a,b){return typeof a===b}function B(a,b){return A(o.join(a+";")+(b||""))}function A(a){k.cssText=a}var d="1.7",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l=b.createElement("input"),m=":)",n=Object.prototype.toString,o=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),p="Webkit Moz O ms Khtml".split(" "),q={svg:"http://www.w3.org/2000/svg"},r={},s={},t={},u=[],v,w=function(a){var c=b.createElement("style"),d=b.createElement("div"),e;c.textContent=a+"{#modernizr{height:3px}}",h.appendChild(c),d.id="modernizr",g.appendChild(d),e=d.offsetHeight===3,c.parentNode.removeChild(c),d.parentNode.removeChild(d);return!!e},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div");var f=(d="on"+d)in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=C(e[d],"function"),C(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y=({}).hasOwnProperty,z;C(y,c)||C(y.call,c)?z=function(a,b){return b in a&&C(a.constructor.prototype[b],c)}:z=function(a,b){return y.call(a,b)},r.flexbox=function(){function c(a,b,c,d){a.style.cssText=o.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+o.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},r.canvas=function(){var a=b.createElement("canvas");return a.getContext&&a.getContext("2d")},r.canvastext=function(){return e.canvas&&C(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){return!!a.WebGLRenderingContext},r.touch=function(){return"ontouchstart"in a||w("@media ("+o.join("touch-enabled),(")+"modernizr)")},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){var b=!!a.openDatabase;return b},r.indexedDB=function(){for(var b=-1,c=p.length;++b<c;){var d=p[b].toLowerCase();if(a[d+"_indexedDB"]||a[d+"IndexedDB"])return!0}return!1},r.hashchange=function(){return x("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c<d)e=a[c],(b=e.media||b)!="screen"&&f.push(p(e.imports,b),e.cssText);return f.join("")}function o(a){var b=-1;while(++b<e)a.createElement(d[b])}var c="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",d=c.split("|"),e=d.length,f=new RegExp("(^|\\s)("+c+")","gi"),g=new RegExp("<(/*)("+c+")","gi"),h=new RegExp("(^|[^\\n]*?\\s)("+c+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),i=b.createDocumentFragment(),j=b.documentElement,k=j.firstChild,l=b.createElement("body"),m=b.createElement("style"),n;o(b),o(i),k.insertBefore(m,k.firstChild),m.media="print",a.attachEvent("onbeforeprint",function(){var a=-1,c=p(b.styleSheets,"all"),k=[],o;n=n||b.body;while((o=h.exec(c))!=null)k.push((o[1]+o[2]+o[3]).replace(f,"$1.iepp_$2")+o[4]);m.styleSheet.cssText=k.join("\n");while(++a<e){var q=b.getElementsByTagName(d[a]),r=q.length,s=-1;while(++s<r)q[s].className.indexOf("iepp_")<0&&(q[s].className+=" iepp_"+d[a])}i.appendChild(n),j.appendChild(l),l.className=n.className,l.innerHTML=n.innerHTML.replace(g,"<$1font")}),a.attachEvent("onafterprint",function(){l.innerHTML="",j.removeChild(l),j.appendChild(n),m.styleSheet.cssText=""})}(a,b),e._enableHTML5=f,e._version=d,g.className=g.className.replace(/\bno-js\b/,"")+" js "+u.join(" ");return e}(this,this.document)
Not all mobile browsers are Javascript equal and some feature phones have little to no Javascript.Please refer to the Mobile Compatibility tables:http://quirksmode.org/m/table.html
One Not So Small Problem
But we can’t count Javascript out...
Scott Jehl will be presenting on JQuery Mobile after lunch
Many have great hopes that JQuery Mobile will mature in a way that the web trio of HTML/CSS/JS
will be more than enough for the mobile web, as well as, other future Javascript solutions
for the mobile browser.
How do we build for a complex Mobile Web?
Meet ChandrachoodanFilmaker / ArchaeologistMA from U. of BristolPhotographerBloggerChennai Proud Nokia E63
Photo by Jenifer Hanen
“I think that support for Indic scripts would be very important in the future. More and more Tamil/Hindi/Indian language publications are getting online, and a lot of Tamil blogs already exist. So support for
Indic scripts on the mobile web essential. I realise this is an issue with slightly older phones and that newer phones come with UTF-8 support.” - Chandru, May 2011
Server-Side : Fear NotYou have determined that you need a mobile web site or app that works for many connected mobile devices, including ones that Javascript may not work with and for users who are bandwidth sensitive. Time to look to the server.
If the word server-side gives strikes fear in your gut, worry not, if you are willing to calculate fluid grid percentages to the 8th decimal point then what is a wee bit of server-side scripting between friends...
margin-right: 3.317535545023696682%;
width: 48.341232227488151658%;
The PHP Script from Detect Mobile Browser
http://detectmobilebrowser.com/
<?php$useragent=$_SERVER['HTTP_USER_AGENT'];if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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)))header('Location: http://detectmobilebrowser.com/mobile');?>
Looks quite a bit like the Javascript DMB script, the RegEx for mobile browser UA’s remains the same, but the Javascript is swapped out for PHP at the top & bottom.
WURFL
http://wurfl.sourceforge.nethttp://tera-wurfl.com/explore/
<?xml version="1.0" encoding="UTF-8"?><wurfl> <version> <ver>www.wurflpro.com - 2011-04-24 12:07:53</ver> <last_updated>Sun Apr 24 12:09:17 -0500 2011</last_updated> <official_url>http://wurfl.sourceforge.net/</official_url>! <maintainers>! <maintainer name="Luca Passani" email="luca.passani at gmail point com" home_page="http://www.wurfl.com"/>! </maintainers>! <authors>! <author name="Luca Passani" email="luca.passani at gmail point com" home_page="http://www.wurfl.com"/>! </authors> </version> <devices> <device id="generic" user_agent="" fall_back="root"> <group id="product_info"> <capability name="mobile_browser" value=""/> <capability name="nokia_feature_pack" value="0"/> <capability name="device_os" value=""/> <capability name="nokia_series" value="0"/> <capability name="has_qwerty_keyboard" value="false"/> <capability name="pointing_method" value=""/> <capability name="mobile_browser_version" value=""/> <capability name="is_tablet" value="false"/> <capability name="nokia_edition" value="0"/> <capability name="uaprof" value=""/> <capability name="can_skip_aligned_link_row" value="false"/> <capability name="device_claims_web_support" value="false"/> <capability name="ununiqueness_handler" value=""/> <capability name="model_name" value=""/> <capability name="device_os_version" value=""/> <capability name="uaprof2" value=""/> <capability name="is_wireless_device" value="true"/> <capability name="uaprof3" value=""/> <capability name="brand_name" value=""/> <capability name="model_extra_info" value=""/> <capability name="marketing_name" value=""/> <capability name="can_assign_phone_number" value="true"/> <capability name="release_date" value="2002_january"/> <capability name="unique" value="true"/> </group> <group id="wml_ui"> <capability name="icons_on_menu_items_support" value="false"/> <capability name="opwv_wml_extensions_support" value="false"/> <capability name="built_in_back_button_support" value="false"/> <capability name="proportional_font" value="false"/> <capability name="insert_br_element_after_widget_recommended" value="false"/> <capability name="wizards_recommended" value="false"/> <capability name="wml_can_display_images_and_text_on_same_line" value="false"/> <capability name="softkey_support" value="false"/> <capability name="wml_make_phone_call_string" value="wtai://wp/mc;"/> <capability name="deck_prefetch_support" value="false"/> <capability name="menu_with_select_element_recommended" value="false"/> <capability name="numbered_menus" value="false"/>
“The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.
The main scope of the file is to collect as much information as we can about all the existing mobile devices that access WAP pages so that developers will be able to build better applications and better services for the users.
This project is open-source and is intended for developers working with the WAP and Wireless. All the information listed here has been collected by many different people from many different countries. You are allowed to use WURFL in any of your applications, free or commercial. The only thing required is to make any modification to this file public, following the original spirit and idea of the creators of this project. This will help WURFL to grow better and better every day.” - Luca Passini
What Challenges do you face with bandwidth?
Meet JasonSan FranciscoWeb DeveloperPhotographer
iPhone
“It depends on where I am. At my old place in the Inner Sunset, very rarely did my phone drop calls, and I always had great reception. Now in the Castro, and when I'm downtown, I get dropped calls frequently, and at home I need to be near the windows at the front of the apartment to make sure I don't lose reception. Even then, it might not help. If I happen to walk into the kitchen without thinking about it, I might as well say "good bye" on the way because the call will certainly drop.
At home, when I'm visiting friends, or somewhere with free wifi, I just turn on wifi. Otherwise I just have to be patient. My mobile data usage is rarely time-sensitive, so I don't usually stress out about it. The only time I feel it's critical is when I'm using the maps app for directions. That's the worst time to be left in the lurch.
There's no section at home that's a black hole for data, though you think there would be, given the above.” - Jason, May 2011
San Francisco, Connection Black Hole
Possible Solutions:
Work with browser makers for a more complete feature profile and to alert of user preferences on data, media, and current context.
Form a grassroots set of folk to work up the hybrid server/client side solution for mobile browser and feature detection as proposed in Brian Rieger’s presentation
We are all here now, what are we willing to accomplish & organize?
The Mobile Web is young, let’s keep the lines of communication open and work together.
How To Get from Here to There
The Mobilism Presentations that Go in More Detail:
Steve Hay on Media Queries : http://slideshare.net/stephenhay/mobilism2011
Scott Jehl on Mobile JQuery (he will be posting this later after permission is gained)
Brian Rieger on Muddling Through the Mobile Web : http://slideshare.net/yiibu/muddling-through-the-mobile-web
Resources:TextW3C's Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/
W3C's Mobile Web Application Best Practices http://www.w3.org/TR/mwabp/
W3C Media Queries http://www.w3.org/TR/css3-mediaqueries/
Global Authoring Practices for the Mobile Web http://www.passani.it/gap/
USC's Best Practices in Mobile Detection http://webservices.usc.edu/blog/development/mobile_detection/
Quirksmode Mobile http://quirksmode.org/mobile/
Detect Mobile Browser http://detectmobilebrowser.com/
Modernizr http://www.modernizr.com/
Simple javascript mobile OS detector http://blog.justin.kelly.org.au/simple-javascript-mobile-os-detector
WURFL http://wurfl.sourceforge.net/
Deploying WURFL http://wurfl.sourceforge.net/newapi/
Tera-WURFL UA & Feature Explorer http://tera-wurfl.com/explore/
James Pearce's Modernizr-server https://github.com/jamesgpearce/modernizr-server
The Switcher http://www.passani.it/switcher/
Manifesto for Responsible Reformatting http://wurfl.sourceforge.net/manifesto/
Thank you!
Jenifer Hanen :: Black Phoebe Designs@msjen blackphoebe.com/msjen
Please watch twitter | blog for the Slideshare URL of this Presentation
![[put in book cover] [put in book cover] [put in book cover ... · [put in book cover] [put in book cover] [put in book cover] [put in book cover] Do you like fantasy & adventure mixed](https://static.fdocuments.in/doc/165x107/5f668678566d1345cb78e5cf/put-in-book-cover-put-in-book-cover-put-in-book-cover-put-in-book-cover.jpg)
