How to create web application user interface that looks like Outlook
How many times have you heard form a client that they want "outlook-like" web user interface for their application? Me, probably a hundred of times. When I asked customer what exactly they like about Outlook user interface, I often got a similar answers. They use outlook everyday and are very familiar with the layout, look and behavior. So whenever they asked me can they have something like that, I always said "Why not"!
This is how it looks:
You can see it live on the demo page or download the source code with all the images.
Basically, there is nothing hard about creating web user interface that looks similar to outlook. It has common layout: a header, toolbar, left-sided menu and content. It has graphic that anyone can crate with a little effort. However, customer often wanted to be able to resize the window, but they wanted layout to stretch with the window. That means two things:
- they often wanted left-sided menu to be on the bottom of the page
- they often wanted content to stretch with the window and to scroll its content on overflow
To put it in short, elements had to be "anchored" to window boundaries.
Anchor menu to a bottom margin
To do this you can apply very simple CSS trick: position menu absolute inside its container which is positioned relatively. You can read more about this in "Absolute Positioning Inside Relative Positioning" article on CSS Tricks.
Now let's see how to anchor outlook menu to the bottom. Navigation container will be relatively positioned, and menu will be absolutely positioned, with bottom position 0px.
Resize the content and anchor it to window boundaries
The problem here is that I wanted to stretch just some of the elements and other leave fixed. I found the solution in awesome article on A List Apart "Exploring Footers". The key is to determine the window size and recalculate the size of elements during resizing.
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
Next, we have to resize the elements in order to simulate anchoring.
function resizeWindow()
{
var windowHeight = getWindowHeight();
document.getElementById("content").style.height = (windowHeight - 110) + "px";
document.getElementById("contentPanel").style.height = (windowHeight - 160) + "px";
document.getElementById("navigation").style.height = (windowHeight - 110) + "px";
} At the end, just make sure to call this function on document load and resize.
<body onresize="resizeWindow()" onload="resizeWindow()">
And that's all folks!
Conclusion
You saw how easy is to simulate Outlook look and feel. But, probably, you don't want your application look exactly like Outlook. Try experiment with color schemas and graphics. There are a few links that can help you with this:
Again, you can see this example live on the demo page. Try to resize the window and see the results! You can also download the source code with all the images.
More articles in
Blog archive or
elsewhere