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 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)
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
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
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).
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
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
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
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.
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
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
note: Fun fact
That’s less than one-quarter of a human blink, which measures at 300-400ms.
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
IE9 outperforms because it takes all these into consideration.
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
Figure 13. 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
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.
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
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
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
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
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:
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
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.
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.