Building Mobile Apps with
HTML, CSS, and JavaScript
        Jonathan Stark
Background
Huge & Growing

• 5B cell phone subscriptions
• Smart phone share at 15%
• 56% of public Wi‑Fi connections were from
  mob...
Mobile Apps
Architecture Options
Architecture Options

• Native apps
• Web apps
• SMS apps
Architecture Options

• Native apps - Fragmentation
• Web apps - Sandboxing
• SMS apps - Discoverability
Architecture Options


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                   ...
Web Apps Win

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

• jQuery plugin
• Created by @DavidKaneda
• Native CSS3 Animations
• and tons more...
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                   ...
Considerations
                Native   Web+PG   Depends
Cosmetics        X
Functionality                       X
Developm...
Conclusion


"If you can build your app with HTML, CSS,
    and JavaScript, you probably should."
             - Jonathan ...
Interface Guidelines
Mobile ≠ Desktop
• Tiny screen
• Battery powered
• Spotty connection
• Small pipe
• Expensive data
• Distracted user
Mobile Use-Cases

• I’m here
• I’m bored
• I’m micro-tasking
Mobile Use-Cases

• I’m here
 • Where should I go for dinner?
 • How do I get to my hotel?
 • Have my friends been here?
Mobile Use-Cases

• I’m bored
 • Gaming
 • Facebook
 • YouTube
 • News
Mobile Use-Cases

• I’m micro-tasking
 • Checking email
 • Updating todos/calendar
 • Transferring money
What’s On Your
Home Screen?
Tapworthy Apps...

• Focus on mobile context
• Optimize for micro-tasking
• Use sensors to enhance local context
• Do one ...
credit: @globalmoxie
Be Finger Friendly

• Chunky targets
• Generous spacing
• Avoid scrolling
• Controls at the bottom

                      ...
CSS3 Transforms,
 Transitions, &
  Animations
demo
Advanced Styling
  with CSS3
demo
Building Offline Web
 Apps with HTML5
Offline Web Apps

• Web Storage
• Web SQL Database
• Application Cache
Web Storage


• localStorage
• sessionStorage
demo
Web SQL Database

• SQLite
• JavaScript API
• Transactions
demo
Application Cache

• A simple text document
• Hosted on your web server
• Lists static resources
demo
Building Native Web
Apps with PhoneGap
demo
More Info

• http://jonathanstark.com/books
• http://jonathanstark.com/contact
• http://jonathanstark.com/wdx2
Workshop: Building Native Apps with HTML, CSS, and JavaScript
Upcoming SlideShare
Loading in …5
×

Workshop: Building Native Apps with HTML, CSS, and JavaScript

3,686 views

Published on

