What’s New in IE9

Ricky Onsman
SitePoint Managing Editor

Internet Explorer 9 Platform Preview 7

On 17 November, Microsoft announced the availability of Internet Explorer 9 Platform Preview 7. In conjunction with the release of Platform Preview 7, Microsoft has announced a chat with the IE9 /Chakra team on the Exploring IE blog 18 November at 9 AM PST.

Beauty of the Web! Beauty of the Web? What is Microsoft talking about? “Beauty of the Web” is a key phrase Microsoft is using to describe the recently released beta version of Internet Explorer 9.

Is this some sort of new fandangled marketing mumbo jumbo, or is it true? Does Microsoft really think IE9 will make the Web more beautiful? The dedicated website beautyoftheweb.com makes me think this is worth exploring.

Let’s take a trip through what’s new in IE9 … Don’t forget to take the quiz at the end!

The New User Interface

Figure 1. The new UI

The new UI


The first thing you’ll discover is how lean the new metal is. The absence of toolbars, the minimalist buttons, the super-thin menu bar, the combined search and address bar: it’s all become very clean and simple.

In fact, if I’m not mistaken, it’s the thinnest menu bar out of the box.

Figure 2. Menu bar height (Firefox 4b6, Opera 10.62, Chrome 6.0.472.63, Safari 5.0.2 and IE9 Beta)

Menu bar height (Firefox 4b6, Opera 10.62, Chrome 6.0.472.63, Safari 5.0.2 and IE9 Beta)


A thin menu bar is one thing, a nice aesthetic; but, like a double rainbow, “What does it mean?” Well, this is the first of many times you’ll notice that IE9’s most important feature is that it gives the greatest prominence to the sites you visit most. IE9 deliberately aims to get everything out of the way of your content browsing experience.

This is a critical shift designed to make IE9 better reflect your web experiences and usage patterns. Other developments take this further.

For example, tabs. Finally, IE9 delivers an awesome tab experience. They can now be torn off and split easily, while Windows Snap lets you position them easily on your screen. Simply drag a tab off and drop it anywhere on your screen to give it its own window. Now you can drag one window to each side of your screen and Windows Snap will automatically resize them to sit nicely side by side. You can also snap a window on to a second monitor or into another IE9 instance.

One of my favorite IE9 tab behaviors is if you create a new tab from a page by Control-clicking to open a hyperlink, both the original page and new page become color coded, providing a visual way of keeping related sites together. This has actually been around since IE8.

Figure 3. Tabs can be split off and color coded (in this case the Facebook tabs are in yellow) to keep related sites together

Tabs can be split off and color coded (in this case the Facebook tabs are in yellow) to keep related sites together


Additionally, clicking on the new tab button will present you with an empty tab featuring your most-visited sites, ordered by frequency of visit. Again, IE9 is putting your favorite sites front-row center.

Figure 4. New tabs in order of most viewed

New tabs in order of most viewed


OneBox

The next major enhancement that you’ll notice is that the search box and address bar are now combined into one. Microsoft calls this OneBox.

Typing a phrase into OneBox will present you with a few options. You’ll see a combination of your history, favorites, and suggestions from your default search provider (provided you’ve turned on search suggestions in the address bar’s drop-down menu).

Figure 5. OneBox search

OneBox search


You can do some fancy tricks using the OneBox suggestions and Bing. For example, you can type in Stock [ticker code] or Weather [city name] to generate instant updates on stock prices or the weather in your city.

Figure 6. Get the weather forecast in OneBox

Get the weather forecast in OneBox


Notification Bar

Next up in our journey is the Notification Bar. Any time IE9 wants to notify you of any event—for example, a download, pop-up window attempt, security warning, password saving, or so on—it does so in the super-discreet Notification Bar.

Figure 7. Notification Bar

Notification Bar


The bar remains on the bottom of the current page until you’ve responded to the notification. You can continue to use the site and respond when you’re ready.

As an added bonus, you’ll see that when you run several downloads you can open up the download manager for a consolidated view of all your downloads. You can pause and resume selected downloads at will.

Figure 8. Download Manager

Download Manager


Hardware Acceleration

The next major stop on our IE9 journey is speed. Microsoft has put great effort into ensuring that Internet Explorer is the fastest browser out there. This is one major feat and it’s leading the way in ensuring you gain the best possible browsing experience. For too long your browser has been relegated to CPU-only processing while your GPU sits idly by on the beach relaxing and sipping mojitos. No more, my friends. Yes, that’s right: IE9 renders your DOM (and related elements) in GPU.

