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

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