<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d13405220\x26blogName\x3dPavan+Podila\x27s+Blog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://pavanpodila.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://pavanpodila.blogspot.com/\x26vt\x3d-3240902251102105728', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Saturday, March 04, 2006

Webpage redesign

As a Graduate Assistant, one of my responsibilities is to maintain websites and occasionally redesign a few pages. One such redesign task was for this page:


The page contains a bunch of articles organized into categories. All of the categories and their corresponding article-titles are listed at the top of the page, whereas the detailed descriptions of the articles are present following the category listing. The articles listed under a category are anchor-linked to the detailed descriptions. This was creating a particular problem with the length of the page. As newer articles began to be added, the page was getting more longer, with the scroll-tab almost becoming invisible (like the one on the right).

My task was to redesign this page such that it would have fixed length irrespective of the number of categories and articles. Plus it should be easier to maintain the page. After a few iterations, it was clear that this was a simple case of a Master-Detail page. To make it easier to add new categories and articles, I created a simple XML format. There would be a categories.xml which would contain the category-titles and a links to the XML files that contained the detailed article descriptions. The resulting redesigned page is as shown below. Note that this works only in Internet Explorer 6.0+. This is because of some nifty CSS tricks (IE CSS filters) and ActiveXObject(s) that I am using.


Although everyone likes the design, they want it working on FireFox as well. For that I will have to do away with the IE-specific javascript (especially the XML related code). I was thinking of using the Dojo toolkit for this purpose but it looks like nobody wants more complexity. So the project has been pushed under covers. I guess it will stay there for a while.