WiiNintendo




Web design guide for Opera Browser on Wii November 30, 2006

Filed under: Exclusive, News — hey_suburbia @ 3:19 pm

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:

311449454 d6578df453 o Web design guide for Opera Browser on Wii

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

Images/Graphics:

The official “Wii browser button”:

310581260 e41f8fa631 o Web design guide for Opera Browser on Wii

The official “Wii browser button rollover state”:

310595871 acad6a0ad8 o Web design guide for Opera Browser on Wii

The official “Wii browser button shadow”:

310581264 4a29bf8e21 o Web design guide for Opera Browser on Wii

The official “Wii VC game release button”:

310595869 e257858adc Web design guide for Opera Browser on Wii

The official “Wii next button”:

311233998 939bf205ee m Web design guide for Opera Browser on Wii

The official “Wii back button”:

311231448 3b6a3cbaa7 m Web design guide for Opera Browser on Wii

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

311231456 02470eea64 m Web design guide for Opera Browser on Wii

311233994 1c1cccd672 m Web design guide for Opera Browser on Wii

311233996 242ed713e4 m Web design guide for Opera Browser on Wii

311233997 2a25753792 m Web design guide for Opera Browser on Wii

311234002 66e44bb696 Web design guide for Opera Browser on Wii

311234000 bf18ad1c30 Web design guide for Opera Browser on Wii

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

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:

310616344 b0742d4f37 o Web design guide for Opera Browser on 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…):

311246271 690be8fbc5 Web design guide for Opera Browser on Wii

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!



Discuss this and more in our forums.
Follow WiiNintendo on Twitter.
Subscribe to our RSS Feed.
Share or Save Article:
  • Digg
  • Reddit
  • Facebook
  • Twitter
  • Google Bookmarks
  • Tumblr
  • MySpace
  • StumbleUpon
  • Technorati
  • del.icio.us
  • Mixx
  • Yahoo! Buzz
  • email
  • Print
  • RSS

  • Is this also supporting firefox?
  • wii is oone of my favorite. I love it.
  • 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.
  • lol
  • 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...
  • hi all.
  • Opera have published new documentation on how to develop for the Wii: Making Wii-friendly pages, http://dev.opera.com/articles/view/making-wii-f...
  • hi nice site.
  • Great guide.
    Thx
  • That's a great guide here. But I seen some other sites say that Opera renders it 1024 wide, then resizes it to 640.
  • Shit happens, is it?
  • 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.
  • Wii
    See designing for Wii here - http://my.opera.com/dstorey/blog/show.dml/594964 - from the Chief Web Opener at Opera.
  • Great guide helped me alot with my new Wii site :D.
  • 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 800x600 with the maximum stage size of the Flash Player set to 800x500 (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
  • 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.
  • hey_suburbia
    Working on part two, lot's of INFO!
  • The part 2! The part 2!

    And little rumor : It's the flash player 7 on the Wii.
  • Bassetts
    Where is part 2?
  • hey_suburbia
    @Bob Holness

    That was a typo in the picture I took, it's fixed.
  • 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.
  • 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.
  • Matt Ramos
    11:

    I heard that the the browser passes the Acid2 test.
  • 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.
  • 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 640x480.

    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
  • 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.
  • When is the browser being released for download?
  • Bob Holness
    The numbers on the labelled screenshot are 600x455 but the CSS specifies 408x456 whilst the comment says limit to NTSC at 640x480 and that PAL is 640x528.

    Wah.
  • 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!
  • 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.
blog comments powered by Disqus