SlideShare a Scribd company logo
1 of 43
Download to read offline
Developing for Mobile Web
WTF?
http://www.flickr.com/photos/aye_shamus/2883012011
Also has
                  Blackberry




Not a
phone




        Phones go wild
Portable?
Handheld?
A smart-phone?
Any old phone?
1. Physical properties




http://www.flickr.com/photos/archer10/4312413546
2. Network usage




http://www.flickr.com/photos/karenhorton/4446961232
3. Device Power




http://www.flickr.com/photos/tonyjcase/4139662222
Gmail




http://www.flickr.com/photos/katphotos/2896232518/
3.5 versions of Gmail:

        Desktop - richly interactive
                  Desktop - "simple" HTML
                  (requires opt in)


                                        Mobile
                                                   & old mobile
                                                   (still served to Palm Pre, etc)




http://www.flickr.com/photos/publicenergy/1846375599
Mobile devices being delivered different markup

               CSS used for different viewports

         JavaScript adding functionality if wide enough*
                                                       * yes, iPads, tablets, etc...




http://www.flickr.com/photos/publicenergy/1846375599
Browser smelling bad?




http://www.flickr.com/photos/publicenergy/1846375599
Bingo people.


Read more: http://mark-kirby.co.uk/the-mobile-context/
Tip: Safari, "show debug menu", change user agent
#og_quick>.og_o {
  width:61px;
  height:21px;
  background:transparent url('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAAXCAMAAACPi7eLAAABgFBMVEX19fXl5eb9/f35+fnc3Nzt7e3x8fH////
iPEX7rg53n/Dh4ODq6uoiV+3+/v70t67vVVTb5PgWS/Hwl46ju+3+xDBFeO/
xw73R0tLV2uX30XHi6vvUEi3zc2v0pZo2aey1xuzNzc2WuPzoJzVHgfvt8fzZ2dnG1fb22IwpYvfgHDMya/f//v1ek/n/+vn+//9BcucUQ
+TV1db5/fr55LLdqqe4wtxolfDaamvUwbnIzNTn3Nv+z1Hx8/rqkgvos0jDz+qJp+fTzMdxktn0hHn88vCVsu84cvlbh+fkwn/+/
PSCnde6Tk2ktNvt5+f+/v+4zPn25uPR3vz08PAkpTrc4Oju6+r5+v3OjYv14N1Nfun79ebc08uLsPv668SdzKfy
+vMNNNLP8NA9at6d4KhEy1nbt3z33dzg1NLZen2FqvbTVVbMJTXr4cztrjP989Qyw1T+4JYChQ/
u6eDv089y2IX7zML71syUrOS6ITOzxLbm4trsy8XMgn3O094bfihI3fKDAAAC
+klEQVR4XpXUVZfsNgwAYJnDw8zMDMvMzHyZucz01+tktu2c+9C9qydP5C/WkZwBca/Az1788AJb/wBHHxxntUZD83uwdYd
+8uzl6WPeG9exRiMdOYv4a2bQQ/7fW72X3/6KyJj2bLyjusGYobfNLsd3lP6ZLuQbXcoIxhjS4SK/
q3Zb4391K2sOu2z0mzB2IUTzJ1cytOY8qT/6pty/cZaew2w2+66ER3rtR5frCgso5CsZ/bYUC2NRbyZ9Lp+SOCKW2I6W+
+VA4JFcxh4+zFdqWonYurnmc7nc7u8JHNdSGeNA/
BvN1SRCLJRTZsj2bFkuP6rqRxLLlxAKmkMdvpZ6LRHSEcp9eAOlSirDxtoSUh5QTnii+va8H3igc/
Ikqi4Y2kYR8UVvm9p63+Wm6CqpXC5LbU6P64SyvN8TVqj6gc6qywgLq6/OF/O1MLPmTDkTqdGqe8q3GjrrIvCY3j3jti
+lxcOYOzdlWKJ1VY2HA+qUzLRu1PnpvDlkFq5shh2dyE3NGAbjACTvDTpdK/j9DXPzzJ0bIEuIo/
gv07PqFpIzsHXauxEhh6npIoz0QOdAsIB6yetdsid2cMG0zgr1VSd1Ilqv45fhsvqJgqh/
Nf8qbKQ3JxrBCGXE1q6c8gYs57aQpY53nUuOifZ0pbivxAcnWLh3M5QvzEcZrgc
+ZXQAtFgJhg0iTqWG91Xld4JfH4Gw4OdOJ5iOzRU87ac7FM4nq5NJ99sZyrdhSw1EA1FKOcaFkukNRkjv9K/Tx3JPPF5VBicgBOZ/
7jzvmO2JHf8wgwiZ
+eP95KWOOG7h77YWFl79JpceTVv3X3dSZwRoF53IPbu7l4iDkBwMWizqSIYBWPSAMQaAnQzjnBN8XPHLNNU6S4zACVxgSQyDExjdUOByGw
BxPvAWlmkxigNsP8rXujoncG6u6HCbwDKE1HdHXd4oe/JNc4+Ogy/
TYr3TXpy7iGkrFJF76xbZe26mrifSCIF1by0w6E5bGWBxfy0wcdr6+b/e3+pQg1dTkx5RAAAAAElFTkSuQmCC') no-repeat 1px 3px;
  color:rgba(100%,100%,100%,0.01);
  letter-spacing:10px;
  overflow:hidden;
  margin:3px 3px 0;
  padding:5px 1px 1px;
}
Inline the crap out of it.




                                      CSS, JavaScript, images
                                      all belong in the html file.
