Optimizing your website for the Wii

I got myself a Wii last year, and in the process of trying to optimize this blog for it (yes, the Wii has a browser), I learned a number of things that I think will be interesting to share with you…

The Device

I hardly need to introduce it, but here goes: the Wii is a home game console from Nintendo whose main interaction mechanism is a combination gamepad, light gun and motion sensor called the Wiimote. A nice thing Nintendo has in common with Apple is that they are not afraid to try and experiment with new user interaction mechanisms, and besides these games where the Wiimote was very well used, it’s also a pretty good way to browse the web.

Don’t dismiss the Wii as a web machine. It has sold a ton of units and (more importantly) done so in plenty of non-techy homes where you couldn’t find a PC, Mac or iPad. That doesn’t necessarily translate into an audience, but that’s got to count for something, right?

The Browser

The Wii browser is “Opera-powered”, in other words it’s running some mobile/embedded version of Opera. While Opera is a minor browser on the desktop, Opera is a major player in embedded and mobile, providing customized variants of its browser to be preinstalled in a number of devices; Opera is estimated to have its software preinstalled on more than a hundred million devices sold per year

The browser used be a (cheap) paying option, but it’s now free; the user just has to get it in the store for 0 points and it will install as a channel, directly available when the Wii is launched. As we’ll see, the Wii browser is quite good, with a few caveats. Note that the browser is not Opera Mini (PDF) (I’ve always liked how John describes it), as websites do see the IP of my router (and not that of the proxy).

The Display

While the Wii can display over a TV (or computer display as I do, thanks to the Wii2HDMI) of any size, at best the resolution will be 480p, and this has quite an impact, in particular on text legibility.

The Outcome

Before I go any further, let me add the caveat that what I do here is not so much web design as it is “making sure my writing displays correctly with a suitable user experience”. With that in mind, here is what I found out.

Typefaces

One of the “joys” of web design has always been the differing sets of typefaces available depending on the target OS; and while there are correspondences (like the usual Helvetica/Arial, Geneva/Verdana, etc.) some typefaces in Windows have no Mac equivalent, and the converse is true as well. But web designers have always been able to rely on the so-called “web safe fonts”, right? Well… Imagine a platform that would not have all these typefaces. No Helvetica, or anything of the sort; but it goes further, there is no Courier or equivalent, you read that right, no Courier. And I hear you thinking, that can’t be, this is pretty much the last resort typeface, but that’s right: there is no Times either.

The Wii browser only has one typeface, and it’s not any of the web safe ones.

This is disappointing, but understandable when you consider the Wii is pretty much an embedded device, with limited memory and permanent storage. Remember that moderns fonts, especially their cache, take quite a bit of memory; and add to this that the Wii has to also embed at least one Japanese/Chinese font. On the other hand, this means there is no need to worry about making sure to pick the right typeface or add it in the fallback list, as whatever you do that typeface will be used instead anyway. Well, I need to mention that image replacement does work, as well as fonts rendered with Flash (more on Flash later); web fonts do not work. Also, the Wii browser typeface does have bold, but no italics: yes, this means your <em> inflections are lost; to me this is a grave sin, much worse than the lack of alternative fonts. In a <pre> the spacing is adjusted so that the text is monospaced (though not in a <code>); it looks a bit funky, but e.g. structure of ASCII art is preserved.

This typeface is a pretty legible sans-serif screen font, nothing special. A particularly recognizable characteristic of this font is the not-quite-horizontal bar in the lowercase “e”.

Legibility

Given the resolution the Wii supports, when it shows a page at full width the text is pretty much illegible, so like the iPhone the Wii renders a page in a viewport (800 pixels wide for the Wii) and allows the user to zoom inside that area: the user does so by way of +/- buttons on the Wiimote; this is not as fun as pinch-to-zoom, but very easy and discoverable. The problem however is when text runs to the entire browser width, in which case the user has no choice but to pan left and right (which he does with the directional pad) because he can’t have the beginning and end of a line on screen at the same time (I’m looking at you, OC ReMix). Fortunately, having too long lines is a bad idea in the first place as it makes it difficult to find the beginning of the next line, so blog themes either have a fixed width with a reasonable width like 500 pixels maximum, or have one or two side columns which reduce the main column width to something that can comfortably be zoomed to, and are therefore already suitable. Still, something to keep in mind.

Some sites direct the Wii browser to their mobile version which is a bad idea (at least for the examples I’ve seen), as the viewport remains 800 pixels wide (I have not investigated to know whether it is actually possible for sites to change the viewport of the Wii browser), and as the text runs to the full width, this mobile site is less usable on the Wii than the full site.

Depending on the display, it may be more or less comfortable for the user to read text for a long time, but from a distance of 3 meters of the computer display the Wii was displaying to, I could read quite a bit without being tired.

Layout

The Wii browser support for CSS is very good; I’m no CSS buff, but every site I could come across rendered correctly (and it’s quite unlikely many of them took this particular browser into account), so CSS support must be at least on par with the current lowest common denominator, which is nothing to sneeze at on such a device. So everything should just work, and as far as I can tell in this area you shouldn’t need to worry about the Wii if you already take IE 6 or 7, Safari, Firefox, Chrome and Opera into account.

Navigation

In the Wii browser the user can click links by pointing the Wiimote at the screen like a light gun, where the location pointed to will be represented by a hand; so yes, in the Wii browser there is a pointer, and hover-based interaction will technically work. I say “technically” because the accuracy isn’t great and in particular the pointer shakes a lot, so the user can easily hover out and “lose” a menu he was trying to drill down into, so don’t rely on hover-based navigation.

Text can be input with an on-screen keyboard, though it is tedious and error-prone, due to the shaking. Users will find it easier to navigate in subcategories to find what they want rather than input a search term, and don’t expect them to ever leave a comment.

Miscellanea

The Wii browser has Flash support, including video and sound, interestingly enough. I hear it’s Flash Lite, and likely corresponds to some older version of Flash, but it works if you don’t ask too much of it. For one, in most sites which rely on Flash for everything including navigation, I quickly got “out of memory” errors (embedded device, remember), at which point you can only try and reload the page (which will result in the same error again), so these sites are literally unusable on the Wii. Second, while games do work, in a way, don’t think you can do an end run around Nintendo Wii certification/WiiWare with Flash games, as performance is horrible for anything moderately complex. All that said, it will render ads, YouTube videos, Twitter and other widgets, text for Flash text replacement, it will play simple games in real time, and you can watch Homestar Runner to your heart’s content.

One can also connect a USB keyboard to the Wii and use it for text input in the browser; I can use my Apple keyboard on the Wii without problem. More interestingly, key press events do reach Flash and Javascript (which is more than I can say for the iPad, where you can use a Bluetooth keyboard but Javascript can’t get key press events, the keyboard is reserved for text input), for instance this allows playing Light Bot, which is entirely pointer-based except you need to hit space between each level… This is only of limited interest, as users with access to a keyboard likely have access to a computer in the first place.

Since there is no filesystem, users won’t be able to download any file. The browser is not even capable of just playing an mp3 file put for download, so use Flash for audio and video media. The browser cannot read PDFs either; I don’t think it can load anything other than HTML pages and images files.

So… is it worth it?

Is the Wii browser worth taking into account? It has issues, but it is quite modern and capable by most aspects, so it’s at least worth checking if your site renders correctly in it and fixing any obvious problem. Then further work can be justified depending on your audience