Page Design

This site is best viewed with Firefox. Go download it now. Microsoft's Internet Explorer is notoriously "buggy" with CSS and design. It's also less adept with many of the phonetic fonts and symbols. Most frustrating is the different rendering of colours with IE.

Note for instance the shadows around the two boxes to the right. In Firefox the colors are matched and no seam is visible. IE is unable or unwilling to reproduce the color of .png image files consistently. Having read some discussion on this issue I find that the blame is sometimes thrown at Photoshop and sometimes at IE. It's worth noting that the images on this page that are mismatched in IE share the .png format.

IE also has trouble dealing with transparency in .png images. I've gone back and forth between .png and .gif format for small graphic images that need precise colour but must have a smaller and more manageable filesize than is possible with the bitmap (.bmp) format. Other browsers handle the transparency fine but IE has trouble passing images through. I've been able to fix the problem by re-indexing the colours and editing with Adobe Photoshop CS2 -- but I only had to because of IE.

One workaround strategy is to take advantage of Conditional Comments in the HTML file. Using a specific syntax allows the designer to redirect IE to a different CSS file that is edited specifically for the browser. Some people don't like this technique. Until I learn more about cross-browser design I'll use it.

I created all the graphics on this page using Microsoft's simple little Paint program and The GIMP 2. GIMP (Gnu Image Manipulation Program) is a free photo editing program that is available for Windows MacOSX and Unix.

The CSS coding of this page is based on a very simple three column format I found at at glish.com. I took out one of the columns and did some more tinkering with the skeleton of the code.

One of the trickiest design challenges was figuring out how to stick the footer graphic to the bottom of the page. You'll notice that even on a page with very little text the bottom edge is still hugging the bottom margin of the screen. I found some very helpful coding advice at The Man in Blue. He does a good job of explaining what the different bits of code are supposed to accomplish.

Before designing this page I knew some very basic html but I relied mostly on WYSIWYG editing. Dreamweaver made that easy. When I started my web log in the summer of 2006 I started getting used to some basic CSS. Not enough to create a page, only enough to make some minor changes to the Blogger template.

Once I understood the basic relationship between the HTML page and the Cascading Style Sheet I tried starting a page from scratch. Marc Santos is in the process of polishing a tutorial for beginniners and he provided me with a functioning draft.

I'm not completely happy with the header and footer of the page. They will likely change often. I took out the header and footer. (Strictly speaking I just changed them.) I'm planning to use some light graphics on the top left to balance the "Contact Info" box. The header will probably contain just my name in a tastefully stylized presentation. I'm still not sure if I need some footer graphics.

Contact Information

Department of English
Purdue University
500 Oval Drive
West Lafayette, IN 47907-2038

mcovarru@purdue.edu