I’ve had this idea to build a new type of modal window for a while now. I’ve been fascinated with the idea of using CSS3 to create a better presentation layer for windows, but what has always held me back is the lack of support in the latest Internet Explorer browser. Needless to say, graceful degradation is a solution, but it is very disappointing if the majority of users on the web won’t even see something that you’ve designed.
I’ve been heartened enough in the last month by progress on IE9, enough that I gave it a shot. Though the IE9 beta version did not support CSS 2D transformations, it was assumed by all that the final version would support them, since they were included in the preview version for some time now. As it turns out, this assumption was not unfounded. What we all have as developers now, is the chance to take advantage of technology that, in the coming years, is going to change the web as we know it today. Degradation will still be required, but it will be less of an issue, as the majority of users will either adopt IE9, or be using one of the other browsers, which already support this.
One problem I had to overcome when creating WowWindow, since my chosen framework is jQuery, was the fact that the transform property can’t, by default, be animated, at least not with the jQuery core. Fortunately, I was able to find this very creative solution which monkey-patches jQuery in a way that does not interfere with its normal operations. I’m hopeful that eventually something similar to this solution will be integrated into the jQuery core, even though it means supporting a behavior that is not accommodated by all browsers.
I built WowWindow to look and feel similar to a window on the Windows operating system. Since this represents the majority of users, it will feel natural to most users.
Though I’ve seen a couple of plugins that do a zoom similar to mine, I’ve seen none so far that allow for rotation during the presentation. In addition to the effects, I included a lot of other features, such as the ability to make external videos into windows, as well as inline content or whole external pages. While I was using WowWindow to add YouTube videos to a production site, I also added a feature to automatically create thumbnails for the videos, since as it turns out, this was a very easy feature to add, due to the simplicity and openness of YouTube’s system of organizing its resources.
I hope this window makes a big splash, not just because I like the attention I get from building these sort of things, but because I hope that it can help propel us all towards a better web, built on the fabric of HTML5 and CSS3 that is not as far away as it may have seemed only a year ago.