Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 02 2010

12:32

Name One Thing About Web Development You Never Saw Coming

Advertisement in Name One Thing About Web Development You Never Saw Coming
 in Name One Thing About Web Development You Never Saw Coming  in Name One Thing About Web Development You Never Saw Coming  in Name One Thing About Web Development You Never Saw Coming

Not that this is universally true, but some people look haphazardly into a field before deciding to dive in. We do the odd bit of research, investigating the ins and outs, slowly developing expectations about this new arena of work. Expectations are not necessarily bad to have; they can be a powerful motivator. But sometimes our expectations are shattered by a development that we never saw coming.

“Shatter” sounds a bit dramatic, but a situation can certainly get derailed. Regardless of whether this changes the course of your career, it can still knock the wind out of you. Perhaps worst of all, you can’t really prepare for something that you didn’t expect. That is where this post begins. What’s past is prologue, and many of you are bound to have reflections on how those twists and turns of yesterday can help guide your development today.

Shattered Glass in Name One Thing About Web Development You Never Saw ComingWhen we’re hit by something that wasn’t on our radar, our expectations can shatter. (Credit)

Once again, we turned to our social media friends and followers for examples of unforeseen changes in the design and development world that tripped them up. Hopefully, by going over some of these pitfalls, we can be better prepared for the next ones — or at least be prepared for their fallout. With the way communities are constantly developing, changes are bound to surprise us, but if we are aware of how quickly they can occur, we might just be better able to adapt to them.

A Better IE

“Did someone say ‘standards-compliance’? Well, it couldn’t have been Microsoft. Oh, it was?”

A chill ran over the World Wide Web as we heard the news — and saw the proof — that Internet Explorer was going to comply with the standards that the rest of the Web had been adhering to for a while. And it took only the ninth iteration of its browser for Microsoft to finally reach the shore from which the rest of us have been waving to them.

Distantshore in Name One Thing About Web Development You Never Saw ComingYears after setting sail on the cyberspace waters, IE finally lands on the shore we have been occupying for years. (Image credit)

Many in the design and development community have long given up on the Microsoft crew, and many had vowed to stop catering to the IE crowd by not adding the extra code and tweaks that previous versions of IE required. So, when Microsoft announced that IE9 was bound for the market, you can imagine that the community was waiting with less than baited breath. Then news filtered to the public about the bells and whistles it would have, and people became shocked at the prospect of IE becoming compliant.

Lesson Learned
So, what did we learn from this development that we never saw coming? With enough pressure and time, suckage can end. There was a time when Microsoft was setting the agenda and didn’t have to comply to anything. It was on top, and no one could challenge its grip on the market, so it saw no need to change. But all that is past. It is finally stepping up to the plate.

What our Friends and Followers Said

  • IE9 is remotely good!
  • Internet Explorer is supporting open standards.
  • IE9 as we know it now.
  • An excelling IE9.
  • Internet Explorer becoming a fairly standards-compliant browser.
  • IE9 being pretty awesome!
  • IE to support recent fancy stuff like HTML5 canvas, video, audio, clean CSS3 and more to come with IE9.
  • Microsoft’s commitment to Web standards in IE9.
  • Internet Explorer actually getting better (IE9 looks promising… let’s just hope).
  • Yes, IE9, and especially its download manager!!

Mobile Web Explosion

“A Web you can take anywhere? Are you talking sci-fi?”

Not exactly, although we weren’t exactly prepared for this by Back to the Future 2. The mobile Web has been a game-changer for the design and development community, and it caught many of us by surprise. It doesn’t seem to be slowing down either. Quite the opposite: the market is growing by leaps and bounds. What some assumed to be a fad has forged an entirely new direction for the market.

For the longest time, the trend was to expand our viewable spaces. Designers planned for a larger Web, breaking out of the standard 960 grid, believing that the Internet would be grandiose and viewed on large screens. Things took a turn, and the Web was narrowed to much smaller mobile devices. The mobile Web exploded and seems to have created a virtual black hole that is pulling countless surfers in. People have fallen in love with the idea of taking the Web wherever they go, and they aren’t looking back.

Lesson Learned
While increasing the size of viewing areas is still a trend in its own right, few of us expected so many people to opt for a compact Web. Convenience outweighs presentation at times, and many want constant access to the Internet. Basic often beats bulk.

What our Friends and Followers Said

  • A mobile revolution.
  • The explosion in mobile Web and applications!
  • Designing for browsing on mobile devices (cell phones mainly).
  • Designing for cell phones! When I started in Web design, I’d never have guessed that.
  • Web browsing on small (mobile) devices.
  • I definitely didn’t see mobile browsing being at the level it is today (Thanks, Apple!).

Social Media Dominance

“Why would anyone care about a blogging platform that limits you to 140 characters?” “Who cares about social networking? We’re running a business, not a high school.”

I wonder how those words tasted when they were eaten? Social networking dominated the Web almost as soon as it hit the scene, and it continues to attract more users than most of us could have imagined. The many social media outlets and groups out there have brought us connectivity as well as insight into the communities that use them. Who saw that coming?

Dozens of social media networks are gaining traction, creating new avenues for marketing in the process. They are attracting not only veteran Web users, but also millions of people who previously saw little or no use for the Internet. No wonder these networks are dominating the market: they satisfy a need that so many didn’t realize they had.

Lesson Learned
What have we learned? That most people think in 140-character bursts of thought? Not exactly. Rather, we’re seeing the power of this connectivity and the way the Web can provide a global fabric of social communication. Many of us miscalculated the appeal of a socially interactive Internet, but now we see that it is unstoppable. You can’t stop the signal, as Joss said.

