SlideShare a Scribd company logo
1 of 47
Best Practices in Mobile
   Web Applications

              Prof. Jeff Sonstein
     Department of Information Technology
       Rochester Institute of Technology
                      jeffs@it.rit.edu
                http://www.it.rit.edu/~jxs/

          Center for the Handheld Web
                 http://chw.rit.edu/blog/

    Mobile Web Best Practices Working Group
        http://www.w3.org/2005/MWI/BPWG/Group/
“What Should Be”
       “What Is”
    & “What Will Be”
• I’m here to talk about getting work done
  today, and about getting even better work
  done tomorrow

                  Prof. Jeff Sonstein
Why Am I Here Talking
   to Developers

• Because you are the folks who have actually
  built the Web of today, and who will build-
  out the Web of tomorrow

                  Prof. Jeff Sonstein
Web Apps &
     Mobile Web Apps


• What are they, and why should you care?

                 Prof. Jeff Sonstein
What is a Web App?
   An application that:
1. is accessed via a Web browser, or similar context wrapper
2. over a network using HTTP
3. coded in browser-supported languages like HTML, CSS, &
   JavaScript
4. provides an quot;application-likequot; experience using server-side and/
   or client-side processing


                            Prof. Jeff Sonstein
And a Mobile Web App?
   Also:
1. accessed via a Web browser
2. over a network using HTTP
3. coded in browser-supported languages like HTML, CSS, &
   JavaScript
4. providing an quot;application-likequot; experience within a mobile
   context using either server-side or client-side processing


                            Prof. Jeff Sonstein
What’s the Difference?
1. limitations of the mobile context
 •   small screen
 •   intermittent connectivity
 •   etc
2. additional scope & features of the mobile context
 •   device context / location
 •   personal data on the device
 •   etc


                                   Prof. Jeff Sonstein
What Kinds of
Mobile Web Apps
  Are There?
       Prof. Jeff Sonstein
My Dichotomy:
Resident versus
 Non-Resident
       Prof. Jeff Sonstein
Resident
               Web Apps
whole new set of naming
conventions, MIME assignment,
packaging scheme, etc

 •   advantage: looser security
     model, so can do more

 •   disadvantage: cross-platform
     standards still developing



                        Prof. Jeff Sonstein
Non-Resident
 Web Apps
         standard pages, desktop/palmtop
         shortcuts

            •     advantage: cross-platform
                  standards are known

            •     disadvantage: tighter
                  security model, can do less



    Prof. Jeff Sonstein
Resident & Non-Resident Mobile
           Web Apps

  With the emergence of HTML5 ideas, the
  differences are blurring, and we’re going to
  come back & talk about some of those ideas
  today



                   Prof. Jeff Sonstein
Best Practices


There are significant Best Practices which can help all
Mobile WebApps, and which work on a broad range
of platforms... that is what we will focus on first




                       Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 1. Application Data
      Use cookies for simple client-side state
  Cookies are a simple way to store client-side state,
  but remember: every request means exchanging
  cookie data with the server, and this can have a
  performance impact.



                      Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 1. Application Data
      Use cookies for simple client-side state
  but consider using HTML5 client-side storage for
  local data models.




                      Prof. Jeff Sonstein
Resource

http://developer.apple.com/safari/library/
documentation/iPhone/Conceptual/
SafariJSDatabaseGuide/Introduction/
chapter_1_section_1.html




                  Prof. Jeff Sonstein
Example
try {
  if ( !window.openDatabase ) {
    alert( 'not supported' );
  } else {
    var shortName = 'mydatabase';
    var version = '1.0';
    var displayName = 'My Important Database';
    var maxSize = 65536; // in bytes
    var mydb = openDatabase( shortName, version, displayName, maxSize );
  }
} catch( e ) {
  // Error handling code goes here.
  if ( e == 2 ) {
    // Version number mismatch.
    alert( quot;Invalid database version.quot; );
  } else {
    alert( quot;Unknown error quot; + e + quot;.quot; );
  }
  return;
}
alert( quot;Database is: quot; + mydb );

                                       Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 2. Security and Privacy
      Do not execute untrusted JavaScript
  Ensure that any data comes from a trusted source,
  and prefer a Safe EVAL method to encode potentially
  unsafe characters in the datafeed before evaluating.




                      Prof. Jeff Sonstein
