SlideShare a Scribd company logo
Tame the Mobile Web
       Yves Van Goethem — @yvg
BlackBerry
                12%                 Safari Mobile
                                        20%



Android Browser
     19%



                                                Nokia
                                                 20%




                  Opera              NetFront
                   25%                 4%

                   http://statcounter.com/
WebKit Web Inspector




IE Developer Toolbar
Master the whip
https://www.mozilla.org/en-US/mobile/
http://www.opera.com/developer/tools/mobile/
http://www.opera.com/mobile/demo/
www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570
http://developer.android.com/sdk/index.html
https://developer.palm.com/content/resources/develop/sdk_pdk_download.html
http://www.developer.nokia.com/info/sw.nokia.com/id/e22963ec-3d9e-43f2-a220-3ef4c4092cc7/
                                    Nokia_Web_Tools.html
http://www.mobilexweb.com/emulators
Backstage secrets
http://www.blaze.io/mobile/
Mobile Perf Bookmarklet




http://stevesouders.com/mobileperf/mobileperfbkm.php
Network Link Conditioner




         Mac OS X Lion
http://www.charlesproxy.com/
http://richchetwynd.com/2010/05/javascript-debugging-on-android-browser/
Enter the arena
http://itunes.apple.com/us/app/bugaboo/id388890428?mt=8
http://phonegap.github.com/weinre/
http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/
http://blog.collinsmichaelg.com/2009/12/07/playing_with_crossfire

         http://getfirebug.com/wiki/index.php/Crossfire
Care & maintenance
Code conventions
Defensive programming
Unit tests
(QUnit, Test::Unit, PyTest,…)
Functional tests
(Selenium, iMacros, PhantomJS,…)
Agile methodologies
Yves Van Goethem — @yvg
Illustrations by @cheekfille licensed under Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

                              Content licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

More Related Content

Similar to Tame The Mobile Web

Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
Avenga Germany GmbH
 
MeasureWorks - Emerce efinancials - Managing the Mobile Experience
MeasureWorks  - Emerce efinancials - Managing the Mobile ExperienceMeasureWorks  - Emerce efinancials - Managing the Mobile Experience
MeasureWorks - Emerce efinancials - Managing the Mobile Experience
MeasureWorks
 
Designing For Mobile First
Designing For Mobile FirstDesigning For Mobile First
Designing For Mobile First
Joe Hass
 
SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krumadtech_fan
 
Cross Platform Mobile Developmemnt
Cross Platform Mobile DevelopmemntCross Platform Mobile Developmemnt
Cross Platform Mobile DevelopmemntSoutom Dhara
 
Mobilise your ASP.NET website
Mobilise your ASP.NET websiteMobilise your ASP.NET website
Mobilise your ASP.NET website
Matt Lacey
 
Introduction to Android by Demian Neidetcher
Introduction to Android by Demian NeidetcherIntroduction to Android by Demian Neidetcher
Introduction to Android by Demian Neidetcher
Matthew McCullough
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
Jonathan Jeon
 
Building for multiple devices using a single language and framework
Building for multiple devices using a single language and frameworkBuilding for multiple devices using a single language and framework
Building for multiple devices using a single language and framework
Fabian Frank
 
Mojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and frameworkMojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and framework
Diego Ferreiro Val
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Jason Grigsby
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009
Tom Deryckere
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
Jon Arne Sæterås
 
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für TabletsiEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
Indiginox
 
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für TabletsiEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Stefan Kolb
 
Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia macMaso Lin
 
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
Tobias Järlund
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
Aaron Gustafson
 

Similar to Tame The Mobile Web (20)

Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
MeasureWorks - Emerce efinancials - Managing the Mobile Experience
MeasureWorks  - Emerce efinancials - Managing the Mobile ExperienceMeasureWorks  - Emerce efinancials - Managing the Mobile Experience
MeasureWorks - Emerce efinancials - Managing the Mobile Experience
 
Designing For Mobile First
Designing For Mobile FirstDesigning For Mobile First
Designing For Mobile First
 
SMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy KrumSMX@adtech: Mobile Local and Video Search — Cindy Krum
SMX@adtech: Mobile Local and Video Search — Cindy Krum
 
Cross Platform Mobile Developmemnt
Cross Platform Mobile DevelopmemntCross Platform Mobile Developmemnt
Cross Platform Mobile Developmemnt
 
Jonathan snook - fake-it
Jonathan snook - fake-itJonathan snook - fake-it
Jonathan snook - fake-it
 
Mobilise your ASP.NET website
Mobilise your ASP.NET websiteMobilise your ASP.NET website
Mobilise your ASP.NET website
 
Introduction to Android by Demian Neidetcher
Introduction to Android by Demian NeidetcherIntroduction to Android by Demian Neidetcher
Introduction to Android by Demian Neidetcher
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
 
Building for multiple devices using a single language and framework
Building for multiple devices using a single language and frameworkBuilding for multiple devices using a single language and framework
Building for multiple devices using a single language and framework
 
Mojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and frameworkMojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and framework
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
 
Akshita
AkshitaAkshita
Akshita
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für TabletsiEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
 
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für TabletsiEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
 
Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia mac
 
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 

Recently uploaded

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 

Recently uploaded (20)

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 

Tame The Mobile Web

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n