Internet Explorer for Xbox One Developer Guide

This topic provides guidelines for web developers to who want to optimize their sites for Internet Explorer for Xbox One. It contains design recommendations and describes some of the technical differences between Internet Explorer 10 and Internet Explorer for Xbox One.

This topic contains the following sections:

• Overview
  • What’s new in Internet Explorer for Xbox One
  • Address bar
• Input methods
  • Free cursor
  • Relative focus
  • Controller and Xbox One
  • Xbox SmartGlass
  • Voice
  • Gesture
• 10-foot design considerations
  • Distance from the screen
  • Design for voice
  • Design for gesture
  • Content and functionality
  • Interactions – keep them simple
  • Navigation and links
  • Layout
  • Text considerations
  • Approaches for 4 screens: TV, PC, tablet, mobile
• Technical considerations
  • Internet Explorer for Xbox One and Internet Explorer 10 differences
  • User-agent header string/ header
  • Fonts
  • Memory
  • Panning and scrolling
  • JavaScript performance
  • Media formats
  • Extensions: Plug-ins, ActiveX, and downloads
• Debugging and testing
  • Disable ActiveX controls
  • Layout
• FAQ

Overview

Internet Explorer for Xbox One is a browsing experience that lets users easily browse the Internet on a television from 10 feet away from the screen. It’s based on the Internet Explorer 10 platform and has many of the same features as Internet Explorer 10 for Windows.

Most websites that work well in Internet Explorer 10 for Windows also work well in Internet Explorer for Xbox without modification.

This document is for developers who want to optimize their site for Internet Explorer for Xbox One. It contains design recommendations, and it describes some of the technical differences between Internet Explorer 10 and Internet Explorer for Xbox One.

What’s new in Internet Explorer for Xbox One

Internet Explorer for Xbox One improves on Internet Explorer for Xbox 360 in a number of ways that we cover in this document. Below is a brief summary of what’s new:

• Voice and gesture browsing
• Tabbed browsing
• New Address bar design
• Automatic session save and restore
• Improved performance
• New HTML5 standards support

Address bar

The Address bar replaces the Web Hub functionality in Xbox 360 and is the main place you navigate to websites from. Users can pick from their Favorites, go to recently viewed sites, or type URLs in the Address bar. To launch the Address bar at any time, users can press the View button on the controller or say "Xbox Select…Show address bar". To show the address bar with gesture, users can grab and pull the Address bar up from the bottom of the screen.

Input methods

Free cursor

A free-floating cursor model (pictured in the following image) is used across Internet Explorer for Xbox One. A cursor lets users seamlessly interact with every part of the browser the same way – users can point and click on webpage links, the Address bar, settings, or informational messages. When the cursor is moved to the edges of the screen, the webpage is automatically scrolled or panned so that it’s easy to navigate webpages with just the left thumbstick and the ‘A’ button.

Relative focus

A relative focus model is used for interacting with Internet Explorer UI elements such as the Address bar. Unlike the free cursor model, there is no cursor or pointer. Instead, there is always an element with focus, and users can change elements by moving up, down, left, or right.

Controller and Xbox One

Users can use the Xbox One controller to control all browser features:

Internet Explorer on Xbox supports the Gamepad API so websites can build interactivity around controller events. Instead of relying on v-key and click events from the DPad and A button, your website can listen for every button event, except the Xbox button, and build unique experiences around the controller inputs. Users can still toggle between gamepad and browsing controls with the Menu button.

Gamepad on IE supports up to 8 controllers; the first controller will automatically be identified and subsequent controllers are identified when the user presses a button on them. Each controller is disconnected if the user presses the Menu or View button to interact with the browser. If a website is designed for gamepad input, we suggest that every element on the page is made accessible through the gamepad so users don't have to toggle into standard browsing controls.

Xbox SmartGlass

Xbox SmartGlass is software that you can run on your smartphone or tablet (Windows Phone, Windows 8, iOS, Android) to connect to your Xbox One. While using Internet Explorer for Xbox One, you can use Xbox SmartGlass as a second screen and a controller. Using touch-enabled devices, you can use your device like a track pad to move the cursor, and you can type with the touch keyboard on your device.

Voice

Internet Explorer for Xbox One has new voice technology that makes it easy to browse the Web just by using your voice. Users can browse to websites, control the user interface, and click on links just by speaking voice commands.