Resource

http://www.json.org/json2.js


(When minified it is less than 2.5K)




                 Prof. Jeff Sonstein
Unsafe Example
var myObject = eval( '(' + myJSONtext + ')' );




                    Safe Example
var myObject = JSON.parse( myJSONtext, reviver );




                               Prof. Jeff Sonstein
Tradeoff:
    var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality




var myObject = JSON.parse( myJSONtext, reviver ); // additional JavaScript download




                                    Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 3. User Awareness and Control
  • Inform the user about & provide sufficient
     means for them to control automatic network
     access and/or use of personal & device
     information




                    Prof. Jeff Sonstein
Example




 Prof. Jeff Sonstein
Mobile Web Apps Best Practices



 4. Conservative Use of Resources
  • Use transfer compression to minimize App size




                    Prof. Jeff Sonstein
Tradeoff:

      compressed files move across the wire faster


                       But
decompression requires processing power on the client




                     Prof. Jeff Sonstein
Mobile Web Apps Best Practices


 4. Conservative Use of Resources
  • Avoid redirects & otherwise optimize network
     requests




                    Prof. Jeff Sonstein
Mobile Web Apps Best Practices


 4. Conservative Use of Resources
  • Minimize external resources, & consider putting
     small stylesheets and scripts inline




                      Prof. Jeff Sonstein
Conservative Use of Resources
    Remember: a request may end up
 moving across the cellular network, and
   each request will result in another
  charge to the user on top of the per-
              byte charges

    That HTTP is a request/response
  protocol has financial implications for
                the user
                 Prof. Jeff Sonstein
Example
// hide MobileSafari address bar

<script type=quot;text/javascriptquot; charset=quot;utf-8quot;>
  /* <![CDATA[ */
    window.addEventListener( quot;loadquot;, function() { setTimeout( loaded, 100 ) }, false );
    function loaded() {

       
     
     document.getElementById( quot;toolbarquot; ).style.visibility = quot;visiblequot;;

       
     
     window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar

       
     }
  /* ]]> */
</script>


// note “what should be” (type=quot;application/javascriptquot;)
// versus “what works” (type=quot;text/javascriptquot;)




                                          Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 5. User Experience
   •   Design for Multiple Interaction Methods
   •   Use Scripting to Improve Perceived Performance
   •   Preserve Focus on Dynamic Page Updates
   •   Make Telephone Numbers “Click-To-Call”



                       Prof. Jeff Sonstein
Design for Multiple
         Interaction Methods

• Will the user need to use tabs or “tapping”
  or “accesskey” to move from field to field?




                   Prof. Jeff Sonstein
Use Scripting to
Improve Perceived Performance

• Asynchronous loading (aka AJAX or non-
  blocking I/O) is a wonderful thing




                    Prof. Jeff Sonstein
Preserve Focus on Dynamic
          Page Updates

• Why should they have to tap again to get
  back to that search field?




                   Prof. Jeff Sonstein
Telephone URIs


• Make Telephone Numbers “Click-To-Call”




                 Prof. Jeff Sonstein
Resource



http://www.rfc-editor.org/rfc/rfc3966.txt




                  Prof. Jeff Sonstein
Examples


<a href=quot;tel:+1-900-555-0191quot;>Find free information here</a>

<a href=quot;tel:+1-900-555-0191quot;>tel:+1-900-555-0191</a>




                        Prof. Jeff Sonstein
User Experience



Notice how much of this is about
       the user experience?




           Prof. Jeff Sonstein
User Experience


• Ensure consistency between Desktop & Mobile...
                 Strive for “One Web”




                     Prof. Jeff Sonstein
User Experience