This translates into a real-world opportunity to build game-changing online experiences, as showcased on the beautyoftheweb.com site.

I liken the hardware-accelerated web to building desktop apps. Desktop apps are often fast, attach to the GPU, and provide native experiences. This means that you don’t have to scale down your thinking or code when doing tasks that require heavy computation.

Think about viewing a simple list of 1,000 thumbnail images in your operating system’s file manager. Now, when you double-click on an image, it opens instantly, or when you scale the thumbnail size, all 1,000 thumbnails scale instantly, right? Beforehand, you were unable to implement this sort of native experience in a browser due to performance constraints. With IE9, the GPU acceleration of your DOM and the optimizing of your JavaScript computation make this a reality.

The best way to get a real sense of this is to explore the demos at the Internet Explorer Test Drive Site. The Flickr explorer demo is a very impressive example of how IE9 can use its improved performance to present images on a website. It flies in a bunch of images from Flickr and once they’ve arrived, you can click on any image to pop it out, and again to zoom into it.

Figure 9. Flickr Explorer

Flickr Explorer


These sorts of native experiences are possible in part because of the GPU acceleration.

There are heaps more of these speed demos over at the Internet Explorer Test Drive Site, and other demonstrations of the new power of the IE browser. Feel free to download IE9 and go over and have a play. And while you’re there why not compare the performance with alternate browsers: IE9 rates very highly in my experience. Be aware that you will need to have Windows 7 installed in order to run IE9.

I’d be remiss if I failed to discuss how IE9 has also implemented a comprehensive performance stack beyond hardware acceleration.

Performance: More than Meets the Eye

The IE team has posted a great deal on their blog about the breadth of considerations in implementing a high-performing browser. They cover everything from JavaScript benchmarks, common benchmark scope, multiple subsystems in building a page, and how a page is really composed.

I wanted to highlight some common considerations in performance. One of the more popular benchmarks measures pure JavaScript grunt.

It turns out the IE9 beta handles its own, leaving the gap between the fastest JavaScript engine and IE9’s Chakra engine at less than 100ms.

note: Fun fact

That’s less than one-quarter of a human blink, which measures at 300-400ms.

Figure 10. JavaScript benchmark courtesy ietestdrive.com

JavaScript benchmark courtesy ietestdrive.com


But there’s more to the performance story. Consider what else happens when you try and load a page. Again, the IE team have described this in great detail, but to summarize: when a page loads there are multiple considerations. There’s networking (the IP bits), HTML, XHTML, SVG parsing, CSS layout, JavaScript, marshaling and the native OM (where JavaScript talks to the DOM), DOM formatting, block layout, and finally the actual rendering (where the pixels hit the screen). There’s a lot that goes into just rendering a page.

Just look at the break up of these elements on a standard news site in IE8.

Figure 11. News site rendering performance profile courtesy IEBlog

News site rendering performance profile courtesy IEBlog


IE9 outperforms because it takes all these into consideration.

On the Browser Help Desk

In my experience, the number one cause of poor general browser performance is plugins and add-ons. Often, when a browser takes too long to load, or hangs on a page, you can point to a plugin, add-on, or toolbar. I’m not saying add-ons should be avoided, but they do need to be watched, particularly if you want to optimize for fast load times.

IE9 gives you two ways of ensuring you’re unimpaired by slow add-ons.

First, if an add-on is noticeably slowing load times, IE9 will fire off a notification via the Notification Bar. This will politely inform you that you may want to check your add-on load times.

Figure 12. Add-on Notification Bar courtesy IEBlog

Add-on Notification Bar courtesy IEBlog


Figure 13. Add-on load times courtesy IEBlog

Add-on load times courtesy IEBlog


Second, you can open up the Manage Add-ons dialog at any time to tune and optimize for a fast load time.

Figure 14. Manage Add-ons courtesy IEBlog

Manage Add-ons courtesy IEBlog


Site Pinning

The final stop and my favorite innovation is … Site Pinning. You’re sick of hearing about it by now, I’m sure, but I feel compelled to say it one more time: IE9 puts the sites you visit front-row center. Site Pinning is the premier example of this.

Site Pinning is the ability to drag a site onto the Windows 7 taskbar and have it at your disposal whenever you need it, as if it were a Windows app.

That’s it. Just grab the favicon from the OneBox (that’s the address bar for you old schoolers), and drop it onto your taskbar, and you have a pinned site.

Figure 15. A pinned site

A pinned site


