Webdesign for Nintendo DS Opera web browser

Opera has released a web browser for Nintendo's DS and DS Lite handheld games units. There is a more slimline version for the DS Lite, which won't work on the old-style DS although you can use the old-style version on either DS model.

I created a site for the browser (no longer online), including some Javascript games. In this article, I'll share what I've learned about the browser from a webdesign perspective.

How does it work?

The Nintendo DS has two screens. The bottom screen is a stylus-operated touch screen, but the top screen is for display only.

There are two modes for using the browser:

1. Overview mode: In this mode, you see a miniature version of the webpage, laid out much like it would be on your desktop PC. You move a magnifier box around the screen using the stylus, and see the enlarged area on the top screen. You press a button to switch between the screens, so that you can see the enlarged view on the touchscreen and click on the links.

   

2. Small screen rendering mode (SSR): In this mode, the browser behaves more like a mobile device. This mode linearises tables and loses the original page layout, but keeps pictures and HTML formatting. The content scrolls between both screens, but links have to be on the bottom screen to be clicked with the stylus.

In both modes, clicking on a text entry field brings up a little keyboard which you can prod with the stylus to enter data. You can also use the D pad and buttons to select links without using the touchscreen.

It sounds clumsy, but you become adept at using it. Switching between the two modes can be time consuming and is best avoided, but switching between the two screens in Overview mode is quick.

It's slow compared to using a broadband-connected PC, but once you've adjusted your expectations, it's both useful and fun.

What are the main limitations?

There is no support for:

• Flash
• Java
• Video
• Audio
• PDF
• Email (although webmail works fine)

Additionally, websites often experience difficulties with AJAX features, which involve updating the screen without a refresh. It's not possible to log in to Blogger, add list items at Tadalist, or add entries on Twitter.

Marketing materials were issued around the launch of the browser in the US that said it supported Flash. If you come across them, they're wrong.

There is no way to upgrade the browser, except perhaps for buying a new cartridge if they ever issued one. So we can assume that these limitations are something we're stuck with for the foreseeable future.

Is it any good then?

Yes, it's brilliant. You can read most sites just fine, and all the webmail services I've tried work fine. Sites designed for mobile devices work particularly well. Sites designed for greater accessibility will also tend to work better.

There are also tools to make sites work better on mobile, including Skweezer and Google Mobilizer (no longer online). But the two different browsing modes together make it easy enough to access most sites without the need for intermediary tools, and you learn to use it more effectively the more you use it.

Opera Browser for Nintendo DS specifications

The specifications for the browser are the same as the specifications for Opera 8 (no longer online). Some highlights:

• HTML 4.01 supported (see full specs for a handful of exceptions)
• XHTML 1.1 supported (with few exceptions)
• Javascript: ECMA-262 2ed and 3ed standard fully supported. Opera says this is more or less aligned with JavaScript 1.3/1.5 Core.
• CSS1 fully supported
• CSS2 mostly supported
• CSS Mobile Profile fully supported
• WAP CSS fully supported
• XHTML Mobile Profile 1.0 and 1.1 fully supported
• WML 1.3 and 2.0 support (see full spec for three exceptions)

Screen size

The full screen size of each screen is 256x192 pixels (width by height), but you only get about 256x180 pixels of webpage on the bottom screen because of the browser buttons.

Cache

The browser comes with a memory expansion pack which goes in the GBA slot. That's why there are two different versions of the browser - the DS Lite version has a smaller memory pack, so it fits flush to the unit.

The browser has a cache of up to 8MB, which includes the 4MB expansion pack. The cache is wiped when the DS is switched off. Bookmarks can be saved between sessions, but no cookies or history data is stored when the power goes off.

Because rendering can be sluggish, it's not a good idea to rely on stuffing the cache full. It's better to strip back the content to the essentials and limit download sizes.

Page weights

As for any mobile platform it is advisable to keep page weights under 20KB wherever possible.

It's a good idea to try to keep pages short and divide longer pages into smaller chunks.