http://www.flickr.com/photos/mllopart/4764295496
?


http://www.flickr.com/photos/tonyjcase/4139662222
1. Store data & assets locally

                                           2. Defer work




http://www.flickr.com/photos/tonyjcase/4139662222
Web Storage, Web SQL Database, IndexedDb
<html   manifest="https://mail.google.com/mail/mu/manifest">


        CACHE MANIFEST
        # AppName: superpudu
        # User: youremail@gmail.com
        # Version: 505718b088be23a8
        NETWORK:
        /
        *                    Manifest version control
        //www.google.com

             NETWORK:
             http://www.google.com/csi
  Single page app - implictly cached
             https://www.google.com/csi
             http://ssl.gstatic.com/m/og/s
             https://ssl.gstatic.com/m/og/s
http://remysharp.com/simple-offline-application/
This next bit is a bit of a mind fuck.




http://www.flickr.com/photos/home_of_chaos/4887724408
A module name?




Commented out JavaScript?
function loadModule(id) {
    var codeElement = document.getElementById(id),
        code = codeElement.innerHTML;
    eval(stripOutCommentBlock(code));
}


function stripOutCommentBlock(str) {
    return str.replace(//*/, '').replace(/*//, '');
}
"200k of JavaScript held within a block
            comment adds 240ms during page load,
            whereas 200k of JavaScript that is parsed
            during page load added 2600 ms."

      http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html




http://www.flickr.com/photos/home_of_chaos/4887724408
1. Inline as much as you can

          2. Defer work as much as possible

                   3. Be prepared to get creative
JavaScript Libraries?



http://www.flickr.com/photos/seeminglee/4556156477
xui
This is all the source code
you need to start your
project with:




                              For more information, see vapourjs.org
Titbits
                                                     (or tidbits if we're in the states)




http://www.flickr.com/photos/baerchen57/5425094251
without translate3d
with translate3d
http://cubiq.org/iscroll-4
http://jquerymobile.com/gbs
debugging




http://www.flickr.com/photos/kittenwants/1252109309
http://jsconsole.com




Remote mobile console - works on the real devices!
readability.com
            "We hope you enjoy this update to Readability. It’s
            100% web technology and 100% approval-free and
            we’re really proud of it. This release highlights the
            kind of firepower behind Readability. The team put
            this together in two weeks. It’s a testament to
            building applications based upon web standards—
            effective, cross-device web applications can be
            built in a fraction of the time of a native app, and
            be provided without restriction."



http://blog.readability.com/meet-the-new-readability-mobile/
If you find you're writing lots of
plugins for PhoneGap, etc, to support
the device: then you're better off
with using the native language.
Just because you can,
doesn't mean you should.




http://www.flickr.com/photos/nebulaskin/126973678
Otherwise: rock on.
@rem



leftlogic.com/tour
HTML5, jQuery for Designers
& Node workshops

More Related Content

What's hot

What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Önder Ceylan
 
Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessibleDirk Ginader
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
 
Puppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSPuppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSÖnder Ceylan
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaÖnder Ceylan
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToRaymond Camden
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSGalih Pratama
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Dirk Ginader
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsRyan Weaver
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5dynamis
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

What's hot (20)

What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020
 
Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
Puppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSPuppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJS
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared To
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JS
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 

Viewers also liked

Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
Inside the mind of a development manager
Inside the mind of a development managerInside the mind of a development manager
Inside the mind of a development managerSrđan Stanić
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...SlideShare
 

Viewers also liked (6)

NeoGenomics Laboratory Company Overview Presentation 02/19/2014
NeoGenomics Laboratory Company Overview Presentation 02/19/2014NeoGenomics Laboratory Company Overview Presentation 02/19/2014
NeoGenomics Laboratory Company Overview Presentation 02/19/2014
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Inside the mind of a development manager
Inside the mind of a development managerInside the mind of a development manager
Inside the mind of a development manager
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
 

Similar to Developing for Mobile

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Don't touch the mobile parts
Don't touch the mobile partsDon't touch the mobile parts
Don't touch the mobile partsFrancesco Fullone
 
JavaScript with Adobe applications - Acceleration web development!
JavaScript with Adobe applications - Acceleration web development!JavaScript with Adobe applications - Acceleration web development!
JavaScript with Adobe applications - Acceleration web development!shinobu tsutsui
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?Andy Davies
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web DesignersGoodbytes
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
WebDev References
WebDev ReferencesWebDev References
WebDev Referencesdynamis
 
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Barbara Bermes
 

Similar to Developing for Mobile (20)

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Mobile Web Talk
Mobile Web TalkMobile Web Talk
Mobile Web Talk
 
Don't touch the mobile parts
Don't touch the mobile partsDon't touch the mobile parts
Don't touch the mobile parts
 
JS Module Server
JS Module ServerJS Module Server
JS Module Server
 
Hackference
HackferenceHackference
Hackference
 
JavaScript with Adobe applications - Acceleration web development!
JavaScript with Adobe applications - Acceleration web development!JavaScript with Adobe applications - Acceleration web development!
JavaScript with Adobe applications - Acceleration web development!
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
Web services and JavaScript
Web services and JavaScriptWeb services and JavaScript
Web services and JavaScript
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
WebDev References
WebDev ReferencesWebDev References
WebDev References
 
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
 

More from Remy Sharp

Forget the Web
Forget the WebForget the Web
Forget the WebRemy Sharp
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction ImplementationRemy Sharp
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the newRemy Sharp
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the webRemy Sharp
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless AppsRemy Sharp
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 

More from Remy Sharp (19)

Forget the Web
Forget the WebForget the Web
Forget the Web
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction Implementation
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the web
 
TwitterLib.js
TwitterLib.jsTwitterLib.js
TwitterLib.js
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Recently uploaded

All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 

Recently uploaded (20)

All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 

Developing for Mobile

  • 4. Also has Blackberry Not a phone Phones go wild
  • 10. 3.5 versions of Gmail: Desktop - richly interactive Desktop - "simple" HTML (requires opt in) Mobile & old mobile (still served to Palm Pre, etc) http://www.flickr.com/photos/publicenergy/1846375599
  • 11. Mobile devices being delivered different markup CSS used for different viewports JavaScript adding functionality if wide enough* * yes, iPads, tablets, etc... http://www.flickr.com/photos/publicenergy/1846375599
  • 13. Bingo people. Read more: http://mark-kirby.co.uk/the-mobile-context/
  • 14.
  • 15.
  • 16. Tip: Safari, "show debug menu", change user agent
  • 17. #og_quick>.og_o { width:61px; height:21px; background:transparent url('data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAAXCAMAAACPi7eLAAABgFBMVEX19fXl5eb9/f35+fnc3Nzt7e3x8fH//// iPEX7rg53n/Dh4ODq6uoiV+3+/v70t67vVVTb5PgWS/Hwl46ju+3+xDBFeO/ xw73R0tLV2uX30XHi6vvUEi3zc2v0pZo2aey1xuzNzc2WuPzoJzVHgfvt8fzZ2dnG1fb22IwpYvfgHDMya/f//v1ek/n/+vn+//9BcucUQ +TV1db5/fr55LLdqqe4wtxolfDaamvUwbnIzNTn3Nv+z1Hx8/rqkgvos0jDz+qJp+fTzMdxktn0hHn88vCVsu84cvlbh+fkwn/+/ PSCnde6Tk2ktNvt5+f+/v+4zPn25uPR3vz08PAkpTrc4Oju6+r5+v3OjYv14N1Nfun79ebc08uLsPv668SdzKfy +vMNNNLP8NA9at6d4KhEy1nbt3z33dzg1NLZen2FqvbTVVbMJTXr4cztrjP989Qyw1T+4JYChQ/ u6eDv089y2IX7zML71syUrOS6ITOzxLbm4trsy8XMgn3O094bfihI3fKDAAAC +klEQVR4XpXUVZfsNgwAYJnDw8zMDMvMzHyZucz01+tktu2c+9C9qydP5C/WkZwBca/Az1788AJb/wBHHxxntUZD83uwdYd +8uzl6WPeG9exRiMdOYv4a2bQQ/7fW72X3/6KyJj2bLyjusGYobfNLsd3lP6ZLuQbXcoIxhjS4SK/ q3Zb4391K2sOu2z0mzB2IUTzJ1cytOY8qT/6pty/cZaew2w2+66ER3rtR5frCgso5CsZ/bYUC2NRbyZ9Lp+SOCKW2I6W+ +VA4JFcxh4+zFdqWonYurnmc7nc7u8JHNdSGeNA/ BvN1SRCLJRTZsj2bFkuP6rqRxLLlxAKmkMdvpZ6LRHSEcp9eAOlSirDxtoSUh5QTnii+va8H3igc/ Ikqi4Y2kYR8UVvm9p63+Wm6CqpXC5LbU6P64SyvN8TVqj6gc6qywgLq6/OF/O1MLPmTDkTqdGqe8q3GjrrIvCY3j3jti +lxcOYOzdlWKJ1VY2HA+qUzLRu1PnpvDlkFq5shh2dyE3NGAbjACTvDTpdK/j9DXPzzJ0bIEuIo/ gv07PqFpIzsHXauxEhh6npIoz0QOdAsIB6yetdsid2cMG0zgr1VSd1Ilqv45fhsvqJgqh/ Nf8qbKQ3JxrBCGXE1q6c8gYs57aQpY53nUuOifZ0pbivxAcnWLh3M5QvzEcZrgc +ZXQAtFgJhg0iTqWG91Xld4JfH4Gw4OdOJ5iOzRU87ac7FM4nq5NJ99sZyrdhSw1EA1FKOcaFkukNRkjv9K/Tx3JPPF5VBicgBOZ/ 7jzvmO2JHf8wgwiZ +eP95KWOOG7h77YWFl79JpceTVv3X3dSZwRoF53IPbu7l4iDkBwMWizqSIYBWPSAMQaAnQzjnBN8XPHLNNU6S4zACVxgSQyDExjdUOByGw BxPvAWlmkxigNsP8rXujoncG6u6HCbwDKE1HdHXd4oe/JNc4+Ogy/ TYr3TXpy7iGkrFJF76xbZe26mrifSCIF1by0w6E5bGWBxfy0wcdr6+b/e3+pQg1dTkx5RAAAAAElFTkSuQmCC') no-repeat 1px 3px; color:rgba(100%,100%,100%,0.01); letter-spacing:10px; overflow:hidden; margin:3px 3px 0; padding:5px 1px 1px; }
  • 18. Inline the crap out of it. CSS, JavaScript, images all belong in the html file. http://www.flickr.com/photos/mllopart/4764295496
  • 20. 1. Store data & assets locally 2. Defer work http://www.flickr.com/photos/tonyjcase/4139662222
  • 21. Web Storage, Web SQL Database, IndexedDb
  • 22. <html manifest="https://mail.google.com/mail/mu/manifest"> CACHE MANIFEST # AppName: superpudu # User: youremail@gmail.com # Version: 505718b088be23a8 NETWORK: / * Manifest version control //www.google.com NETWORK: http://www.google.com/csi Single page app - implictly cached https://www.google.com/csi http://ssl.gstatic.com/m/og/s https://ssl.gstatic.com/m/og/s http://remysharp.com/simple-offline-application/
  • 23. This next bit is a bit of a mind fuck. http://www.flickr.com/photos/home_of_chaos/4887724408
  • 24. A module name? Commented out JavaScript?
  • 25. function loadModule(id) { var codeElement = document.getElementById(id), code = codeElement.innerHTML; eval(stripOutCommentBlock(code)); } function stripOutCommentBlock(str) { return str.replace(//*/, '').replace(/*//, ''); }
  • 26. "200k of JavaScript held within a block comment adds 240ms during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms." http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html http://www.flickr.com/photos/home_of_chaos/4887724408
  • 27. 1. Inline as much as you can 2. Defer work as much as possible 3. Be prepared to get creative
  • 29. xui
  • 30. This is all the source code you need to start your project with: For more information, see vapourjs.org
  • 31. Titbits (or tidbits if we're in the states) http://www.flickr.com/photos/baerchen57/5425094251
  • 37. http://jsconsole.com Remote mobile console - works on the real devices!
  • 38.
  • 39.
  • 40. readability.com "We hope you enjoy this update to Readability. It’s 100% web technology and 100% approval-free and we’re really proud of it. This release highlights the kind of firepower behind Readability. The team put this together in two weeks. It’s a testament to building applications based upon web standards— effective, cross-device web applications can be built in a fraction of the time of a native app, and be provided without restriction." http://blog.readability.com/meet-the-new-readability-mobile/
  • 41. If you find you're writing lots of plugins for PhoneGap, etc, to support the device: then you're better off with using the native language.
  • 42. Just because you can, doesn't mean you should. http://www.flickr.com/photos/nebulaskin/126973678
  • 43. Otherwise: rock on. @rem leftlogic.com/tour HTML5, jQuery for Designers & Node workshops