Refactoring for the Portable Web

2666 days ago, 946 views
PowerPoint PPT Presentation
Applications require establishment site pages are in a split second available, right away ... ward no compelling reason to incorporate for iPhone/Android/Pre/Blackberry/WinMobile ...

Presentation Transcript

Slide 1

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

Slide 2

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?

Slide 3

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.

Slide 4

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

Slide 5

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)

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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:

Slide 10

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

Slide 11

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

Slide 12

Browsers versus Screen Sizes

Slide 13

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.

Slide 14

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

Slide 15

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 & construct more grounded illustration.

Slide 16

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

Slide 17

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" > { shading: red; } </style> Using @media handheld to target handheld styles in implanted or outside CSS: @media handheld { { shading: red; } Using @media handheld to import a versatile template: <style type="text/css"> @import url(mobile.css) handheld; </style>

Slide 18

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>

Slide 19

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)">

Slide 20

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

Slide 21

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

Slide 22

Abbreviate Reset wide content utilizing the substance property: img#masthead { content: attr(alt); textual style family: cursive; } #sitenav a[href=""] { content: "CV"; } #sitenav a[href=""] { content: "Events"; } #sitenav a[href=""] { content: "A/V"; }

Slide 23

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

Slide 24

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; }

Slide 25

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

Slide 26

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

Slide 27

Questions? ?

Slide 28

Resources A List Apart – Return of the Mobile Style Sheet: Mobile Web Best Practices: bp/Google Android: iPhone Developer: on account of Opera Mini: because of musical drama small/Opera Mini emulator: than expected/demo/

Slide 29

Thanks! Joseph R. Lewis Sandia National Laboratories