The Right Image Format

The image optimization series does an excellent job detailing which file format to use, and I suggest reading it (especially for the lossy, non-lossy comments), but here’s their summary:

• JPEG is the format for photos.
• GIF is the format for animations.
• PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.

After implementing these strategies for a bunch of builds, here’s my take:

• JPEGs for photos or images with tons of colors
• PNG24 when you really need consistent alpha transparency
• PNG8 for everything else

The only difference here is that PNG24 definitely still has a place (oh, and really how often do you use animated GIFs?). The case they mention in which you have to use PNG24 (“When most of the image is semi-transparent”) is actually more common than they would leave you to believe. So how do you handle those cases?

Transparency and PNG Fixes

To handle transparent PNGs, do not use a JavaScript PNG fix. Instead, realize what those fixes do, and then actually apply the fix when and where you need it. The problem with PNG fixes in general is that they typically offer a blanket solution that affects every PNG on the site. You don’t want to be applying a alpha filter to a PNG8 that doesn’t have transparency, so there’s a lot of wasted effort. Not to mention the fact that these filters can be extremely taxing on the browser. There’s a simple CSS solution that can be added to an IE6-only stylesheet (assume #some-element already has a background applied):

#some-element {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

That’s it! There’s also a VML fix, although the extra markup typically isn’t worth the better performance. Either way, the take-away is to apply the fix on a case by case basis, not with a blanket JavaScript add-on.

Compression

There’s a number of add-ons and/or tools online that will reduce the size of your images quickly and efficiently. The aforementioned YSlow and Google Page Speed are extremely easy to use if you have those add-ons. A new entrant is punypng, which touts its better performance over the Yahoo and Google offerings. Regardless, all tools offer bulk uploads, so after a site build, there’s no reason not to run your pages through these tools and update images that can be compressed.

If nothing else, I hope developers everywhere can remember a couple of things:

• Think about the optimal file format when saving an image
• Don’t use GIFs (unless they are animated… but c’mon)
• Don’t use a blanket PNG fix

• Fonts for web design: a primer: An excellent starting point for exploring additional, common fonts cross-OS. I was particularly happy to see an explanation as to why some fonts are available on some systems, but not others.
• Common fonts to all versions of Windows & Mac equivalents: Basically a summary of the above, in an easy-to-reference format.
• 8 Definitive Web Font Stacks: Leverages the flexibility of the font stack to implement nicer fonts for users that have those fonts on their machines.
• Methods for uncommon font rendering: In addition to web-ready fonts, there are several methods/technologies that allow you to essentially embed uncommon fonts on your site. Beautiful fonts with @font-face is a good summary of the potential for straight CSS-level font embeds; although there are legal hurdles that you need to take into account. Finally, cufón and sIFR are two popular methods for embedding custom fonts, with the help of some JavaScript and/or Flash.

My previous experience has shown that designers are happy for the most part with the set of available web-ready fonts, and cases where you need a method for rendering uncommon fonts are few and far between. I imagine a unified, efficient solution for embedding fonts (read: @font-face) would change the playing field, but legal issues may hamper that reality for some time. In the meantime, it’s good to know there’s at least some easy-to-implement alternatives to Arial, Times, and Verdana, and the potential for using almost any font in certain situations if you have the time for a solid implementation.

• We Feel Fine: One of the first ones I saw, and the one I played with the most. Amazing level of depth.
• Twistori: Simple yet beautiful.
• TwitEarth: Makes me want to learn Flash.
• Tori’s Eye: Recently reminded me that I don’t have to learn Flash.
• Fix Outlook Campaign: Such an impact that it garnered a response from Microsoft shortly after launch.
• 9elements HTML5 Experiment: An eye-opener and another argument for faster adoption of HTML5 components.

What makes Twitter a target for such unique, creative tools? I imagine we can thank it’s nebulous nature and exceedingly simple API. Regardless, I hope talented designers are paying attention to the impact of such campaigns, and we can look forward to similar inspiration in the future.

I wanted to accomplish the look strictly with CSS and standards-based XHTML, which initially proved difficult because the lack of CSS2 support for multiple background images. If more browsers supported CSS3 and it’s support for multiple background images (only Safari does now), then I could have just used a quote background image for the top left and the bottom right. I also couldn’t use one wide background image that contained both quotations because the width and the height of the box would always be unknown.

Then I found an interesting tutorial that uses the CSS2 pseudo element :after to add additional background images after content. With a similar method, I was able to apply quotation marks before and after the <blockquote> content via CSS:

blockquote {
	background: url(quote-open.gif) no-repeat;
	color: #666;
	margin: 0 0 1em 0;
	padding: 0 50px 0 45px;
}
blockquote:after {
	background: url(quote-close.gif) no-repeat right;
	content: '';
	display: block;
	height: 25px;
	margin: -2.25em -40px 0 0;
}

Works like a charm in browsers that support CSS2, but in IE the :after content isn’t rendered. For those browsers, I’m OK with the second quote not showing up, so I just added some IE-only style to remove the extra padding on the right:

blockquote {
	padding-right: 0;
}

That’s it! No fancy JavaScript or extraneous HTML tags needed. The result:

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. –That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, –That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed.

The new layout for the content needs five divs:

<div id="pageContainer">
	<div id="page">
		<div id="contentWrapper">
			<div id="mainContent">
			</div>
			<div id="secondaryContent">
			</div>
		</div>
	</div>
</div>

Because of an IE bug we can’t center a <div> of specified width without wrapping it another <div>, hence the pageContainer:

#pageContainer {
	text-align: center;
}

Since we set the text alignment to center, we need to set it back in the page <div>, along with setting the minimum and maximum widths:

#page {
	margin: 0 auto;
	text-align: left;
	min-width: 728px;
	max-width: 900px;
}

Of course everything below IE 7 doesn’t support minimum and maximum widths, so I decided to specify a set width for those browsers:

<!--[if lt IE 7]>
<style type="text/css">
#page {
	width: 760px;
}
</style>
<![endif]-->

I also added a wrapper for the main and secondary content, so that I had a <div> that knows the height of the taller section:

#contentWrapper {
	float: left;
}

Then it’s just a matter of sizing and floating the content blocks:

#mainContent {
	float: left;
	width: 66%;
}

#secondaryContent {
	float: right;
	width: 21%;
}

If you go this route, just make sure everything else on your page is defined relatively (in percentages, ems, etc.) as well. For instance, you’ll have to make the padding of the content divs a percentage (which you’ll also have to override in early IE).