Supported voice commands

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

 

Address bar command	Description
"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 command	Description
"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

 

Gesture

Users can browse the web using the same natural gestures that work in other Xbox One apps. To start using gesture, users simply raise a hand, which shows the gesture cursor. To pan and scroll the page, users close their hand and make a fist, as if they’re grabbing it. To zoom, users can grab and then pull the page toward themselves to zoom in, or away from themselves to zoom out. To press a link, a user can hover over a link with an open hand, and then "press" by moving their hand towards and then away from the screen.

10-foot design considerations

Distance from the screen

10-foot (or 10') design applies to experiences that are optimized for the living room. Most Xbox One users connect their Xbox to a television and sit about ten feet away from the screen. This distance can make basic tasks on traditional webpages more difficult. For example, small fonts can be hard to read, and hover menus and small links can be difficult to click.

When designing a webpage for TV, it’s best if the viewable area displays less information overall, and what's there should focus on a confined set of tasks (even consider performing their desired task automatically or select the task by default). Try to keep the webpage simple, to the point, and fully viewable on the screen without scrolling down.

Here are some other guidelines to consider:

• Make fonts and graphics on the site larger to account for viewing distance. People sit proportionally farther from a TV than from a computer monitor of the same size.
• To avoid a cluttered appearance on the TV, make the blank space between elements on the page larger. This is typically called white space (or padding) and it's a fundamental aspect of making web content easy to discern and navigate.

Design for voice

New in Internet Explorer for Xbox One is support for browsing the web with voice. With voice, users can say "browse to" to browse to popular websites, and "click on" to click links in the page.

In general, developers don’t need to update their webpages to make them voice-accessible. When you navigate Internet Explorer to your website, it will automatically scan your webpage for links, buttons, and other interactive elements. It takes the text from these elements and builds a list of terms, called a grammar, which is sent to the speech recognition engine. For example, consider the following HTML snippet:

<a href="https://www.microsoft.com"> Microsoft </a>

Internet Explorer automatically generates a phrase, "Click on Microsoft", so that users can "click" the link via speech.

You can ensure that voice works great by doing the following:

• Do not use rasterized text (text in an image). If possible, don’t render your text in images. Instead, use standard HTML elements with CSS to achieve the desired visual text style.

• Avoid duplicating link text.

  Some webpages include many links with the same text, such as "more…" or "read article". When a user speaks the text in a link that is repeated several times in the page, the browser must launch a disambiguation experience, which labels each link with a number so that the user can choose the intended link. Try to avoid repeating text within links.

• Try to use a single <video> element.

  Internet Explorer automatically scans your webpage for the first <video> element and connects the Xbox Media controls to this element so that users can say, "Xbox Play" or "Xbox Pause" to control video playback. If you use multiple video elements, the element that the user intends to play might not be the video that actually plays.

Design for gesture

Also new with Internet Explorer for Xbox One is support for web browsing with gesture. With gesture, you can pan and scroll the webpage, press on webpage elements, and interact with the browser UI.

Sites that are designed for touch typically work great with gesture. Larger hit targets, less information density, and simple interactions will make it easy for users to browse your site with gesture.

Internet Explorer for Xbox One has two features that make it easier for users to browse websites that are not designed for gesture:

Attraction

Internet Explorer automatically applies "attraction" to "pressable" elements on your page, such as links and buttons. Attraction applies a bit of "cursor gravity" to such elements to make it easier for users to press on them.

In general, it’s best to use standard interaction tags, such as <a> and <button> for elements that are clickable. Avoid using non-interaction tags, such as <div> with an onclick event handler. It’s okay to use event handlers – just use them on element types that are interactive by default, such as <button> and <a>.

Auto-zoom

Like touch, gesture is less precise than using a keyboard and a mouse. A user’s hand is represented with a gesture cursor that is approximately 140x140px. On some websites that include buttons and links with tight spacing, it’s possible for a user’s hand to be positioned over multiple links simultaneously. When this happens, Internet Explorer automatically shows the zoom cursor, which indicates to the user that if they press, an automatic zoom will happen, rather than a click on a random link under the cursor:

As you can see in the previous picture, if the user presses where the cursor is currently located, Internet Explorer automatically zooms in so that the user can easily press one link or the other:

To avoid triggering excessive use of the auto zoom feature, design your website so that links and buttons are spaced generously.

Content and functionality

Great 10’ web experiences are optimized for content consumption, as opposed to creation and productivity scenarios. For example, a user-generated video website might support video browsing, playback, upload, editing, and tagging features. A 10’ version might optimize specifically for browsing and playback, and might not offer editing capabilities. Remove links and functionality that don’t make sense in the TV environment such as downloading and uploading functionality.

Keep navigation sidebars viewable on screen and try to fit them to the height of the screen (<~650px height) . This might require reducing the number of items in your navigation elements. If you're optimizing your site through CSS, you can place categories in div tags and hide eliminated categories with display:none.

Interactions – keep them simple

Users interact with Internet Explorer using a variety of input devices, including the controller, Xbox SmartGlass, voice, and gesture. Keep in mind that some interactions that work well with a mouse and keyboard are more difficult to perform using touch or a controller. Avoid using drag-and-drop, hover, and timed interactions.

Navigation and links

Compared with desktop browsing, two key differences in the living room experience are that user is further away and that controller or finger is a less precise input than the mouse. Along with making targets larger, it may also be necessary to remove links that aren't appropriate for TV or seldom accessed links to keep navigation above the fold.

When designing navigation interfaces, make it easy for users to select links and other hit targets by emphasizing selections and making them larger and easy to see.

• Add a hover state to links and buttons to highlight when the pointer has hit its target.
• Make each click target (link, button, and the like) large with ample padding for an expanded target area.
• Avoid using popups elements; they can be distracting and difficult to close.

In these next images, there are two examples of a vertical navigation bar. The first example is designed for a mouse interaction. The link spacing is too close together for touch and controller users:

Navigating to these links requires too much dexterity on the part of touch, gesture, and controller users. Clicking the wrong link can be frustrating.

In this second of the two images, the navigation bar has been modified so that the links are spaced further apart, and dividers have been added that help the user see the hit target area more clearly:

Layout

Size

Internet Explorer for Xbox uses a combination of layout-based zoom and optical zoom to provide a TV-optimized presentation of sites. Websites are automatically zoomed to "fit to width" so that text is larger and legible from a distance. There are several factors that determine this automatic zoom level, including the TV aspect ratio (16:9 or 4:3), the resolution (720p, 1080p), and the size of the "safe area," which is a buffer area around the edge of the TV screen that can be turned on an off by the user.

Because Internet Explorer for Microsoft Xbox automatically optimizes the zoom levels for different hardware, there are a few factors you need to know:

• Websites designed for 1024px width generally look great. Internet Explorer will automatically fit your webpage to width using layout zoom.
  • Websites approximately 1200px or wider cause horizontal scrolling to occur.
• Many TVs are widescreen (16:9). Consider using a layout that takes advantage of the width of the screen, rather than requiring vertical scrolling.
• Internet Explorer for Xbox doesn't support multiple windows, so avoid pop-up windows.

Fixed position elements

Fixed position elements (Cascading Style Sheets (CSS) position: fixed) can interfere with smooth panning and scrolling. Avoid positioning elements this way.

Layout techniques

Internet Explorer for Xbox One supports most of the same CSS3 features as Internet Explorer 10 for Windows, including Flexible Box and Grid layouts.

For a hands-on demos, visit:

• Grid test drive
• Flexible Box test drive

Text considerations

You can increase the legibility of your text by ensuring that it's large enough to be read from 10' away, and by using colors that reduce eye strain.

• Avoid using text that is smaller than 12pt.
• Many televisions have a higher brightness level than a computer monitor. Light-colored text on a dark background can reduce eye strain.

Color guidelines

• Avoid using pure white (rgb(255, 255, 255)) as a background color. Instead, use rgb(200, 200, 200).
• Test your website on low-quality TVs as well as newer HDTVs.

Approaches for 4 screens: TV, PC, tablet, mobile

For maximum customer reach, many websites are designed and tested for several device form factors, including desktop/laptop PC, tablet, and mobile devices.

Multiple, device-specific webpages

Some websites have device-specific experiences (for example, a mobile site). This might be appropriate for some scenarios. For example, if you're designing a special experience for Xbox that's different than your mobile and desktop experiences, it might be appropriate to build a separate, standalone experience. However, it can be costly to maintain multiple independent versions of your site.

A common way of doing this is to detect the user-agent string (either on the client or the server) and redirect the user to a device-specific webpage. To detect the Xbox, search for the "Xbox" token in the user-agent string.

One webpage

Given the proliferation of web browsing form factors and input methods, for most websites, we recommend using a single webpage that works well across a range of devices. Here are some things to consider when targeting multiple devices with a single page:

• Design for mouse, keyboard, touch, and controller
• Design for 1024px width, or
• Use adaptive design
  • CSS Media Queries or JavaScript can be used to change the layout of your page based on properties of the device that is loading the page.
    • On mobile devices, consider reducing image quality to save bandwidth and improve performance
    • Minimize horizontal scrolling on narrow devices to improve readability
• Avoid using plug-ins
  • Use HTML5 audio and video (H.264/AAC/MP3)
• Avoid using pop-up windows

Technical considerations

Internet Explorer for Xbox One and Internet Explorer 10 differences

Windows Internet Explorer for Xbox has the same HTML5 features as Internet Explorer 10 for Windows, except for the changes shown here:

Differences between HTML5 features for Internet Explorer for Xbox and Internet Explorer 10
W3C Geolocation	W3C Geolocation isn’t included in Internet Explorer for Xbox. navigator.geolocation is undefined.
prompt() method	The JavaScript prompt() method isn’t supported.
Copy / Paste with JavaScript	Selection, copy, and paste aren’t supported.
File API	The HTML5 File API is not supported.

 

For a complete list of developer features supported in Internet Explorer for Xbox, refer to:

• Internet Explorer 10 Guide for Developers
• Internet Explorer Standards Support Documents

User-agent header string/ header

The user-agent string is an HTTP header and a string available to JavaScript that identifies the browser, or user-agent. Internet Explorer for Xbox One can send several user-agent strings depending on how it is configured.

Appropriate usage of the user-agent string

Great websites work well across different browsers and form factors. The best way to build code that works across browsers is to do feature and behavior detection, not user-agent detection. For example, don't assume that a feature exists based on the user-agent string alone. To learn more about feature and behavior detection, see Same Markup: Writing Cross-Browser Code.

If you're building a separate website for Internet Explorer for Xbox, for example, a TV-formatted experience, checking for the "Xbox" token in the user-agent string might be an appropriate way to redirect to your TV-formatted website.

Xbox user-agent string tokens

Each of the user-agent strings include two Xbox-specific tokens:

Xbox

• The Xbox token is included in all versions (Internet Explorer for Xbox 360 and Internet Explorer for Xbox One). It will also be included in any future versions of Internet Explorer for Xbox.

Xbox One

• The Xbox One token can be used to differentiate between Xbox 360 and Xbox One.

If you're building a separate website for Internet Explorer for Xbox, for example, a TV-formatted experience, checking for the "Xbox" token in the user-agent string might be an appropriate way to redirect to your TV-formatted website.

Code sample: Detecting the Xbox user-agent strings

var XBox360 = false;
var XBoxOne = false;

if (/Xbox/.test(navigator.userAgent)) {
    if (/Xbox One/.test(navigator.userAgent)) {
        XBoxOne = true;
    }
    else {
        XBox = true;
    }
}

Compatibility View

Compatibility View is a mode of Internet Explorer that allows webpages that were written for older versions of web standards to work correctly. In Internet Explorer for Xbox One, Compatibility View is only enabled if a website is contained in a list of sites that is updated by Microsoft. For more info about the Compatibility View List, refer to Understanding the Compatibility View List. When Compatibility View is enabled on a website, a different user-agent string is sent to the website.

y default, Internet Explorer for Xbox One sends user-agent strings that are similar to Internet Explorer 10 for Windows. Users can choose to view the mobile version of websites. When they do, Internet Explorer for Xbox One sends a user-agent string that is similar to the Windows Phone user-agent string.

User-agent string reference

Here are the user-agent strings that are sent by Internet Explorer for Xbox One.

Compatibility View

Desktop/Mobile

String

OFF

Desktop

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)

