Designing and Testing Web Content on Gaming Consoles and Devices

Handheld gaming devices like the Nintendo DS (and its variants) may not be the gaming platform of choice for most adults, but handheld gaming platforms are the gateway technology for kids. A recent CNET article noted that the Nintendo 3DS, PlayStation Vita and other handheld hardware is slowly drifting to irrelevance; however, this article was written from an adult’s perspective. Handheld gaming devices are one-third the price of most tablets and are more durable, and the games are (for the most part) backwards compatible.

One of the benefits of building and testing web content for gaming consoles is their limited resources for rendering pages and ability to process javascript. Often the Nintendo and Playstation handheld platforms will stop rendering pages as they run out of memory. This forces you to design and develop low-weight, low-resource pages utilizing minified CSS and JavaScript, as well as compressive images (or other image optimization methods), and it also means removing unnecessary fonts and third party widgets. Testing on handheld gaming devices is your first step toward cutting the mustard of your responsive project.

Start with the Basics

The first step in managing your responsive design workflow should be designing with plain type, and focusing on the core content. Think about what your content and page layout will look like with unstyled HTML. Creating a visual hierarchy will help shape how you display and format your content.

An unstyled HTML page is ubiquitous and device agnostic.

The unstyled page becomes a working prototype for your site that can be tested on a variety of platforms, including handheld gaming devices and consoles. An unstyled HTML page is ubiquitous and device agnostic.

Handheld Quirks

The original Nintendo DS and Lite did not come with the Opera browser variant pre-installed and required the browser on a game cartridge. At a cost of $29, the original DS browser was more a novelty than a necessity. In addition, the browser was slow and janky, and was originally made to work with extended game content – surfing the web was more of an afterthought.

However, the Nintendo DS Browser did some innovative things in 2006. Utilizing the features of the DS, the browser allowed for navigation using the stylus in dual window mode, made use of the touchscreen, and had an on-screen keyboard with pre-set text for common domain extensions and handwriting recognition. The DS and Lite also had a 256×192-pixel resolution for both upper and lower screens and .24mm dot pitch.

Pixel densities will obviously increase. But they’ll also remain static, and even decrease, as cheap screens appear in all sorts of devices.

However, even with the advanced features, the original DS and Lite did not post any test results from HTMLtest.com. To load any web content, image loading has to be turned off in the browser settings. In essence, the experience of using the original DS is more akin to browsing text-only pages on older monochrome handsets.

DSi and 3DXL

The newer incarnations of the Nintendo DS models offer more modern browsers with Opera on original release. Later versions use the WebKit-based NETfront browser.

The 3DXL screen are more in line with older smartphones with 800×240 on the top and 320×240 screen on the bottom. In addition to a pre-installed browser and easier WiFi access, the browser supports more modern HTML and CSS standards.

All of the DS browsers often stop rendering pages due to a lack of available memory resources to display pages in their entirety. Despite all of its drawbacks and slow load times, it is a good test to see how lean and efficient your web pages are. The mix of various input methods – the touch screen, stylus and D-pad and gaming buttons – creates another set of design considerations above and beyond the desktop idioms.

The New 3DS XL is compliant with most media queries (no level 4 support) and offers the closest smartphone browser experience down to a “home” button and a large screen with tab-able icon navigation as well as an NFC reader, (LED) notifications and a larger 3D screen on top. The New 3DS XL has face-tracking and allows you to capture 3D images and video via the front facing camera.

Using the DSi and 3DS (and Xperia Play and Playstation Vita) as test devices makes you consider the need for low-bandwidth implementation of your site, but also the growing possibility of input methods as more low-end WiFi devices enter the marketplace and the expanding “Internet of Things.”

Consoles

87% of teens report having having access to a desktop or laptop, with 81% of teens having access to either a Playstation, XBox or Wii gaming console that’s connected to the Internet. The PS4 browser is based on WebKit while the Xbox One uses a modified version of Internet Explorer. The original Xbox did not have a web browser while the Xbox 360 requires an install of IE.

Crowd-sourced Android based gaming consoles like the Ouya, which run either stock Android browser or Firefox, have not fared well in terms of long term audience growth and have ended up collecting dust on my shelf,.

Takeaways

Design and testing web content on handheld gaming devices and consoles offers some insight and perspective on building web pages for devices with limited memory, rending resources, slow connection speeds, a multitude of screen sizes and resolutions and input methods including touch, stylus and gaming D-pad controls. There will be more and more devices with screens ranging from low end to high end resolution, pixel depth and input methods each year. Understanding device limitations and how to design low bandwidth, low resource web pages will be a necessary skill set today and for the foreseeable future.

Andrew Smyk

Andrew Smyk is a dad, educator and UX designer with a focus on Mobile Design. He is also a coffee aficionado, avid cyclist, all-round pirate and HTML5 Evangelist.
Andrew coordinates a postgraduate program in Interactive Media Management at Sheridan College and writes about how kids adapt and use technology on his blog.
Follow him on Twitter: @andrewsmyk