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

Principles of Mobile Interface Design
Principles of Mobile Interface DesignPrinciples of Mobile Interface Design
Principles of Mobile Interface Design
Jonathan 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 Business
Jonathan Stark
 
Mobile Apps and the Enterprise
Mobile Apps and the EnterpriseMobile Apps and the Enterprise
Mobile Apps and the Enterprise
Jonathan Stark
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
Jonathan Stark
 
Offline Application Cache
Offline Application CacheOffline Application Cache
Offline Application Cache
Jonathan 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

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
Enterprise Knowledge
 

Recently uploaded (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
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
 
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
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
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...
 
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
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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
 
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...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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
 

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.