What our Friends and Followers Said

  • Twitter! I thought micro-blogging and other social media arms would be a passing fad. Boy, was I wrong.
  • The omnipotence of Facebook.
  • More than half a billion people using a website (Facebook).
  • Facebook advertising around the ground at Old Trafford against Liverpool on Sunday. Mad!
  • Facebook addiction.
  • Massive social media sharing on every pixel online.
  • Social media overkill.
  • With that, the herd of Social Media “experts.”
  • Twitter proving to be popular/useful.
  • Twitter. I still don’t see any redeeming value to it, even for reciprocal linking.
  • Social media integration.
  • Hundreds of thousands more people trying to earn XP and levelling up (Farmville).

Overall Market Stability & Growth

“You mean I can make this my job? What are you smoking?”

So many people never really saw the design and development fields growing so rapidly into a stable and secure job market. Thousands have committed to a career in a field that was once considered better suited to supplementary income or a lucrative hobby. The market now provides an endless supply of work opportunities and continues to evolve.

Everyone knew the Web would be big, but not everyone recognized the need for professional designers and developers to make the most out of people’s experience on it. This stability and growth came as a surprise, albeit a welcome one. The broad and helpful community that has populated this market might explain both the stability and growth. The community has built a solid foundation for the coming generations.

Lesson Learned
Is there a lesson here in our underestimation of the market — aside from what it tells us about our self-esteem (although that’s part of it)? As with the mobile Web and social media, perhaps the lesson here is not to dismiss an emerging market before considering its full implications and potential applications.

What our Friends and Followers Said

  • Just about unlimited opportunities.
  • Here in my country: the respect!
  • Now it’s actually a real job!
  • To actually earn my living with website development.
  • The growth of the now enormous Web dev community and its amazing generosity. Couldn’t have become the designer I am today (being self-taught), and the better designer I hope to be in the future, without it.
  • Well, I was going to say HTML5, but then when you really look at it as a whole, I guess you can infer that all of us never really saw a big market for virtual goods (in this case Web design and development). I was very surprised to see how it kept on growing to this day, and I have high hopes for the future.

Farewell XHTML — Hello HTML5

“What is this nonsense about the return of straight HTML? XML-based code is the wave of the future!”

Or so we thought. As we’re seeing, things don’t always work out the way we expect. When the coding standard went from HTML 4.01 to XHTML, many abandoned ship and cut down this x-citing new path. Some even called XHTML the future of HTML, doubting that HTML would have a significant version after 4.01. They believed the Web had gone the way of the X.

Crossroads in Name One Thing About Web Development You Never Saw ComingNo one expected us to retreat from the path of XHTML. (Image credit)

After nearly a decade of XHTML ruling the Web, HTML5 promises to change all that. We might have to say farewell to the X after all these years. Cue the dropping jaws and shocked expressions. Evidently, XHTML had not taken as strong a hold as we had thought. The standard is now revisiting its roots.

Lesson Learned
Is the lesson here never to give up on the source mindset? Or that the original will persevere in the end? Or better yet, that we should learn to move forward without putting all our eggs in one basket? If we learn that, we will have learned something valuable from this detour.

What our Friends and Followers Said

  • The end of XHTML.
  • Leaving the XHTML path (HTML5).
  • HTML5 form validation. Or rather HTML5 itself.

Bargain Bin

“No one goes bargain hunting for design and programming. Quality always wins out over cheap and quick… right?”

Apparently not. This is another of those dynamic and well populated fields that many people never expected to face. Lo and behold, as in almost every other business market out there nowadays, you will come across people who want bargain-bin pricing from their designers and developers. Some even expect bells and whistles with their bare-bones pricing.

When the economy nosedived a few years back, many people could no longer afford top-shelf design and development. This sad truth, coupled with the slice of the public that undervalues the contributions of these professionals, opened a segment of the market that not only tolerates this undercutting but practically encourages it. Bargain-bin services have cropped up all over the landscape to capitalize on a demographic that is in crisis and, for lack of a better word, cheap.

Lesson Learned
The lesson here is obvious, though perhaps not to those who were caught off guard by this trend. There will always be people who undervalue work that they themselves cannot do, either because they do not really understand what is involved in the process or because they are just dismissive. And there will always be those among us who are willing to satisfy these demands to turn a profit.

What our Friends and Followers Said

  • That there are people out there willing to do it so cheaply.
  • Those free downloadable templates! Now anybody can just get a nicely designed template, eliminating the need for a custom Web designer.
  • Build-your-own-website-for-free website services. People will simply click, drag and add content, and they now have their own website!

Apple vs. Flash

“This idea of community will steer the market, and collaboration between the major players will be the way forward, right?”

Not if Apple has anything to say about it. Talk about shockwaves: many of us never saw Apple’s battle with Flash coming. Potentially deep-sixing a major player on the Web before its prime was a bold move. The field of battle has become anything but friendly as both houses make their play to shape the future of the Web.

Flash has long been a favorite of many designers and developers, while being disliked by just as many. So, it was inevitable that the day would come when we would have to choose whether to commit to or abandon this technology. That day came sooner than we expected; once Apple dominated the mobile Web and app market and turned on Adobe. Flash is not supported on the iPad or iPhone, to the chagrin of some critics, and Steve Jobs made some rather unflattering statements about Flash’s stability and usefulness in the wake of HTML5.

Lesson Learned
The market can change unexpectedly when its leaders suddenly decide to turn the tables. Expect the unexpected is particularly apt here. As one company gains dominance in a market segment, it can effectively twist and turn us however it likes.

