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.ďŹickr.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.ďŹickr.com/photos/acaben/541334636/
36. Apps = Embedded Web Views =
http://www.ďŹickr.com/photos/34818713@N00/1314251273/
37. Apps = Embedded Web Views = 3rd Party Browsers
http://www.ďŹickr.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.ďŹickr.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.ďŹickr.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.ďŹickr.com/photos/revdancatt/3789612273/
52. And can help us avoid
short-sighted solutions
http://www.ďŹickr.com/photos/pss/4876189045/
90. The TV Context
Yes, I said âContext.â
http://www.ďŹickr.com/photos/imnohero/2330548144
91. Our vision of mobile
context is often wrong.
http://www.ďŹickr.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.ďŹickr.com/photos/missmeng/5327470961
99. Designing for a 10-foot UI
http://www.ďŹickr.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 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.
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.ďŹickr.com/photos/jpdaigle/3393858438/
132. Alright fine.
Weâll use device
detection.
http://www.ďŹickr.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.ďŹickr.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.ďŹickr.com/photos/elmada/1431918753/
145. Bring your phone for tethering to TVs
http://www.ďŹickr.com/photos/bendodson/3367856091/
157. 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
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 diďŹerent 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.ďŹickr.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.ďŹickr.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.ďŹickr.com/photos/sualk61/4083223760/
178. 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