Refactoring for the Portable Web

Presentation Transcript

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

Some inquiries to remember: What is the portable web? Why is this vital to us now? What patterns are driving this significance? What would it be a good idea for us to do as web designers for our portable gathering of people? By what means would I be able to get this going in my sites now?

What is the versatile Web get to through handheld and remote gadgets: Smartphones iPhone Palm Prē Android Blackberry PDAs & Other gadgetry (Kindle, iPod Touch, and so forth) Forget about low-end telephones with guaranteed web get to.

Mobile Web Use Trends Explosive development: Bango : Mobile web use in the US encountered three overlay increment in 2007 Juniper : Mobile web clients will develop from 577 million in 2008 to more than 1.7 billion in 2013 iPhone driving the route since dispatch of June 2007: AdMob : iPhone in 11/2008 got to be single most-utilized web gadget over whatever other handset Google 2/2008: Apple iPhone creates 50 times more hunts than some other gadget Opera is most generally conveyed portable program: ~54% piece of the pie

Expect expanded versatile web utilize Some significant locales reporting more than 13% of their activity originating from cell phones Weather & Entertainment: frequently more than 20% Web-empowered customer applications are basic to the market. ~100,000 applications for iPhone ~10,000 for Android ~300 for Prē Social systems administration commands web+app utilize Global utilize > 40% for person to person communication USA, South Africa, and Indonesia enroll > 60% utilize (Opera, 5/2008)

Advantages for portable web applications Convenience : Always on, constantly close to the proprietor. 60% of versatile clients keep their telephones bedside around evening time (Ahonen, 2008) Ubiquitous, inescapable data streams : Don't have to come back to a work area to information Location mindful : GPS, accelerometers generally accessible Media input : Most cell phones have worked in camera, amplifier, and speaker notwithstanding console input

Mobile Web Challenges Small screen measure Navigation Reduced usefulness Do not depend on JavaScript, Java, Flash, and so forth. Moderate Networks City blockage/gorge Events No 3G Lower handling capacity Less CPU control Less RAM

Embedded Browsers Mobile web not just about the default web program SDKs permit installing of rendering motor in programming For iPhone OS – WebKit is the main alternative Entire applications can be based on cleaning a web interface Might just need HTML, CSS, JavaScript, and additionally some straightforward server-side dialect, for example, Ruby or PHP to construct an application

Opera Two flavors: Opera Mini – chips away at pretty much any telephone, most regular rendition Opera Mobile – all the more full-included, works w/PDAs running Windows Mobile and Symbian UIQ Touch Now defaults to "screen" media rather than "handheld" media sort rendering, taking after WebKit Supports CSS3 media questions: http://www.w3.org/TR/css3-mediaqueries/

WebKit Open source, lightweight codebase Strong sending Safari on iPhone OS Android OS WebOS (Palm Prē) Nokia S60 No support for media sort = "handheld" Instead utilizations media inquiries

Other rendering motors to consider Internet Explorer Mobile NetFront Gecko (Fennec) Obigo Polaris

Browsers versus Screen Sizes

Developing on the desktop for versatile Use Opera in Small Screen mode for creating for handheld media Use iPhone SDK & Android SDK emulators for producing for WebKit Opera has a menu thing to change to handheld media. Firefox clients can introduce the Web Developer Toolbar to change to handheld media effectively.

Strategies for versatile web conveyance User-specialist sniffing CSS media sorts Separate website (m.yoursite.gov or yoursite.gov/m) Combinations of the above as a rule are best

User-operator identification <? php work detectWebkit($query ){ $container = $_SERVER['HTTP_USER_AGENT']; $ useragents = exhibit ( 'iPhone','iPod','Android','S60'); $this-> webkit = false; foreach ( $ useragents as $ useragent ) { if ( eregi($useragent,$container )){ $this-> webkit = genuine; } } if($this - > webkit ) { //support the webkits } else { //help out non-webkits } } ?> Variation and absence of benchmarks mean consistent pursue as UA strings change PPK is social occasion information http://twitter.com/ppk/status/56782351 & http://quirksmode.org/m/d/to construct more grounded illustration.

Separate destinations or codebases Might mean significantly more code to keep up Improve circumstance in MVC utilizing changed courses, controllers & perspectives Can all the more adequately address obliged transfer speed through savage enhancement

Delivering portable style The connection strategy: <link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" > Applying handheld to an installed template: <style type="text/css" media="handheld" > div.foo { shading: red; } </style> Using @media handheld to target handheld styles in implanted or outside CSS: @media handheld { div.foo { shading: red; } Using @media handheld to import a versatile template: <style type="text/css"> @import url(mobile.css) handheld; </style>

Viewport and media questions WebKit expect 960 pixels Reset that supposition: <meta name="viewport" content="width=640"/> As specified, Opera and WebKit default to screen media yet bolster media inquiries Use media inquiry to reset width: <style type="text/css" media="only screen and (max-gadget width: 480px)" > div.layout { width:100%; } </style>

Combine handheld and media inquiry targets Add the handheld esteem to your media string: <style type="text/css" media=" handheld, just screen and (max-gadget width: 480px)">

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

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

Abbreviate Reset wide content utilizing the substance property: img#masthead { content: attr(alt); textual style 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"; }

Design for a touch screen div#sitenav a { width:100%; text style size:2em; margin:0; border:1px strong #333; content align:center; }

Nifty WebKit Tricks: Transforms & CSS3 dl { opacity:0.25; -webkit-change: skew(- 30deg) turn(- 8deg) interpret(- 5em,- 10em) scale(1.5); -webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5); -webkit-move term: 2s; -webkit-move timing-work: ease-in; } dl:hover { -webkit-change: skew(0deg) rotate(0deg) translate(0,0) scale(1); opacity: 1; -webkit-fringe span: 20px; }

Use cases for versatile refactoring Public web nearness Mobile clients on your intranet (travel, time, data) Scientific applications Lab notes Collaboration Status & extend administration Mobile information circulation to handle clients, people on call Research utilizing portable information gathering

What about versatile applications? Applications require establishment – site pages are in a flash open, in a split second redesigned No application store endorsement holding up Not stage subordinate – no compelling reason to order for iPhone/Android/Pre/Blackberry/WinMobile Database stockpiling support in HTML5 Users influence this in Safari for iPhone by means of "Add to home screen" highlight

Questions? ?

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/versatile bp/Google Android: http://code.google.com/android/Apple iPhone Developer: http://developer.apple.com/iphone/Designing on account of Opera Mini: http://dev.opera.com/articles/see/planning because of musical drama small/Opera Mini emulator: http://www.opera.com/smaller than expected/demo/

Thanks! Joseph R. Lewis Sandia National Laboratories