What our Friends and Followers Said

  • Flash going away.
  • Apple’s failure to support Flash on iPhone/iPad.
  • The death of Flash.
  • Adobe and Apple hating each other!
  • Apple not adopting Flash!
  • Steve Jobs saying ‘No’ to Flash.

Jumping on JavaScript

“Oh, please. JavaScript is a flashy fad. Give it time; it’ll fade into the ether.”

A fad it is not. In fact, as pointed out by one of our social media friends quoted below, JavaScript has become so prominent in so many applications both on and off the Web that it has become a near necessity. For years, it has been enhancing the experience of millions of users, creating a more dynamic Web.

In the beginning, some designers and developers saw little use for this technology beyond a bit of dazzling. Others saw its raw potential and took the reigns, working hard to elevate our experience of the Web and beyond, and making JavaScript a go-to language for so many developers.

Lesson Learned
In discounting JavaScript so quickly, perhaps we should learn to be not so hasty in judging the usefulness of every new tool that comes along. We should instead devote adequate time to examining the technology and exploring its potential applications.

What our Friends and Followers Said

  • JavaScript becoming essential. I ignored it for years, thinking it was just good for flashy effects.
  • The rise of JavaScript.
  • Server-side JavaScript.

The Persistence of jQuery

“JavaScript is a complicated language, and we just have to accept that in order to use it. There’s no getting around it.”

Well, that argument might have held up until 2006. But then one tool hit the scene to change all that. jQuery arrived and sent waves rippling through the community. Suddenly, this cross-browser JavaScript library was barreling through the ranks to become the most popular library.

Numberone in Name One Thing About Web Development You Never Saw ComingjQuery didn’t take long to cement its status as number one. (Image credit)

In a matter of years, jQuery was created and used on nearly a third of the most trafficked websites. Clearly, there was no stopping it. Opening doors for developers in so many areas, jQuery became another one of those wonderful gifts to the community. Couple that with its open-source licensing, and it is easy to see how it has scaled such heights in so short a time.

Lesson Learned
Looking at the ingenuity of those responsible for the success of jQuery, we can draw a lesson about how we as a community can come together to build better access to popular languages, such as JavaScript. Never underestimate our desire to cut out as many steps from a process as possible and make life easier for ourselves — not to mention the momentum such efforts can generate.

What our Friends and Followers Said

  • jQuery to an extent.
  • The possibilities! Thanks to jQuery and the brilliant minds behind it.
  • jQuery.

An Animated CSS

“CSS is impressive, to be sure, but it’s all about styling. Leave the animation to JavaScript!”

Well, not so much anymore. Since about 2007, Webkit devotees and others have been developing the means to enable elemental animations via CSS. And with CSS3, what many in the community thought would remain a dream is becoming a reality.

CSS is a powerful and popular language for styling websites, and no one ever doubted its adaptability, but the emergence of an animation module still surprised a few of us. Despite the crude animations generated in the early days of CSS, these more fluid JavaScript-like transitions are still quite an interesting development. Another shining example of the leaps and bounds by which the design and development community grows, ever moving forward.

Lesson Learned
Any new lessons we can learn from this? Not really, other than touching on some of the ideas already discussed. Here again, we see that we cannot underestimate the inventiveness of people in this industry. It it one of the main reasons for the dynamism and growth that have brought such stability and scope to the market.

What our Friends and Followers Said

  • CSS3 animation.
  • CSS transitions. But oh, what a joy they are!
  • CSS3 animation!

More From our Friends and Followers

Before turning the discussion over to you in the comments section, we wanted to share a few more comments from our friends and followers about surprises that caught them off guard. Thanks again to all of those who participated in this dialogue and to all those about to contribute!

  • Photoshop CS5 Content Aware.
  • The death of the Web.
  • Chrome was a complete shock when it got released. Really don’t know how they kept it so quiet.
  • Clients from hell.
  • 1. Google doing Web fonts. 2. How easy they are to implement!
  • Flash actually being used.
  • The enjoyment I get from building shifty out-of-date-code HTML email campaigns. Seriously. A/B testing them and seeing an increase in conversions is awesome.
  • Wait… you’re serious??
  • Custom-colored scroll bars are not so hot anymore.
  • In-browser location detection.
  • The number of “professional” Web designers who can barely string together some HTML/CSS.
  • Seeing websites in 2010 that are still being made with HTML tables… Argh!

Related Posts

(al)(ik)

November 17 2010

19:56

IE9 Chakra JavaScript Team Hosting a Q&A Session Tomorrow

The IE9 team announced that they’ll be hosting an open Q&A session via Twitter where developers can ask questions to the Chakra engineers about the new JavaScript engine.

In conjunction with the release of Platform Preview 7, we wanted to give the community the opportunity to ask questions of some of our IE and Chakra engineers. So we’re going to host a 2-hour Q&A chat on Twitter tomorrow morning beginning at 9am PST.

They’ll be fielding questions starting tomorrow Thursday, November 18th from 9-11am PST and you can participate by sending your questions to @ie and using the hashtag #ie9.

Check out the blog post for full details of the Q&A session.

Full Disclosure: I work for Microsoft.

Sponsored post
feedback2020-admin
14:56
you are awesome!
Reposted bysirthomasbolton sirthomasbolton

October 08 2010

11:00

A Call for “Pinning Menus” Sanity

One of the unique new features of Internet Explorer 9 is the ability to 'pin' web sites to the Windows task bar:

While this feature is cool, the way to do it is to use the META tag and drop in some fairly grotty markup into your page:

HTML:
<!-- C-razy IE9 stuff -->
<meta name="application-name" content="Ars Technica"/>
<meta name="msapplication-starturl" content="http://arstechnica.com/"/>
<meta name="msapplication-tooltip" content="Ars Technica: Serving the technologist for 1.2 decades"/>
<meta name="msapplication-task" content="name=News;action-uri=http://arstechnica.com/;icon-uri=http://arstechnica.com/favicon.ico"/>
<meta name="msapplication-task" content="name=Features;action-uri=http://arstechnica.com/features/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-features.ico"/>
<meta name="msapplication-task" content="name=OpenForum;action-uri=http://arstechnica.com/civis/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-forum.ico"/>
<meta name="msapplication-task" content="name=One Microsoft Way;action-uri=http://arstechnica.com/microsoft/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-omw.ico"/>
<meta name="msapplication-task" content="name=Subscribe;action-uri=http://arstechnica.com/subscriptions/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico"/>
 

Via Kroc Camen comes a call for sanity. Kroc argues that the IE 9 team should just use the HTML5 <menu> element and get rid of all that META tag nonsense:

Microsoft, if you want a way to declare a context-menu in HTML in a browser-agnostic way that is both forward and backwards compatible use HTML5’s <menu> element! Even IE6 supports it without any hacks because it was part of HTML4 and thus, not an anonymous element.

As browser UI begins to converge and websites become more and more integrated into the OSes we use, the menu element is there to describe native toolbars, menus and context menus that the user-agent could expose. It would thus make sense to use this to specify the jump lists as it can easily expand in capabilities in the future and it’s way easier for other vendors to get on board with than the horrible hack that was favicon.ico.

Example proposed usage of the <menu> tag to achieve IE 9 pinning:

HTML:
<!doctype html>
<head>
        <title>Ars Technica</title>
        <meta charset="utf-8" />
        <meta name="ms-application-jumplist" content="jump" />
        <style>
                #jump   {display: none;}
        </style>
</head>
<body>
        <menu id="jump" type="context"
              label="Ars Technica" title="Ars Technica: Serving the technologist for 1.2 decades"
        >

                <li><a href="http://arstechnica.com/">
                        <img src="http://arstechnica.com/favicon.ico" /> News
                </a></li>
                <li><a href="http://arstechnica.com/features/">
                        <img src="http://static.arstechnica.net/ie-jump-menu/jump-features.ico" /> Features
                </a></li>
                <li><a href="http://arstechnica.com/civis/">
                        <img src="http://static.arstechnica.net/ie-jump-menu/jump-forum.ico" /> OpenForum
                </a></li>
                <li><a href="http://arstechnica.com/microsoft/">
                        <img src="http://static.arstechnica.net/ie-jump-menu/jump-omw.ico" /> One Microsoft Way
                </a></li>
                <li><a href="http://arstechnica.com/subscriptions/">
                        <img src="http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico" /> Subscribe
                </a></li>
        </menu>
</body>
 

Looks nice to me.

Tags: Front Page IE

October 04 2010

18:22

Internet Explorer 9 Beta: Reviewed and Benchmarked


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

System Requirements

In order to run in Internet Explorer 9, you need to have one of the three following operating systems:

  • Windows Server 2008
  • Windows Visa
  • 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.


Download

IE9 Test Drive Website

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.

Installation

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

IE9 HTML5 Speed Read Demo

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.

Jump Lists

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!

Windows 7 Task bar Controls

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

Popular Sites Grid View

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.


One Box

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!


Notification Bar

Download Notification Bar

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

Download Manager

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 Alert

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.


Hang Recovery

Applications crash; it’s a simple fact. No matter how hard developers try, there will always come a time when your browser comes across an endless JavaScript loop or web page with far too much data to handle. For me, the most irritating time for this to happen is when you have multiple tabs open… not any more.

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.


Compatibility View

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

Addon Manager

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”.”

To enable developers to easily work with IE9 and interoperable markup, the IE9 team concentrated on five key areas: HTML5, Document-Object Model Optimization, CSS3, Scalable Vector Graphics, and Chakra, the new JavaScript engine.


HTML5

HTML5 Pinball Demo

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.


CSS3

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

The Internet Explorer team have nicknamed their new JavaScript engine Chakra.

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.

On the other hand, IE9′s Chakra is an entirely new way of looking at JavaScript engines. In previous versions of Internet Explorer, JavaScript was tagged on to the side; it was never built into the core. Chakra changes things. JavaScript is now part of IE9′s engine, works with multiple CPU cores, and takes advantage of your computer’s hardware. This allows for faster interpretation, compiling, and code execution.

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.


Test System

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

Browsers

IE9 Version

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

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 were installed.

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

WebKit SunSpider JavaScript Benchmark

SunSpider Benchmark Results

Version: 0.9.1

http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html

SunSpider emulates real-world examples of JavaScript. By asking the browser to perform common JavaScript functions, like cryptology, we can gauge how quickly a browser handles. The quicker the JavaScript is executed, the better the engine.


Acid3 Test

Acid3 Benchmark Results

http://acid3.acidtests.org/

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

CSS3 Selectors Benchmark Results

http://tools.css3.info/selectors-test/test.html

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

HTML5 Benchmark Results

Version: 1.0

http://www.html5test.com/

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.


FishIE Tank

FishIE Benchmark Results

http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html

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.


Psychedelic Browsing

Psychedelic Benchmark Results

http://ie.microsoft.com/testdrive/Performance/PsychedelicBrowsing/Default.html

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.


IE Beatz

IEBeatz Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/IEBeatz/Default.xhtm

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.


Canvas Zoom

Canvas Zoom Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/DeepZoom/Default.html

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.