In this particular instance, I’m using Michael Kordahi’s personal blog to demonstrate. There’s a lot going on here. Let’s explore …

First up, you’ll notice that the pinned icon is bigger than your standard resolution favicon.ico, which normally measures 16x16px. In order for your favicon.ico to look awesome when pinned, you’ll need to edit it to at least support 16×16, 32×32, and 48×48. This will ensure that it looks great on an expanded taskbar. Notice also that the back and forward buttons have automatically picked accent colors from the favicon.ico.

note: Fun Fact

.ico files support multiple resolutions. This comes in handy when you use .ico files in Windows and want to scale them up.

Next, you’ll notice that even when your browser is closed, the icon stays on your taskbar. This allows visitors to launch straight to your site from their OS, much like any other app they may have installed natively.

Figure 16. An unopened pinned site

An unopened pinned site


Now, on to the Jump Lists. The vast majority of Windows users love their taskbar-pinned apps and their accompanying Jump Lists. IE9 gives you the ability to add a Jump List to your site for direct and deeper access. Look again at the expanded context menu from the pinned icon for Michael’s blog, and you’ll notice there are direct links to his Home, Contact Me, and Photography pages. Implementing this is easy.

Simply add this to the header of your site:

<link rel="shortcut icon" href="/favicon.ico" /> <meta name="msapplication-task" content="name=Home;action-uri=http://delicategeniusblog.com;icon-uri=http://delicategeniusblog.com/favicon.ico;" /> <meta name="msapplication-task" content="name=Contact Me;action-uri=http://delicategeniusblog.com/?page_id=674;icon-uri=http://delicategeniusblog.com/favicon.ico;" /> <meta name="msapplication-task" content="name=Photography;action-uri=http://delicategeniusblog.com/?cat=12;icon-uri=http://delicategeniusblog.com/favicon.ico;" />        

The syntax here is fairly simple; each msapplication-task item points to a URL on your site. This is great for your static URLs. But IE9 takes this a step further. You can create Jump List items dynamically, on the fly. This is accomplished by calling a simple JavaScript method, like so:

<script type="text/javascript">  function initApp() {    // check of both IE9 and if the site is loaded from the taskbar.    if (window.external.msIsSiteMode()) {    // add the “Recent Visits” category in the jumplist    window.external.msSiteModeCreateJumpList("Recent Visits");    // add a jumplist item of the current page – this could be any URL    window.external.msSiteModeAddJumpListItem(document.title, document.URL, 'http://delicategeniusblog.com/favicon.ico');    // This will refresh the jumplist to reflect your changes    window.external.msSiteModeShowJumplist();    }  }  window.onload = initApp;</script>    

Simple, right? You can add items on the fly; you an even specify an alternate .ico file for each Jump List item.

Next up, you can augment the main icon on your taskbar if there’s activity on your site. This is particularly helpful if your visitor has minimized your site.

Take a look at this implementation by Twitter.

Figure 17. Use a pinned icon to track site activity

Use a pinned icon to track site activity


It shows you the number of new tweets as they come in by overlaying an icon. This can be accomplished by a very simple method call:

// Adds an overlay iconwindow.external.msSiteModeSetIconOverlay(iconUri, toolTip);// removes an overlay iconwindow.external.msSiteModeClearIconOverlay();

Lastly, pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar:

// add an event handlerdocument.addEventListener('msthumbnailclick', onButtonClicked, false); // add the buttonsvar btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip); // refresh the taskbarwindow.external.msSiteModeShowThumbBar(); // call a javascript function when the button is pressed.function onButtonClicked(e) {   switch (e.buttonID) {     case btnPlay:       play();       break;   } } 

The result is that a right click on the pinned icon on Michael’s taskbar will display the option to control an audio file on the Channel 9 site, without having to open the site in a browser.

Figure 18. Use a pinned icon to trigger an action

Use a pinned icon to trigger an action

Over at the Microsoft Developer Network site, you’ll find a comprehensive tutorial on the role that Site Pinning can play in integrating Windows 7 and IE9. .

That’s It for Now

That concludes our introduction to IE9. I trust you can see that its design and technology is quite considered.

With this as our foundation, in our next article, we’ll dig deeper into a more developer-centric exploration of IE9’s support for HTML5, CSS3, and more.

Stay tuned.

Think you’ve picked up on some of IE9’s major innovations? Test yourself: take the quiz!

note: SitePoint Content Partner

This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you—our readers.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

No Reader comments

Comments on this post are closed.