SlideShare a Scribd company logo
1 of 19
Building Mobile Apps with
HTML, CSS, and JavaScript
        Jonathan Stark
Huge & Growing

• 5B cell phone subscriptions
• Smart phone share at 15%
• 56% of public Wi‑Fi connections were from
  mobile devices
Mobile Apps
Types of Mobile Apps

• Native apps
• Web apps
• SMS apps
Types of Mobile Apps

• Native apps - Fragmentation
• Web apps - Sandboxing
• SMS apps - Discoverability
Types of Mobile Apps


The approach that is best for you depends
    on your goals and target market.
Native vs Web
Considerations
                Native   Web   Depends
Cosmetics        X
Functionality    X
Development                      X
Testing                  X
Distribution             X
Payment                          X
Support                  X
Web Apps Win

• Cheapest to produce
• Most standardized
• Easiest to distribute
jQTouch

• jQuery plugin
• Created by @DavidKaneda
• Native CSS3 Animations
• and tons more...
jQTouch


  Demo
Hybrid Apps

PhoneGap gives developers the
     best of both worlds.
PhoneGap

• Open source
• Created by @Nitobi
• Native app wrapper
• Multiple platforms
http://wiki.phonegap.com/Roadmap
Considerations
                Native   Web   Depends
Cosmetics        X
Functionality    X
Development                      X
Testing                  X
Distribution             X
Payment                          X
Support                  X
Considerations
                Native   Web+PG   Depends
Cosmetics        X
Functionality                       X
Development                X
Testing                    X
Distribution               X
Payment                    X
Support                    X
PhoneGap


   Demo
Conclusion


"If you can build your app with HTML, CSS,
 and JavaScript, then you probably should."
             - Jonathan Stark
More Info

• http://jonathanstark.com/books
• http://jonathanstark.com/contact
• http://jonathanstark.com/oscon

More Related Content

More from Jonathan Stark

How To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior DevelopersHow To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior DevelopersJonathan Stark
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraJonathan Stark
 
The Path to Value Pricing
The Path to Value PricingThe Path to Value Pricing
The Path to Value PricingJonathan Stark
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...Jonathan Stark
 
Rethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product DesignersRethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product DesignersJonathan Stark
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!Jonathan Stark
 
The Revolution Will Not Be Televised
The Revolution Will Not Be TelevisedThe Revolution Will Not Be Televised
The Revolution Will Not Be TelevisedJonathan Stark
 
Principles of Mobile Interface Design
Principles of Mobile Interface DesignPrinciples of Mobile Interface Design
Principles of Mobile Interface DesignJonathan Stark
 
Free Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of CurrencyFree Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of CurrencyJonathan Stark
 
Enterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On BusinessEnterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On BusinessJonathan Stark
 
Mobile Apps and the Enterprise
Mobile Apps and the EnterpriseMobile Apps and the Enterprise
Mobile Apps and the EnterpriseJonathan Stark
 
The Mobile Frameworks Landscape
The Mobile Frameworks LandscapeThe Mobile Frameworks Landscape
The Mobile Frameworks LandscapeJonathan Stark
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile AppsJonathan Stark
 
Offline Application Cache
Offline Application CacheOffline Application Cache
Offline Application CacheJonathan Stark
 
The Mobile App Landscape
The Mobile App LandscapeThe Mobile App Landscape
The Mobile App LandscapeJonathan Stark
 

More from Jonathan Stark (19)

How To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior DevelopersHow To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior Developers
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
 
The Path to Value Pricing
The Path to Value PricingThe Path to Value Pricing
The Path to Value Pricing
 
Pigeonhole Yourself
Pigeonhole YourselfPigeonhole Yourself
Pigeonhole Yourself
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
 
Pigeonhole Yourself
Pigeonhole YourselfPigeonhole Yourself
Pigeonhole Yourself
 
Rethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product DesignersRethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product Designers
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Revolution Will Not Be Televised
The Revolution Will Not Be TelevisedThe Revolution Will Not Be Televised
The Revolution Will Not Be Televised
 
Principles of Mobile Interface Design
Principles of Mobile Interface DesignPrinciples of Mobile Interface Design
Principles of Mobile Interface Design
 
Free Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of CurrencyFree Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of Currency
 
Three Things First
Three Things FirstThree Things First
Three Things First
 
Everyone Connected
Everyone ConnectedEveryone Connected
Everyone Connected
 
Enterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On BusinessEnterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On Business
 
Mobile Apps and the Enterprise
Mobile Apps and the EnterpriseMobile Apps and the Enterprise
Mobile Apps and the Enterprise
 
The Mobile Frameworks Landscape
The Mobile Frameworks LandscapeThe Mobile Frameworks Landscape
The Mobile Frameworks Landscape
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
 
Offline Application Cache
Offline Application CacheOffline Application Cache
Offline Application Cache
 
The Mobile App Landscape
The Mobile App LandscapeThe Mobile App Landscape
The Mobile App Landscape
 

Recently uploaded

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 

Recently uploaded (20)

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Building Mobile Apps with HTML, CSS, and JavaScript

Editor's Notes

  1. Hi I’m Jonathan Stark. I’m a software consultant from Providence RI. I do mobile app strategy, design, and development.
  2. Preaching to the choir, but I want to start with the big picture. Mobile is huge and its growth is accelerating: - Cell phone subscriptions hit 5 billion in July 2010 (up from 720 million in 2000) - 15% of phones sold in 2009 were smart phones (17% in 2010Q1 - almost 50% increase over 2009Q1). - Mobile broadband subscriptions (3G or better) at 360 million in 2009. Ericsson predicts 3.4B by 2015 and 50B connected devices by 2020. - At this rate mobile broadband subscriptions will overtake wired broadband in a year or two. - 56% of public Wi‑Fi connections in 2009 were from mobile devices.
  3. Unless you’re a telco or a handset manufacturer, your entry point into the mobile space is apps
  4. There are three types of mobile apps that I think will remain relevant for a long time: - Native apps (e.g. WebEx, SalesForce) - Web apps (e.g. Gmail, Google Calendar) - SMS apps (e.g. Google SMS, Twitter, Aardvark)
  5. We could debate the pros and cons of each approach all day long. Ultimately, each has a glaring achilles heel.
  6. The right one for you depends on your situation: - Selling iPhone cases in U.S.? Native app - Selling office supplies in North America? Web app - Providing banking services in rural China? SMS app
  7. I want to drill down on a native vs web for a second because I know that there is a lot of confusion there.
  8. Web apps can run 100% offline.
  9. I typically work with corporate clients who are trying to reach a really broad market with their apps. They want to be on iPhone, Android, and Blackberry at least. - Platform is easy to learn, most orgs have web talent in house already. - Web is a proven, stabile platform that works reasonably well across the widest range of devices. - Host your app and email out the links. - No approval process, no multiple app stores, no delay on bug fixes.
  10. There are a number of javascript libraries that make building mobile web apps a lot easier. iUI was the first, but my lib of choice is jQTouch.
  11. Actually, you don’t have to really pick between native and web. Single code base that can be deployed as a standalone web app AND deployed with addition functionality through the various app stores.
  12. Cross platform mobile framework for building native mobile applications with html, css, and javascript.
  13. PhoneGap support matrix
  14. 1) Launch emulator 2) Put www on desktop 3) Run wiz 4) Compile app 5) Install on emulator 6) Update markup 7) Recompile and install
  15. I think this is the most pragmatic approach. If nothing else, it’s the most flexible. And the way things are growing at this point, flexibility is of the utmost importance.