Benchmark Conclusion

Looking at the bar graphs as a whole, it’s clear to see two sides to IE9:

  1. 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.
  2. 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

Pros

  • 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.

Cons

  • 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 of 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.

Summary

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!

September 22 2010

19:47

Chrome Frame is out of Beta!

Big news: Chrome Frame is now stable and out of beta!

Today, we’re very happy to take the Beta tag off of Google Chrome Frame and promote it to the Stable channel. This stable channel release provides our most polished version of Google Chrome Frame to date, allowing users to access modern web technologies like HTML5 on legacy browsers. You now can download the stable version of Google Chrome Frame and users of the Beta will be automatically updated to it in the days ahead. If you’re an IT administrator, we’ve also posted an MSI installer for deploying Google Chrome Frame in your network.

Chrome Frame is now much faster and stable. It's extremely simple to have a site use Chrome Frame:

HTML:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
 

For the next step the Chrome Frame team is focusing on making start-up speed even faster and removing the need for administrator rights when installing the plug-in.

Congrats to the Chrome Frame team!

[Disclosure: Alex Russell, the chipper-looking fellow in the video, and I have worked together at Google and on Dojo before.]

August 26 2010

10:00

innerShiv: Make innerHTML + HTML5 Work in IE

(Various Shivs)

Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE:

HTML:
var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);
 

For example, let's imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section:

CSS:
footer, header, section {
  border:1px solid #ccc;
  display:block;
  padding:10px;
}
 

Unfortunately, even if you are using one of the tricks to force IE to deal with HTML5 elements shivs don't work when dealing with innerHTML before an element is appended to the DOM:

However, the shiv doesn't work in Internet Explorer when an element's content is added with innerHTML before being appended to the document. That's a common use case, and noticeable in libraries like jQuery when you try to append or load (etc.) HTML5 content

Some example bad JQuery code that runs into this problem:

JAVASCRIPT:
$('#example-1').append("<section><header><h3>Example 1:\
  a broken section</h3></header><p>This section element should\
  have a black border like the others. It doesn't in Internet\
  Explorer. :(</p></section>"
);
 

JD's library is the solution to this problem:

innerShiv is a function which takes your HTML string, adds it to a hidden document-appended element in IE, and returns an IE-safe document fragment or collection

Now you can do the following to have things work:

JAVASCRIPT:
$('#example-2').append(innerShiv("<section><header><h3>\
  Example 2: a successfully styled section</h3></header>\
  <p>This section element should have a gray border like the\
  others. And it does! Even in Internet Explorer! Yay!.</p>\
  </section>"
));
 

Note that you don't have to use JQuery to use innerShiv.

August 20 2010

11:00

Attack of the IE Conditional Comment…

Just in time for Friday, James Padolsey wins the award for most creative Internet Explorer detection code:

JAVASCRIPT:
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
//     ie === undefined
// If you're in IE (>5) then you can determine which version:
//     ie === 7; // IE7
// Thus, to detect IE:
//     if (ie) {}
// And to detect the version:
//     ie === 6 // IE6
//     ie> 7 // IE8, IE9 ...
//     ie <9 // Anything less than IE9
// ----------------------------------------------------------
var ie = (function(){
    var undef, v = 3, div = document.createElement('div');
   
    while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]
    );
   
    return v> 4 ? v : undef;
}());
 


[CC-A by Noah Sussman]

That's a pretty creative use of IE Conditional Comments.

[via jdalton]

Tags: Front Page IE

July 21 2010

00:57

Quick Tip: The Best Way to Run Internet Explorer on your Mac


While Mac users do have a handful of resources available, when viewing new web designs in Internet Explorer, the quickest solution is to use Wine, which can create a “wrapper” for the native PC Internet Explorer app! Even better, an app, called Wine Bottler makes adding the IE icon to your dock amazingly simple. I’ll show you what to do in today’s video quick tip!

Be sure to check out our sister-site, MacAppStorm for the full details on how to work with Wine and Wine Bottler!

June 30 2010

08:15

IE9 gets a Web Timing API to measure performance

Web site performance is a very important topic. We should not let our end users wait for our sites and optimizing them for load time and rendering can save us thousands of dollars in traffic. There is a lot of great content out there on performance (spearheaded by Yahoo a few years back). When it comes to testing the performance after the page has loaded though there is a lot of things you can do wrong as you need to test things with timers and hope nothing else happening to your test machine interferes with your results.

The IE9 team wants to make it easier for developers and added a new Web Timing API in the browser. Web Timing is a W3C working draft and the API implemented the NavigationTiming part of the spec in window.msPerformance.timing and offers you a few sets of information without having to hack your own solution:

JAVASCRIPT:
interface MSPerformanceTiming{
     readonly attribute unsigned longlong navigationStart;
     readonly attribute unsigned longlong fetchStart;
     readonly attribute unsigned longlong unloadStart;
     readonly attribute unsigned longlong unloadEnd;
     readonly attribute unsigned longlong domainLookupStart;
     readonly attribute unsigned longlong domainLookupEnd;
     readonly attribute unsigned longlong connectStart;
     readonly attribute unsigned longlong connectEnd;
     readonly attribute unsigned longlong requestStart;
     readonly attribute unsigned longlong requestEnd;
     readonly attribute unsigned longlong responseStart;
     readonly attribute unsigned longlong responseEnd;
     readonly attribute unsigned longlong domLoading;
     readonly attribute unsigned longlong domInteractive;
     readonly attribute unsigned longlong domContentLoaded;
     readonly attribute unsigned longlong domComplete;
     readonly attribute unsigned longlong loadStart;
     readonly attribute unsigned longlong loadEnd;
     readonly attribute unsigned longlong firstPaint;
     readonly attribute unsigned longlong fullyLoaded;
}

