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

Thursday, May 04, 2006

The last Redesign

As I approach towards my last day as a Graduate Teaching Assistant (GTA), I got assigned a final redesign task for sprucing up an email. This was going to be a memo that would be sent out to all the faculty at the Bauer School of Business (the place where I am a GTA). Since I had already done similar tasks before I got picked up for doing this...just when I thought I could catch a nap...@#@$#%#$ :-)

Before

This is how the webpage looks before the redesign. Some of the things I had to change was the layout, images, header, and most importantly CSS-ifying the page.

The page was having a complex table-structure for layout -- which is definitely something the Web-Standards gurus won't appreciate. Plus, the markup was not semantic and had lot of elements just for styling (think lot of <FONT> tags). This really bloated the markup and the file size was about 7 Kb.

I am guessing somebody must have used FrontPage for this design ;-)


After

For the redesign, I decided to stick to a 2-column layout with the main-content in the left-column and a sidebar for the faculty testimonials. All the styling was done in CSS and the markup was made more semantic. This brought down the file size to around 3 Kb. The images were also changed: a new image for the Director and also a new banner image for the header. The images were floated to give the effect of flowing text. I also added some rounded corners for style.

Since the "Key Features" list was expanded to more than two, the page became longer and required scrolling. I have a couple of ways for dealing with that but for now I'll leave it as it is.


As an aside, I used the Consolas font for writing the markup and CSS. I think I like this font a lot and I am going to switch to that for my regular coding.

posted by Pavan Podila @ 3:18 PM