Upload
steve-kamerman
View
145
Download
3
Tags:
Embed Size (px)
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.
Citation preview
The first step in a great mobile experience
Sustainable Solutions for Function and Content Parity
Across Devices
Steve KamermanMoDevGov
February 26, 2014
2
Sampling a Few Government Sites
✔
✔
✕
--
----
Mobile shots taken using Windows Phone 8.0
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/
Developing Sustainable Solutions
Development Decision Triangle
COST
QUALITY / USER EXPERIENCE
TIME TO MARKET
PICK TWO!
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
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
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 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
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
Not always so perfect…
RWD APPROACH A: Don’t-Touch-Me
… but they may have some limitations
Nokia Lumia 1020 (Windows Phone 8.0)
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
http://m.facebook.com
Multiserving Facebook to Mobile Users:
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)
Combines the power of RWD with the speed of the Server
Standard Menu
Smart Phone Menu
Feature Phone Menu
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
The first step in a great mobile experience
Develop Awesome Web Sites
Using Device Detection
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
18
Macro Level – Desktop vs Tablet vs Phone
* Do not show the client carousel on Mobile Phones
19
Micro Level – Smart vs Feature
20
Granularity to save the UX - Device/OS Specific
21
REAL impact!
Reduced page weight by 35% and HTTP requests by 40%!
Desktop Content Mobile Content
The first step in a great mobile experience
Using Device Detection to
Improve Web Site Security
23
Device Detection and Security
• Limiting the types of devices that access your network:
24
Device Profiling
• Support device fingerprinting practice by establishing and verifying the user’s device profile
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
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
Thank You
Steve KamermanCOO [email protected]@scientiamobile