• Use canvas tag for dynamic graphics, consider SVG
  when you need DOM-visibility...
  Canvas is a highly-flexible drawing system for
  JavaScript, but exists outside the DOM.
  SVG on the other hand is available for DOM-
  manipulation



                      Prof. Jeff Sonstein
Mobile Web Apps Best Practices

 6. Handle Device Capability Variation
   • Consider using server-side capability detection,
      but be aware that some UserAgents lie
   • Use client-side capability detection for dynamic
      device state and DOM-injection



                      Prof. Jeff Sonstein
Mobile Web Apps &
      the One-Web Initiative

• Problems inherent in maintaining dual mobile
  & desktop sites
  consider using XML with XSLT for either
  client-side or server-side processing



                    Prof. Jeff Sonstein
Examples




 Prof. Jeff Sonstein
Mobile Web Apps &
      the One-Web Initiative

• There are problems inherent in separating
  the machine-readable & human-readable
  Webs
  consider using XHTML+RDFa
  to “Bridge the Human and Data Webs”

                   Prof. Jeff Sonstein
Resource


http://www.w3.org/TR/xhtml-rdfa-primer/


         (RDFa is easy to implement)




                Prof. Jeff Sonstein
Mobile Web Apps Best Practices
        some of what we’ve talked about:
 •   “what should be”, “what is”, and “what will be”

 •   Widgets, WebApps, & Mobile WebApps

 •   application data

 •   security & privacy

 •   user awareness & control

 •   conservative use of resources

 •   user experience

 •   device capability variation

 •   XML, XSLT, and XHTML+RDFa


                                   Prof. Jeff Sonstein
Mobile Web Apps Best Practices
           Want More Depth?


 • talk to me (after the show)
 • email me (jeffs@it.rit.edu)
 • tweet me (@jeffsonstein)
 • attend RIT (we’d love to have you)
                 Prof. Jeff Sonstein
Best Practices in Mobile
   Web Applications

              Prof. Jeff Sonstein
     Department of Information Technology
       Rochester Institute of Technology
                      jeffs@it.rit.edu
                http://www.it.rit.edu/~jxs/

          Center for the Handheld Web
                 http://chw.rit.edu/blog/

    Mobile Web Best Practices Working Group
        http://www.w3.org/2005/MWI/BPWG/Group/

More Related Content

What's hot

Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Andy Davies
 

What's hot (9)

2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 1012021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
 
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
 
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
 
Speed Index, explained!
Speed Index, explained!Speed Index, explained!
Speed Index, explained!
 
Building High Performance Websites - Session-1
Building High Performance Websites - Session-1Building High Performance Websites - Session-1
Building High Performance Websites - Session-1
 
PAC 2019 virtual Joerek Van Gaalen
PAC 2019 virtual Joerek Van GaalenPAC 2019 virtual Joerek Van Gaalen
PAC 2019 virtual Joerek Van Gaalen
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 

Viewers also liked

Viewers also liked (10)

Citadines Group: Web and Mobile Strategy Presentation Part 1
Citadines Group: Web and Mobile Strategy Presentation Part 1Citadines Group: Web and Mobile Strategy Presentation Part 1
Citadines Group: Web and Mobile Strategy Presentation Part 1
 
Feature Lists
Feature ListsFeature Lists
Feature Lists
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
Open Source Software and Libraries
Open Source Software and LibrariesOpen Source Software and Libraries
Open Source Software and Libraries
 
1.introduction to Solar Energy
1.introduction to Solar Energy1.introduction to Solar Energy
1.introduction to Solar Energy
 
Introduction To Mobile Application Development
Introduction To Mobile Application DevelopmentIntroduction To Mobile Application Development
Introduction To Mobile Application Development
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Mobile Application Development
Mobile Application DevelopmentMobile Application Development
Mobile Application Development
 
History of Business Intelligence
History of Business IntelligenceHistory of Business Intelligence
History of Business Intelligence
 
