Presentation is loading. Please wait.

Presentation is loading. Please wait.

Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company, for the United States Department of Energys National Nuclear.

Similar presentations


Presentation on theme: "Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company, for the United States Department of Energys National Nuclear."— Presentation transcript:

1 Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company, for the United States Department of Energys National Nuclear Security Administration under contract DE-AC04-94AL85000. 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: Dont 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/ 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 1.User-agent sniffing 2.CSS media types 3.Separate site (m.yoursite.gov or yoursite.gov/m) 4.Combinations of the above usually are most effective

15 User-agent detection 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/5 6782351 & http://quirksmode.org/m/d/ to build stronger example. http://twitter.com/ppk/status/5 6782351 http://quirksmode.org/m/d/

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: Applying handheld to an embedded stylesheet: div.foo { color: red; } 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: @import url(mobile.css) handheld;

18 Viewport and media queries WebKit assumes 960 pixels Reset that assumption: As mentioned, Opera and WebKit default to screen media but support media queries Use media query to reset width: div.layout { width:100%; }

19 Combine handheld and media query targets Add the handheld value to your media string:

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 http://www.alistapart.com/articles/returnofthemobilestylesheet Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/http://www.w3.org/TR/mobile-bp/ Google Android: http://code.google.com/android/http://code.google.com/android/ Apple iPhone Developer: http://developer.apple.com/iphone/http://developer.apple.com/iphone/ Designing with Opera Mini in mind: http://dev.opera.com/articles/view/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/http://www.opera.com/mini/demo/

29 Thanks! Joseph R. Lewis Sandia National Laboratories


Download ppt "Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company, for the United States Department of Energys National Nuclear."

Similar presentations


Ads by Google