Browser identification

Opera announces itself as:

• Japanese: "Mozilla/4.0 (compatible; MSIE 6.0; Nitro) Opera 8.50 [ja]"
• English: "Mozilla/4.0 (compatible; MSIE 6.0; Nitro) Opera 8.50 [en]"

Stylesheets

The DS uses the 'handheld' stylesheet when in small screen rendering mode (SSR), and the normal screen stylesheet when in Overview mode.

The SSR mode was confused by having 'display:none;' used in the screen style sheet for content that applies to printed output only. Others have also reported problems with 'display:none;' being ignored.

Images

Each screen is about 260x180 pixels (width by height). Images larger than this will be scrolled in SSR mode, or scaled down for the overview mode, and magnified on the other screen.

There is a button to turn images on and off. Disabling images can dramatically speed up browsing, and is likely to be used often so use ALT tags to ensure users can still navigate your site with images switched off.

Javascript

I've found Javascript to work as well on the NDS as it does on the desktop. I adapted my games to take account of the different user interface and screen size, but didn't have to adapt my code at all.

Email

There's no email functionality built in to the DS. Clicking on a mailto: link gives an error message, without revealing what the underlying address is.

If you want feedback from your visitors, you must either use a feedback form or display your email address so that people can enter it in a webmail client (or perhaps on a different machine).

Blogger comments work fine.

History

The history only stores the six latest pages. If you have a long transaction funnel (eg order confirmation) and people might want to restart (eg to add more to the basket), you'll need to provide a link to the beginning. The history is wiped when the power goes off.

Navigation

Remember only the bottom screen is a touchscreen. Conventional wisdom is to put the navbar at the top of the webpage, which will in any case appear on the touchscreen until it is scrolled up. In some cases you may want to repeat the navigation at the bottom of the page so that people don't have to scroll to the top again to visit the next page.

You can use a link to an anchor within a webpage to enable users to easily align the page optimally between the two screens.

To make your site navigable:

• Don't use Flash or AJAX for your navbar
• Use concise alt tags on graphical buttons
• Pages can be deep when rendered in SSR, so provide a 'jump to top' option if that's where the navbar is
• Provide a 'jump to content' option to help skip repetitive navigation links
• Provide clear link descriptions. Users can't see the destination of a link before they click it

In my Hangman game, I kept all the navigation elements on the touchscreen and used the upper screen to display the gallows and answer. That ensured that users could play using the touchscreen without having to switch between screens.

Pop-ups

Multiple windows are not supported. If your site opens an essential pop-up on loading, it won't be seen.

Cookies

Cookies are stored in RAM and lost when the DS is switched off. That means it's much harder to accurately track visitors over multiple sessions.

Forms

Forms are fully supported, but I had problems entering more than about 260 characters into a blank form field. That said, I was able to edit a significantly longer Writeboard note.

Animation

There is no support for Flash or embedded movies.

Animated user interface features (AJAX) often fail so avoid using them for essential elements of the site if you want DS compatibility. I suspect that Blogger would work fine if only you could log in, but the use of AJAX for the login won't let DS users in.

Animated GIFs work well. They run slower than on the PC and tend to slow down more when the browser is busy. These look great on the DS:

"Night of the Living Fred"
by Artie Romero and W. Kirk Kennedy.

Fly's Surprise
by Don Mangan.

Providing user feedback

There's usually a small area of the webpage visible at a time. If an action updates a different part of the page, it's unlikely to be noticed. Provide feedback responses close to where action takes place (eg, error notices next to form fields, not in a separate sidebar).

Accessibility parallels

Many of the guidelines for designing on mobile devices also apply for designing for assistive devices. Good, accessible sites mostly work fine on the NDS already. But there will be specialist sites (including personal pages and Nintendo fan sites) that will want to tailor their design for the NDS, and will be thinking about some user interface issues for the first time. I hope this article will be useful for them.

Your comments

Please leave any comments or suggestions for additions on my blog here.