The Immobile Web

The Immobile Web

Jason Grigsby • @grigs • cloudfour.com
Slides: bit.ly/immobilism

Follow along

Tweets:@grigs

http://www.ﬂickr.com/photos/stevegarﬁeld/4247757731/

http://www.ﬂickr.com/photos/alphachimpstudio/4990357031/

Photo by Alan Light
http://www.ﬂickr.com/photos/alan-light/216012860/

Image source: http://gigaom.com/video/99-dollar-logitech-revue-worth-buying/

Woah… it’s just a web page?

http://www.ﬂickr.com/photos/adactio/6301799843

If there is a coming zombie apocalypse of devices…

then TVs are likely the next wave.
http://www.ﬂickr.com/photos/athena1970/3935208655/

consumes 32.7% of peak downstream traﬃc in U.S.

Big enough to get its own button.

People often use mobile while watching tv.

88% 86%
tablet smartphone

owners say they use their device while
watching TV at least once a month.

http://blog.nielsen.com/nielsenwire/online_mobile/double-vision-global-trends-in-tablet-
and-smartphone-use-while-watching-tv/

“I finally cracked it.”

http://www.ﬂickr.com/photos/acaben/541334636/

http://www.ﬂickr.com/photos/yamagatacamille/4267887034/

http://allthingsd.com/20091111/nokia-apple/

The current Apple TV doesn’t have a browser…

[People] “don’t want a computer on their
TV,” Apple CEO Steve Jobs said today.
“They have computers. They go to their
wide-screen TVs for entertainment. Not to
have another computer. This is a hard one for
people in the computer industry to
understand, but it's really easy for consumers
to understand. They get it.”


And so, it turns out people want keyboards. I
mean, when I started in this business one of
the biggest challenges was that people
couldn’t type.…

And if you do email of any volume, you gotta
have a keyboard. So we look at the tablet and
we think it’s gonna fail.
—Steve Jobs, 2003


Big opportunity is an App Store on Apple TV.

Major Brands Using Combo of Web and Native

Even Apple uses embedded webviews

Apps =

http://www.ﬂickr.com/photos/34818713@N00/1314251273/

Apps = Embedded Web Views =


Apps = Embedded Web Views = 3rd Party Browsers


Apps = Embedded Web Views = 3rd Party Browsers

If that is true, don’t you think Apple will ship Safari?

“By the summer of 2012, the
majority of the televisions you
see in stores will have Google
TV embedded in it”

Photo by JD Lasica/Socialmedia.biz
http://www.ﬂickr.com/photos/jdlasica/5181380514/

Q4 2011 US LCD TV Market Share

Samsung 23.6%

Vizio 15.4%

LG Electronics 12.4%

Sony 8.0%

Toshiba 7.8%

Others 32.8%

Q4 2011 US LCD TV Market Share

Samsung 23.6%

Vizio 15.4%

LG Electronics 12.4%

Sony 8.0%

? Toshiba 7.8%

Others 32.8%

Will Google TV follow Android’s path?

http://www.unwiredview.com/2011/12/21/andy-rubin-%E2%80%9Candroid-daily-activations-top-700k-a-day%E2%80%9D-on-the-way-to-1-million-a-day-in-q2-2012/

Considering
TVs helps
inform how
we build for
mobile.

http://www.ﬂickr.com/photos/revdancatt/3789612273/

And can help us avoid
short-sighted solutions
http://www.ﬂickr.com/photos/pss/4876189045/

Surprisingly good browsers in newer TVs.

html5test.com
Year Brand Model Score Bonus Points Notes

2011 LG 60PZ950 221 6

2011 Sony KDL55HX729 222 6

2011 Sony NSZ-GT1 343 8 Google TV v3.2

2012 LG 47LS5700 302 8

2012 LG 55LM62BND1 302 8

2012 Sharp LC80LE844 281 0

2012 Samsung UN55ES6100 229 2

2012 Samsung UN55ES8000 244 2

2012 Sony KDL55HX750 267 6

2012 iPhone 4S 305 9 Running iOS 5.1

2012 Google Chrome 378 13 Chrome 18 on Mac

Total possible points: 475

100% of Smart TVs tested support

• backgroundsize • generatedcontent • multiplebgs

• borderimage • hashchange • opacity

• borderradius • hsla • postmessage

• boxshadow • input:autofocus • rgba

