<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> <iframe src="http://www.blogger.com/navbar.g?targetBlogID=13405220&amp;blogName=Pavan+Podila&#39;s+Blog&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http://pavanpodila.blogspot.com/search&amp;blogLocale=en_US&amp;homepageUrl=http://pavanpodila.blogspot.com/&amp;vt=7258010184004836690" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe> <div></div>

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.