MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices

190 views
160 views

Published on

Overview of current strategies for mobile web development by Steve Kamerman, COO at ScientiaMobile, Inc at MoDevGov on Feb 26, 2014 in Rosslyn, VA.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Great presentation and insight into the mobile development process, especially on RESS. Having the ability to multi-serve some of the content is brilliant. Thanks for posting.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
190
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • We’re going to talk about three things today:Development Approaches for mobileCode ExamplesEnhancing Security with Device Detection
  • What we are seeing is a mixed bag of functionality in some case missing content. Everyone is certainly moving towards creating a better experience.
  • This is how we perceive the landscape of mobile development strategies
  • We knew that the Don't touch me approach would be good, but we also knew it would not solve all issues. Using device targeting we could then address specific issues and devices to deliver a consistent user experience to achieve content and function parity. I will show you code on how we did so using our own detection technology.
  • At the end of the day, page delivery time is determined by the number of requests and the page weight.
  • In a perfect world, you have MDM running and all devices are locked. But, if you do have a BYOD policy, we believe that Device Detection can help.
  • Think of this as the first line of defense in BYOD - only allow devices that meet specific criteria.
  • MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices

    1. 1. Sustainable Solutions for Function and Content Parity Across Devices Steve Kamerman MoDevGov February 26, 2014
    2. 2. Sampling a Few Government Sites ✔ -- ✔ ✕ -- -- Mobile shots taken using Windows Phone 8.0 2
    3. 3. BRAD FROST QUOTE Your visitors don’t give a s*** if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a s*** if they can’t get done what they need to get done. They do give a s*** when your site takes 20 seconds to load. They do care when interactions are awkward and broken. Brad Frost, http://bradfrostweb.com/blog/web/responsive-web-design-missingthe-point/
    4. 4. Developing Sustainable Solutions COST QUALITY / USER EXPERIENCE Development Decision Triangle TIME TO MARKET
    5. 5. Aspects to Consider When Choosing a Strategy to Support the Mobile Web ● Access: Reach users wherever they may be and whatever (device) they may use ● Device Targeting and Support: tablets? smartphones? feature phones? Smart TVs? Glasses? Watches? ● Mobile Context: Usability ● URL Uniqueness: www? m.? T? /mobile etc. ● Development cost: Low, medium, high ● Maintenance cost: Low, medium, high ● Security & control: Controlling access
    6. 6. Do Nothing WARNING: make sure Adobe Flash is not in the Critical Path Never underestimate the power of a user who knows how to pan and zoom websites on their LTE smartphones. note: We cheated slightly. CNN does serve a mobile UI as a default for mobile users Keep things simple
    7. 7. Transcoding • • • • Quick win, often used for m.* sites Externally hosted Fine-tuning is difficult / expensive Changes to content can break mobile UX When time to market is Critical
    8. 8. Responsive Web Design (RWD) Three Founding Elements Media Queries o Fluid Grids o Small Flexible Images Large o Phone Phone Tablet Desktop Powerful o o Client-Side Adaptation Single Codebase Introduced by Ethan Marcotte in 2010 One Website for All A List Apart Article: http://alistapart.com/article/responsive-web-design
    9. 9. RWD APPROACH A: Don’t-Touch-Me Buy a “ready–made” template from one of the many vendors on the Internet and adapt your existing site: generally cheap, and some are free. Effort is required to make your existing content fit just the way you like it. Technology: HTML 101 Source: Templatemonster.com Easy, Fast, and Affordable Solution
    10. 10. RWD APPROACH A: Don’t-Touch-Me Not always so perfect… Nokia Lumia 1020 (Windows Phone 8.0) … but they may have some limitations
    11. 11. RWD Approach B: Custom-Made RWD Custom-Made RWD is tough. Make sure that the developer skills required are available in-house. Technology: CSS, Media Queries, jQuery, Ajax, Modernizer.js and, generally, specific RWD experience. Customized Look and Feel Across all Devices
    12. 12. Multiserve: Tailored based on Device Multiserving Facebook to Mobile Users: http://m.facebook.com The original “Mobile Context” Aware Approach
    13. 13. RESS (RWD + Server Side) • • • The power of RWD with the ability to multiserve parts of the page based on device features Multiserving Images is a common use case (greatly decrease payload => improve Mobile Context) Mobile Context Improvements • • • • Menu management Table handling CSS incompatibilities and much more… The Next Generation of Mobile Context Aware
    14. 14. RESS (RWD + Server Side) Smart Phone Menu Standard Menu Feature Phone Menu Combines the power of RWD with the speed of the Server
    15. 15. Summary Matrix Do Nothing Transcoding Don’t Touch RWD Custom RWD Multiserve RESS Feature                           URL Uniqueness: www? m.? T? /mobile etc.           Development cost: low, medium, high       Maintenance cost: low, medium, high        Security & control: Controlling access       Mobile Context: Usability Access: Reach users wherever they may be and whatever (device) they use. Device Targeting and Support: Tablets? smartphones? feature phones? Smart TVs? Glasses? Watches?  15
    16. 16. Develop Awesome Web Sites Using Device Detection
    17. 17. Device Hierarchy Request Macro Desktop Phone Smart Phone Micro Granular Smart TV BB 10 Android iOS Tablet Other Feature Phone WP 8 Symbian BlackBerry WP 7 17
    18. 18. Macro Level – Desktop vs Tablet vs Phone * Do not show the client carousel on Mobile Phones 18
    19. 19. Micro Level – Smart vs Feature 19
    20. 20. Granularity to save the UX - Device/OS Specific 20
    21. 21. REAL impact! Desktop Content Mobile Content Reduced page weight by 35% and HTTP requests by 40%! 21
    22. 22. Using Device Detection to Improve Web Site Security
    23. 23. Device Detection and Security • Limiting the types of devices that access your network: 23
    24. 24. Device Profiling • Support device fingerprinting practice by establishing and verifying the user’s device profile 24
    25. 25. BYOD Device Detection Flow User Login Run Device Detection Does Device Profile match Yes Run Two-Factor authorization No Store Device Profile Complete User Login 25
    26. 26. Recap • Mobile Web Development – Do nothing  RESS • Use Device Detection to create a better UX – Target devices at the Macro, Micro and Granular level to improve UX – Content and Functional Parity is and should be priority ONE • Improve Site Security and Reduce Cost to Support – Limit Access – Device Profile Validation 26
    27. 27. Thank You Steve Kamerman COO ScientiaMobile steve@scientiamobile.com @scientiamobile

    ×