You have even more granular control in timingMeasures

JAVASCRIPT:
interface MSPerformanceTimingMeasures{
     readonly attribute unsigned longlong navigation;
     readonly attribute unsigned longlong fetch;
     readonly attribute unsigned longlong unload;
     readonly attribute unsigned longlong domainLookup;
     readonly attribute unsigned longlong connect;
     readonly attribute unsigned longlong request;
     readonly attribute unsigned longlong response;
     readonly attribute unsigned longlong domLoading;
     readonly attribute unsigned longlong domInteractive;
     readonly attribute unsigned longlong domContentLoaded;
     readonly attribute unsigned longlong domComplete;
     readonly attribute unsigned longlong load;
     readonly attribute unsigned longlong firstPaint;
     readonly attribute unsigned longlong fullyLoaded;
}

Read the original post on MSDN and check out the demo on IE Test Drive

June 28 2010

21:35

IE9: Big leap forward, and how we can help the Microsoft inertia

Microsoft continues to impress with its developer preview releases for IE9. They went from a laggard in both performance and Web standards, to regrouping and doing some fantastic work in both regards.

The honourable PPK has detailed the leap forward with CSS (in between watching his Dutch team do well in the World Cup. Not that I am friggin jealous ;)

The sea of green on the CSS compat tables is fantastic news for the Web:

More on IE9 and CSS from PPK:

IE9 promises to be an excellent browser. Its CSS support is now at par with that of the other browsers — although each browser still has its specific areas where it performs less. But we cannot in good faith say that IE is behind the others any more.

There are only a very few declarations in my test that IE9 does not support. CSS columns, gradients, text-shadow, resize, and text-stroke are the only ones, and the latter two are WebKit-only.

Even better news: Microsoft’s filters seem to have just disappeared from IE9. It supports normal opacity; no more filters required. Also, the gradient filter is gone, leaving IE (temporarily?) not supporting it.

Another golden oldie that got dropped is cursor: hand, the MS proprietary alternative to cursor: pointer. That’s not really important in practice (IE6 already supported both syntaxes), but it’s a powerful symbol of the changes that the IE team has wrought.

With so much excellence around I was almost glad when I found one single bug: IE9 doesn’t handle white-space: pre-line right. This bug will be fixed, though. It’s typically a minor point that crops up in a beta and is removed from the final product.

And, it isn’t just CSS that is turning green. Kangax does a fantastic job at looking at JScript and the DOM. Not only does he show the good, but also the areas that still need improvement such as:

Unfortunately, the entire host objects infrastructure still looks very similar to the one from IE8. Host objects don’t inherit from Object.prototype, don’t report proper typeof, and don’t even have basic properties like “length” or “prototype”, which all function objects must have.

Kangax is doing a lot of good here. The more tests and call outs on what IE needs to do to be standards compliant the better. With the new rate of progress from the IE team, it isn’t like the old days where you thought you were talking to deaf ears. Microsoft is listening, and even better than that, they are doing. Now is the time to give them as much info as we can.

What would you like to see?

June 23 2010

21:54

IE9 supports Canvas…. hardware accelerated!

Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release:

With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with where we see the web heading. Many web developers have asked us to support this part of HTML5 and we definitely took this feedback into account as we prioritized our work.

Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. Hardware accelerated canvas support in IE9 illustrates the power of native HTML5 in a browser. We’ve rebuilt the browser to use the power of your whole PC to browse the web. These extensive changes to IE9 mean websites can now take advantage of all the hardware innovation in the PC industry.

Preview 3 completes the media landscape for modern websites with hardware accelerated video, audio, and canvas. Developers now have a comprehensive platform to build hardware accelerated HTML5 applications. This is the first browser that uses hardware acceleration for everything on the web page, on by default, available today for developers to start using for their modern site development.

The third platform preview continues to support more of DOM and CSS3 standards that developers want. Examples here include DOM Traversal, full DOM L2 and L3 events, getComputedStyle from DOM Style, CSS3 Values and Units, and CSS3 multiple backgrounds.

Also included in the third platform preview is support for using the Web Open Font Format (WOFF) through CSS3 font face.

Oh, and Acid3 is coming along too..... as well as a lot of performance improvements.

Congrats to the IE team.

May 05 2010

16:06

New IE9 Preview: Performance, Hardware Acceleration, and Acid3

At MIX, Microsoft showed that they are back in the browser game with a preview of IE9 “platform” (platform seems to mean ‘haven’t got it together as a real browser yet, but we wanted to get it to you guys ASAP’).

Today, they updated the preview as they said they would (claiming they will do new releases every 8 weeks or so).

Table stakes these days is performance. IE8 is so far behind, but the IE team is showing that with IE9 they will be strong contenders:

To go along with this, we haver the GPU story of hardware acceleration. Test drive some new demos such as this Flickr Explorer or the browser flip

There are other tools too:

The Developer Tools in IE9 Platform Preview 2 include new features. The Console window is now a full tab that includes diagnostic information from IE. Developers can use the “Change User Agent String” menu item to experiment with sending different that UA strings to sites with every request, selecting from preset strings or creating their own custom string. This complements another feature we’ve included – the new IE9 UA string. (Steve! Update BrowserScope! :)

This is good timing. Giorgio Sardo of Microsoft is on a browser panel that Ben and I are moderating at Web 2.0 Expo today. The panel has other heavy hitters: Douglas Crockford (Yahoo!), Brendan Eich (Mozilla), Charles McCathieNevile (Opera Software), and Alex Russell (Google). We are going to have some fun :)

