Further Scale Demystification...
Working through some more stuff in purposeful design for the Media Center platform gave me the chance to enhance understanding of the mouse transport and navigation bars...
The design template (see the Demystifying Scale in Media Center Hosted HTML Applications post for pointers) is based on 360 x 270 so when focusable / actionable elements in your page are scaled *down* to this size the mouse nav / transport controls won't interfere with the navigation of the service / application. I'm not suggesting a certain percentage of users run Media Center in a window at this resolution (well, I know at least one who commonly does -- me -- when listening to music services or watching video content in a window which stays on top :-). Making sure you don't have actionable items in the mouse nav / transport space is the only way you can account for 100% of the Media Center usage paradigms in regards to mouse navigation.
So, I went and created more screen shots and one additional template for funsies...
360 x 270 window for Media Center showing sample code with mouse nav / transport bars. Screenshot
360 x 270 window showing Online Spotlight as an example of elegant and functional design with a bunch of actionable elements on a page. Screenshot
To show the constant (non-scaling) size of this feature within Media Center: 500 x 375 640 x 480 800 x 600
Design template superimposed on a screen shot of the sample code, showing how the two correlate. Screenshot
Couple of Photoshop files allowing you to quickly evaluate potential designs against the mouse nav / transport constraints. 360 x 270 480 x 270
To use these new templates...
1) Take any screenshots / concepts you have and resize them to 360 x 270 (4:3) or 480 x 270 (16:9).
2) Paste the result into a layer underneath in Photoshop (making sure to center).
Here's hoping this makes things clearer than mud...
