With the release of Internet Explorer for XBOX Live members just a few weeks ago, we have yet another optimization challenge, the big screen. By now, many of us have master the mobile web optimization techniques, the kind where we're constrained to inches and centimeters. Now, with LED screens and high-def projectors at lower-than-ever prices, we need to learn a whole new set of tricks, and start thinking about device size in feet and meters! With millions of these products being purchased on Black Friday, just a month after Microsoft released it's XBOX browser, it's more important than ever to consider these larger screen sizes.
I have an 11ft. screen with a 720p Sony Bravia projector at home. Typically, we use it for movies and video games, but just yesterday, I decided to load my own blog in the XBOX Live Internet Explorer. After spending an hour or so surfing around, I came to some conclusions:
- Scrolling is painful on the eyes. Reading an article was difficult, as it was difficult to scroll at a consistent pace with the XBOX controller. But beyond that, it just seemed to give me a headache. A larger font size and narrow text columns seemed to be an improvement.
- Unless you have a chatpad or other keyboard-like controller, it's no picnic to input text. Given that, interfaces with large buttons and minimal input will surely prevail. Another important feature will be the ability to "remember" the user once they log in. A user who has to log in to your website with each visit using the XBox controller will surely give you the thumbs down.
- Use padding. Similar to finger touches on a mobile device, it's difficult to attain quick accuracy with the XBOX controller cursor. By giving all of your links a decent amount of padding, you'll increase the likelihood of the cursor landing on the link in a "single drag". By padding, of course, I'm talking about the actual CSS padding style.
- Serif fonts do not look as good as non-serif. Stick to the "sans-serif" font stack, it just looks cleaner.
- Eliminate horizontal scrolling. The horizontal scrollbar is a bad idea to begin with, but it's negative effect is multiplied with the XBOX Controller. Scrolling with the joystick, it's difficult to avoid movement long the x-axis. So, if possible, use the CSS overflow-x property to eliminate horizontal scrolling:
Hint: body { overflow-x: hidden; }
- Avoid gutter links. The cursor doesn't like the stay in the gutter of the website. That is, when dragged to any far edge of the screen, the cursor jumps away from it, as if it's afraid of falling off the screen!
- Avoid green buttons. Unlike the default desktop cursor, the XBOX IE cursor does not have an "outline" color, it's just solid green, with a slight gradient. Given that, I was able to lose it inside a button with a green background.
- Use the label for attribute. This is just one more way to tame that crazy cursor, making it easier for a user to activate or deactivate a checkbox, using its' label.
- Bottom pad the footer. It may just be my crazy household, but every one of our TVs has junk around it's base, so we lose the lower 1" of the picture! If you have a sticky footer, or a footer that's snug to the bottom of the <body>, consider adding a touch of margin below it.
- Responsive layouts may not be the best approach. There is no window border, and hence, no ability to resize the browser window. Given this, on a wide-screen projector, I'm stuck with a 10-foot-wide website! A site with a responsive layout is difficult to browse, as it fills the entire screen. I would consider a fixed width, with a centered layout.
Okay, those may be good tips, by how do you conditionally implement them on an XBOX IE browser? Well, there appears to be only one way at this point. Since the TV media type isn't support within CSS media queries, the only way I can think of is to turn to the server side:
- The USER_AGENT string. Your web server is most likely set up to pass the user agent string in a server variable. This variable, typically keyed USER_AGENT, will look something like this: Mozilla/5.0 (compatible…. Xbox). So, a search for the string "Xbox" is a safe bet. To be safe, consider checking that the variable does not include the string "Phone".
After checking the USER_AGENT, you can conditionally load a stylesheet, or JavaScript file, which overrides your base CSS files.
Other Notes
- XBOX Internet Explorer doesn't deal well with Adsense ads that are dynamically positioned with JavaScript (whatever the reason).
- Microsoft has published a more detailed paper on optimization for XBox. You can download it here http://www.microsoft.com/en-us/download/details.aspx?id=30442. I tried not to overlap their suggestions.
- If anyone encounters any other unusual behavior, please drop a comment!
This post was very useful. Thank you so much!