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!

mickeydelorenzo@yahoo.com'

About the author:

Mickey – who has written posts on NintendoFuse.

Post to Twitter Post to Facebook Post to Reddit

  • http://joshuajenkins.com/ Joshua Jenkins

    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.

  • http://joshuajenkins.com Joshua Jenkins

    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.

  • hey_suburbia

    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!

  • hey_suburbia

    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!

  • hey_suburbia

    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!

  • hey_suburbia

    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!

  • Pingback: syndicated

  • Pingback: Cómo hacer webs para Wii - BitJuice.net

  • Bob Holness

    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.

  • Bob Holness

    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.

  • Bob Holness

    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.

  • Pingback: Web design guide for Opera Browser on Wii at innerangst.net

  • Pingback: Design for the Wii Web Browser at jcCommerce

  • http://www.expansionbroadcast.com/ Eric

    When is the browser being released for download?

  • http://www.expansionbroadcast.com/ Eric

    When is the browser being released for download?

  • http://www.expansionbroadcast.com Eric

    When is the browser being released for download?

  • http://www.createdigitalmotion.com/ Peter Kirn

    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://www.createdigitalmotion.com/ Peter Kirn

    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://www.createdigitalmotion.com/ Peter Kirn

    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://www.createdigitalmotion.com Peter Kirn

    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.

  • Pingback: ajax everywhere » Blog Archive » Web design guide for Wii Opera Browser

  • http://www.rhythmac.com/ PixelNurse

    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

  • http://www.rhythmac.com/ PixelNurse

    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

  • http://www.wiiviewer.com/ MacHarbor Guy

    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.

  • http://www.rhythmac.com PixelNurse

    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

  • http://www.wiiviewer.com MacHarbor Guy

    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.

  • Matt Ramos

    11:

    I heard that the the browser passes the Acid2 test.

  • Matt Ramos

    11:

    I heard that the the browser passes the Acid2 test.

  • Daniel Tiecher

    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.

  • Daniel Tiecher

    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.

  • coderkind

    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.

  • coderkind

    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.

  • Pingback: Friday Wii Bits | The Wii Experience

  • Pingback: BrokenBlog » Blog Archive » Wii Flash

  • hey_suburbia

    @Bob Holness

    That was a typo in the picture I took, it’s fixed.

  • hey_suburbia

    @Bob Holness

    That was a typo in the picture I took, it’s fixed.

  • Pingback: PS3 Game Geek » Web Development Guide For Wii Opera Browser

  • Pingback: PS3 Game Geek » Web Development Guide For Wii Opera Browser

  • Pingback: Web Development Guide For Wii Opera Browser » PS3 Game Players

  • Pingback: The Wii Edge » Blog Archive » TheWiiEdge.com Links at 09:52 PM - (Part 1)

  • Pingback: Web Design Guide for Opera Browser on Wii » Dee’s-Planet! Blog

  • Pingback: Web design guide for Opera Browser on Wii « My Blog

  • Pingback: 1P Start » Blog Archive » How-To Create A ‘Wii-Friendly’ Website

  • Pingback: 大学生ã?—ã?’ã‚‹ã?®æ°—ã?¾ã?¾ã?ªæ—¥è¨˜

  • Pingback: web-ology.com » links for 2006-12-02

  • Pingback: Zeitgeist Blog » Blog Archive » .::{WiiNintendo.net}::.Populicious. New popular sites (48h).

  • Bassetts

    Where is part 2?

  • Bassetts

    Where is part 2?

  • Bassetts

    Where is part 2?

  • http://www.yamago.net/ MagicFred

    The part 2! The part 2!

    And little rumor : It’s the flash player 7 on the Wii.

  • http://www.yamago.net/ MagicFred

    The part 2! The part 2!

    And little rumor : It’s the flash player 7 on the Wii.

  • http://www.yamago.net MagicFred

    The part 2! The part 2!

    And little rumor : It’s the flash player 7 on the Wii.

  • hey_suburbia

    Working on part two, lot’s of INFO!

  • hey_suburbia

    Working on part two, lot’s of INFO!

  • Bassetts

    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.

  • Bassetts

    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.

  • Bassetts

    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.

  • Pingback: .::{WiiNintendo.net}::.

  • Pingback: Mike Downey

  • http://aralbalkan.com/ Aral Balkan

    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

  • http://aralbalkan.com/ Aral Balkan

    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

  • http://aralbalkan.com Aral Balkan

    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

  • http://wyrihaximus.net/ WyriHaximus

    Great guide helped me alot with my new Wii site :D.

  • http://wyrihaximus.net/ WyriHaximus

    Great guide helped me alot with my new Wii site :D.

  • http://wyrihaximus.net/ WyriHaximus

    Great guide helped me alot with my new Wii site :D.

  • Pingback: the play girlz gaming blog: because guys aren’t the only players » Wii Opera Browser Web Design Guide

  • Wii

    See designing for Wii here – http://my.opera.com/dstorey/blog/show.dml/594964 – from the Chief Web Opener at Opera.

  • Wii

    See designing for Wii here – http://my.opera.com/dstorey/blog/show.dml/594964 – from the Chief Web Opener at Opera.

  • Wii

    See designing for Wii here – http://my.opera.com/dstorey/blog/show.dml/594964 – from the Chief Web Opener at Opera.

  • Jonathan Young

    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.

  • Jonathan Young

    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.

  • Jonathan Young

    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.

  • Pingback: Comanche Hill » links for 2007-01-12

  • Pingback: Rurisk WeBlog » Blog Archive » Un Player Flash pour la wii

  • http://newyear.com Wandy Liona

    Shit happens, is it?

  • http://newyear.com/ Wandy Liona

    Shit happens, is it?

  • Pingback: CubaGames » Flash no Wii, como?

  • Pingback: split83 » Blog Archive » New AJAX Contact Form

  • Pingback: Design oder Nichtdesign at Wii! Wii! Wii!

  • http://www.lbmixpro.com/ Leon

    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://www.lbmixpro.com/ Leon

    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://www.lbmixpro.com Leon

    That’s a great guide here. But I seen some other sites say that Opera renders it 1024 wide, then resizes it to 640.

  • Pingback: Random Clap » Blog Archive » Istruzioni

  • http://www.fotosdonosti.com/ Angel

    Great guide.
    Thx

  • http://www.fotosdonosti.com/ Angel

    Great guide.
    Thx

  • http://www.fotosdonosti.com Angel

    Great guide.
    Thx

  • http://ya.ru/ alex

    hi nice site.

  • http://ya.ru/ alex

    hi nice site.

  • Pingback: Gaming News » Web design guide for Opera Browser on Wii

  • Pingback: Thu Tu’s Blog » Wii theme for Coppermine Photo Gallery

  • Pingback: Start building your Wii site-- eGamingLot

  • Pingback: Creattica - Flash » Blog Archive » Playing Flash on the Wii

  • Pingback: Desarrollando para la Wii | aNieto2K

  • Pingback: meneame.net

  • Pingback: torresburriel.com » Blog Archive » Diseño para la Wii

  • Pingback: | martinpulido.com | blog | » Guía de diseño web Wii

  • http://opera.com/ Jan Standal

    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/

  • http://opera.com/ Jan Standal

    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/

  • http://opera.com Jan Standal

    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/

  • http://ya.ru/ robert

    hi all.

  • http://ya.ru/ robert

    hi all.

  • http://ya.ru/ robert

    hi all.

  • http://www.alekhayes.com/stylish-web-design/ Alek – Stylish Web Design

    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…

  • http://www.alekhayes.com/stylish-web-design/ Alek – Stylish Web Design

    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…

  • http://www.alekhayes.com/stylish-web-design/ Alek – Stylish Web Design

    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…

  • Pingback: Frwee Wii Blog » Blog Archive » Optimizing a Wordpress blog for the Wii

  • Pingback: Gama Layx » Web design guide for Opera Browser on Wii

  • http://index1.greathal.com/ lol
  • http://index1.greathal.com/ lol
  • http://index1.greathal.com lol
  • http://worldwomans.com/ Tatyana

    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.

  • http://worldwomans.com/ Tatyana

    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.

  • http://worldwomans.com/ Tatyana

    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.

  • Pingback: MiniNoticias » Blog Archive » Tu web en la televisión (2 de 3)

  • Pingback: Tu web en la televisión (2 de 3) « x0v

  • http://www.thisismyurl.com/ web design

    wii is oone of my favorite. I love it.

  • http://www.thisismyurl.com/ web design

    wii is oone of my favorite. I love it.

  • http://www.thisismyurl.com web design

    wii is oone of my favorite. I love it.

  • Pingback: Wii Browser Reloaded at TaylorMade

  • Pingback: Nintendo Wii supports Flash Player 7 | mikedowney|blog

  • Pingback: Classroom ICT - The Wii | Digital Ether

  • Pingback: Mario Kart (Tech Demo) « Wii Browser Games

  • Pingback: PittMFUG » Blog Archive » Writing Flash for the Nintendo Wii

  • http://www.cctvhotdeals.com/ jessie

    Is this also supporting firefox?

  • http://www.cctvhotdeals.com/ jessie

    Is this also supporting firefox?

  • http://www.cctvhotdeals.com jessie

    Is this also supporting firefox?

  • http://www.easysitebuild.com/ website builder

    Thank you for sharing this very nice web design guide for wii. But is it possible to create a website using this console? I mean what about the quality?

  • http://www.icusa.net/ Naples web design

    One of the concept I love in designing is the Wii concept. On what day will this be release so that I can try it on my Opera browser? I hope it will be available for Firefox or Google Chrome.

  • http://guitartodayblog.com Buddy Tobias

    Bless you this made for interesting reading. I love your website design, i continually come back here and i dont realize why. I just seriously like your website lol…

  • http://www.thewebsyouroyster.com/jvpresswordpresstheme/ JV Press Wordpress Theme

    Web design for the Wii? You learn something new everyday. Thanks

  • http://www.pokemoncraft.com Pokemon

    opera again. it must be the most wide browser in the world :D

  • Pingback: Web design guide for Opera Browser on Wii | NintendoFuse | Beachdrop

  • Pingback: Web design guide for Opera Browser on Wii | NintendoFuse | inLine Media RSS Blog

%d bloggers like this: