I received the gift of Xbox One for Christmas this year and in between sessions on Dragon Age and Destiny I have done a little web browsing and found it is surprisingly good, I have not been a fan of using internet on consoles before but Microsoft have built a solid experience. The browser is based on Internet Explorer 10 so if your site works well in that, which it should, your site should function on Xbox just fine.

Of course, when browsing from your couch, things are a little different – you will be sitting a lot further away from the screen than you would on a PC, maybe 10 feet away from the screen so there are some considerations you should take into account if you want to optimize the experience for Xbox browsing which is the subject of today’s guide.

1

You probably wont be reading through posts on WPLift or doing your online banking, so what types of website would benefit from being optimized for couch browsing ? The types of website I can see benefiting from this would be sites aimed at gamers such as forums, walk-through guides, image galleries, video sites, and social media sites such as Reddit, Facebook, Twitter etc.

In partnership with Microsoft

If you would like to provide a better couch-surfing experience for your site visitors, then read on.

Input Methods

There are a number of different methods you can use to browse the web on Xbox One, depending on whether you have Kinect or not you can use voice control and motion gestures. You can use the controller to input text with an on-screen keyboard and other buttons to move through webpages. If you have an iPhone, iPad or android device you can download the Smartglass app which lets you control most functions on your Xbox using that also.

Using the Controller

Using the Xbox controller is simple – it provides a “Free Cursor” which you control with the left analog stick like you would move a mouse pointer around, the A button is used for clicking on links.

3

There is also a “Relative Focus” mode where instead of moving a pointer around the screen, there is always one element in focus and you use the stick to change between elements, moving up, down, left or right.

Here is a full run-down of the controller buttons:

2

Internet Explorer on Xbox One also supports the Gamepad API, as specified by the W3C.

Smartglass Apps

3

Xbox Smartglass is an app which you can download to your mobile device and mirrors your TV displaying XBox One and lets you use the screen for touch inputs and typing in with a keyboard etc. This is my preferred method of input for browsing with Internet Explorer.

4

Download links for Smartglass :

Voice Commands

Kinect is an add-on which allows you to use voice and motion gestures to control your Xbox One.

5

Here is a full run-down of available voice commands you can use to browse using Internet Explorer :

Global commands

  • “Xbox” – Turns on active listening
  • “Show full screen video” – Shows the video element in full screen mode
  • “Play” / “Pause” – Controls the audio or video element on the webpage
  • “Select” – Switches voice focus from global context to app context Shortcut: “Xbox select”

Address bar commands

  • “Show Address bar” – Shows the Address bar
  • “Hide Address bar” – Hides the Address bar
  • “Go Back” – Go to next item in the back stack
  • “Go Forward” – Go to next item in the forward stack
  • “Add Favorite” – Adds webpage to Favorites
  • “Remove Favorite” – Removes webpage from Favorites
  • “Settings” – Web Hub
  • “Favorites” – Opens Favorites list
  • “Recent” – Opens Recent list
  • “Featured” – Opens Featured list
  • “Browse to <website>” (dynamic) – Navigates the browser to a website; The site name can be a popular website name, or a favorite or featured website
  • “Help” – Launches the Help companion app

Webpage level

  • “Browse to <website>” (dynamic) – Navigates the browser to a website; The site name can be a popular website name, or a favorite or featured website
  • “Click on <link>” (dynamic) – Clicks on <link>
  • “Go Back” – Go to next item in the back stack
  • “Go Forward” – Go to next item in the forward stack
  • “Show Address bar” – Opens Address bar to last viewed state
  • “Favorites” – Opens Address bar to Favorites list
  • “Add Favorite” – Adds webpage to Favorites
  • “Remove Favorite” – Removes webpage from Favorites
  • “Show menu” – Opens the context menu
  • “Play” – Plays on screen video
  • “Pause” – Pauses on screen video
  • “Full Screen” – Opens on screen video in full screen

Gestures

2

