A little info behind Outlook.com in Firefox

Many of you here in Techman's World know that I am a web developer, or at least I know a lot about web technologies (excluding JS). I decided to look into how Outlook.com is actually displayed on the page. Most people don't care, but there has to be someone out there that has interest in how stuff works.


So, this applies to Firefox. I am not sure if the same thing happens in Chrome, but I will look at that at a later time, as I am looking at Firefox at this moment.

Upon opening up Firebug (a lot better then Firefox's built in web inspection tools, but it can get the job done), I looked at various parts of the code. I didn't look at every single thing in the HTML code, but I did look at key parts. That includes key elements, hidden elements, classes, etc.

If you did not know already, Outlook has classifications on what browser you are using, and it adapts to what your browser can support accordingly. In this case, I was running FF 15.0.1, which is the latest version of the browser with the latest standards support. If you look at the images, you can see something like "Managed Mozilla ....". There must be some type of script that does that, but that will be a extreme chore considering that I know little about scripts, and that Outlook uses so many scripts that it would be hard to read all of them.

Also shown in the pictures is the iframe code that I highlighted. The entire region of my email as highlighted because I was hovering over the iframe element, which appears to be the container for everything in the site. So really, the web interface of Outlook for Firefox appears to be a page, with some scripts and an embedded frame that contains the content, and that frame contains other frames and so on.

Regardless of what modern browser you use, I thought I should also talk about the parts that I personally think is cool about the new email from Microsoft. I have those two points listed below.

1. Sending messages - when you send a message via the send button or a keyboard shortcut, there is a really nice CSS3 transition back to the inbox or selected folder. The effect goes something like this: You send a message, the message shoots to the back of the screen, and it shoots up as if got physically "sent". If you can understand what I just said, hold a mouse or something in front of you, push it away from you, and then lift the object. That is what it looks like. If I can, I'll try to capture the effect on video.
2. Loading animations - What I love about the new animations is that they are also CSS3 for supported browsers. One form of loading animation is one that is a series of dots that come in, slow down around the middle of the screen, and then speed up real fast to shoot out of the screen. The other animation of a circle animation. The dots come in, circle once, then exit the screen. Again, I'll see if I can get a video up on these animations, as I always love to see new web technologies used in cool ways. The difference here is that these animations are all CSS generated, not simple animated gifs or rotating JPEGS.

Hope you all enjoyed this short in depth look. I'll look at Opera, IE8, and Chrome later this week, or sometime next week.