I think that 478k typekit nightmare is being used just for Palatino Linotype – which on those sub-headings IMHO look like ***. The main heading and footer headings are indeed trebuchet MS, and most of the body text is arial.
In any case, here’s my rewrite:
*****ly Pear Media: Shaping Appearances
Took more than a few liberties on the design. As always the directory for it:
Index of /for_others/sega
… is wide open for easy access to the files I used to build it. ALSO as always I have pretty much discarded all of the original files and done a total re-optimization, taking the original 1186K (834k compressed) in 23 files, and dropped it down to 118k (108k compressed) in 10 files. While that 478k fontkit thing is a hefty part of that reduction, don’t dismiss the 280k of images that got pitched in the trash despite no real changes to the appearance on that front.
I trimmed the width to 976px so it’s at least 1024 friendly. (1024 is NOT 1024 friendly once a scrollbar or browser chrome is on the screen!)
I modified the menu so that “stripe” think lined up – though really that’s not cutting it as the contrast with the orange makes it invisble. I’d REALLY look at discarding that menu style for something more practical. Gave it some text-shadow just to pimp it out a bit.
You’ll notice the heading image is now a single file without any need for alpha transparency. You had this odd “line” of color change that looked like a rendering error or something messing up the transparency… the dark box that was having issues was similarly afflicted – I kind of assumed that pattern was NOT intentional and got rid of them… though I did add a slight gradient to the heading.
… and pulled the one you had off of body because it was striping badly on the 18 bit displays that claim to be 24 bit… and was even striping on real 24 bit due to the narrow “style” of the gradient.
I got rid of using a image as the background to that box with the “peardude” as that was just not lining up with the text. Fixed height image behind content paragraphs == FAIL. ALWAYS. Instead I used CSS3 for the corners and shadow (IE8- don’t get that style, oh well) and apo’d a dummy div to position the ‘dude’… so as to avoid an extra wrapper I also apo the h2 into a padding I set on Content. You may want to use a class trigger for that padding if the sub-pages aren’t similarly styled. Rather than even trying to set a height, I instead just added enough padding that at 96dpi it lines up decent. I wouldn’t even TRY to make that pixel perfect across all browsers given the range of font renderers and sizes. The peardude image for that section being switched to “close enough” anti-aliasing with single color transparency instead of even trying to use alpha.
The floated boxes below that aren’t too fancy, though I did add a wrapping DIV for the second pair back it so that no matter what the content, the two anchors at the bottom will line up. those are also APO’d into some extra bottom padding. Better solution than fixing the height (which again is ALWAYS /FAIL/).
I also swapped their headers to the SAME font instead of trying to struggle with getting Palatino in there. the multiple different heading fonts seemed inconsistent anyways – and inconsistencies are bad design.
The top of the footer area I pulled a cute ‘trick’ with floats to line those two sections up – the opposing justification on their text making them not only fit well, but IMHO look better. I made the links be the same arial/helvetica/sans as the body text for consistency – basically I dropped the whole layout to TWO fonts. That’s more than enough.
I added hover states to the footer that not only makes the image light up, it also shows the text when hovered for people like myself who didn’t recognize most of them – thankfully you had this nice big empty spot in the footer for that text.
Both the footer background and the [url=http://www.cutcodedown.com/for_others/sega/images/socialMenu.jpg]social links getting pre-composited jpegs – no alpha needed!!!
The footer retains much the same styling you had on the original, I just built it using a wee bit different an approach.
The page also has graceful degradation when images are disabled, looks fine CSS disabled, and requires NO javascript assistance all the way back to IE6. Sure, IE8- users get a degraded experience (no round corners or shadows – OOOH) but the page is actually usable all the way back to IE 5.5. (there are minor layout issues, but you can still use it all the way back to there).
It DOES resort to px fonts in a number of spots where there’s really no choice – using %/em would break the layout in those spots – but the actual useful content on the page and most of the h2 are dynamic… and that’s where using %/em is important. Menu font gets bigger you get a broken menu. That APO H2 gets bigger it screws up the whole layout… same for the hover states in the footer, the content of the footer, etc, etc, etc…
Like anything else, it’s about the right tool for the right job.
This one was fun to do because despite being a simple layout, there were a number of things that took a bit of thinking to pull off… It was also an EXCELLENT example of what I mean by scripting for nothing, hundreds of K of images doing tens of K’s job, excess wrappers for nothing in the markup, and faulty site-building methodologies.
As it is, there’s still stuff I’d fix like the fixed width (semi-fluid for the win), that footer image being way too big still, etc, etc…
So… Hope this helps. Any questions fire away.
Off Topic:
BTW, that has to be the funniest auto-censor I’ve seen in a while
![footer background and the [url=http://www.cutcodedown.com/for_others/sega/images/socialMenu.jpg]social links](http://www.cutcodedown.com/for_others/sega/images/footerBackground.jpg){kind=link}