Refactoring for the Mobile Web

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