This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Microsoft is making some bold claims with the release of Internet Explorer 9 Beta. They explain that other browsers, unlike IE9 Beta, only use 10% of your PC's capabilities; they show how websites will be streamlined and work faster by taking advantage of your graphics processing unit (GPU), and how a range of new features will provide a richer experience when combined with Windows 7.
Today, we will be looking at what new features IE9 Beta has to offer, and how it performs when bench-marked against Firefox, Chrome, Safari, and Opera.
Download and Installation
In order to run in Internet Explorer 9, you need to have one of the three following operating systems:
- Windows Server 2008
- Windows Vista
- Windows 7
As you would expect, there are 32-bit and 64-bit versions, both of which require at least 512MB of RAM to run.
Depending on your operating system, you need between 70MB and 200MB of hard drive space. To be honest, as long as you're running one of the three operating systems listed above, I don't think are going to have any problems.
Microsoft have set up two dedicated websites for the deployment of Internet Explorer 9.
IE9 can be downloaded from either of these websites; both sites are best viewed through IE9 to show off its highlights, new features, and performance enhancements. The Test Drive website provides dozens of application demos, each of which are tailored to show off IE9's capabilities. We will be taking a look at the demos and benchmarking tools later in the article.
Before You Install
If you have Internet Explorer 8 installed, please be warned: if you install the 64-bit version of IE9, your 64-bit version of IE8 will be uninstalled. I haven't tested if this is true for the 32-bit version but I wouldn't see why it would be any different.
As far as I could see, IE9 retained all of my bookmarks, favorites, and so on, but you may want to backup your data just in case.
The installation should run smoothly. I am using a Windows 7 system with fairly up-to-date hardware. I can't vouch for other operating systems, but during the install a Windows update occurred and it needed a full reboot. I have since confirmed this with several other Windows 7 users, all of which experienced the same install steps.
I can imagine a Windows update will be provided prior to the full release of IE9, hopefully that will render the reboot unnecessary in the future.
Top New Features
Hardware Accelerated Graphics and Text
It appears that right from the start, the developers of IE9 had speed as a primary objective. Hardware accelerated graphics allow websites to run smoother and faster in your browser. Elements such as graphics, text and video are now rendered by your GPU instead of the CPU. We will see the effects of this during the benchmark tests later.
Refined, Cleaner User Interface
Microsoft has really toned down the browser's interface. When compared to Firefox or IE8, you can see just how much fat has been trimmed from the overall application. The address bar no longer extends across the top, the independent search bar has disappeared, and most noticeable of all is the missing status bar from the bottom of the screen.
Subtly, the navigational buttons now change colour to match a websites theme or favicon: a nice surprise when you first notice.
Pinned Sites, Jump Lists and Other Windows 7 Integrations
Anyone using Windows 7 will know how much more useful the Windows task bar is compared to the previous versions. Thankfully, IE9 now works with the task bar to add extra usability to your favourite websites.
By grabbing a tabbed web page, you can tear it from the browser and pin it to your task bar. Not only can you open those sites like any other application, but now you can also interact with your pinned websites by right clicking and accessing what's called a "Jump List". For example, twitter.com's jump list offers the following tasks: new tweet, direct messages, mentions, favorites, and search, right from your Windows 7 task bar. This is a huge time saver!
The Thumbnail Preview Controls allow you to navigate a menu or pause a video from your task bar. If you have ever used Windows media player from your task bar then you can imagine what this is like. I'm sure websites like YouTube and Facebook will be implementing this very soon.
New Tab Page
It's not unusual to see a page where your bookmarked or favorite websites are displayed for easy navigation. Safari offers a great example of this, but IE9 has taken it one step further. Whenever you open a new tab, you are shown your most popular webpages with their favicons and page titles next to each other. The added benefit here is the activity meter, which displays your browsing habits alongside your popular web pages. If you are a fan of this feature in other browsers then this is a welcomed addition to IE9.
As I mentioned above, the address bar is now compacted and the search bar is missing altogether. Microsoft has ingeniously combined the address bar, and search bar into one box. You can now navigate to a website, query a search engine, and browse your history or favourites all from the same box. You even have the option of turning on search suggestions, which are returned in real time as you type in your query.
At first I was concerned about privacy: how does the browser know that what you're typing is not to be shared with search engines? Well, IE9 put you in control of your information and allows you to control what is and isn't sent to search engines. It's almost like they thought of everything!
In keeping with its cleaner interface, IE9 has changed the way notices and alerts are presented. Previously, notifications may have pushed web page content further down the browser or alerted you with a pop-up box, which obstructs your view of content. Now, all notifications are shown in the Notification Bar at the very bottom of the browser. With a clean and informative design, you can confirm a download or update an add-on without disrupting what you were doing.
Download Manager, and SmartScreen Filter
All downloads will now be managed by IE9's download manager. If you are familiar with Firefox, you will recognize many of the same features; these include a default download folder, a separate 'Download' pop-up box (which displays the name, file size and location for each download), and the ability to delete, view or clear all downloads.
However, that is where the similarities end. IE9 now comes with integrated malware protection called SmartScreen.
SmartScreen is "a groundbreaking browser feature" developed specifically to protect you from malicious downloads.
By using real-time data, each download is assigned a reputation according to how many times that download has been reported as malicious. The more severe warnings a file acquires, the higher SmartScreen judges the download to be a risk. According to Microsoft: "Internet Explorer 9 is the only browser that uses download reputation to help users make safety decisions." I can't wait to see this in action, but I can't help wondering if this could be abused by malicious users incorrectly reporting files.
IE9 cleverly renders that irritation obsolete. In situations where other browsers normally hang, IE9 confines the problem to one tab, allowing you to close the tab and continue browsing without disrupting your work. No more checking your history and wondering which one of your tabs crashed your browser; well done, IE9.
Like many of the features covered so far, this one is also unique to IE9.
Compatibility View works by analyzing popular websites and testing their compatibility with IE9. If a website does not meet certain criteria, a new button appears alongside the refresh and stop buttons. If you choose to click the button, "legacy document mode" is activated.
Legacy Document Mode really means displaying websites in the same way that Internet Explorer 8 does. This way, if there are any elements displaying incorrectly, you can turn on the compatibility view, and hopefully resolve any issues. Also, IE9 remembers which mode/view you prefer, and automatically selects this next time you visit the page.
After trying this myself, I have yet to see any difference between views.
I should also note that a websites compatibility is predetermined by the Internet Explorer team. I can't help but wonder what criteria are websites being judged upon for either compatibility?
Add-On Performance Advisor
This feature first appeared in Internet Explorer 8, and is simply a natural progression for its capabilities.
Many browsers now offer add-on applications; these can range from search engine optimisation tools to e-mail checkers and more. The performance advisor simply notifies you if an add-on performs poorly and will give you the opportunity to disable it.
I have primarily used Firefox for several years, and I am quite an advocate of its add-ons. I really wish this feature was available, as I am often disabling plug-ins for suspected performance issues.
Markup and Standards Support
Internet Explorer 9 was built with modern standards in mind. With developers and clients already trying out their websites in HTML5, SVG, and CSS3, IE9 appears to be focused on extensive support for modern standards. I was surprised to hear that they have invested a large amount of time and work with standards organizations such as W3C. To ensure that they stay ahead of the game, they have contributed over 2000 test results to the governing standards bodies to "âhelp same markup become a realityâ."
If you have yet to see HTML5 in action, I recommend you visit the IE Testing Center. There are some fantastic canvas and benchmarking tools to play around with. Personally, I love the new video and audio elements, which allow for fast and easy media content on nearly all popular modern browsers.
The support for HTML5 in the IE family first began with Internet Explorer 8. IE8 does not support most of the newer HTML5 features, and when compared to other modern browsers, really flags behind. This is why IE9 chose a different approach, one which utilities hardware acceleration through Windows and your graphics processing unit. Combined with added support for new elements and better HTML parsing, IE9 is already a step ahead of the competition where HTML5 is concerned.
Once again IE8 laid the ground work for IE9 in terms of compliance for cascading style sheets by centering on CSS2.1. If you are a developer you will know how hard it can be to force IE8 to play nicely with CSS3; unfortunately, there are only a few fixes and workarounds, and even these still present problems. Thankfully, IE9 was built with CSS3 in mind and will be the first version to include many CSS3 modules.
One of the latest trends in web design is the use of @font-face and similar typography enhancements in web pages. IE9 now introduces support for the Web Open Font Format (WOFF), which can work with TrueType and OpenType formats to transform the look of your font-family's in CSS3. After working with Firefox and @font-kits for the last few months, I am excited to see this in action with IE9.
IE9 now supports the following modules from CSS3:
- Backgrounds and Borders Module
- Colour Module
- Fonts Module
- Media Queries Module
- Namespaces Module
- Selectors Module
- Values and Units Module
Scalable Vector Graphics (SVG)
Recently I started working with Adobe Illustrator; after 10 years of working in web design and development (and primarily working with Adobe Photoshop) I felt I could finally devote some time to working with Illustrator and discovering what it has to offer, and in particular, exporting my work to SVG files. This was my first introduction to scalable vector graphics, and I am now starting to see them more and more.
It seems that, like me, Internet Explorer has never dealt with SVG either. It is only with IE9 that we first see interoperable SVG element support. Not only are they complying with standards, but they are also using hardware acceleration, by using our PC's GPU to improve performance when rendering.
If you haven't done so, I would recommend visiting the IE testing center and checking out some of the SVG demos; they have come a long way from growing simple 2-D shapes.
Chakra and Improved DOM
There appears to be a never-ending interpretation of what a 'Chakra' is, especially when it comes to medicine and religion interpretation; and if your background is in web design and development like me, trying to understand an overly complicated Wikipedia page on the subject is far outside the scope of this article.
The new Document-Object Model has also had some spring cleaning. With various improvements, IE9 has increased efficiency and speed when rendering content. For example, previous versions of Internet Explorer have had problems handling white space in the DOM. IE9 has resolve these issues, handling this problem in a more appropriate manner.
Browser Benchmarks & Comparisons
With all this talk of hardware acceleration, modern standards support and improved interoperability, you could be forgiven for thinking that IE9 is the new Holy Grail of modern browsers. It certainly makes some bold claims and to be honest, as a hardened Firefox fan, I want to see IE9 put its money where its mouth is.
As I write this, it is just over 24 hours since the release of the IE9 beta. Anyone monitoring Twitter or following forum topics will already find brief comparisons and benchmarks between several browsers and IE9. I have already seen plenty of pros and cons, valid arguments and sworn allegiances to other browsers when people are asked: 'So, are you migrating to IE9 then?'.
I decided to see things for myself, so I set up a basic benchmarking environment by installing five of the most popular browsers today and testing them against the claims of IE9. Throughout the rest of this article, you will see what tests and benchmarking tools are used, and ultimately how well IE9 fares against the competition.
I used a laptop and desktop PC to perform the tests but included only one set of results with article. I found that the results from testing hardware acceleration had very little difference between a moderately priced 'home office' laptop and my desktop PC. This was also true for testing between 64-bit and 32-bit browser versions.
Here are the system specs for my desktop PC:
- Windows 7 64-bit
- Intel i7 920 D0 CPU @ Stock 2.67 GHz
- Corsair 6GB DDR3 Memory
- ATI Radeon HD 5800 Graphics Card
- ASUS Rampage II Motherboard
I decided upon the following browsers through personal experience and after consulting with other web designers and developers and the '2010 Internet Browser Software Review Product Comparison' list from toptenreviews.com
- Firefox v 3.6.10
- Opera v 10.62
- Safari v 5.0.1
- Chrome v 6.0.472.59
- IE9 Beta v 9.0.7930.16406
- FireFox 4 Beta 6
I wanted to include a list of browsers which are popular and available across several operating systems. I think it's important to say that when the benchmarks were conducted, each browser was freshly installed with the latest version, and no add-ons installed. I have also include Firefox 4 Beta; this was strongly requested by the community and can be seen as added value when comparing benchmark results. As you will see, Firefox 4 looks to be a strong contender when comparing hardware accelerated browsers.
Each of the tests were also performed with the browser maximized and after a fresh reboot. If you take a look at the IE Test Drive website you will see dozens of tests and great looking examples. Everyone will have their favorites and I understand you may feel other tests may be more suited to a benchmark browser comparison. Please forgive me if I have missed a more appropriate test to display here.
Benchmark Test Results
The Acid3 test is actually a set of one hundred tests, grouped into six areas. The test is designed to gauge how well a browser handles various web standards elements. Each of the six areas are represented as colored boxes and a successful percentage score out of one hundred is shown below. The full test results can be quite detailed, if analyzed correctly.
Today I have included the percentage score for each browser. I recommend you visit the Wikipedia page for Acid3 if you wish to read more about it.
CSS3 Selectors Test
The CSS3 Selectors Test runs through forty-one CSS3 selectors and has a total of five-hundred-seventy-four tests. Once the test is completed you will be able to view any buggy or unsupported selectors for your browser. To keep things simple, I have included a score out of five-hundred-seventy-four for each browser.
The HTML5 Test
The score for this test is determined by the browser's support for new and upcoming features of HTML5. Points are awarded as each feature is passed, and bonus points are awarded for special features like supporting audio and video content. I have listed each browser's score out of a possible three hundred points.
This is a great visual test, clearly it has been designed to show off the advancements in IE9. Using the new canvas features of HTML5, we are shown a fish tank, FPS counter and the option to change the amount of fish on the screen at any time. This test certainly depends upon hardware acceleration, the higher end PC will always perform better than these kind of tests. The graph above shows the results for 50, 100, and 250 fish when the browser was maximized to full screen.
I first tried this test in Firefox . . . and very little happened. It was only when I tried this in IE9, that I fully understood the purpose of the demo: to once again show off IE9's hardware acceleration. Just like the FishIE Tank test, the results were recorded in frames per second. The higher the frame count, the better the performance.
I chose this test, because it is interactive, uses 'GPU-powered HTML5 graphics', Canvas, SVG and requires 27 audio elements. I almost removed this from these benchmark tests on the grounds that only two browsers loaded the audio elements. But I kept it in as I feel it highlights real-world problems when it comes to interoperability and modern web standards. The results were recorded after leaving the demo to run for five minutes.
All I can say is they must have used one expensive camera to take a picture! If you have yet to see this panoramic canvas benchmark in action, I suggest you take a look now, because it truly is spectacular.
At first I wondered how I could accurately gather test results. Like the other tests I maximized the browsers. I then clicked each of the images along the bottom and used the first one to zoom in and out multiple times. I recorded the average frame rate for each browser in the graph below using the same method. Not exactly scientific, but I feel it gives an accurate depiction of a real-world example.
Looking at the bar graphs as a whole, it's clear to see two sides to IE9:
- A dedication to hardware accelerated graphics, which clearly pays off when working with HTML5's canvas. You only need to look at the psychedelic test results to get an idea of how well IE9 plays with your GPU.
- An improvement over IE8's efforts to work with modern standards, but it still flags behind when compared to the other browsers.
Here's where things start to get interesting. Microsoft has been promoting IE9's modern standards support all the way along the development trail. In fact, their Beauty of the Web and Test Drive websites have examples, demos, and games all over the place. But with the score of 96 in the HTML5 compatibility test (the lowest score out of all five browsers) I start to wonder how swayed their demos and examples really are.
Of course, some leeway can be given for companies trying to promote their own products, but filling dedicated websites with examples like psychedelic browsing and Canvas Zoom, (both of which cause extremely poor performance in all other browsers) clearly gives the wrong idea on just how HTML5 ready IE9 really is.
At this stage, I'm glad I chose independent benchmarking tools, like the HTML5 compatibility test website. Without moving away from Microsoft's Test Drive demos, you could be fooled into thinking that the latest version of Internet Explorer actually ticked every box for HTML5 and other modern standards.
Unfortunately, the confusion doesn't stop here. Throughout the release of five 'Platform Preview' versions of Internet Explorer 9, Microsoft have been collecting their own test data. These results can be seen at the IE Test Center.
Looking at the 'Cross-Browser Test Results' table, and the HTML5 section, I count only three fails when looking at an older version of IE9. The platform preview version shown in this article already has a greater pass rate than any other browser listed.
In this case, we have conflicting test results. I'm certainly not accusing either side of padding the stats, because you can perform your own tests with IE9 and HTML5 website. I just think you need to be careful when comparing results like this; after all, the HTML5 Compatibility website and the IE Test Center tested for different HTML5 elements.
Pros and Cons
- Clean and interactive interface.
- 'One box' - address bar, search engine query, and favorites/history search in one. This is also now resizable.
- Tabs are now moved up a level and sit alongside the address bar.
- No task/info bar at the bottom of the browser, instead notifications are now shown in an unobtrusive box that appears when necessary.
- Excellent use of hardware acceleration to improve, graphics, text, and images across webpages.
- Improved standards support, such as HTML5, CSS3, and SVG.
- "Tear off" tabs can be pinned to Windows 7 task bar for extra functionality.
- Opening a new tab will show your most popular sites, sorted by activity. You also given the options to reopen previously closed tabs and reopen your last session. Both great features for recovering a crashed/closed browser.
- Removed Internet Explorer 8 without warning.
- Some websites just refuse to load, even with semantically correct markup. In my experience, this seems to be specific to the odd website taking advantage of HTML5.
- Smaller screens, may have problems with tabs sitting alongside the address bar.
- A reboot is required as part of the installation process, this is a minor grievance and may be resolved with a standard Windows update prior to final release.
- IE9 scored the lowest out of the five browsers on http://www.html5test.com. Considering how Microsoft continuously advertise IE9's support for HTML5, you would have expected to perform better.
- Tabs are now moved up a level and sit alongside the address bar. I like the way this looks and feels, but I get the feeling that it may just get in the way further down the line.
It appears Microsoft has clear goals when it comes to IE9. They want to embrace modern standards and contribute to governing bodies like W3C to aid interoperability. IE9 is a massive leap forward from IE8's attempts at HTML5, CSS3 and SVG. And it also feels like this is the browser they wanted to release with Windows 7. Looking at some of the new interface changes, like Jump Lists, reinforces this.
The benchmarks have shown problems still exist between IE9 and HTML5, but the advancements in hardware acceleration really shine through. Bugs do exist, some websites fail to load and it may take some time to get used to the new layout, but we need to remember this is still in beta stages, so maybe we could forgive it for the odd problem throughout development. So despite it's cons, I'm happy testing out my latest web designs in IE9 and I am really excited about the final product.
I hope you have enjoyed this introduction to IE9 Beta and try it out, even if it is only to play PacMan in the IE9 Test Center!