Flip ahead browsing

  • Article

Flip ahead allows you to explore favorite websites like you would a magazine. By implementing flip ahead, you enable your users to flip through a news article or an online catalog, regardless of their actual location on the page. Visitors no longer need to click a Next button to go to the next page. (For maximum browser compatibility, maintain the "Back" and "Next" navigation in addition to flip ahead.)

This topic contains the following sections:

  • Enabling flip ahead
  • Determining flip ahead targets
  • Identifying flip ahead targets
  • Prioritizing flip ahead targets
  • Recognizing content patterns for paginated content
  • Find out more

Enabling flip ahead

Keep in mind that flip ahead is only available in Internet Explorer in the new Windows UI (not Internet Explorer for the desktop), and you must opt in to use it.

To enable flip ahead

  1. Launch Internet Explorer 10. If you're using touch, swipe in from the right. If you're using a mouse, move the cursor to the top-right corner of the screen.
  2. Tap or click Settings > Internet Options.
  3. Under Flip ahead, toggle Turn on flip ahead to On.

We think your users will love flip ahead on their touch-enabled devices. But if they don't, they can still use navigation buttons, key combinations, or mouse buttons to get where they want to go.

Determining flip ahead targets

Windows Internet Explorer tries to offer a flip ahead suggestion of a page that might logically come "next" only when it's appropriate, like in the following circumstances:

  • Flip ahead stays out of the way when the Forward button is active. Users accustomed to using buttons to navigate can still use them.
  • For the next page in a sequence, such as in a multi-page news article, between blog posts, or in a photo slideshow
  • When there's no next page, Internet Explorer can suggest appropriate links from the current page. For pages that are gateways to content, such as the homepage of a news site, flip ahead waits for the user to select a starting point before making suggestions.

Internet Explorer determines its flip ahead suggestions in a few ways:

  • Content pattern recognition: Recognizing common content patterns for paginated content
  • Domain-specific rules: Rich rule sets for popular sites that lack webmaster-identified targets
  • Webmaster-identified targets: optional markup applied to webpages

Next we'll show you how to add simple markup to your webpages to control the flow of pages in the flip ahead experience for your users.

Identifying flip ahead targets

You can control the flip ahead experience on your website using the HTML 4.01 rel attribute on the link element. For example, you can determine the appropriate order of a site's content (oldest to newest, or vice versa), or maintain parallel sequencing for different categories of content (one sequence for news, one for blogs, one for forums, and so on).

This diagram that shows an example markup implementation for paginated and sequenced content:

In this example, the home page links to a news article. You can tell that flip ahead is enabled by the following link element in its first page's head element:

<link rel="next" href="/news/article1.aspx?page=2"/>

By setting the link element's rel attribute to "next" and its href attribute to a relative link to the next page of the article, we've instructed flip ahead to navigate to that second page.

The second page of the article has the following link elements:

<link rel="next" href="/news/article2.aspx"/>
<link rel="prev" href="/news/article1.aspx"/>

This page has two link elements that enable flip ahead: The first link element indicates that the next page in the sequence is actually a second article. The second link element indicates that the previous page in the sequence is, as you'd expect, the first page of the first article.

Finally, the third page of the article has the following link element:

<link rel="prev" href="/news/article1.aspx"/>

If you finished one article, you'd expect to flip back to the beginning of the previous article. This link element shows that if you used flip ahead to flip backward, you'd navigate to the first page of the first article.

Prioritizing flip ahead targets

Targets that you identify using the rel attribute of the link element take precedence over any target "suggestions" that Internet Explorer may determine.

Recognizing content patterns for paginated content

Flip ahead can recognize common content patterns in numerous languages to identify navigational elements in paginated content. These patterns range from simple text strings like "Next »" to complex elements incorporating numbers, symbols, and text strings.

For example, this screen shot is a navigational element for paginated content on Bing:

The following screen shot is a navigational element for paginated content on Asahi Shimbun (from Japan):

Be aware that you should not assume that having content patterns that match these examples will suffice to have flip ahead work on your website. If you want to ensure that flip ahead works reliably, always use rel="next".

Find out more

To learn how domain-specific rules can provide a richer experience or how Microsoft determines flip ahead behavior for sites, see the IEBlog post, "Introducing Flip Ahead."