Business Intelligence Presentation (1/2)
Business Intelligence Presentation (1/2)Business Intelligence Presentation (1/2)
Business Intelligence Presentation (1/2)
 

Similar to Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

Web Application Penetration Testing Introduction
Web Application Penetration Testing IntroductionWeb Application Penetration Testing Introduction
Web Application Penetration Testing Introduction
gbud7
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Apps
malteubl
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
Christian Rokitta
 

Similar to Mobile Web Apps Best Practices Presentation at Design4Mobile 2009 (20)

Introduction of Mobile applications
Introduction of Mobile applicationsIntroduction of Mobile applications
Introduction of Mobile applications
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
 
Secret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdfSecret Performance Metric - Armada JS.pdf
Secret Performance Metric - Armada JS.pdf
 
Secret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBeSecret Web Performance Metric - DevDayBe
Secret Web Performance Metric - DevDayBe
 
Service worker API
Service worker APIService worker API
Service worker API
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...
 
Web Application Penetration Testing Introduction
Web Application Penetration Testing IntroductionWeb Application Penetration Testing Introduction
Web Application Penetration Testing Introduction
 
Javaland 2014 / GWT architectures and lessons learned
Javaland 2014 / GWT architectures and lessons learnedJavaland 2014 / GWT architectures and lessons learned
Javaland 2014 / GWT architectures and lessons learned
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Apps
 
3 Tips to Deliver Fast Performance Across Mobile Web
3 Tips to Deliver Fast Performance Across Mobile Web3 Tips to Deliver Fast Performance Across Mobile Web
3 Tips to Deliver Fast Performance Across Mobile Web
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developer
 
Clear AppSec Visibility with AppSpider and ThreadFix
 Clear AppSec Visibility with AppSpider and ThreadFix Clear AppSec Visibility with AppSpider and ThreadFix
Clear AppSec Visibility with AppSpider and ThreadFix
 
Experitest & Tech Mahindra Co-Webinar
 Experitest & Tech Mahindra Co-Webinar Experitest & Tech Mahindra Co-Webinar
Experitest & Tech Mahindra Co-Webinar
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The secret web performance metric no one is talking about
The secret web performance metric no one is talking aboutThe secret web performance metric no one is talking about
The secret web performance metric no one is talking about
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
 

Recently uploaded

一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 

