Mobilism 2011: How to put the mobile in the mobile web

How to put theMobile in the Mobile Web

Jenifer HanenDesign | Dev Mobile | Web

Web Designer or Developer who is....Mobile Curious? But not sure where to start?

Let’s start on the Bunny Slopes...

But...You Say...The client does nothave the budget for aseparate mobile site.And this was a Gorilla MobileWebsite.

Strip it all the way down<!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 improvementniche of commercial construction. Ultimate Removal, Inc. is now one of the largest tenant improvementdemolition 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 | TenantImprovements | 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>

My Hunch was Right.! <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.

Let’s Talk Bandwidth:Meet Rita El KhouryLebanesePharmacistMobilistBloggerritaelkhoury.com iPod Nokia N8 HTC Desire Z

Data is Expensive in Lebanon“Data plans in Lebanon are divided between prepaid andpostpaid plans. Most people are on prepaid, the only dealthey can get is a ﬁxed 25MB/month for 5$ or 3$, nonrenewable 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 ﬁne, most monthshovering between 100 and 160mb of use. Those are allEDGE connections by the way, we have been on them forapproximately 2years. 3.5G is promised to be deployed inthe summer.”- Rita El Khoury, May 2011

Not an Ad“For the mobile web, I exclusively use Opera Mini. Whether on myiPod, Nokia N8 or Desire Z, Opera Mini is the only browser I will use.Its data efﬁciency is the reason I can view all web pages I need accessto on the go without going ridiculously over my cap.” - Rita El Khoury, 2011

Without Flailing Around and SCREAMING...

Three ways to put the Mobile in the Mobile Web: CSS : The famed and lauded Media Queries Javascript : Oh Braces, camelCase & Semicolons Server-Side : Fear Not

<!DOCTYPE html>As always, we need to start with good, <html> semantic markup. XHTML or HTML5 ... Which should I use? </html> It depends... 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>

CSS : The famed and lauded Media Queries http://www.ﬂickr.com/photos/jcroft/112754603/

In Ethan Marcotte’s Responsive Web Design article,he advocates for the use of:CSS @media types & query<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />Flexible layout@media screen and (max-device-width: 480px) { .column { float: none; }}Flexible images@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... Our own Stephen Hay will be presenting next on Meta Layout: A Closer Look at Media Queries 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, onecan make it apart of current website that accounts for screensizes.Cons:* Does not take into consideration bandwidth or kind ofconnection - mobile data or wiﬁ?* While there are a few image reduction solutions, they arenot quite there yet.* Umm.. Cough Cough... Internet Cough Explorer Cough...* Most importantly for data sippers, all scripts and mediaobjects are loaded by the mobile browser even if the @mediagives a different layout & images for the small screen.

Mobile Sites Are A Must:Meet CJ!3rd Culture KidCompSci by DegreeBlogger by Lovezomgitscj.com.com iPad Nokia(s) Many Mobiles

Why Mobile Sites Are A Must:“I think a lot of folks assume that everyone out therehas a 3G plan, thats unlimited or has a lot of leeway. InIndias case, thats definitely not true, and as such folkstend to avoid websites that might be too dataintensive, or use way too much flash. A Mobile-friendlyversion is a must here, if you want people to visit yoursite.And unfortunately, at least here in Delhi, Free Wifi canbe hard to find, so heading to a coffee shop to leach offtheir Wifi is not an option.” - CJ, May 2001

-|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|ﬂy(-|_)|g1 u|g560|gene| Javascript : Oh Braces, camelCase & Semicolonsgf-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| Javascript opens up our options for Mobile go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq| detection, which then allows us to create a iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-| better experience for the mobile web viewer. 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 It can be as simple as using Javascript to detect if (di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)| it is a mobile device, not just by user agent zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)| strings but by features of the mobile webn50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)| browser.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 With Javascript there are several approaches: -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

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|ﬂy(-|_)|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// 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 placeholdermax 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("(urls*(.*?){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=newRegExp("<(/*)("+c+")","gi"),h=new RegExp("(^|[^n]*?s)("+c+")([^n]*)({[nwW]*?})","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-jsb/,"")+" js"+u.join(" ");return e}(this,this.document) From http://modernizr.com/

One Not So Small Problem 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

But we can’t count Javascript out... 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.Scott Jehl will be presenting on JQuery Mobile after lunch

How do we build for acomplex Mobile Web?Meet ChandrachoodanFilmaker / ArchaeologistMA from U. of BristolPhotographerBloggerChennai Proud Nokia E63

“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 Photo by Jenifer Hanen

