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

PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 

Recently uploaded (20)

PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 

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.