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 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.

— Cennydd (@Cennydd) July 21, 2012

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 (and Switch, kind of)

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.”

The Nintendo Switch offers a web browsing experience, but requires several steps of customization and changing of DNS settings to access the internet via the “secret browser”.

The drawback of the Switch secret browser is you need to change all of the settings back in order to properly play games. Plus there is the possibility of exposing your information by disabling many of the security protocols in place on the Switch and Switch Lite.

Consoles

95% of teens report having having access to a desktop or laptop, with 81% of teens having access to various versions of either a Playstation, XBox or Switch 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, did not fared well in terms of long term audience growth and have ended up collecting dust on my shelf.

Besides dealing with TV resolutions, consoles offer design considerations for features such as gesture remotes and cameras, voice activation, touch screens, D-pad navigation, game button inputs and 3D interfaces and imaging.

Takeaways

Gaming devices are an edge case. 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.

For up-to-date handheld gaming and console ratings for, check out Anna Debenham’s Game Console Browser test page on GitHUB.