March 19 2010

16:23

IE9 Canvas Support Leaked by AMD?

I was on a panel at OSBC with Dave Mcallister of Adobe and Brian Goldfarb of Microsoft. I wanted to talk to Brian about canvas in IE9 but held off until later where I even offered the community up to write the IE code ;)

Someone off the record told me last week “it is coming… don’t worry” but that is rumor. And then Russell Leggett sent me a link to a piece by AMD on IE9 and GPU usage that had two interesting quotes:

The <canvas> element will be accelerated on the GPU via Direct2D and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage.

AMD is working with multiple teams at Microsoft to ensure that technologies such as IE and Silverlight continue to move the PC platform forward.

Put us out of our misery Microsoft. Don’t make us create a http://petitionforie9tohavecanvas.com website ;)

February 11 2010

21:59

The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Smashing-magazine-advertisement in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)
 in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)  in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)  in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

In recent years Internet Explorer 6 has become the browser web designers love to hate. Security issues, JavaScript errors and inexplicable CSS rendering quirks have made it the brunt of many jokes. With IE6 in its twilight and big companies like Google dropping support, it seems like a good time to take a fond look back at our old foe. In this post we’re looking at what Internet Explorer 6 used to be and why its image changed over the years. You can also see the comic in a larger version.

Do we need to review our projects in Internet Explorer 6? Can we stop supporting IE6? If not, how do we handle those users who are still using IE6? And if yes, how can we prompt IE6 users to upgrade? Or how do we convince those who don’t allow their employees to get rid of the legacy browser to upgrade? What do you think? We are looking forward to your opinions in the comments to this post!

Ie6 One in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Two in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Three in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Four in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)


© Brad Colbow for Smashing Magazine, 2010. | Permalink | 223 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ie, ie6, internet explorer

November 20 2009

15:52

Full Frontal ‘09: Stuart Langridge on HTML5 Features

Stuart Langridge introduces us to some of the up-and-coming features we're getting with current and future browsers, a nice complement to Robert Nyman's talk, which covered the advanced features of "mainstream" (IE6-compatible) Javascript. After introducing the features that are there today, he also talks about how we can deal with the browser many of us are still having to support.

The Goodies

Here are some of the things we can look forward to. (Having been part of the large crowd who charged the pub across the road at lunch, I was a bit late getting back, so I missed one or two of these.)

Lists

JAVASCRIPT:
  1.  
  2. [1,2,3].every(function()) // run for all items
  3. list.filter() // find elements in the list that pass the function
  4. list.map() // apply function to each item
  5.  

It takes a mental shift to start taking advantage of features like this. "Certain browsers" *cough* don't yet provide these conveniences, but you can take advantage of them straight away. Or another example is the base2 library - use it now and you'll be ready for the time when it's present in all browsers.

Getters and Setters

As our Javascript apps get increasingly bigger and more complex, we need to borrow principles, patterns, and techniques from "real programming". Getters and setters are the kind of thing we'll need more of. More generally, we'll need to be in the mindset that we're building APIs to components, which others might use; not just an individual making a one-off web app. Stuart shows a couple of techniques for getters and setters: (a) manually defined; (b) using

Storage

We can now
globalStorage works similarly to cookies.

JAVASCRIPT:
  1.  
  2.   globalStorage["kryogenix.org"].visits = visits+1
  3.  

Microsoft userdata behaviour

Consistent database API

Server-Sent Events

HTML:
  1.  
  2. <event -source src="getTime.php">
  3.  
JAVASCRIPT:
  1.  
  2. document.getElementsByTagName("event-source")[0].addEventListener("server-time", eventHandler, false);
  3. function eventHandler(event) {
  4.   alert(event.data);
  5. }
  6.  

Only in Opera right now.

Great. So Do We, Can We, Use it Now or Later?

You can use these features now if you're in a single-browser environment that supports them: app for one mobile; Air app; intranet app (where you've amazingly got Firefox exlcusively on your intranet); HTA. This isn't the sinful act of coding to weird proprietary APIs; it's coding to browsers that happen to support the technologies of tomorrow, today.

The libraries help us get to the future today, as long as they can support APIs compatibly across all the browsers. But it's all a little difficult when the market leader doesn't play ball. Hopefully, Dean Edwards will continue working on Base2 to plug the gaps, but we still have the problem. Around a year ago, it felt like the anti-IE6 might be at a tipping point, but that's died down a bit, and it's not clear how much longer we'll be held back.

What can you do then with IE6? If a number of major websites really held back and stopped supporting IE6, Stuart reckons corporations would upgrade. Imagine what would happen if Google stopped working on IE6...immediate upgrades. Show of hands indicates perhaps 20% of the audience would agree to mass dropping IE6 on their public sites. In Q&A, Stuart later clarifies he's not really proposing an IE6 shutdown switch, more like a helpful suggestion to upgrade.

Silverlight and Flash. Proprietary, not open. If everyone started using Flash, the future is Adobe's future. Let's make it our future instead - we're building the open web. A call to arms for showing strength in numbers.

November 18 2009

18:20

IE 9: Hardware rendering, new JS engine, CSS, standards, and more

With PDC going on, we get a glimpse at the early stage of IE 9. There is some promise, albeit with omissions!

Dean Hachamovitch, IE general manager, gives us an early look whirlwind that discusses:

Performance Progress

The JavaScript engine team members John Montgomery, Steve Lucco and Shanku Niyogi give us an early look at the new JS engine that will ship with IE 9.

Standards / CSS

Although the Acid test score is low:

It is early days, and we do have rounded corners and CSS selectors!

Dean and his team talk over the work they are doing wrt standards.

Hardware acceleration

Finally, IE 9 will surf on the GPU using DirectX/D2D. As well as speeding up performance all around, setting the platform up for CSS transforms etc, we also see side benefits such as nicer fonts.

ie9fonts

What else have you heard from PDC?

November 16 2009

10:30

9 Most Common IE Bugs and How to Fix Them

Internet Explorer – the bane of most web developers’ existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let’s get started.

1. Centering a Layout

Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.

Consider the Following Code:

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

The output you’d expect:

Tutorial Image

But what IE actually gives you:

Tutorial Image

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.

The Fix

The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

2. Staircase Effect

Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:

    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

A standard compliant browser renders it like so:

Tutorial Image

And the IE screen shot:

Tutorial Image

Not a particularly pleasing navigation if you ask me. Fortunately, there are 2 fixes you can try.

Fix #1

The easiest way to combat this is to float the li elements themselves instead of the anchor elements. Just add this and you should be done.

ul li {
	float: left;
}

Fix #2

The second way is to apply display: inline to the enclosing li element. In addition to fixing this bug, it also fixes the double margin bug mentioned below. Purists may not like placing block elements inside inline elements though.

ul li {
	display: inline
}

3. Double Margin on Floated Elements

This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated. And voila! The margin will be doubled in the rendered output. Not really something you’d look forward to while creating a pixel perfect layout.

Consider this code:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

On standards compliant browsers, this is how it looks:

Tutorial Image

But here is how IE 6 decides to render it:

Tutorial Image

The Fix

The fix for this specific bug is to apply display: inline to the floated element and everything works as it is supposed to. Our previous code now changes to:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. Inability to Have Elements with Small Heights

As part of creating a layout, you may need to create elements with very small heights as custom borders for elements. Usually, you’ll just have to add height: XXpx to the style’s declarations and you should be done. Or so you thought. Check the page in IE and you’ll probably do a double take.

As an example, look at the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
}

And the output is just as expected: A 2 px element with a 1 px border.

Tutorial Image

And in IE:

Tutorial Image

Fix #1

The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	font-size: 0;
}

Fix #2

The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	overflow: hidden
}

5. Auto Overflow and Relatively Positioned Items

This bug rears its ugly head when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside. Let me demonstrate. Look the following code:

<div id="element"><div id="anotherelement"></div></div>
#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

And the expected output:

Tutorial Image

And IE’s output:

Tutorial Image

The Fix

The easiest way to fix this annoying bug is to just position the parent element relatively too.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Fixing the Broken Box Model

Internet Explorer’s misinterpretation of the box model is perhaps its unforgivable mistake. IE 6 in semi-standards compliant mode sidesteps this but this issue can still be triggered by quirks mode.

Two div elements. One with the fix applied and one without. The difference in the width and height is the sum of the paddings applied on each side.

Tutorial Image

The Fix

I am sure the quandary with the box model needs neither explanation nor demonstration so I’ll just give you the fix.

The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you’d usually go on about:

#element{
	width: 400px;
    	height: 150px;
	padding: 50px;
}

This now changes to:

#element {
    width: 400px;
    height: 150px;
   \height: 250px;
   \width: 500px
}

Essentially, you add the padding to the original width and feed it to IE 6. The fix targets IE 6 in quirks mode alone so you need not worry about IE 6 in normal mode messing things up.

7. Setting a Minimum Width and Height

Setting an minimum height to an element is absolutely imperative when trying to convert a beautiful design into a pixel perfect design. Unfortunately, IE completely ignores the min-height property instead taking the height declared as the minimum height.

Fix #1

The fix is a hack created by Dustin Diaz. It utilizes the !important declaration to make it work. The snippet looks like so:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Fix #2

The second way is to take advantage of the fact that IE can’t parse child selectors.

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
	height: auto;
}

8. Floated Layout Misbehaving

One of the important concepts of building table-less layouts using CSS is floating elements. In most cases, IE6 handles this with aplomb but in certain cases it fumbles. When faced with unbreakable content or elements whose width exceeds its parent’s width, it causes havoc with the layouts. Let me show you.

Consider this piece of code:

<div id="container">
	<div id="element">http://net.tutsplus.com/</div>
	<div id="anotherelement"></div>
</div>
#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

The expected output as viewed on a standards compliant browser:

Tutorial Image

In IE:

Tutorial Image

As you can see, the first div expands itself to fit the content which ultimately breaks the layout.

The Fix

There is no elegant fix for this bug. The only way to save the layout is to apply overflow: hidden to the element but at the cost of clipping the unbreakable content. The layout will be saved but the extra content won’t.

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. Space Between List Items

IE 6 adds vertical spacing even none is specified in specific cases. Let’s look at the code first.

<ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
</ul>
ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

What it should look like:

Tutorial Image

What IE gives us:

Tutorial Image

Fortunately, there are a plethora of fixes you could try.

Fix #1

The easiest way out is to just define a width for the anchor tags and voila! everything renders as it should. Declaring a width triggers the element’s IE specific hasLayout property. You could instead define a height if you want to.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix #2

The next method is to just float the anchor left and then clearing it.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix #3

The third method is to add display: inline to the enclosing li element. This also fixes the double margin bug as noted above.

li {
	display: inline;
}

Conclusion

And there you have it: the nine most common IE rendering bugs, and how to squash them. Hopefully this has saved you some blood, sweat and tears while debugging your next creation. I’ll be watching the comments section frequently; so chime in here if you are having difficulties implementing the fixes noted here.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!



Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...