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 */
/*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:
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”;
View the Wii Shopping Channel online (viewed locally, so need for any Firefox hacks…):
The Help pages:
Stay tuned for part 2, coming tomorrow!