OFF

Mobile

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/10.0; Xbox; Xbox One)

ON

Desktop

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/3.1; Xbox; Xbox One)

ON

Mobile

Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/3.1; IEMobile/7.0; Xbox; Xbox One)

 

Fonts

Downloadable fonts are supported via the CSS @font-face feature. The supported font formats are WOFF and TTF. The Embedded OpenType (.EOT) format isn’t supported.

Memory

The Xbox One console has 8GB of total system memory. However, a much smaller amount of memory (~480MB) is available to shared-resource applications such as Internet Explorer. There’s no page file, and applications might be stopped if they use more than this amount of memory.

It’s possible to construct a webpage that requires too much memory to load. Large image elements might not render, or in extreme cases, the browser might exit and return the user to the Xbox home screen. Make sure that your website functions well, and that all resources load correctly.

If your webpage isn’t loading, try these steps to minimize memory usage:

• Reduce the resolution of your image resources.

  By reducing image resolution, your images will download faster, and use less memory. If the display size of the reduced resolution image is too small, you can use CSS to stretch an image back to the original display size. Make sure that you rescale your image using an image editing tool – simply scaling the image down via CSS, or changing formats from .png to .jpg won’t reduce memory usage.

• Only use one <video> tag.

  There is an overhead memory cost for each <video> element on a page. You can use a single <video> element and modify it as necessary (change its position, change the video src attribute, and so on).

