Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 si...
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
wha...
Do Nothing
WARNING:
make sure
Adobe Flash is
not in the
Critical Path

Never underestimate the power
of a user who knows h...
Transcoding

•
•
•
•

Quick win, often used
for m.* sites
Externally hosted
Fine-tuning is difficult
/ expensive
Changes t...
Responsive Web Design (RWD)

Three Founding Elements
Media Queries
o Fluid Grids
o
Small Flexible Images
Large
o

Phone

P...
RWD APPROACH A: Don’t-Touch-Me
Buy a “ready–made”
template from one of the
many vendors on the
Internet and adapt your
exi...
RWD APPROACH A: Don’t-Touch-Me
Not always so perfect…

Nokia Lumia 1020 (Windows Phone 8.0)

… but they may have some limi...
RWD Approach B: Custom-Made RWD
Custom-Made RWD is
tough.
Make sure that the developer
skills required are available
in-ho...
Multiserve: Tailored based on Device
Multiserving Facebook to
Mobile Users:
http://m.facebook.com

The original “Mobile Co...
RESS (RWD + Server Side)

•

•
•

The power of RWD with the ability to multiserve parts
of the page based on device featur...
RESS (RWD + Server Side)
Smart Phone Menu

Standard Menu

Feature Phone Menu

Combines the power of RWD with the speed of ...
Summary Matrix
Do Nothing

Transcoding

Don’t
Touch RWD

Custom
RWD

Multiserve

RESS

Feature














...
Develop
Awesome Web Sites
Using Device Detection
Device Hierarchy
Request

Macro

Desktop

Phone

Smart Phone

Micro

Granular

Smart TV

BB 10

Android

iOS

Tablet

Othe...
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

...
Recap
• Mobile Web Development
– Do nothing  RESS

• Use Device Detection to create a better UX
– Target devices at the M...
Thank You
Steve Kamerman
COO ScientiaMobile
steve@scientiamobile.com
@scientiamobile
Upcoming SlideShare
Loading in …5
×

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

279 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
  • 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

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

×