Presented at Mobilism.nl
Device diversity is about to get an order of magnitude worse. SmartTVs are hitting the market in mass this year. Sony, LG, Vizio, and Samsung are all shipping televisions with Google TV built in.
And if the rumors that Apple will release a TV this year are true, 2012 will turn out to be the year web developers start to tackle the glass screen hanging on our walls.
Why should web developers focused on mobile learn about the web on TVs? Because TVs represent the next challenge in device proliferation. They share common characteristics with their smaller brethren. They create new challenges and opportunities we haven't encountered yet. And most importantly, learning how to build for TVs helps inform our practices of building for mobile devices.
16. 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/
27. [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.”
http://www.flickr.com/photos/acaben/541334636/
28. 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
http://www.flickr.com/photos/acaben/541334636/
36. Apps = Embedded Web Views =
http://www.flickr.com/photos/34818713@N00/1314251273/
37. Apps = Embedded Web Views = 3rd Party Browsers
http://www.flickr.com/photos/34818713@N00/1314251273/
38. Apps = Embedded Web Views = 3rd Party Browsers
If that is true, don’t you think Apple will ship Safari?
http://www.flickr.com/photos/34818713@N00/1314251273/
39. “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.flickr.com/photos/jdlasica/5181380514/
50. 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/
51. Considering
TVs helps
inform how
we build for
mobile.
http://www.flickr.com/photos/revdancatt/3789612273/
52. And can help us avoid
short-sighted solutions
http://www.flickr.com/photos/pss/4876189045/
90. The TV Context
Yes, I said “Context.”
http://www.flickr.com/photos/imnohero/2330548144
91. Our vision of mobile
context is often wrong.
http://www.flickr.com/photos/brunauto/5062644167/
92. 80% during
misc downtime
76% while
waiting in lines
62% while
watching TV
69% for point of
sale research
http://www.flickr.com/photos/missmeng/5327470961
99. Designing for a 10-foot UI
http://www.flickr.com/photos/chrisbartow/5835428673
100. 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
101.
102. “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
103. 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.
106. “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.”
107. 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/
110. Google TV jQuery UI Library
http://code.google.com/p/gtv-resources/
111. Unfortunately, I had trouble getting the Google TV
jQuery UI library to work on non-Google TVs.
Needs more testing.
112. Both solutions require adding a layer of CSS or JS
specifically to support TV interaction.
113. 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.
115. Horizontal paging is preferred
http://gtv-resources.googlecode.com/svn/trunk/gtv-jquery-demo/index.html
116. Supporting different 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.
125. 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
126. Web developers are litter bugs.
http://www.flickr.com/photos/jpdaigle/3393858438/
132. Alright fine.
We’ll use device
detection.
http://www.flickr.com/photos/77799978@N00/5351372848/
133. 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+
134. 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!
135. That
sucks.
http://www.flickr.com/photos/plunkmasterknows/357836855/
140. 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
141. 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
142. “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/
143. If you thought phones were bad,
You ain’t seen nothing yet!
144. Most stores have no remotes and no wi-fi
http://www.flickr.com/photos/elmada/1431918753/
145. Bring your phone for tethering to TVs
http://www.flickr.com/photos/bendodson/3367856091/
165. “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 different devices and even regions.”
http://www.lukew.com/ff/entry.asp?1339
166. • 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
167. When we need more control to craft an experience for a
given device, how can we do so in a sustainable manner?
168. Yes, Smart TVs
suck right now.
http://www.flickr.com/photos/nathaninsandiego/4829858186/
173. So even if we don’t
have to design for
TVs today…
174. It behooves us to start thinking about and
planning for what it will be like to do so…
175. 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.flickr.com/photos/44124413076@N01/11846265/
176.
177. 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
Slides: bit.ly/immobilism
http://www.flickr.com/photos/sualk61/4083223760/
178. Get 40% off of the print and 50% off of ebook
version using code AUTHD at oreilly.com.
OR Amazon link (no code): http://bit.ly/hf-mw