• canvas • input:max • sessionstorage

• canvastext • input:min • smil

• csstransforms • input:pattern • svg

• csstransitions • input:required • svgclippaths

• fontface • input:step • textshadow

70% or more support

• localstorage • inputtypes:number • cssreflections

• applicationcache • inputtypes:search • draganddrop

• csscolumns • inputtypes:tel • flexbox-legacy

• cssgradients • inputtypes:url • inputtypes:range

• history • webworkers • video:h264

• input:multiple • audio:m4a • websqldatabase

• input:placeholder • audio:mp3

• inputtypes:email • cssanimations

Poor support for the following

• websockets • inputtypes:week • audio:ogg

• inlinesvg • input:autocomplete • csstransforms3d

• inputtypes:date • input:list • flexbox

• inputtypes:datetime • geolocation • touch

• inputtypes:datetime- • indexeddb • video:ogg
local
• inputtypes:color • video:webm
• inputtypes:month
• audio:wav • audio*
• inputtypes:time
• webgl • video*

*This has to be a mistake.

More importantly, the 2012 models are much faster.

More importantly, the 2012 models are much faster.

(How fast remains a secret. No one publishes CPU speeds.)

So what’s it like to use these TVs?

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/

Welcome back T9. We’ve missed you.

Which is why you see remotes like this

Apple hasn’t solved this problem either

Apple’s iOS Remote App Makes Life Bearable

Nearly every manufacturer has their own apps now.

One a multi-screen world.
It’s of the core lessons:
Multi-screen world.

http://www.ﬂickr.com/photos/marcof/5139160297/

How does the web play in this new world?

Two main methods of input on these TVs.
(Other than linked apps)

Pointers

http://thecoolgadgets.com/lg-magic-motion-remote-control-updating-with-3d-button-gesture-and-voice-recognition/

When done properly, D-Pad works very well.

(Free Opera TV SDK Emulator!)

But when D-pads control on-screen pointers… Yuck!

Pointers work well
with on screen
cursors, but are
harder to use
precisely. Easy to
miss your target.
Well implemented
D-pad is faster.

Touchpads integrated into remotes

Eventually something will stick, right?

The TV Context

http://www.ﬂickr.com/photos/imnohero/2330548144

The TV Context

Yes, I said “Context.”

Our vision of mobile
context is often wrong.

http://www.ﬂickr.com/photos/brunauto/5062644167/

80% during
misc downtime

76% while
waiting in lines

62% while
watching TV

69% for point of
sale research

http://www.ﬂickr.com/photos/missmeng/5327470961

TMI: 39% use phone
on the toilet.

Yes, we can’t know
the mobile context.

http://www.ﬂickr.com/photos/timcaynes/158599960/

But when it comes to TVs,

context seems to matter again.

Two great sources for information on
designing for TVs.

http://dev.opera.com/articles/view/creating-web-content-for-tv/

https://developers.google.com/tv/web/docs/design_for_tv

Designing for a 10-foot UI

http://www.ﬂickr.com/photos/chrisbartow/5835428673

Making text easy to read
Google Opera
• Limit paragraphs to 90 words • Minimum font size of 22px

• Break into small chunks • Line length: 10 words or less

• Line length: 5-7 words • Generous leading

• Body text around 21pt on 720p
and 28pt on 1080p

• Add more leading

“A good rule of thumb is to increase the
size of an element (such as an image or
font) 1.5x for 720p and 2.0x for 1080p
relative to the size of that element in a
normal PC browser experience.”
—Google TV Guide

Optimize for tasks
Google Opera
• When designing a web page for • Primary activity often revolves
TV, the viewable area should around quick information look-
display less information overall, up (for instance, cast and crew
and what's there should focus on details for a particular movie,
a confined set of tasks (even weather reports, TV listings) and
consider performing their quick access to services. Web
desired task automatically or content for TV should therefore
select by default). be optimised — in terms of
overall presentation, navigation
and functionality — and task-
focused, giving quick and clear
access to all relevant features
and information.

“The main interface of Google TV encourages the
use of the D-pad on the remote to make selections
on a screen -- it's likely that users will keep this
habit even on the web.”

CSS3 Basic User Interface specification for
directional focus navigation

/* CSS */
#copyright {
nav-down: #logo;
}

http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/

W3C’s example of four buttons

