1 / 29

Refactoring for the Mobile Web

Refactoring for the Mobile Web. Joseph R. Lewis — Sandia National Laboratories. Some questions to keep in mind:. What is the mobile web? Why is this important to us now? What trends are driving this importance? What should we be doing as web developers for our mobile audience?

serge
Download Presentation

Refactoring for the Mobile Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Refactoring for the Mobile Web Joseph R. Lewis — Sandia National Laboratories

  2. Some questions to keep in mind: • What is the mobile web? • Why is this important to us now? • What trends are driving this importance? • What should we be doing as web developers for our mobile audience? • How can I make this happen in my web sites now?

  3. What is the mobile web • Web access via handheld and wireless devices: • Smartphones • iPhone • Palm Prē • Android • Blackberry • PDAs & Other gadgetry (Kindle, iPod Touch, etc) • Forget about low-end phones with claimed web access.

  4. Mobile Web Use Trends • Explosive growth: • Bango: Mobile web use in the US experienced three fold increase in 2007 • Juniper: Mobile web users will grow from 577 million in 2008 to more than 1.7 billion in 2013 • iPhone leading the way since launch of June 2007: • AdMob: iPhone in 11/2008 became single most-used web device over any other handset • Google 2/2008: Apple iPhone generates 50 times more searches than any other device • Opera is most widely deployed mobile browser: ~54% market share

  5. Expect increased mobile web use • Some major sites reporting over 13% of their traffic coming from mobile devices • Weather & Entertainment: often over 20% • Web-enabled client apps are critical to the market. • ~100,000 apps for iPhone • ~10,000 for Android • ~300 for Prē • Social networking dominates web+app use • Global use > 40% for social networking • USA, South Africa, and Indonesia register > 60% use (Opera, 5/2008)

  6. Advantages for mobile web apps • Convenience: Always on, always near the owner. • 60% of mobile users keep their phones bedside at night (Ahonen, 2008) • Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data • Location aware: GPS, accelerometers widely available • Media input: Most smartphones have built-in camera, microphone, and speaker in addition to keyboard input

  7. Mobile Web Challenges • Small screen size • Navigation • Reduced functionality • Do not rely on JavaScript, Java, Flash, etc. • Slow Networks • City congestion/canyons • Events • No 3G • Lower processing capability • Less CPU power • Less RAM

  8. Embedded Browsers • Mobile web not just about the default web browser • SDKs allow embedding of rendering engine in software • For iPhone OS – WebKit is the only option • Entire applications can be built on skinning a web interface • Might only need HTML, CSS, JavaScript, and/or some simple server-side language such as Ruby or PHP to build an app

  9. Opera • Two flavors: • Opera Mini – works on just about any phone, most common version • Opera Mobile – more full-featured, works w/ PDAs running Windows Mobile and Symbian UIQ Touch • Now defaults to ‘screen’ media instead of ‘handheld’ media type rendering, following WebKit • Supports CSS3 media queries: http://www.w3.org/TR/css3-mediaqueries/

  10. WebKit • Open source, lightweight codebase • Strong deployment • Safari on iPhone OS • Android OS • WebOS (Palm Prē) • Nokia S60 • No support for media type = ‘handheld’ • Instead uses media queries

  11. Other rendering engines to consider • Internet Explorer Mobile • NetFront • Gecko (Fennec) • Obigo • Polaris

  12. Browsers vs. Screen Sizes

  13. Developing on the desktop for mobile • Use Opera in Small Screen mode for developing for handheld media • Use iPhone SDK & Android SDK emulators for developing for WebKit • Opera has a menu item to switch to handheld media. • Firefox users can install the Web Developer Toolbar to switch to handheld media easily.

  14. Strategies for mobile web delivery • User-agent sniffing • CSS media types • Separate site (m.yoursite.gov or yoursite.gov/m) • Combinations of the above usually are most effective

  15. User-agent detection <?php function detectWebkit($query){ $container = $_SERVER[’HTTP_USER_AGENT’]; $useragents = array ( 'iPhone','iPod','Android','S60'); $this->webkit = false; foreach ( $useragents as $useragent ) { if (eregi($useragent,$container)){ $this->webkit = true; } } if($this->webkit) { // do something for the webkits } else { // do something for non-webkits } } ?> • Variation and lack of standards mean constant chase as UA strings change • PPK is gathering data http://twitter.com/ppk/status/56782351 & http://quirksmode.org/m/d/ to build stronger example.

  16. Separate sites or codebases • Might mean a lot more code to maintain • Improve situation in MVC using modified routes, controllers & views • Can more effectively address constrained bandwidth through ruthless optimization

  17. Delivering mobile style The link method: <link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"> Applying handheld to an embedded stylesheet: <style type="text/css" media="handheld"> div.foo { color: red; } </style> Using @media handheld to target handheld styles in embedded or external CSS: @media handheld { div.foo { color: red; } } Using @media handheld to import a mobile stylesheet: <style type="text/css"> @import url(mobile.css) handheld; </style>

  18. Viewport and media queries • WebKit assumes 960 pixels • Reset that assumption: • <meta name="viewport” content="width=640" /> • As mentioned, Opera and WebKit default to screen media but support media queries • Use media query to reset width: <style type="text/css" media="only screen and (max-device-width: 480px)"> div.layout { width:100%; } </style>

  19. Combine handheld and media query targets • Add the handheld value to your media string: <style type="text/css" media="handheld, only screen and (max-device-width: 480px)">

  20. Mobile Refactoring Rule No.1 • Hide unneeded sections div#sidebar { display:none; } • Or move them div#sidebar { float:none; }

  21. Mobile Refactoring Rule No.2 • Reset the content width div#layout {width:100%;}

  22. Abbreviate • Reset wide text using the content property: img#masthead { content: attr(alt); font-family: cursive; } #sitenav a[href="http://natasha.example.com/cv/"] { content: "CV"; } #sitenav a[href="http://natasha.example.com/cal/"] { content: "Events"; } #sitenav a[href="http://natasha.example.com/av/"] { content: "A/V"; }

  23. Design for a touch screen div#sitenav a { width:100%; font-size:2em; margin:0; border:1px solid #333; text-align:center; }

  24. Nifty WebKit Tricks: Transforms & CSS3 dl { opacity:0.25; -webkit-transform: skew(-30deg) rotate(-8deg) translate(-5em,-10em) scale(1.5); -webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5); -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in; } dl:hover { -webkit-transform: skew(0deg) rotate(0deg) translate(0,0) scale(1); opacity: 1; -webkit-border-radius: 20px; }

  25. Use cases for mobile refactoring • Public web presence • Mobile users on your intranet (travel, time, information) • Scientific applications • Lab notes • Collaboration • Status & project management • Mobile data distribution to field users, first responders • Research using mobile data gathering

  26. What about mobile apps? • Apps require installation – web pages are instantly accessible, instantly updated • No app store approval waiting • Not platform dependent – no need to compile for iPhone/Android/Pre/Blackberry/WinMobile • Database storage support in HTML5 • Users leverage this in Safari for iPhone via “Add to home screen” feature

  27. Questions? ?

  28. Resources • A List Apart – Return of the Mobile Style Sheet: http://www.alistapart.com/articles/returnofthemobilestylesheet • Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/ • Google Android: http://code.google.com/android/ • Apple iPhone Developer: http://developer.apple.com/iphone/ • Designing with Opera Mini in mind: http://dev.opera.com/articles/view/designing-with-opera-mini-in-mind/ • Opera Mini emulator: http://www.opera.com/mini/demo/

  29. Thanks! Joseph R. Lewis Sandia National Laboratories

More Related