Finally, also using the Kinect, we can use gestures to browse – to get started you raise your hand and waive which will show the gesture cursor, you can then close your fist as if grabbing the web page and then scroll down or up. To zoom, you grab make a motion as if pulling the page towards you. To click a link, hover over it and then with an open hand move it towards the screen and then away as if pressing the link.

1

Design Considerations

10 Foot Design

10-foot (or 10′) design means an experience tailored to people using a TV for viewing as most people will be sitting around 10 feet away from the screen. When designing a web page for this experience there are a few things to bare in mind such as increasing font size, small fonts such as those used in footers or maybe nav menus will be unreadable so these should be increased. You should increase the spacing between elements so the content is easier to view and links are easier to click.

Designing for TV

Websites should be kept to 1024pxwide, otherwise horizontal scrolling will occur and keep navigation menus and other important information in the top 650px as this is the vertical viewable area. Make sure that links have a hover state so that when the cursor is over them the viewer will know they are over the target link. Make links clear and visible and give buttons plenty of padding – avoid using any popups or distracting hover elements on links. All links should be text, do not use images and make sure each link has distinct text which clearly identifies what the link does, ie name a link “Contact Us” rather than “Click Here”.

For lists of links such as side navigation bars, increase the padding between each link and consider adding a line as a divider to clearly separate the links:

4

Avoid using any position:fixed elements as this can interfere with smooth panning and scrolling.

Keep all text elements above 12px in size.

TVs generally have a higher brightness level than computer monitors so think about using light text on a dark background rather than dark on white, if you do choose to use a light background, do not use pure white #fff, instead use a gray background of #c8c8c8.

Technical Specs

The technical specification for web browsing on Xbox One are as follows:

  • Operating System: Windows 8
  • Screen Resolution: 1324 x 745
  • Web Browser: Internet Explorer 10.0
  • Browser Size: 1236 x 701
  • Color Depth: 24
  • Javascript: Enabled
  • Flash Version: Not Installed
  • Cookies: Enabled
  • User Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)

Taken from here.

The Xbox One has 8GB of RAM, of which, 480MB is available for Internet Explorer and there is no page file usage so your web page must fit in that 480MB or the Internet Explorer app may be stopped. Ensure any large images such as for backgrounds are well optimized, use only one <video> element per page as each additional one creates an overhead.

Use HTML5 for any Audio and Video as Active X and other browser addons are not supported. For the best video results, encode them with h.264 “high” profile at 720p resolution.

You can use Javascript but it doesn’t have JIT (Just In Time) compilation, so some JavaScript operations might take longer compared with Internet Explorer for Windows.

CSS Styles

In a previous post about Windows 8.1 I talked about adding a fix for Metro UI snap, add this to your stylesheet :

@-ms-viewport {
width: device-width;
}

That will ensure your theme behaves correctly when being snapped.

You should be using media queries for responsive versions of your theme, one that I use for targeting 1024px resolutions is :

@media only screen and (min-width: 1000px) and (max-width: 1249px) {
[Styles Here]
}

Using this will work for the Xbox One browser resolution.

Testing

If you do not have an Xbox One to carry out testing, you can use Windows 8.1 with Internet Explorer 10, Disable Active X. Test your website at a number of zoom levels from 100% to 185%.

For a full rundown of which HTML5 features are supported, check the specs here.

You can change the User-Agent string in Internet Explorer 10 by doing the following :

  • Press F12.
  • Click Tools, select Change user agent string, and then click Custom…
  • In the Friendly Name field, type Xbox: desktop, CV off.
  • In the User Agent String field, type Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One).
  • Click Add.
  • Click Set.

If you do not have Windows 8.1 and Internet Explorer 10 for testing, there is an excellent website by Microsoft called Modern.ie which provides all the tools to test your website in different Windows and Internet Explorer versions by downloading Virtual Machines or by getting screenshots of your site in different browsers.

1


Author:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +

3 Comments

  1. Daniel

    Interesting.

  2. This is Useful Information..Awesome Great Information Thanks..

  • Comments are Closed

Our Sponsors

SEND ME FREE WORDPRESS STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!