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

1. Sustainable Solutions for
Function and Content Parity
Across Devices
Steve Kamerman
MoDevGov
February 26, 2014

2. Sampling a Few Government Sites
✔
--
✔
✕
--
--
Mobile shots taken using Windows Phone 8.0
2

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. Developing Sustainable Solutions
COST
QUALITY /
USER
EXPERIENCE
Development
Decision
Triangle
TIME TO
MARKET

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. 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. 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. 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. 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. 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. 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. Multiserve: Tailored based on Device
Multiserving Facebook to
Mobile Users:
http://m.facebook.com
The original “Mobile Context” Aware Approach

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. RESS (RWD + Server Side)
Smart Phone Menu
Standard Menu
Feature Phone Menu
Combines the power of RWD with the speed of the Server

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. Develop
Awesome Web Sites
Using Device Detection

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. Macro Level – Desktop vs Tablet vs Phone
* Do not show the
client carousel on
Mobile Phones
18

19. Micro Level – Smart vs Feature
19

20. Granularity to save the UX - Device/OS Specific
20

21. REAL impact!
Desktop Content
Mobile Content
Reduced page weight by 35% and HTTP requests by 40%!
21

22. Using Device Detection
to
Improve Web Site Security

23. Device Detection and Security
• Limiting the types of devices that access your network:
23

24. Device Profiling
• Support device fingerprinting practice by establishing and
verifying the user’s device profile
24

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. 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. Thank You
Steve Kamerman
COO ScientiaMobile
steve@scientiamobile.com
@scientiamobile