Web design guide for Opera Browser on Wii

12/23/06, Update: Now that the browser has been released, some new info has come up, check out my latest dump of browser data, HERE

First, one of the biggest questions is: What resolution will it display at?

Based on what’s visible while browsing the Wii Shop Channel using the Wii, then comparing that same screen via the Firefox browser using the “user agent switcher” extension, we’re able to tell you that the viewable area is: 608×456.

So, if you’re planning on having your site look it’s best in a Wii browser make sure it scales nicely to 608px wide or if you are “hard coding” an image or Flash game/application make sure it’s width is no greater than 640px. The browser will also be able to display 640×480 (This is consistent with the screen shot of google (that’s on the Wii Shop Channel) and with the videos.

Also, their own CSS file gave it away:
/* Limit page to 640 by 480 (NTSC TV resolution) */
/* Note: PAL resolution is 640 by 528 */
body {
/*width: 608px; height: 456px; */

So, although they say in their own file to limit page to TV resolution, their own “width” tag is “608px”, which is consistent with the image seen below:

—————————————————————————–

Images/Graphics:

The official “Wii browser button”:

The official “Wii browser button rollover state”:

The official “Wii browser button shadow”:

The official “Wii VC game release button”:

The official “Wii next button”:

The official “Wii back button”:

…OK, enough saying official, here are the some other graphic elements:

————————————————————————————

Type Faces aka Fonts:

Looks like they use some sort of specific font call “Wii NTLG PGothic JPN Regular”, when viewed in a browser it ends up using a default font, but it looks more like a sans-serif font when viewed on the Wii:

font-family: “Wii NTLG PGothic JPN Regular”;
font-size: 28px;
color: #323232;
font-weight: bold;

————————————————————————————

View the Wii Shopping Channel online (viewed locally, so need for any Firefox hacks…):

Main Screen:

Start Shopping!

The Help pages:

help page, main listing
About Wii Shop Channel
Virtual Consoleâ„¢
Downloading Software
Adding Wii Points
Account Activity
Settings
Parental Control
Q & A

Sonic pages:

Details
More Details
Rating Information
Download Confirmation
Download Confirmation 2
Download Software
————————————————————————————

Download “Wii Shopping Channel” Javascript and CSS files:

buttons.js
oss.js
shop.js
images.js
progress.js
sound.js
oss.css

————————————————————————————-

Lot’s more info being compiled, javascript performance, flash, sound, cursors, wiimote buttons, zooming, selecting, Wii Standards, AJAX etc.

Stay tuned for part 2, coming tomorrow!

Tweet

Around The Net: