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!
Discuss this and more in our forums.
Follow WiiNintendo on Twitter.
Subscribe to our RSS Feed.
Loading ...
November 30th, 2006 at 8:36 pm
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.
November 30th, 2006 at 8:50 pm
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!
December 1st, 2006 at 2:15 am
Start building your Wii site…
Filed under: Nintendo Wii , Online WiiNintendo.net is assembling a thorough guide for all y’all web designers…
December 1st, 2006 at 6:03 am
[...] [...]
December 1st, 2006 at 7:42 am
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.
December 1st, 2006 at 8:00 am
[...] read more | digg story Filed under: Uncategorized | Tags: . [...]
December 1st, 2006 at 8:08 am
[...] 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. [...]
December 1st, 2006 at 8:15 am
When is the browser being released for download?
December 1st, 2006 at 8:29 am
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.
December 1st, 2006 at 8:34 am
[...] http://wiinintendo.net/2006/11/30/web-design-guide-for-opera-browser-on-wii/ December 1st, 2006 at 11:34 pm [...]
December 1st, 2006 at 8:44 am
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
December 1st, 2006 at 8:44 am
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.
December 1st, 2006 at 8:47 am
11:
I heard that the the browser passes the Acid2 test.
December 1st, 2006 at 9:00 am
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.
December 1st, 2006 at 11:00 am
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.
December 1st, 2006 at 12:05 pm
[...] – 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. [...]
December 1st, 2006 at 2:35 pm
[...] There’s an interesting article on Wii-based web design here for those interested. Posted in Uncategorized | [...]
December 1st, 2006 at 3:09 pm
@Bob Holness
That was a typo in the picture I took, it’s fixed.
December 1st, 2006 at 4:52 pm
[...] 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. [...]
December 1st, 2006 at 4:52 pm
[...] 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. [...]
December 1st, 2006 at 4:52 pm
[...] 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. [...]
December 1st, 2006 at 4:52 pm
[...] .::{WiiNintendo.net}::. designing sites for the nintendo wii browser [...]
December 1st, 2006 at 5:12 pm
[...] 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…. [...]
December 1st, 2006 at 5:16 pm
[...] Web design guide for Opera Browser on Wii Posted by James Filed in Design, Web [...]
December 1st, 2006 at 5:31 pm
[...] Link: WiiNintendo.net Posted in General Link to this Entry [...]
December 1st, 2006 at 10:53 pm
Wii発売ï¼?…
皆ã?•ã‚“ã?¯Wiiè²·ã?ˆã?¾ã?—ã?Ÿã?‹ï¼Ÿ…
December 1st, 2006 at 11:20 pm
[...] .::{WiiNintendo.net}::. (tags: wii webdesign opera nintendo css tutorial design) [...]
December 2nd, 2006 at 6:59 pm
[...] Original post by (author unknown) and software by Elliott Back [...]
December 4th, 2006 at 8:42 am
Where is part 2?
December 4th, 2006 at 9:19 am
The part 2! The part 2!
And little rumor : It’s the flash player 7 on the Wii.
December 4th, 2006 at 11:50 am
Working on part two, lot’s of INFO!
December 5th, 2006 at 6:19 pm
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.
December 20th, 2006 at 10:31 am
[...] View VC console “hack” and other web design tips here [...]
December 26th, 2006 at 11:17 pm
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……
December 27th, 2006 at 6:34 am
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
December 29th, 2006 at 6:56 pm
Great guide helped me alot with my new Wii site
.
January 3rd, 2007 at 11:09 am
[...] Read the guide. Add to: [...]
January 5th, 2007 at 7:35 pm
See designing for Wii here – http://my.opera.com/dstorey/blog/show.dml/594964 – from the Chief Web Opener at Opera.
January 8th, 2007 at 9:23 am
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.
January 11th, 2007 at 11:33 pm
[...] .::{WiiNintendo.net}::. (tags: browser css design howto html javascript WebDesign Wii guide) [...]
January 16th, 2007 at 1:48 am
[...] 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. [...]
January 30th, 2007 at 3:04 am
Shit happens, is it?
February 9th, 2007 at 7:00 am
[...] A Nintendo fez um guia para desenvolvevimento de aplicação com o Opera Browser e Wii. [...]
February 10th, 2007 at 12:42 pm
[...] 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. [...]
February 20th, 2007 at 6:05 am
[...] Eine großartige Anleitung für Durchblicker hat WiiNintendo.net zusammengestellt:Web design guide for Opera Browser on Wii [...]
February 27th, 2007 at 3:12 pm
That’s a great guide here. But I seen some other sites say that Opera renders it 1024 wide, then resizes it to 640.
March 3rd, 2007 at 7:42 am
[...] http://wiinintendo.net/2006/11/30/web-design-guide-for-opera-browser-on-wii/ [...]
March 5th, 2007 at 12:29 pm
Great guide.
Thx
April 11th, 2007 at 6:17 pm
hi nice site.
April 18th, 2007 at 4:29 am
[...] is 640 by 528 */ body { /*width: 608px; height: 456px; */ You can see this in the image below:read more | digg [...]
April 28th, 2007 at 7:16 pm
[...] Thanks go to the Web design guide for Opera Browser on Wii. [...]
May 1st, 2007 at 3:26 pm
[...] Read | Permalink | Email this | Comments [...]
May 2nd, 2007 at 3:52 am
[...] 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 [...]
May 24th, 2007 at 8:02 am
[...] 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 [...]
May 25th, 2007 at 12:54 am
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/...
May 25th, 2007 at 1:00 am
[...] Se trata de Web design guide for Opera Browser on Wii. [...]
May 25th, 2007 at 5:27 am
[...] WiiNintendo.net han sacado una guÃa de ayuda a la hora de diseñar/maquetar websites para su correcta visualización [...]
June 8th, 2007 at 6:35 am
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/
June 14th, 2007 at 1:54 pm
hi all.
June 18th, 2007 at 9:56 pm
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…
July 25th, 2007 at 12:53 am
[...] Web design guide for Opera Browser on Wii [...]
November 14th, 2007 at 9:31 am
[...] read more | digg story [...]
February 2nd, 2008 at 2:02 am
pre teen pageant gown
March 11th, 2008 at 1:11 pm
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.
August 27th, 2008 at 1:07 am
[...] “Web design guide for Opera Browser on Wii” en wiinintendo.net [...]
December 20th, 2008 at 3:08 pm
[...] “Web design guide for Opera Browser on Wii” en wiinintendo.net [...]
February 4th, 2009 at 9:37 am
wii is oone of my favorite. I love it.
March 29th, 2009 at 6:30 am
[...] Web design guide for Opera Browser on Wii [...]
June 10th, 2009 at 3:25 pm
[...] WiiNintendo.net offers web design guidelines for the Wii browser [...]
June 21st, 2009 at 1:01 am
[...] Wii Web Design Guide [...]