Optimizing a Wordpress blog for the Wii
Here are some general guidelines which should keep in mind to ensure your WordPress temples display properly in the Opera browser on the Nintendo Wii. Much of this applies to any web page designed for the Wii Internet Channel.
- Test your site in Opera 9. The Internet Channel on the Wii is based on Opera 9, so testing in Opera 9 is a great start to finding potential compatibility issues. Ultimately, you really need to view the page on the Wii using a TV to check that is it legible.
- The maximum page width is 800 pixels wide, but keeping image and CSS element widths well under this is advised (the Wii shop channel looks good, and is 608×456). This should mean that the user doesn’t have to scroll sideways or zoom out to see the layout as intended.
- JPEG, GIF, PNG (with alpha transparency), BMP, ICO, SVG 1.1 basic, and scripted canvas are supported.
- Only Flash 7 is supported, and most Javascript is okay (no Java or other plugins are available)
- Opera on Wii uses only two fonts: a sans-serif font “Wii NTLG PGothic” and a monospace font called “Wii NTLG Gothic”. Keeping the font size to a minimum of 14 - 16px should ensure that the fonts are legible on a TV without requiring the user to zoom in.
I was planning on customising a Wordpress template to detect if the browser has the User-Agent for the Wii Opera browser (Opera/9.00 (Nintendo Wii; U; ; 1038-58; Wii Shop Channel/1.0; en)), and display a custom css stylesheet accordingly. Turns out, this has already been done with the WordPress Wii Edition Plugin (WiiPress v1.3) !! I’ll probably tweak it a little in the future, but it works well enough to use “out of the box” !!
(For Firefox users who wanting to see this site using the stylesheets designed for the Wii, install the Switch User Agent Add-on and add the User-Agent “Opera/9.00 (Nintendo Wii; U; ; 1038-58; Wii Shop Channel/1.0; en)”, then reload this site).
Here are some links with general guidance to make pages display better on the Wii:
- Making Wii-friendly Pages (opera.com)
- WordPress Wii Edition Plugin (WiiPress v1.3)
- Web design guide for Opera Browser on Wii
- Is your site ready for Wii ?
- Wii press kit images … nice graphics for Wii-based themes (like the theme of this blog, for instance).
Links in this article
- http://winksite.com/site/section2b.cfm?article_level2_category_id=15&article_level2a_id=316&article_level2b_id=701
- https://addons.mozilla.org/en-US/firefox/addon/59
- http://dev.opera.com/articles/view/making-wii-friendly-pages
- http://wiinintendo.net/2006/11/30/web-design-guide-for-opera-browser-on-wii/
- http://my.opera.com/dstorey/blog/show.dml/594964
- http://codebot.org/articles/?doc=9449
Related posts:
Tagged:
- No Tags
July 25th, 2007 at 6:08 am
Just a quick note to say that my blog linked above was written before the final release of the browser and a few things have changed. Handheld media type is not available on the single column view for example.
One of the most useful new additions is that the TV media type is supported. i’d recommend just adding a TV stylesheet to your Wordpress template that styles the site as needed on a TV set such as larger fonts so that zoom is not needed, and shorter text width lengths (make sure when you zoom in that the text length is not wider than the screen width). On three column designs, you may want to push the third column below the content too.
The advantage over detecting the user agent is that it’ll benefit any future browser for TVs and set top boxes.
July 29th, 2007 at 5:39 am
Hey, thanks for the tip !
I guess setting the media type in an alternate stylesheet is the ‘right way’ to do it (tweaking pages via User-Agent detection is soooo 1996
). Eventually, when I get time, I’ll update the theme on this site to use media=”tv” rather than the User-Agent detection.
Cheers,
Andrew