More than one in eight internet users in the UK, US, and France—and nearly one in four American teens—uses a game console to get online, according to studies from 2010 and 2011.1
This isn’t new. Internet capabilities were introduced in consoles back in 1997 with the Game.com, which allowed users to upload scores by plugging in a dial-up modem and even to check email and browse websites if they had an internet cartridge.
Today’s three main consoles (Microsoft’s Xbox 360, Sony’s PlayStation 3, and Nintendo’s Wii) all have internet capabilities. The Xbox 360 is the only one of these without an official browser, but Microsoft has announced it will release IE9 for the console shortly. Some companies have gone so far as to design experiences specifically for consoles, such as Google’s 2007 version of Reader for the Wii, which is now intended for any TV console.
Add in a vast array of handheld consoles with browsers—like Sony’s PSPs and Nintendo’s DS line—and we have 15 years of internet-enabled gaming devices of all sizes and shapes. Yet to date, we’ve talked about game console browsers very little.
It’s time we change this.
Today’s consoles may offer subpar experiences with little browser choice, but that doesn’t mean we can ignore them. After all, “We can’t predict future behavior from a current experience that sucks,” as Jason Grigsby says.
As more console makers offer internet-capable devices—and as smart TVs continue to enter the market—now is the time to plan how our sites will adapt to these new contexts. And that means getting comfortable with today’s game console landscape.
Who uses a game console’s browser?#section2
TV game consoles aren’t just for gamers. Now they’re marketed and sold for their content-delivery features, such as Blu-ray and access to Netflix. Some consoles also have apps for Twitter, Facebook, Skype, and Foursquare, so there’s every chance a user may be visiting your site through one of these.
According to Pew Internet, 80 percent of American teens age twelve to seventeen own a game console and half own a portable gaming device. Handheld consoles are most popular amongst young teens, with two-thirds of twelve- and thirteen-year-olds owning one.
Among adults, Pew found that overall, men are slightly more likely to own a game console, but women are slightly more likely to own a portable console.
In the UK, young adults ages sixteen to twenty-four are most likely to own a game console, and 20 percent of them visit websites using theirs. Amongst children ages five to fifteen, 5 percent access the internet with a game console more often than with any other device. In fact, this age group is more likely to access the internet with a console than with a mobile phone or tablet.2
Amongst all age groups, game consoles are more popular than tablets as internet-browsing devices, possibly because people are more likely to own a console.
In short, all kinds of people are using game console browsers, for all kinds of reasons. In households that own a PC, a console may be a convenient extra way to browse the internet if there’s competition for the more conventional device. Handheld consoles are also popular with parents who don’t want to give their child an expensive smartphone. Amongst primary-school children, the Nintendo DS is particularly popular; in some schools, it’s even used in lessons.
We’ve made mistakes in the past by assuming which tasks mobile users would want to complete. But just like the thousands of eBay customers buying cars using mobile phones each week, some console browser users are already doing things we may consider “advanced”—like signing up for a bank on the PS3, as twenty people tried to with Kiwibank last year.
Console browser testing#section3
While you may not be able to test your sites on every console out there, it’s helpful to acknowledge their existence and understand their quirks so you can build a good experience for as many people as possible. To do that, consider all three of the major console types:
- Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
- Handheld consoles such as Sony’s PSP and Nintendo’s DS.
- Phone consoles, designed primarily as phones but with console buttons (as opposed to consoles with phone capabilities).
As community testing sites pop up around the world, it makes sense to get some of each of these types of consoles into them—particularly those with the most diverse features.
For a TV console testing device, Nintendo’s Wii has a motion controller that’s useful to test navigating a site with. There’s also the new Wii U coming out, which will have a touchscreen on the controller that links to the TV. Sony’s PS3 is useful for testing ease of navigation with a conventional game controller, while the Xbox 360 will be an important device to try when IE9 is released for it.
The two most popular series of handheld consoles are the Nintendo DS and the Sony PSP. The most recent handheld console from Sony is the PS Vita, which has an optional 3G model and can also be used as a controller for the PS3. The older internet-enabled handheld Sony models are the PSP-1000, PSP-2000, PSP-3000, and PSP Go (the PSP-E1000 leaves off internet capabilities).
For the DS line, the DSi and 3DS are useful because they have different browsers. The older DS and DS Lite require a physical browser cartridge rather than having a browser preinstalled or available via download, so it’s likely that fewer people browse the internet on these.
Testing on TV consoles#section4
A large TV screen doesn’t mean better definition. Text can be pixelated and difficult to read, especially when a browser scales content up. Even though TV screens are generally bigger than desktop computer screens, viewers sit further away from them, so they may actually seem smaller.
Sony’s PlayStation 3#section5
The PS3 has a WebKit-based NetFront browser. The browser width is restricted, so it’s a lot narrower than the width of the TV.
The thumbsticks move the cursor and scroll the page. L1 (on the upper left) is a back button; R1 (on the upper right) is forward. Pressing the triangle brings up a menu for actions like search and bookmark, and the D-pad moves the cursor to focus between links on the page.
Multiple windows can be opened and accessed using L3 (pushing in the left thumbstick) and cycled through using L2 and R2 (the lower left and right buttons).
Browser support#section6
- HTML5 support: 68/500 (from html5test.com)
- CSS3 support: 38% (from css3test.com)
Nintendo Wii#section7
The Wii has an 800px-wide Opera 9 browser (the height varies depending on the screen). The remote, used like a laser pointer, vibrates on hovering over a link. Moving the cursor to the edge of the screen and pressing the trigger scrolls the page. The + and – buttons zoom in and out. Pressing 1 on the remote goes to favorites; 2 shows a version of the page without layout styles.
The remote feels heavy after typing for a while or trying to pick through links on a page, so navigating can be fiddly unless links are big. This becomes problematic on sites with clickable areas that are small and close together.
Often, a site would start loading, crash, and immediately go back to the console’s home screen without any warning or error.
- HTML5 support: Failed to run
- CSS3 test: Failed to run
Testing on handheld consoles#section8
Like modern TVs, handheld consoles have wide screens, rather than tall ones like a mobile phone in portrait mode. This means many responsive websites show a big-screen version of a site, even though a small-screen design might be more appropriate.
Sony PS Vita#section9
The newest of the PS line, the Vita is the first to include a 3G option. It has a touchpad on the back used in some games to keep thumbs out of the way during play, but the browser doesn’t take advantage of it.
The Vita’s browser is a WebKit-based version of NetFront. Strangely, it identifies itself as Silk in its user agent string, which is the browser for Amazon’s Kindle Fire.
Sites can only be viewed in landscape at 960×544 at 220ppi, so most show a display optimized for wide screen, rather than a small-screen view. Up to eight windows can be open at once.
While the Vita is a Sony product, its experience is nothing like the PS3—the browser relies heavily on the touchscreen and doesn’t seem to take advantage of the game controls on the device.
Browser support#section10
- HTML5 test: 58/500
- CSS3 test: 32%
Nintendo DSi#section11
The DS line is distinctive for its two screens and stylus. The bottom screen is a resistive touchscreen, like the screen on the back of an airplane seat, rather than capacitative, like a smartphone. The DSi screens have relatively small dimensions (256×192) and low ppi.
The DS will take advantage of both screens to display a site optimized for small screens, treating them as a single tall column. On non-optimized sites, the site is mirrored on the two screens: one zoomed in, one zoomed out. There is no multi-touch, so no pinch-to-zoom, making long lines of text difficult to read. There are no font styles like bold or italic either, and text size is limited to a range.3
Browser support#section12
- HTML5 test: 89/500
- CSS3 test: Failed to run
Nintendo 3DSXL#section13
This device has a stylus and three cameras: two on the back for 3D pictures and video and one on the front. Special glasses aren’t needed to view things in 3D, but the device does have to be held at just the right angle and distance. The depth of the effect can be adjusted using a physical slider.
Only the top screen is 3D, and it’s wider than the bottom one, which is a 2D resistive touchscreen. The screens are physically bigger than the smaller 3DS model, but the pixel dimensions are the same (800×240 on the top; 320×240 on the bottom), so text is blocky. When a page scrolls into the top screen, gaps appear on either side because of the difference in the two screen sizes.
The older DS models offer an Opera browser, but newer ones have a NetFront browser installed by default, accessible from the home screen.
Sites are shown in 2D, but images using the MPO format can be viewed in 3D in the top screen. MPO images are a combination of two JPEG files, so the fallback is a single JPEG. The catch is, embedded MPO images can’t currently be viewed in 3D inline using the browser installed on the device; they have to be downloaded and opened as a file.
The D-pad is used to cycle through links; a line is drawn around elements that are selected. The thumbstick is used to scroll.
There are zoom icons on the touchscreen, and the X and Y buttons also zoom in and out. The shoulder buttons go forward and back through the browser history.
On zooming in, automatic text-wrap forces line lengths to adapt to the width of the viewport.
The browser can be used while a game is suspended in the background, which allows gamers to look up tutorials or walkthroughs while playing. I’ve noticed this feature appearing on other consoles as well.
In tests, some sites stopped loading because they were too big and the system ran out of memory, which was also a common problem on the DSi.
Browser support#section14
- HTML5 test: 98/500
- CSS3 test: 42%
Testing on console phones#section15
Manufacturers have been attempting to combine handheld consoles with phones since 2003’s Nokia N-Gage. Today, the most interesting of these is the Sony Ericsson Xperia Play, which looks like a phone, but has slide-out PlayStation-style controls.
The screen is much higher quality than the PS Vita. It runs Android 2.3 (Gingerbread). Anytime the game controller drawer is open, screen orientation is set to landscape. Overall, sites look good and the browser is just as capable as that of any other modern smartphone.
Even though it’s closer to a phone than a game console, it’s important to consider this hybrid device. As smartphones compete with handheld consoles, we may well see more like it.
Browser support#section16
- HTML5 test: 212/500
- CSS3 test: 42%
On the horizon#section17
A whole host of devices are on their way that will present new challenges for designers and developers. Internet browsing on consoles is set to increase as console makers release devices with better browsers and more capabilities—features such as NFC for micropayments in the upcoming Wii U, and voice control and Kinect gesture support in the Xbox 360’s coming IE9 browser. There have already been some interesting experiments with gestural interfaces in browsers using a Kinect and DepthJS.
Second screen#section18
All three major TV consoles have or are moving toward a second screen. The PlayStation 3 can already connect with a handheld PS Vita and allow the user to play games on the device directly from the PS3 console (Vita Remote Play). It can also be used as a second controller.
Nintendo is coming out with a similar offering, the Wii U: an updated console and handheld gamepad with a touchscreen that can be used as a keyboard. Users can share with the TV what they’re browsing on the gamepad by swiping the content toward the TV.
Meanwhile, Microsoft has announced SmartGlass, which will enable users to connect a smartphone with their Xbox and use it as a second screen. Rather than connecting with a bespoke device, the console interacts with any phone or tablet.
With SmartGlass and a Kinect, it may even be possible to “pull” content from one screen to another, as demonstrated in Aral Balkan’s hack.
New devices#section19
New players are also bringing interesting devices to the market. One of these is the Razer Switchblade. It’s part Windows computer, part handheld console. The images on the keyboard’s keys change depending on what content is being viewed. With a form factor similar to a netbook, it has a four-inch trackpad within the keyboard area that can also be turned into a miniature second screen. It’s rumored to be using a version of IE7 with a low score of 40 in the HTML5 test.
The Ouya, a TV game console announced and funded on Kickstarter, is due to be released in March 2013. It will feature a conventional controller, and the console will run on Android. It’s not yet known which browser it will have, but it will have web capabilities.
Designing with consoles in mind#section20
Console browsers live in an uncomfortable area between mobile and tablet, desktop and TV. They often act like mobile and desktop browsers, but the way we interact with them is so different.
Jason Grigsby talks about this challenge in his presentation on The Immobile Web: HDTVs and iMacs have the same pixel dimensions, but a desktop is viewed from a few inches away; a TV, from a few feet. On a TV, a linearized design that’s common for small screens may actually be more appropriate than a design for a wide screen. The difference isn’t screen width, but viewing distance. In fact, Google’s TV design patterns even suggest you simulate this experience by using a mobile phone as your “model” when designing.
It’s also very difficult to detect whether a site is being viewed on a TV. User agent strings aren’t a reliable or future-friendly detection method, since many imitate other browsers’ strings. Media types are also often ignored, as Patrick Lauke has noted.
Throw into this mix the possibility of a user viewing a site on TV while interacting with it on a second-screen device, and things get a whole lot more complicated.
What we can do now#section21
We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.
We can’t tailor experiences for every possible use case on every device, but we can use what we know about console web browsing to build a better overall experience. Like we’ve done by designing with mobile in mind, considering how a site could be used on a console can have a knock-on effect of making it easier to use overall.
Use progressive enhancement so people can access your site’s content even on a device that doesn’t support certain features. Optimize so it downloads fast. Insert media query breakpoints where it’s appropriate for the content, rather than based on widths of common devices. Consider how someone will fill out a form on a console, and look into adding speech recognition to fields.
It’s tempting to focus on retina screen experiences, but we also need to consider how a site will look at the other end of the scale. People don’t replace their TVs as often as other devices, so make sure a design still works well on poorly configured, pixelated, low-contrast screens. Plus, as Cennydd Bowles has noted, while pixel densities increase in some places, they’ll decrease in others as cheap screens appear on more and more devices.
We’ve been here before. As Future Friendly taught us, the challenge of designing for yet more contexts may be daunting, but it’s inevitable. If we care about making our sites accessible to everyone, then we have to start looking beyond desktop and mobile. It’s time we take game console browsers seriously.
For TV consoles the screen quality can vary hugely, depending on the type of connection (hdmi, scart, etc), especially if it’s not a high def set.
That means type needs to be suitably big.
Great article, Anna. I couldn’t help but notice that in all of the examples in your illustrations, only the Xperia Play did what I would consider to be the right response for displaying the ALA web site: displaying it for mobile.
Because as you observed, TVs aren’t used like desktop or laptop screens — they’re viewed from a distance, so they’re essentially the same form factor as a smartphone (minus the convenience of a touch interface). Yet all of the large screen examples are incorrectly acting like desktop or laptop screens, even though ALA has already been designed for mobile and TV displays.
So, just being devil’s advocate for a moment here: are many game consoles and TVs actually “too broken” at the moment for designers to do much with them, given that media queries and user agent strings aren’t working to serve our mobile or responsive designs? It seems to me that a complete solution rests more on those devices’ manufacturers, if we can’t force that class of devices to serve our mobile / responsive designs today.
Kristofer, this is a good question.
The reason the Xperia Play loaded up the mobile view and the others didn’t is because it’s the only one that identified itself in a way that the website understood to be mobile. But you make the point that the others would have benefited from this experience too.
Some of the consoles have in-browser options to optimise the site, like the Wii has a button that linearises the whole page, and the 3DSXL has automatic text wrap. I think these are a good solution because even if we put in media queries, the screen width is the same as some desktop computers. User agent string detection isn’t a good idea either because they lie, and they don’t prepare us for all the weird devices that have yet to come out.
What we can do at the moment is make our sites easier to use overall and consider how people will interact with them on a range of devices. Things like making click areas bigger improve the experience for not just the console, but also desktop and mobile experiences. I think this has to be considered from the design stage to be effective.
To me this is just frustrating. I agree, more contexts are inevitable, but by your example none of them have barely half of HTML5 or most modern standards supported.
To me, I feel like we’re just enabling the laziness of browser developers. They make up a new context for us (“Now you can browse the web on your Fridge!”) but write a shitty custom browser or hack the crap out of an existing one (e.g. Opera for the Wii) and expect us to make up the work for it.
I’m just venting but I think these companies need to understand that adhering to standards is important if they want people to design for their context.
Great article!
The description of how the Wii remote is tiring to use after a while made me remember how much better it is than some of the other devices in the house with a browser. My Blu-Ray player has a browser (which I think is Chrome, I’ll double-check) but the cursor is controlled by mashing on directional buttons on the controller.
It’s actually hard to find one that doesn’t have at least Netflix, Hulu, and Vudu players now, but I do wonder what the upgrade cadence for the devices will be, if any. Can console/peripheral browsers improve over time or are we stuck with a fragmented market as new products are introduced?
@Anna Thank you for taking the time and energy to put your article together, very informative!
bq. I’m just venting but I think these companies need to understand that adhering to standards is important if they want people to design for their context.
You’re right to vent. With more and more devices coming out with different flavors of browser technology it’s getting worse than 1997. I didn’t think that was possible. Perhaps it’s time “WASP”:http://www.webstandards.org (or a group like them) re-grouped and re-tooled for a new fight.
Internet Explorer is in beta on the X-box 360. It’s very sluggish and has very confusing controls. Hopefully it’ll be revised before it launches officially. With a pointer controlled with one thumb and scrolling on the other it’s not the easiest way to navigate around. Tempted to use Browser Detection to display a nice Halo loading screen 🙂
Some of the consoles that failed to run the html5 tests are listed on the ‘high score’ tables at html5test.com (both the Wii and DSi score 89).
http://html5test.com/results/gaming.html
They’ve also got test results for various internet TVs.
Really intersting article, but I cannot agree with this:
bq. I think these are a good solution because even if we put in media queries, the screen width is the same as some desktop computers. User agent string detection isn’t a good idea either because they lie
if the vendors lie it’s their problem.
Yes, on a revenue-generating website it’s my interest too that my site is more accessible, but we should just all help up (vendors+designers). If we could rely on user-agent information we could tailor a better experience: some websites now looks nicer on tablet than desktop!
Oh, and you might consider to update the article for “Steam Big Picture”:store.steampowered.com/bigpicture/ 😉
blackdog, I feel your frustration and desire to tailor a better experience, but I don’t think user agent string sniffing would be the right way to go. Faruk Ate? wrote an article a while back about “why user agent stings lie”:http://farukat.es/journal/2011/02/499-lest-we-forget-or-how-i-learned-whats-so-bad-about-browser-sniffing
bq. It was because of us web developers doing so much UA sniffing everywhere that browser vendors were forced to include each other’s strings
It also doesn’t prepare us for the devices that will come out in the future. We’re going to see a whole range of different devices coming out that use a wide range of inputs, maintaining separate interfaces for all of them will be close to impossible.
Pixels look different on TVs. I wonder about techniques, or if it is possible to target game consoles with media queries. As a designer, I would prefer to tailor that experience. It is not just that type looks fuzzy, colors react differently.
Great post.
To complicate matters further, something that should not be overlooked is the fact that people may be interacting with their TVs using other 3rd party remotes. For example, on PS3, if users have bought the PlayTV add-on (giving them TiVo style epg set up with no monthly fee) then it’s a fair bet they’ve bought the TV style Bluetooth remote that PlayTv encourages you to buy as a companion.
When the BBC iPlayer Bigscreen experience first came out they clearly hadn’t tested their offering using that device, which made it hugely annoying to use because you couldn’t scrub through a programme properly. Thankfully their greatly improved version now works much better with this remote.
Back before I had a “smart phone” (and I was one of the last to adopt), I relied heavily on my Nintendo DSi XL’s browsers–and before that, I had that cartridge browser for the DS! When I was out of town, I’d hop on wifi, go to the mobile version of my email service, and get to work!
When I redesigned my site at rachelnabors.com, I kept in mind how it would look on my “wee browser” and adopted my approach to suit. Does it look perfect? No. Is it usable and readable? Yes!
Thanks for the numbers on teens and kids using these kinds of browsers. That’s so useful for companies trying to reach that demographic and further confirms that different people use different devices with different capabilities differently. Know your audience! Know your objectives!
I actually think the the navigation is good on the 360, and here the scores for the Beta, just hope some improvements for a final release.
html5test.com -> 133 and 5 Bonus
css3test.com -> 32%
and here a picture
http://i46.tinypic.com/w1pi5z.jpg
Good article and great food for thought. I’m exhausted just thinking about all of that testing and troubleshooting…
My assistant is a huge gamer and brought the idea to me a year ago and I looked at him like he was crazy, but once you experience in a web design and the graphics in a gamers concept it does teach you how to create new concepts and reach to new clients.
Not only will handhelds be the new super highway but we have to remember this is a video game society and with ever growing systems being built the more accessibility we should demand from our clients sites
No worries for my target audience. people surfing the web on a Nintendo are not going to be able to buy a house…
Great article, thanks for sharing. I usually test all my websites in each of the major browsers, as well as on multiple operating systems.
Hi Anna. In my point of view, is ver very important test one website in the most platforms. I´m webmaster and I try to test my sites in all computers browsers, the most knowed pda and cell phones and some game consoles … And when more complex is the site, more issues to solves to work and get nice look . I agree with NessThehero says , thats adherence to standards is very important… Today there are TV´s with browsers … With this variety , our job needs to do more easy.
Because as you observed, TVs aren’t used like desktop or laptop screens — they’re viewed from a distance, so they’re essentially the same form factor as a smartphone (minus the convenience of a touch interface).I’m just venting but I think these companies need to understand that adhering to standards is important if they want people to design for their context.
I think, at least in the IE side, things should get better with the release of windows 8. Hopefully the increasing use of shared code across the different platforms will make things easier.
I already have fewer problems on the apple side then I did in the past.
It is really becoming overwhelming with the number of devices we have to test for. For me, as a small company (ok, very small), I aim for the most popular (desktop, tablet, phone) and assume these other browsers have the chops to keep up. If not, I just can’t afford to test for everything!