It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.

NEW: Sign up for my newsletter!

Home > Articles > Webmaster resources > Designing for Nintendo DS

15 April 2007

Webdesign for Nintendo DS Opera web browser

Nintendo browser box 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've created a site for the browser, 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.

    Screengrab of Google running on NDS

  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:

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 and provide access to Google Reader, Digg, Google News, BBC News and more. 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. 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. Some highlights:

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:

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:

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.

Screengrab of my hangman game

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

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

Fly swat cartoon

Fly's Surprise
by Don Mangan. Artie.com

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.

Credits

With thanks to Jeremy at the Opera Forum for pointers on some of the technical details.

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.