modevgov 2014 - sustainable solutions for content and function parity across devices
DESCRIPTION
Overview of current strategies for mobile web development by Steve Kamerman, COO at ScientiaMobile, Inc at MoDevGov on Feb 26, 2014 in Rosslyn, VA.TRANSCRIPT
![Page 1: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/1.jpg)
The first step in a great mobile experience
Sustainable Solutions for Function and Content Parity
Across Devices
Steve KamermanMoDevGov
February 26, 2014
![Page 2: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/2.jpg)
2
Sampling a Few Government Sites
✔
✔
✕
--
----
Mobile shots taken using Windows Phone 8.0
![Page 3: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/3.jpg)
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-missing-the-point/
![Page 4: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/4.jpg)
Developing Sustainable Solutions
Development Decision Triangle
COST
QUALITY / USER EXPERIENCE
TIME TO MARKET
PICK TWO!
![Page 5: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/5.jpg)
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
![Page 6: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/6.jpg)
Do Nothing
Never underestimate the power of a user who knows how to pan and zoom websites on their LTE smartphones.
WARNING: make sure Adobe Flash is not in the Critical Path
note: We cheated slightly. CNN does serve a mobile UI as a default for mobile users
Keep things simple
![Page 7: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/7.jpg)
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
![Page 8: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/8.jpg)
Responsive Web Design (RWD)
Three Founding Elementso Media Querieso Fluid Grids o Flexible Images
Powerfulo Client-Side Adaptationo Single Codebase
Introduced by Ethan Marcotte in 2010A List Apart Article: http://alistapart.com/article/responsive-web-design
Small Phone
LargePhone Tablet Desktop
One Website for All
![Page 9: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/9.jpg)
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
Easy, Fast, and Affordable Solution
Source: Templatemonster.com
![Page 10: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/10.jpg)
Not always so perfect…
RWD APPROACH A: Don’t-Touch-Me
… but they may have some limitations
Nokia Lumia 1020 (Windows Phone 8.0)
![Page 11: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/11.jpg)
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
![Page 12: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/12.jpg)
Multiserve: Tailored based on Device
http://m.facebook.com
Multiserving Facebook to Mobile Users:
The original “Mobile Context” Aware Approach
![Page 13: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/13.jpg)
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
![Page 14: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/14.jpg)
RESS (RWD + Server Side)
Combines the power of RWD with the speed of the Server
Standard Menu
Smart Phone Menu
Feature Phone Menu
![Page 15: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/15.jpg)
15
Summary Matrix
FeatureDo
Nothing
Transcoding
Don’t
Touch
RWD
Custom
RWD
Multiserv
e
RESS
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?
URL Uniqueness: www? m.? T? /mobile etc.
Development cost: low, medium, high
Maintenance cost: low, medium, high
Security & control: Controlling access
![Page 16: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/16.jpg)
The first step in a great mobile experience
Develop Awesome Web Sites
Using Device Detection
![Page 17: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/17.jpg)
17
Device Hierarchy
Request
Desktop Smart TV Phone Tablet Other
Smart PhoneFeature Phone
BB 10Androi
diOS WP 8 BlackBerr
y WP 7Symbian
Macro
Micro
Granular
![Page 18: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/18.jpg)
18
Macro Level – Desktop vs Tablet vs Phone
* Do not show the client carousel on Mobile Phones
![Page 19: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/19.jpg)
19
Micro Level – Smart vs Feature
![Page 20: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/20.jpg)
20
Granularity to save the UX - Device/OS Specific
![Page 21: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/21.jpg)
21
REAL impact!
Reduced page weight by 35% and HTTP requests by 40%!
Desktop Content Mobile Content
![Page 22: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/22.jpg)
The first step in a great mobile experience
Using Device Detection to
Improve Web Site Security
![Page 23: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/23.jpg)
23
Device Detection and Security
• Limiting the types of devices that access your network:
![Page 24: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/24.jpg)
24
Device Profiling
• Support device fingerprinting practice by establishing and verifying the user’s device profile
![Page 25: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/25.jpg)
25
BYOD Device Detection Flow
User Login
Run Device Detection
Does Device Profile match
Complete User Login
Run Two-Factor authorization
Store Device Profile
No
Yes
![Page 26: MoDevGov 2014 - Sustainable Solutions for Content and Function Parity Across Devices](https://reader033.vdocument.in/reader033/viewer/2022061202/546bcc2baf795900458b6584/html5/thumbnails/26.jpg)
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