Recently uploaded (20)

Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

  • 1. Best Practices in Mobile Web Applications Prof. Jeff Sonstein Department of Information Technology Rochester Institute of Technology jeffs@it.rit.edu http://www.it.rit.edu/~jxs/ Center for the Handheld Web http://chw.rit.edu/blog/ Mobile Web Best Practices Working Group http://www.w3.org/2005/MWI/BPWG/Group/
  • 2. “What Should Be” “What Is” & “What Will Be” • I’m here to talk about getting work done today, and about getting even better work done tomorrow Prof. Jeff Sonstein
  • 3. Why Am I Here Talking to Developers • Because you are the folks who have actually built the Web of today, and who will build- out the Web of tomorrow Prof. Jeff Sonstein
  • 4. Web Apps & Mobile Web Apps • What are they, and why should you care? Prof. Jeff Sonstein
  • 5. What is a Web App? An application that: 1. is accessed via a Web browser, or similar context wrapper 2. over a network using HTTP 3. coded in browser-supported languages like HTML, CSS, & JavaScript 4. provides an quot;application-likequot; experience using server-side and/ or client-side processing Prof. Jeff Sonstein
  • 6. And a Mobile Web App? Also: 1. accessed via a Web browser 2. over a network using HTTP 3. coded in browser-supported languages like HTML, CSS, & JavaScript 4. providing an quot;application-likequot; experience within a mobile context using either server-side or client-side processing Prof. Jeff Sonstein
  • 7. What’s the Difference? 1. limitations of the mobile context • small screen • intermittent connectivity • etc 2. additional scope & features of the mobile context • device context / location • personal data on the device • etc Prof. Jeff Sonstein
  • 8. What Kinds of Mobile Web Apps Are There? Prof. Jeff Sonstein
  • 9. My Dichotomy: Resident versus Non-Resident Prof. Jeff Sonstein
  • 10. Resident Web Apps whole new set of naming conventions, MIME assignment, packaging scheme, etc • advantage: looser security model, so can do more • disadvantage: cross-platform standards still developing Prof. Jeff Sonstein
  • 11. Non-Resident Web Apps standard pages, desktop/palmtop shortcuts • advantage: cross-platform standards are known • disadvantage: tighter security model, can do less Prof. Jeff Sonstein
  • 12. Resident & Non-Resident Mobile Web Apps With the emergence of HTML5 ideas, the differences are blurring, and we’re going to come back & talk about some of those ideas today Prof. Jeff Sonstein
  • 13. Best Practices There are significant Best Practices which can help all Mobile WebApps, and which work on a broad range of platforms... that is what we will focus on first Prof. Jeff Sonstein
  • 14. Mobile Web Apps Best Practices 1. Application Data Use cookies for simple client-side state Cookies are a simple way to store client-side state, but remember: every request means exchanging cookie data with the server, and this can have a performance impact. Prof. Jeff Sonstein
  • 15. Mobile Web Apps Best Practices 1. Application Data Use cookies for simple client-side state but consider using HTML5 client-side storage for local data models. Prof. Jeff Sonstein
  • 17. Example try { if ( !window.openDatabase ) { alert( 'not supported' ); } else { var shortName = 'mydatabase'; var version = '1.0'; var displayName = 'My Important Database'; var maxSize = 65536; // in bytes var mydb = openDatabase( shortName, version, displayName, maxSize ); } } catch( e ) { // Error handling code goes here. if ( e == 2 ) { // Version number mismatch. alert( quot;Invalid database version.quot; ); } else { alert( quot;Unknown error quot; + e + quot;.quot; ); } return; } alert( quot;Database is: quot; + mydb ); Prof. Jeff Sonstein
  • 18. Mobile Web Apps Best Practices 2. Security and Privacy Do not execute untrusted JavaScript Ensure that any data comes from a trusted source, and prefer a Safe EVAL method to encode potentially unsafe characters in the datafeed before evaluating. Prof. Jeff Sonstein
  • 19. Resource http://www.json.org/json2.js (When minified it is less than 2.5K) Prof. Jeff Sonstein
  • 20. Unsafe Example var myObject = eval( '(' + myJSONtext + ')' ); Safe Example var myObject = JSON.parse( myJSONtext, reviver ); Prof. Jeff Sonstein
  • 21. Tradeoff: var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality var myObject = JSON.parse( myJSONtext, reviver ); // additional JavaScript download Prof. Jeff Sonstein
  • 22. Mobile Web Apps Best Practices 3. User Awareness and Control • Inform the user about & provide sufficient means for them to control automatic network access and/or use of personal & device information Prof. Jeff Sonstein
  • 23. Example Prof. Jeff Sonstein
  • 24. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Use transfer compression to minimize App size Prof. Jeff Sonstein
  • 25. Tradeoff: compressed files move across the wire faster But decompression requires processing power on the client Prof. Jeff Sonstein
  • 26. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Avoid redirects & otherwise optimize network requests Prof. Jeff Sonstein
  • 27. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Minimize external resources, & consider putting small stylesheets and scripts inline Prof. Jeff Sonstein
  • 28. Conservative Use of Resources Remember: a request may end up moving across the cellular network, and each request will result in another charge to the user on top of the per- byte charges That HTTP is a request/response protocol has financial implications for the user Prof. Jeff Sonstein
  • 29. Example // hide MobileSafari address bar <script type=quot;text/javascriptquot; charset=quot;utf-8quot;> /* <![CDATA[ */ window.addEventListener( quot;loadquot;, function() { setTimeout( loaded, 100 ) }, false ); function loaded() { document.getElementById( quot;toolbarquot; ).style.visibility = quot;visiblequot;; window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar } /* ]]> */ </script> // note “what should be” (type=quot;application/javascriptquot;) // versus “what works” (type=quot;text/javascriptquot;) Prof. Jeff Sonstein
  • 30. Mobile Web Apps Best Practices 5. User Experience • Design for Multiple Interaction Methods • Use Scripting to Improve Perceived Performance • Preserve Focus on Dynamic Page Updates • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
  • 31. Design for Multiple Interaction Methods • Will the user need to use tabs or “tapping” or “accesskey” to move from field to field? Prof. Jeff Sonstein
  • 32. Use Scripting to Improve Perceived Performance • Asynchronous loading (aka AJAX or non- blocking I/O) is a wonderful thing Prof. Jeff Sonstein
  • 33. Preserve Focus on Dynamic Page Updates • Why should they have to tap again to get back to that search field? Prof. Jeff Sonstein
  • 34. Telephone URIs • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
  • 36. Examples <a href=quot;tel:+1-900-555-0191quot;>Find free information here</a> <a href=quot;tel:+1-900-555-0191quot;>tel:+1-900-555-0191</a> Prof. Jeff Sonstein
  • 37. User Experience Notice how much of this is about the user experience? Prof. Jeff Sonstein
  • 38. User Experience • Ensure consistency between Desktop & Mobile... Strive for “One Web” Prof. Jeff Sonstein
  • 39. User Experience • Use canvas tag for dynamic graphics, consider SVG when you need DOM-visibility... Canvas is a highly-flexible drawing system for JavaScript, but exists outside the DOM. SVG on the other hand is available for DOM- manipulation Prof. Jeff Sonstein
  • 40. Mobile Web Apps Best Practices 6. Handle Device Capability Variation • Consider using server-side capability detection, but be aware that some UserAgents lie • Use client-side capability detection for dynamic device state and DOM-injection Prof. Jeff Sonstein
  • 41. Mobile Web Apps & the One-Web Initiative • Problems inherent in maintaining dual mobile & desktop sites consider using XML with XSLT for either client-side or server-side processing Prof. Jeff Sonstein
  • 43. Mobile Web Apps & the One-Web Initiative • There are problems inherent in separating the machine-readable & human-readable Webs consider using XHTML+RDFa to “Bridge the Human and Data Webs” Prof. Jeff Sonstein
  • 44. Resource http://www.w3.org/TR/xhtml-rdfa-primer/ (RDFa is easy to implement) Prof. Jeff Sonstein
  • 45. Mobile Web Apps Best Practices some of what we’ve talked about: • “what should be”, “what is”, and “what will be” • Widgets, WebApps, & Mobile WebApps • application data • security & privacy • user awareness & control • conservative use of resources • user experience • device capability variation • XML, XSLT, and XHTML+RDFa Prof. Jeff Sonstein
  • 46. Mobile Web Apps Best Practices Want More Depth? • talk to me (after the show) • email me (jeffs@it.rit.edu) • tweet me (@jeffsonstein) • attend RIT (we’d love to have you) Prof. Jeff Sonstein
  • 47. Best Practices in Mobile Web Applications Prof. Jeff Sonstein Department of Information Technology Rochester Institute of Technology jeffs@it.rit.edu http://www.it.rit.edu/~jxs/ Center for the Handheld Web http://chw.rit.edu/blog/ Mobile Web Best Practices Working Group http://www.w3.org/2005/MWI/BPWG/Group/

Editor's Notes

  1. Why Widgets are WebApps, but not all WebApps are Widgets.
  2. ask them: what other limitations can they think of? what other additional scope/features?
  3. Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ...
  4. Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ...
  5. specifically aimed at downloading onto your palmtop, to be loaded from there next time you run them. might be widgets, might not be.
  6. we&#x2019;ll talk later about how we can make these act like they are resident
  7. talk about building the future, maybe talk about server-side vs client-side processing here
  8. (look up who supports this already)
  9. users want and need to be in control of their personal & device info... OnStar/Mob/FBI example
  10. Plan for international users
  11. Plan for international users