button#b1 { button#b3 {
nav-index:1; nav-index:3;
nav-right:#b2; nav-left:#b4; nav-right:#b4; nav-left:#b2;
nav-down:#b2; nav-up:#b4; nav-down:#b4; nav-up:#b2;
} }

button#b2 { button#b4 {
nav-index:2; nav-index:4;
nav-right:#b3; nav-left:#b1; nav-right:#b1; nav-left:#b3;
nav-down:#b3; nav-up:#b1; nav-down:#b1; nav-up:#b3;
} }

http://www.w3.org/TR/css3-ui/#nav-dir

Unfortunately, only 2 of the 10 TVs I tested
supported spatial navigation.

Google TV jQuery UI Library

http://code.google.com/p/gtv-resources/

Unfortunately, I had trouble getting the Google TV
jQuery UI library to work on non-Google TVs.

Needs more testing.

Both solutions require adding a layer of CSS or JS
specifically to support TV interaction.

Performance Challenges
Google Opera
• Google TV may not be able to • Modest hardware. Somewhere
render a page as quickly as between high-end smart
your workstation. phones and low end laptops.

• Avoid overly heavy and
complex JavaScript.

• Avoid layering and opacity.

• Low limit on caching. Cannot
assume assets cached. Cannot
rely on cookies for subsequent
session.

Uh oh… scrolling
sucks on many TVs.

http://thereisnofold.com/

Horizontal paging is preferred

http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html

Supporting diﬀerent screen resolutions
Google Opera
• Only HDTVs. • Most modern web-enabled
TVs support 1280×720 as a
• 720p and 1080i/p minimum resolution.

• 720p content is usually
• The exact pixel dimensions of upscaled
the display varies by TV
manufacturer. • Virtual resolutions — as an
example, the Nintendo Wii
• Provides an auto-zoom feature has a virtual width of 800
which you need to design for pixels. Height varies based on
or around. the type of TV (4:3 or 16:9
aspect ratio) and user settings.

Actual resolutions diﬀer greatly.

Browserscope report screen sizes

No problem. We’ll adapt to the screen resolution.

http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

No worries. We’ll use media type.
<link rel="stylesheet" media="screen" href="...">
<link rel="stylesheet" media="tv" href="...">

None of the TVs supported the TV media type.

Media types are useless except for screen and print.

https://twitter.com/#!/patrick_h_lauke/status/190078528568569856
https://twitter.com/#!/patrick_h_lauke/status/190078688287653889

Web developers are litter bugs.

http://www.ﬂickr.com/photos/jpdaigle/3393858438/

Sympathy for the Browser Makers

We need to be careful of the impact we have on the
world.

http://www.ﬂickr.com/photos/samout3/3411361042/

Detect a TV with JavaScript?

Nope.

Alright fine.
We’ll use device
detection.


User Agent String for a 2012 LG Smart TV

Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+

User Agent String for a 2012 LG Smart TV

Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+

Nothing we can use in that string!

That
sucks.

http://www.ﬂickr.com/photos/plunkmasterknows/357836855/

What’s the solution?
I don’t see many people actively working on it.

Are Smart TVs the equivalent of phones
before the iPhone was released?

http://www.ﬂickr.com/photos/rhodes/6297487639/

Are Smart TVs the equivalent of phones
before the iPhone was released?

This gives me hope.

Responsive web design still makes sense.

Choosing responsiveness, as a characteristic
shouldn’t necessarily define the wider
implementation approach. Device
Experiences (i.e. standalone sites, aimed at a
group of devices) can also be responsive,
providing the flexibility to support a much
wider range of devices.
—Stephanie Rieger

No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED
320
DECEMBER 14, 2010 Search ALA

Smartphone Browser Landscape include discussions
by P E T E R - P A U L K O C H

Published in: User Interface Design , Mobile , Mobile Design , Mobile Development
Topics
Discuss this article » | Share this article » Code
Content
Culture
Design
Mobile
Process
User Science

Snapshot
Most web designers and
developers (not to
mention the entire
blogosphere) fall
squarely in the high-end
market. A cultural bias
Users expect websites to work on their mobile phones. In two to three years, mobile support
exists against OSs aimed
will become standard for any site. Web developers must add mobile web development to their at any other market. As
skill set or risk losing clients. a result, most people
focus on the struggle
How do you make websites mobile compatible? The answer is obvious: By testing them on all between iOS and
mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s Android, and ignore the
rest. This has to change.
impossible to test your designs on every mobile phone out there. Within the mobile phone
landscape, there are at least ten operating systems (OSs) and fifteen browsers that require
consideration. Mobile devices are expensive, and not every web developer can afford to buy
five to ten of them. Testing “on all mobile phones” is impossible for most web developers.

