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?
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
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
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
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
- HTML5 support: 68/500 (from html5test.com)
- CSS3 support: 38% (from css3test.com)
Nintendo Wii
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
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
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 960x544 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
- HTML5 test: 58/500
- CSS3 test: 32%
Nintendo DSi
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 (256x192) 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
- HTML5 test: 89/500
- CSS3 test: Failed to run
Nintendo 3DSXL
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 (800x240 on the top; 320x240 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
- HTML5 test: 98/500
- CSS3 test: 42%
Testing on console phones
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
- HTML5 test: 212/500
- CSS3 test: 42%
On the horizon
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
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
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
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
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.
Ethan Marcotte, Responsive Web Design
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. 
Footnotes
[1] According to a 2011 Ofcom report (PDF)Â and a 2010 Pew Internet study. Ofcom is the UK’s independent regulator for the communications industry and runs both international and UK-specific surveys on the communications market. The Pew Research Center is a nonprofit “fact tank” that provides information on American issues, attitudes, and trends.
[2] UK stats are again from 2011 Ofcom reports: one on devices used to visit internet websites by age, and another on UK children’s media literacy (PDF).
[3] You can read an in-depth writeup of the DSi’s browser on my personal blog.
Translations:
Italian
Portuguese
- Illustration by Kevin Cornell
RSS readers: Don't forget to join the discussion!