My New Homepage Ate My Blogger Design. Sort of.

marccsantos.com got a new look today. I wanted something minimalist and clean before I head out on the job market. The design corresponds to the visual design of my other job materials (CV, cover letter, dissertation summary). The face-lift isn't complete, but I had enough done that I figured I would through it up there.

Problem: in taking done the old site, I also took deleted many of the images used for this blogger design. So... this site will have to go broken for a bit. I teach in 33 minutes, lets see how much of this blogger site I can fix in between now and then...

Update: K, ten minutes later and I think I'll found every instance of the ole green design. Sh*t- missed the "about" me box border color. And these boxes look hideous. Headers are an abomination against usability. Back to work.

Update #2: Well, the stupid f#cking Purdue server decided to kick me off-line while in the middle of my revision, but I managed to make some more changes. I have to fix the dotted borders around comments, change the text-color for post headings, and get rid of the border around the "about" box (missed this twice apparently). But its gettin' better.

Update #3: I'll have to check this on a PC tomorrow, but I feel like I'm getting close to my new homepage design. I've got the font-family in place for my headers (font-family: 'Gill Sans', 'Trebuchet MS', Arial, sans-serif; ) and have got the borders pretty well done. The next big project will be to replace the ul li images in the sidebars.

Update #4: I haven't found the time to touch-up the blog. I've been working on the diss (first chapter draft is creeping up to page 60) and have been working on job materials (CV, diss summary, letter of application Oh, My!)

For the Love of Gill Sans

Argh.

Since getting my MacBook, I rarely use a PC. The notable exception might be a two-screen PC in the English department's multimedia lab when I am working on a large scale web project. Recently, I helped my wife with the Lafayette Dog Park website (the site is currently being uploaded to a cold fusion server, so no link yet). Since it was my wife's first go at XHTML or design, we used the two-screen, that way she could work on the code on one screen and refresh the browser in another.

Long story short: during this process, I ended up looking at my homepage. In Firefox. And it looked like crap. To be specific: the font was rendering terribly pixelated and broken. This came as a real shock to me, since I thought I was using a fairly standard font-- Gill Sans -- which renders beautifully in Safari. Love the Safari Gill Sans. Here's a screen shot of my design portfolio in Safari (Gill Sans at 0.9em):

Yummy.

But here's what the site looks like in Firefox:

Icky.

So, what to do? Fighting with Firefox is completely new to me. Its like the first fight in an otherwise glorious relationship. Its Conseco nipping McGwire. Its... well, you get the point. Firefox is usually the hero of the browser wars. Internet Explorer does an equally terrible job with Gill Sans. But thanks to the beauty of conditional comments, its an easy fix to tell IE not to try--to use "Tw Cen MT" instead. This was the standard font in my world: I used it at default size for my last Introductory Composition website and again at 14px for my Multimedia Writing website. I moved away from this font as I started paying attention to web typography: I noticed I tended to favor sites that used smaller font sizes, and wasn't pleased with Tw Cen MT's small renderings. But Gill Sans, that's beauty baby: consistent, symmetrical, with a nice touch of curves (good thick/thin ratio). What more could a designer want?

So, again, what to do? For assitance, I turned to one of my favorite typography sites: Smashing Magazine. Their site looks smooth and sophisticated in Safari:

Nice consistent font wieght, smooth kerning, nice variation. So, I rifle through the CSS, and find out that they're using a pretty standard small-sized Verdana. But look what happens to their site in Firefox:

Icky.

Playing around with other fonts, I've come across Univers--which looks pretty good at .8em (and bigger and I find it a bit unprofessional):

Not bad... especially considering Univers isn't recognized by Safari. This means I can create a font family: Univers, "Gill Sans", "Tw Cen MT", Verdana, Arial, sans-serif; to cover all my bases. Except that at .8em, the font-size is too small for Safari. This is where I left off yesterday--tomorrow I'm going to try looking at Univers at .9em in Firefox again. Another possible solution might be to see if I can code a conditional comment for Safari (I've never had to code a comment for anything but IE). While the sage isn't over, here's a moral for the story so far (one which I supposedly already knew):

Double and triple check typography in all browsers. In my case, originally all the sites were in Tw Cen MT. I then switched to Gill Sans without checking the site in PC. Boo me.

The next time the Red Sox are on TV I'll do another post looking at typography on the web. Essentially, I want to look at a number of designer homepages (Dave Shea, Mark Boulton, Mike Davidson, and others) to see what kinds of font families and sizes they are using.

UPDATE:: Don't know what I was thinking. Univers looks terrible. Sigh.