Server-Side : Fear NotYou have determined that you need a mobile web site or appthat works for many connected mobile devices, including onesthat Javascript may not work with and for users who arebandwidth 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 ﬂuid grid percentages to the 8thdecimal point then what is a wee bit of server-side scriptingbetween friends... margin-right: 3.317535545023696682%; width:48.341232227488151658%;

The PHP Script from Detect Mobile Browser <?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|ﬂy(-|_)|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’sremains the same, but the Javascript is swapped out for PHP at the top & bottom.http://detectmobilebrowser.com/

<?xml version="1.0" encoding="UTF-8"?> <wurfl>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“The WURFL is an XML configuration file which contains com" home_page="http://www.wurfl.com"/> ! </maintainers>information about capabilities and features of many mobile ! <authors>devices. ! <author name="Luca Passani" email="luca.passani at gmail point com" home_page="http://www.wurfl.com"/> ! </authors> </version>The main scope of the file is to collect as much <devices>information as we can about all the existing mobile <device id="generic" user_agent="" fall_back="root"> <group id="product_info">devices that access WAP pages so that developers will be <capability name="mobile_browser" value=""/>able to build better applications and better services for <capability name="nokia_feature_pack" value="0"/> <capability name="device_os" value=""/>the users. <capability name="nokia_series" value="0"/> <capability name="has_qwerty_keyboard" value="false"/> <capability name="pointing_method" value=""/>This project is open-source and is intended for developers <capability name="mobile_browser_version" value=""/> <capability name="is_tablet" value="false"/>working with the WAP and Wireless. All the information <capability name="nokia_edition" value="0"/>listed here has been collected by many different people <capability name="uaprof" value=""/> <capability name="can_skip_aligned_link_row" value="false"/>from many different countries.You are allowed to use <capability name="device_claims_web_support" value="false"/> <capability name="ununiqueness_handler" value=""/>WURFL in any of your applications, free or commercial. <capability name="model_name" value=""/>The only thing required is to make any modification to <capability name="device_os_version" value=""/> <capability name="uaprof2" value=""/>this file public, following the original spirit and idea of the <capability name="is_wireless_device" value="true"/> <capability name="uaprof3" value=""/>creators of this project. This will help WURFL to grow <capability name="brand_name" value=""/>better and better every day.” - Luca Passini <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"/>http://wurfl.sourceforge.net </group> <group id="wml_ui"> <capability name="icons_on_menu_items_support" value="false"/>http://tera-wurfl.com/explore/ <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"/>

What Challenges do you face with bandwidth? Meet Jason San Francisco Web Developer Photographer iPhone

San Francisco, Connection Black Hole“It depends on where I am. At my old place in the Inner Sunset, very rarely did myphone drop calls, and I always had great reception. Now in the Castro, and when Imdowntown, I get dropped calls frequently, and at home I need to be near thewindows at the front of the apartment to make sure I dont lose reception. Eventhen, it might not help. If I happen to walk into the kitchen without thinking aboutit, I might as well say "good bye" on the way because the call will certainly drop.At home, when Im visiting friends, or somewhere with free wiﬁ, I just turn on wiﬁ.Otherwise I just have to be patient. My mobile data usage is rarely time-sensitive, soI dont usually stress out about it. The only time I feel its critical is when Im usingthe maps app for directions. Thats the worst time to be left in the lurch.Theres no section at home thats a black hole for data, though you think therewould be, given the above.” - Jason, May 2011

Possible Solutions:Form a grassroots set of folk to work up the hybrid server/client side solution for mobile browser andfeature detection as proposed in Brian Rieger’s presentationWork with browser makers for a more complete feature proﬁle and to alert of user preferences ondata, media, and current context.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.

Resources:TextW3Cs Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/W3Cs Mobile Web Application Best Practices http://www.w3.org/TR/mwabp/Global Authoring Practices for the Mobile Web http://www.passani.it/gap/USCs 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-detectorWURFL http://wurfl.sourceforge.net/Deploying WURFL http://wurfl.sourceforge.net/newapi/Tera-WURFL UA & Feature Explorer http://tera-wurfl.com/explore/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

http://www.blackphoebe.com	277
http://lanyrd.com	8
http://interactive.lukkien.com	6
http://paper.li	4
http://research.dsmedia.org	4
url_unknown	3
http://us-w1.rockmelt.com	1
http://posterous.com	1
http://twitter.com	1
http://www.google.com	1

Mobilism 2011: How to put the mobile in the mobile web

by Jenifer Hanen on May 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 306

Statistics

Mobilism 2011: How to put the mobile in the mobile web — Presentation Transcript