In this article, I’ll give you an overview of the mobile web market, as well as phone platforms
and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at
how to set up a mobile test bed. Stay in better touch with
customers with

“Testing on as many devices as possible is a great
idea in theory, but in practice it is untenable. Even if we
buy a few devices to try to cover more ground, they will be
outdated in just a few months or a year at most. So are we
supposed to buy multiple devices per year?”
posted at 11:32 am on December 14, 2010 by klayon

“If that’s the mobile landscape, I want no part of it.”
posted at 07:22 am on December 15, 2010 by Polsonby

http://www.alistapart.com/comments/smartphone-browser-landscape/

If you thought phones were bad,
You ain’t seen nothing yet!

Most stores have no remotes and no wi-fi

http://www.ﬂickr.com/photos/elmada/1431918753/

Bring your phone for tethering to TVs

http://www.ﬂickr.com/photos/bendodson/3367856091/

Don’t be surprised if your data gets used…

What are people actually expecting
when they buy a smart tv?

http://www.ﬂickr.com/photos/presta/623444414/

Storage capacity
not listed as a spec.

Opera TV Emulator

http://www.opera.com/business/tv/emulator/

Google TV Emulator

https://developers.google.com/tv/android/docs/gtv_emulator

Google TV Spotlight in Chrome Fullscreen

http://www.google.com/tv/spotlight-gallery.html

What lessons can we take away from TVs?

320 px

Too much focus on
the smaller screen.

Why do we need to
look at our phones to
get directions?

One vibration for left.
Two for right.

http://www.ﬂickr.com/photos/williamhook/4225307113

TV resolution reinforces this idea
1980 px
1080 px

This is
HDTV

Need to think about multiple screens.

It may be multiple screens interacting together.

http://www.apple.com/ipad/features/

What does TV tell us about context?

What does TV tell us about context?

No context Context?

Or is TV context diﬀerent simply because we’re
still in the feature phone era of Smart TVs?


Netflix: posture defining diﬀerent experiences
http://www.flickr.com/photos/ezu/66815736/

“Some people at Netflix have been arguing
for a single experience across all devices. This
has never born out in any kind of testing.
Instead, Netflix has a variety of experiences
on diﬀerent devices and even regions.”

http://www.lukew.com/ff/entry.asp?1339

• User posture: Stationary, Lean back, on-the-go, shared

• Input capabilities: pointer/keyboard, LRUD/OSK,
Gesture/OSK

• Navigation style: controls & windows, panes

• Display capabilities: Hi-Res, near, far away, small,
medium, large

• These constraints are really powerful. You need to
embrace them to get to appropriate designs.
http://www.lukew.com/ff/entry.asp?1339

When we need more control to craft an experience for a
given device, how can we do so in a sustainable manner?

Yes, Smart TVs
suck right now.

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/

But it would be dangerous to dismiss them.

Fundamental Truth:
We can’t predict future behavior from
a current experience that sucks.

So even if we don’t
have to design for
TVs today…

It behooves us to start thinking about and
planning for what it will be like to do so…

So we won’t build solutions
for today’s problems and
then find ourselves surprised
by what comes next.

Flickr photo by Drift Words: http://www.ﬂickr.com/photos/44124413076@N01/11846265/

Thank You!
Special thanks to Patrick H. Lauke, the
Google TV team, Flickr users sharing
under creative commons & the kind
folks at Beaverton Video Only.

Jason Grigsby
@grigs • cloudfour.com
http://www.ﬂickr.com/photos/sualk61/4083223760/

Get 40% oﬀ of the print and 50% oﬀ of ebook
version using code AUTHD at oreilly.com.
OR Amazon link (no code): http://bit.ly/hf-mw

The Immobile Web

The Immobile Web

Recommended

More Related Content

Similar to The Immobile Web

Similar to The Immobile Web(20)

More from Jason Grigsby

More from Jason Grigsby(20)

Recently uploaded

Recently uploaded(20)

The Immobile Web