Your SlideShare is downloading. ×
Mobile Web High Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web High Performance

1,042
views

Published on

Nice content about Mobile Web Performance Optimization (MWPO)

Nice content about Mobile Web Performance Optimization (MWPO)


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,042
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Web High Performance Picture from Simon Howden freedigitalphotos.net Santa Clara, 06-22-2010 Maximiliano Firtman @firt www.firt.mobi
  • 2. Maximiliano Firtman   www.firt.mobi   twitter.com/firt   Blog: www.mobilexweb.com
  • 3. What MWPO – Mobile Web Performance Optimization* *Thanks Steve Souders for creating WPO!
  • 4. But first… What is mobile web?
  • 5. Mobile Web Is it other web? NO But, the device and the context where we see the web are different
  • 6. Mobile Web Why should we care about Mobile Web?
  • 7. Mobile Web And now we have RETINA DISPLAY
  • 8. Mobile Web But…  it is still a 3” screen  The user is on the move  Does the user like to zoom and pan?
  • 9. Mobile Web And more important for us Mobile browsers are different
  • 10. Let’s talk about some Myths
  • 11. Myths One document should work for all devices
  • 12. Myths Just use standard HTML
  • 13. Myths People are not using their mobile browsers
  • 14. Myths Mobile web is iPhone, Android and… maybe BlackBerry
  • 15. Mobile Web Development
  • 16. Mobile Web Development Techniques and best practices for delivering the best possible experience for each mobile device
  • 17. Mobile Web Development Techniques and best practices for delivering the best possible experience for each mobile device Even with widgets, webapps or offline web applications
  • 18. Why Mobile WPO
  • 19. Facts   1.8 billion Internet Connections1   4.6 billion Mobile Devices2   The difference will be bigger in the future 1 International Telecommunications Union 2 The Fact Book - CIA 0 500 10001500200025003000350040004500 Internet Mobile Devices 26% 63%
  • 20. Why 1.  Mobile networks are slower 2.  Mobile processors are slower 3.  Mobile browsers are different 4.  Mobile users are different 5.  Compatibility is different
  • 21. Why On smartphones, a web is rendered 40-80% slower than in desktop. On mid-end devices, 4x-10x slower
  • 22. Why WPO has higher impact in mobile
  • 23. Why Users hate you
  • 24. Let’s talk about browsers!
  • 25. Mobile  Browsers   • Too many • Limited support and higher support than desktop • Different navigation methods. Proxied vs. Direct Browsers • No documentation for most of them • Non-updatable
  • 26. Mobile  Browsers  Categories  by  its  browser   • Smartphone • Large screen, touch, partial HTML 5 & CSS3, widgets • High-end • Touch or keypad, HTML 4,AJAX, widgets • Mid-end • Keypad, 240x320, HTML 4, XHTML MP, WML, CSS, Basic AJAX support • Low-end • Keypad, 128x160, XHTML MP, Basic HTML 4 & CSS
  • 27. Mobile  Browsers   Smartphones   High-­‐end  devices   Mid-­‐end  devices   low-­‐end  devices   Smartphones   High-­‐end  devices   Mid-­‐end  devices   low-­‐end   devices   MOBILE WEB USAGE MARKET SHARE
  • 28. Mobile  Widget  Overview   • Widgets and webapps platforms See my presentation at www.mobilexweb.com
  • 29. Mobile  Browsers   • WebKit-based pre-installed • Safari on iOS • Android browser • Symbian browser • webOS browser • Series 40 browser from 6th edition • Bada browser • (future) BlackBerry browser
  • 30. Mobile  Browsers   • Non-WebKit preinstalled • NetFront browser • Myriad browser (formerly Openwave) • Internet Explorer •  Web Browser for Series 40 (up to 6th edition) • MIB Motorola Internet Browser • BlackBerry browser • NTT Docomo i-mode browser • Obigo-Teleca browser • microB (Maemo / MeeGo)
  • 31. Mobile  Browsers   • User installable • Opera Mobile • Opera Mini • Firefox • UC Browser • Skyfire • BOLT • Chromium
  • 32. How to reach! the right! experience! to each device!
  • 33. Progressive Enhancement for Mobile web
  • 34. HTML  5   Lazy  Load  AJAX   Basic  JavaScript   CSS  WebKit   Extensions   Advanced  CSS   Simple   CSS   HTML   ContentAdaptation DeviceLibrary
  • 35. Device Libraries • WURFL • Device Atlas • ASP.NET Mobile Device Browser File www.mobilexweb.com for links and tips
  • 36. Tools • Testing • Performance • Debugging
  • 37. Testing Tools • Emulators & Simulators • Only some of them are useful for mobile web • iPhone,Android, BlackBerry, Symbian, webOS, Series 40, Opera Mobile, Opera Mini, Windows Mobile • No mobile browser emulation for • Bada, MeeGo (Maemo), propietary OS’s devices (for LG, Motorola, Samsung), NetFront,Windows Phone 7 www.mobilexweb.com for links and tips
  • 38. Testing Tools • Testing with real devices, real networks is mandatory
  • 39. Testing Tools • Testing with real devices, real networks is mandatory • Get a lot of new friends  • Buy some “key” devices • Use virtual labs
  • 40. Virtual Labs Some are software-based and some magic-based • Free solutions • Nokia Remote Device Access • Samsung • Commercial solutions • DeviceAnyWhere • Perfecto Mobile
  • 41. Performance Tools • Classic desktop solutions • FireBug,YSlow!, PageSpeed • Using with User Agent Switcher for Firefox • Mobile Solutions Doesn’t exist, but we can rely on server-side and proxy-based solutions (for Wi-Fi devices).
  • 42. Performance Tools • Server-Side scripts for performance • Cloud Four’s Mobile Browser Test • Client-Side scripts for performance • Yahoo UI Profiler • Proxy-based solutions Charles Debugger • Useful for emulators and real devices • Throttling feature to emulate GPRS, EDGE, 3G
  • 43. Debugging Tools • JavaScript-based • JIL Object Browser • FireBug Lite • Platform Solutions • Safari Console • BlackBerry -Visual Studio