Panning and scrolling

Avoid the use of CSS position:fixed, especially on pages that pan or scroll. Internet Explorer can use a "screenshot" of your webpage during panning and zooming operations to make these operations fast and fluid. Fixed element positioning interferes by forcing the page to reimage itself during panning and scrolling.

Internet Explorer for Xbox makes it easy for users to pan and scroll webpages with push scrolling, which automatically scrolls the webpage when the user pushes the cursor to the edges of the screen.

Avoid using <divs> or <iframes> for scrolling content. Use the <body> element of your webpage to contain scrolling content. Push scrolling doesn’t work with sub-scrolling elements. Users must use the right thumbstick to scroll subscrollers.

JavaScript performance

Internet Explorer for Xbox uses the JavaScript engine for Internet Explorer for fast JavaScript interpretation. However, it doesn’t have JIT (Just In Time) compilation, so some JavaScript operations might take longer compared with Internet Explorer for Windows.

Internet Explorer for Xbox also contains performance enhancements for smooth panning and scrolling. To maintain smooth panning and scrolling on your webpage, limit the use of JavaScript that responds to scroll events.

Media formats

Internet Explorer for Xbox uses the JavaScript engine for Internet Explorer for fast JavaScript interpretation. However, it doesn’t have JIT (Just In Time) compilation, so some JavaScript operations might take longer compared with Internet Explorer for Windows.

