Web design guide for Opera Browser on Wii November 30, 2006
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:
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!
Loading ...
Nice guide. That’s not a Sans-Serif font that it defaults to, though. The Serifs are clearly visible on the W, C, i, and S.
Yeah, I’ll re-word it. I meant it looks like it gets read on the Wii as a Sans-Serif, thanks for the heads up!
Start building your Wii site…
Filed under: Nintendo Wii , Online WiiNintendo.net is assembling a thorough guide for all y’all web designers…
[...] [...]
The numbers on the labelled screenshot are 600×455 but the CSS specifies 408×456 whilst the comment says limit to NTSC at 640×480 and that PAL is 640×528.
Wah.
[...] read more | digg story Filed under: Uncategorized | Tags: . [...]
[...] I read this on my Digg feed this morning- Someone has built a page on how to design web pages for the embedded Opera web browser on the new Nintendo Wii. [...]
When is the browser being released for download?
This looks really fantastic — thanks for doing this!
Any plans to cover Flash implementation? I haven’t seen anything on this yet; as a Flash artist, I’m really hoping I’ll be able to do some interesting stuff with this and perhaps even access the features of the controller.
[...] http://wiinintendo.net/2006/11/30/web-design-guide-for-opera-browser-on-wii/ December 1st, 2006 at 11:34 pm [...]
The dimensions should only be used as guides IMHO. The amount of screen cropped by a given CRT TV will vary wildly. Only on a LCD will you get the full 640×480.
Checkout Wikipedia’s entries for Title Safe, Action Safe and Overscan.
http://en.wikipedia.org/wiki/Title_safe
http://en.wikipedia.org/wiki/Action_safe
http://en.wikipedia.org/wiki/Overscan
Well this is helpful information. I am working on a Wii review website at the moment and having information about Wii CSS is helpful.
Any idea what level of CSS support will be in the Wii Opera browser?
I hope Nintendo releases the D-Pad graphic for web developers to implement on their sites to help with Wii navigation.
11:
I heard that the the browser passes the Acid2 test.
Yeah, Opera Browser was the first multi-plataform browser to pass Acid2 Test. Opera CSS rendering engine (Presto) is even better than Firefox (gecko) or Safari (Webkit). In fact, the only Opera browser that do not fully pass the Acid2 test now is the DS one.
Full CSS1, almost full CSS2 and the best CSS3 support so far.
Opera for Devices (Wii version) was ported to Wii from the Opera 9.
Hopefully Nintendo, Opera or Adobe will release details on the Flash player soon. I hope they don’t disable certain features in the player like they did with the version of Flash 6 for the PSP.
[...] - WiiNintendo.Net has a cool little guide up showing you how you can cater your new Nintendo fansite to look and feel better when browsing with the Wii when Opera hits. It’s got some nice code peices and graphical samples you can use to mimic the online store found in the Wii. Some of this stuff looks cool, don’t be surprised if you see The Wii Experience using some of this in efforts to match the whole Wii style thing going on. [...]
[...] There’s an interesting article on Wii-based web design here for those interested. Posted in Uncategorized | [...]
@Bob Holness
That was a typo in the picture I took, it’s fixed.
[...] WiiNintendo.net is assembling a guide to create webpages tailored to the Wii’s Opera Browser. The first tip is the Wii Shop Channel displays at 608×456 pixels, although the browser can display at 640×480 resolution. If you want to edit your site to Nintendo’s specifications, make sure that the site scales to the 608 pixel width. [...]
[...] WiiNintendo.net is assembling a guide to create webpages tailored to the Wii’s Opera Browser. The first tip is the Wii Shop Channel displays at 608×456 pixels, although the browser can display at 640×480 resolution. If you want to edit your site to Nintendo’s specifications, make sure that the site scales to the 608 pixel width. [...]
[...] WiiNintendo.net is assembling a guide to create webpages tailored to the Wii’s Opera Browser. The first tip is the Wii Shop Channel displays at 608×456 pixels, although the browser can display at 640×480 resolution. If you want to edit your site to Nintendo’s specifications, make sure that the site scales to the 608 pixel width. [...]
[...] .::{WiiNintendo.net}::. designing sites for the nintendo wii browser [...]
[...] 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.Continue to read full post…. [...]
[...] Web design guide for Opera Browser on Wii Posted by James Filed in Design, Web [...]
[...] Link: WiiNintendo.net Posted in General Link to this Entry [...]
Wii発売ï¼?…
皆ã?•ã‚“ã?¯Wiiè²·ã?ˆã?¾ã?—ã?Ÿã?‹ï¼Ÿ…
[...] .::{WiiNintendo.net}::. (tags: wii webdesign opera nintendo css tutorial design) [...]
[...] Original post by (author unknown) and software by Elliott Back [...]
Where is part 2?
The part 2! The part 2!
And little rumor : It’s the flash player 7 on the Wii.
Working on part two, lot’s of INFO!
Part 2!!!
I am working on a Wii site right now (in both senses) and your guide has helped out a little. Although can I ask is there much point in setting the site to fit into the Wii browser as Opera has fit to width. http://www.opera.com/support/tutorials/flash/era/
Also I damn hope its not Flash 7. That would suck so much, it was bad enough being forced to use flash 7 if you ran Linux.
[...] View VC console “hack” and other web design tips here [...]
Nintendo Wii supports Flash Player 7…
Aral Balkan (and others) pointed out that the Nintendo Wii now supports Flash Player 7 via their release of the Opera browser for Nintendo Wii, currently in beta (trial version) and planned for final release in March of 2007 (press……
Hi guys,
First off, thank-you for a such a valuable resource. I just want to give you a heads up that I did some tests with the Flash Player and it reports that the system resolution is 800×600 with the maximum stage size of the Flash Player set to 800×500 (these are the values returned for a Flash movie set to 100% width and height in the HTML).
My blog post on the subject is here: http://aralbalkan.com/823
Great guide helped me alot with my new Wii site :D.
[...] Read the guide. Add to: [...]
See designing for Wii here - http://my.opera.com/dstorey/blog/show.dml/594964 - from the Chief Web Opener at Opera.
I could really use a guide on how to get a file downloaded to the wii hard drive. For instance saving a picture you want to view later in the photo channel or even a movie.mov to play later.
[...] .::{WiiNintendo.net}::. (tags: browser css design howto html javascript WebDesign Wii guide) [...]
[...] Après la Playstation 3, la PSP et la XBOX 360, c’est au tour de la Nintendo Wii de s’approprier le lecteur Flash! C’est la version 7 du lecteur, via le navigateur en version Beta Opera, qui est exploitable. N’importe quel développeur Flash peut maintenant développer des applications ludiques pour cette plateforme en respectant les quelques règles décrites dans ce mini-guide. [...]
Shit happens, is it?
[...] A Nintendo fez um guia para desenvolvevimento de aplicação com o Opera Browser e Wii. [...]
[...] I’m playing around with some ideas for making split83.com more “wii-friendly” also. Here’s a nice guide for web design on the Wii. [...]
[...] Eine großartige Anleitung für Durchblicker hat WiiNintendo.net zusammengestellt:Web design guide for Opera Browser on Wii [...]
That’s a great guide here. But I seen some other sites say that Opera renders it 1024 wide, then resizes it to 640.
[...] http://wiinintendo.net/2006/11/30/web-design-guide-for-opera-browser-on-wii/Â [...]
Great guide.
Thx
hi nice site.
[...] is 640 by 528 */ body { /*width: 608px; height: 456px; */ You can see this in the image below:read more | digg [...]
[...] Thanks go to the Web design guide for Opera Browser on Wii. [...]
[...] Read | Permalink | Email this | Comments [...]
[...] of course limitations which your PC doesn’t have, for example the resolution is limited to 640×480 and under, the wiimote takes some extra effort, sometimes needs Javascript and of course you don’t have [...]
[...] artÃculo destinado a mostrarnos como diseñar nuestras páginas para la consola Wii. Esto me lleva a un nueva pregunta. ¿Estamos frente a otro tipo de navegador(las consolas en [...]
Cómo diseñar páginas web para la consola Wii…
ArtÃculo que nos explica, por si queremos diseñar una página web y que se vea adecuadamente en el navegador de la Wii, como debemmos hacerlo. VÃa http://www.anieto2k.com/2007/05/24/desarrollando-para-la-wii/...
[...] Se trata de Web design guide for Opera Browser on Wii. [...]
[...] WiiNintendo.net han sacado una guía de ayuda a la hora de diseñar/maquetar websites para su correcta visualización [...]
Opera have published new documentation on how to develop for the Wii: Making Wii-friendly pages, http://dev.opera.com/articles/view/making-wii-friendly-pages/
hi all.
Thanks for this! I’m striving to perform stylish web design for wii consoles as well as other devices, and seeing as a few mates of mine have one now and I don’t yet, this info came in handy…
[...] Web design guide for Opera Browser on Wii [...]
[...] read more | digg story [...]
pre teen pageant gown
Being Passionate is not always a good thing as passion can take over your life and lead you to do things that could be detrimental or harmful or keep you doing things when they no longer have a benefit.