MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 93 views

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

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

Statistics

Views

Total Views
93
Views on SlideShare
93
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices Presentation Transcript

  • Sustainable Solutions for Function and Content Parity Across Devices Steve Kamerman MoDevGov February 26, 2014
  • Sampling a Few Government Sites ✔ -- ✔ ✕ -- -- Mobile shots taken using Windows Phone 8.0 2
  • 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/
  • Developing Sustainable Solutions COST QUALITY / USER EXPERIENCE Development Decision Triangle TIME TO MARKET
  • 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
  • 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
  • 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
  • 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
  • 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
  • RWD APPROACH A: Don’t-Touch-Me Not always so perfect… Nokia Lumia 1020 (Windows Phone 8.0) … but they may have some limitations
  • 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
  • Multiserve: Tailored based on Device Multiserving Facebook to Mobile Users: http://m.facebook.com The original “Mobile Context” Aware Approach
  • 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
  • RESS (RWD + Server Side) Smart Phone Menu Standard Menu Feature Phone Menu Combines the power of RWD with the speed of the Server
  • 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
  • Develop Awesome Web Sites Using Device Detection
  • 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
  • Macro Level – Desktop vs Tablet vs Phone * Do not show the client carousel on Mobile Phones 18
  • Micro Level – Smart vs Feature 19
  • Granularity to save the UX - Device/OS Specific 20
  • REAL impact! Desktop Content Mobile Content Reduced page weight by 35% and HTTP requests by 40%! 21
  • Using Device Detection to Improve Web Site Security
  • Device Detection and Security • Limiting the types of devices that access your network: 23
  • Device Profiling • Support device fingerprinting practice by establishing and verifying the user’s device profile 24
  • 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
  • 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
  • Thank You Steve Kamerman COO ScientiaMobile steve@scientiamobile.com @scientiamobile