Full day workshop version of my various "Building Native Apps with HTML, CSS, and JavaScript" talks.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,686
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Hi I’m Jonathan Stark. I’m a software consultant from Providence RI. I do mobile app strategy, design, and development.

  • 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.

  • Unless you’re a telco or a handset manufacturer, your entry point into the mobile space is apps. One of the first decisions you’ll face is “Which architecture option?”


  • 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)

  • We could debate the pros and cons of each approach all day long. Ultimately, each has a glaring achilles heel.
  • Should all boats be made of fiberglass? 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

  • I want to drill down on a native vs web for a second because I know that there is a lot of confusion there.
  • Web apps can run 100% offline.
  • 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.

  • 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.
  • 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.
  • Cross platform mobile framework for building native mobile applications with html, css, and javascript.
  • PhoneGap support matrix


  • 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.
  • Interface guidelines for mobile devices





  • Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes
  • Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes
  • My good friend and fellow author Josh Clark has a book out called Tapworthy. Josh spends a lot of time reviewing app designs and interviewing developers and has compiled a list of qualities that great apps share.
  • Wenger Giant: Holds Guinness world record for most multifunctional pen knife.
    Made for company’s 100th anniversary to include every gadget ever included in a Swiss Army knife.
    87 tools, 141 functions. Cigar cutter, laser pointer, golf reamer.
    Bit of humor and whimsy, but as a knife, it’s a failure.
    Heavy physical load, heavy cognitive load
    Mobile interface: Clarity should trump density, less is more

  • Josh brings up many great points in Tapworthy, but the one that caught me most by surprise was the notion of putting controls on the bottom and content on the top, because this is the exact reverse of what we typically see in web programming.
  • - Transforms
    - Translate
    - Scale
    - Skew
    - Rotate
    - Origin
    - Transitions
    - Property
    - Duration
    - Timing
    - Delay
    - Animations
    - Name
    - Duration
    - Timing
    - Iteration Count
    - Direction
    - Keyframes
    - Events


  • - Gradients
    - Rounded corners
    - Text shadow
    - Box shadow
    - Box reflect
    - Border image













  • Workshop: Building Native Apps with HTML, CSS, and JavaScript

    1. 1. Building Mobile Apps with HTML, CSS, and JavaScript Jonathan Stark
    2. 2. Background
    3. 3. Huge & Growing • 5B cell phone subscriptions • Smart phone share at 15% • 56% of public Wi‑Fi connections were from mobile devices
    4. 4. Mobile Apps
    5. 5. Architecture Options
    6. 6. Architecture Options • Native apps • Web apps • SMS apps
    7. 7. Architecture Options • Native apps - Fragmentation • Web apps - Sandboxing • SMS apps - Discoverability
    8. 8. Architecture Options The approach that is best for you depends on your goals and target market.
    9. 9. Native vs Web
    10. 10. Considerations Native Web Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
    11. 11. Web Apps Win • Cheapest to produce • Most standardized • Easiest to distribute
    12. 12. jQTouch • jQuery plugin • Created by @DavidKaneda • Native CSS3 Animations • and tons more...
    13. 13. Hybrid Apps PhoneGap gives developers the best of both worlds.
    14. 14. PhoneGap • Open source • Created by @Nitobi • Native app wrapper • Multiple platforms
    15. 15. http://wiki.phonegap.com/Roadmap
    16. 16. Considerations Native Web Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
    17. 17. Considerations Native Web+PG Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
    18. 18. Conclusion "If you can build your app with HTML, CSS, and JavaScript, you probably should." - Jonathan Stark
    19. 19. Interface Guidelines
    20. 20. Mobile ≠ Desktop • Tiny screen • Battery powered • Spotty connection • Small pipe • Expensive data • Distracted user
    21. 21. Mobile Use-Cases • I’m here • I’m bored • I’m micro-tasking
    22. 22. Mobile Use-Cases • I’m here • Where should I go for dinner? • How do I get to my hotel? • Have my friends been here?
    23. 23. Mobile Use-Cases • I’m bored • Gaming • Facebook • YouTube • News
    24. 24. Mobile Use-Cases • I’m micro-tasking • Checking email • Updating todos/calendar • Transferring money
    25. 25. What’s On Your Home Screen?
    26. 26. Tapworthy Apps... • Focus on mobile context • Optimize for micro-tasking • Use sensors to enhance local context • Do one thing and do it well credit: @globalmoxie
    27. 27. credit: @globalmoxie
    28. 28. Be Finger Friendly • Chunky targets • Generous spacing • Avoid scrolling • Controls at the bottom credit: @globalmoxie
    29. 29. CSS3 Transforms, Transitions, & Animations
    30. 30. demo
    31. 31. Advanced Styling with CSS3
    32. 32. demo
    33. 33. Building Offline Web Apps with HTML5
    34. 34. Offline Web Apps • Web Storage • Web SQL Database • Application Cache
    35. 35. Web Storage • localStorage • sessionStorage
    36. 36. demo
    37. 37. Web SQL Database • SQLite • JavaScript API • Transactions
    38. 38. demo
    39. 39. Application Cache • A simple text document • Hosted on your web server • Lists static resources
    40. 40. demo
    41. 41. Building Native Web Apps with PhoneGap
    42. 42. demo
    43. 43. More Info • http://jonathanstark.com/books • http://jonathanstark.com/contact • http://jonathanstark.com/wdx2

    ×