For optimal video performance, we recommend that you encode your video using the h.264 "high" profile at 720p resolution.

Extensions: Plug-ins, ActiveX, and downloads

Plug-ins, like ActiveX controls, Browser Helper Objects, Toolbars, and Explorer bars aren’t supported in Internet Explorer for Xbox. HTML5 audio and video are available for high quality media experiences.

File downloads and executable programs aren’t supported. All file downloads are blocked. HTTP and HTTPS protocols are supported. All other protocols are blocked.

Debugging and testing

To develop and debug your website for Internet Explorer for Xbox, you can use Internet Explorer 10 on Windows 8.

Disable ActiveX controls

Because Internet Explorer for Xbox doesn’t support plug-ins, you’ll want to make sure you disable any ActiveX controls, such as Microsoft Silverlight or Adobe Flash. To do that easily, turn on ActiveX Filtering.

In Internet Explorer 10:

1. Click Safety, and then click ActiveX Filtering.
2. Reload your webpage by clicking the Refresh button.

You can turn off ActiveX Filtering by following the same steps.

Layout

Be sure to test your size at a variety of zoom levels, as these will be automatically adjusted on the Xbox based on the user’s TV type and connection.

• In Internet Explorer 10, click Tools, click Zoom, and then click Custom…
• Test a range of zoom levels from 100% to 185%.

You can change the user-agent string in Internet Explorer 10 by using the developer tools:

User-agent string

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

FAQ

Q: Can users manage their own cookies?

A: Yes. Users can delete their cookies and all their browsing history in Settings.

Q: What about Xbox 360? How do I build a site for both versions of the browser?

A: In general, adhering to modern web development practices, such as feature detection and flexible layout, will produce great results in both browsers. For more about Internet Explorer for Xbox 360, see the Internet Explorer for Xbox 360 Developer Guide.