HTML5, CSS3, and other fancy buzzwords

5,215 views
4,487 views

Published on

Bringing sexy back to the mobile web

Published in: Technology
5 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total views
5,215
On SlideShare
0
From Embeds
0
Number of Embeds
133
Actions
Shares
0
Downloads
372
Comments
5
Likes
19
Embeds 0
No embeds

No notes for slide





  • (Note: I've omitted some APIs, since they're not relevant or not yet prime-time ready)















  • In context of mobile, can mean the difference between a happy user and a hate mail user












  • Optimized for playback and Usability (big buttons)
    (ever try using a Flash-based player with the teeniest of controls -- no offense Adobe)
    It makes for a bit of a jagged UX





  • Images are dead
    Okay, no.

    Pure CSS graphics?
    I'd say we're far from seeing that















  • matrix property = [a, b, c, d]



  • Though, tools coming out that will help make the process far easier.




































  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well











  • Traditional user flows for location based apps

    Enter City or Postal Code ---> Narrow Down Choices ---> Done
         (City -- long name)               (5 choices)                (done)
         (Postal Code --- wrong format)   ("Did you mean?")     (done)

    Cut that down to two simple clicks
  • Work similar to XHR requests
    --- Specify callbacks
    --- Have to wait for the location in some instances (if the GPS is slow)




  • Caveat: WatchLocation stops when screen times out
    Though, I’ve heard (but not tested) that web workers can get around this
  • Once allowed though, most devices remember the allow and won’t prompt the user again.













  • The one key thing needed to enable offline

    Just a file that tells the browser what to cache
    Browser serves up cached content when user's connection is offline

    What about navigator.onLine / navigator.offLine ?
    Supported, but Google thinks otherwise


  • sessionStorage is window-specific
    localStorage is browser-specific

    Standard key-value store 
























  • Processing.js -> Canvas
    Wrappers for geolocation (with fallback to Google IP geolocation)
    CSS3 animation / transition support
    etc



  • ×