Down to Brass Tacks Let's cut the crap.

Another Bunch of Web Concepts

Following a previous post, I kept hearing a discouraging amount of misinformation regarding some web concepts, so I thought I'd do as I did before and add my two cents.

Maximum Image Dimensions and Page Size

Alright, we all agree that we want our website to load rather quickly, because we know people aren't going to wait more than a couple of seconds. We also don't want mischievous people to be able to do much with our images. We have to consider the browser size of the bulk of our visitors when determining the size of our website, because we don't want to force them to scroll to see the whole thing.

These are all laudable objectives — I couldn't really disagree with them, in principle.

But 100-120 KB per page at most? 500-600 pixels wide images at most? That, I'm sorry, is based on egregiously outdated standards. Just so you don't have to take my word for it, I visited a bunch of photographers' web sites (they all happen to have blogs I follow) and looked at how large their images were — not the home page image, I mean the average image they present in their portfolio. You'll likely recognize these guys' name — I think they know what they are doing and/or have been professionally counselled.

The smallest images I found were those on Chris Orwig's site, and they were 693 pixels wide. Here's the rest of the random sample I visited:

• Joe McNally, 778 pixels wide
• Zack Arias, 804 pixels wide
• James Rubio, 819 pixels wide
• Drew Gardner, 826 pixels wide
• Chase Jarvis, 920 pixels wide
• Tim Tadder, 940 pixels wide
• Vincent Laforet, 1024 pixels wide
• Joey L, 1064 pixels wide
• Finn O'Hara, 1278 pixels wide

Wait, what? 1278 pixels wide? That's just the image, not even the website itself.

Do you have an idea what a single portfolio section of a site presenting such good quality imagery must weigh? A lot more than 120 KB. Did I have to wait an eternity to see the images, so much so that I thought I should give up and go to another site? Not at all. Do these guys really worry about their images getting stolen? Puh-lease.

I think I rest my case.

More on Image File Formats

Okay, so I'd already covered the key points in my previous post, but let's add some more information.

The idea that the PNG format came from PCs and never really caught on on Macs is simply baseless. The main reasons the PNG format was created were to improve upon the limited GIF format and to get rid of licencing issues (since GIF was patented by CompuServe). If anything, the Linux/free-software/open-source community (which was later, even before the OS X transition, largely embraced/encouraged/supported by Apple) did more for the format than the Microsoft-riddled make-everything-proprietary PCs. Indeed, Internet Explorer only recently got the memo that PNGs had an alpha channel, which is likely the main reason the format couldn't fully be exploited in the first place, hindering it's spread.

The idea that logos, which often use few basic colors, are prime candidates for the GIF format is only partially true. When you create shapes (be it in Photoshop or Illustrator) and convert them to raster images, new intermediate colors have to be interpolated to create seemingly smooth lines and curves — a process called anti-aliasing. The consequence is that even if you're only using few base colors when designing your logo, it might very well end up requiring more colors than can fit in an indexed color file format such as GIF. To be safe, go PNG, which is just as size-efficient, but not 8-bit palette limited.

The suggestion that you shouldn't embed color profiles in images to reduce file size is to be taken cautiously. If we all agree that images on the web should all be converted to the sRGB color space anyway (because we cannot presume color management will be available in the client's browser) and therefore don't decide to include the profile in our web images, well, it shouldn't really be a problem — if the profile is missing, every browser should presume sRGB, just as if color management was unavailable, so we're good. The risk, though, is that we some day forget that an image we export is for some other use (be it for a client, for a commercial printer that color manages, etc.) and then wonder why our images don't look as expected. Seriously guys, a color profile is about 2 KB — that's insignificant in comparison to the whole size of an image. Remove one step in your workflow and always embed color profiles, just in case; it's not going to hurt to do it, but it might if you don't.

The suggestion of creating a slideshow of photos using Photoshop's Animation functionality and exporting it as an animated GIF is preposterous even as a simple example. GIF is, as we know, a monstrously awful file format for photos, because it is 8-bit palette limited and will introduce screaming posterization or dithering. Furthermore, it will create huge file sizes because it is not designed to handle photos. Additionally, it won't allow (in any remotely economical fashion) transitions between images. Moreover, it won't allow any kind of control for the user (stop, pause, forward, back). Frankly, anything else would be a better idea — Javascript, Flash ... you name it.

Output Sharpening

I've already talked about the mistaken idea that the "Save for web" functionality would export smaller files. But what preparing images through Photoshop carelessly will also not do for you is screen output sharpening. Just save yourself the time and effort and error-prone procedure of doing that by hand the olde way and use something like Lightroom. (Or at least create yourself a batch action that also performs basic sharpening.)

Spacers

The dreaded "spacer.gif" (yes, this is the common name, not "single.gif") is a bronze-age-old hack. A trademark of poor code, of lazy development. There are other (better) ways to achieve what this shameless little bugger is doing.

If you don't mind the contempt you'll get for using it and still want to go ahead with the idea, keep in mind that images can be sized any way you want on a web page. This means that you should only create a single one of those darn things, one that is 1x1 pixel, and size it according to your needs on the page. For example, if you need a 600x400 empty placeholder, don't create a separate GIF file for the placeholder, just size your spacer pixel 600x400 at that location!

Alternate Text

You know the "alt" attribute of images? The idea behind that has absolutely nothing to do with search engines. Yes, of course, search engines will use whatever additional data at their disposal to enrich their databases and, hopefully, provide more accurate results. But that was not the motivation behind the "alt" attribute (which is required in strict versions of HTML).

The name says it: it is an alternative to the image, in case the image cannot be loaded or otherwise consumed. If the image is missing or there is any kind of problem, instead of showing the image, the browser will simply display the alternate text. If a blind person visits your website, not being able to see the images, their text-to-speech software will read the alternate text aloud. Therefore, the alternate text should be descriptive of what the viewer cannot see, not just a useless generic name like "image"!

Also, if you're using a spacer pixel (goodness forbid), you should include an empty alternate text (alt=""), otherwise if the text were to be called upon, it could break your design.

General notes on using CSS

CSS is fundamentally based on the idea of economy: the more global and the less specific the better.

What this means is that if you're going to be using, say, the "Verdana" font everywhere on your site,

• Proper CSS would call for defining "Verdana" only once as the font-family for everything in a single, global declaration. No need to mention it anywhere else, since this global declaration takes care of it all.
• Very bad CSS would call for redefining endless times "Verdana" as the font-family in each and every class you create. This not only means puke-inducingly redundant declarations, but also means that if you change your mind about the font used on your site, you'll have to go through every single darned class you've created and modify it. That's just about as far as you can get from the point of using CSS in the first place.

If you're going to use a property "everywhere, but", define a property in a global declaration (probably in the <body> tag or such an overarching location), then make amendments at very specific locations where the rules don't apply. This will dramatically reduce/simplify/tidy your CSS.

On the other hand, if you're going to use a property at a decidedly very specific location, don't define it at a global location, as it will affect every other use of the related tag/class. For example, I cannot see, for the life of me, any good reason to globally add a right padding to every friggin' link on the site if all you want to do is separate items in your footer. By doing this, you'll risk looking perplexed in front of 20 people when you won't understand why your thumbnails don't line up in their cells. Chances are that most links on your site are not going to benefit from a seemingly arbitrary padding on the right, even if some very specific ones might.

While I'm on the topic of padding a link... "Padding" is space inside an element, while "margin" is space outside an element. What this means, in the case of a link, is that even if the two properties would have the seemingly visually identical effect, the padding would make the link itself larger, while the margin would make the space next to the link larger. That is important, because if you're using padding on a link (goodness forbid), the "padded" section of the link would be active (clickable) as well:

That's just wrong. The appropriate property to define, in that case, would rather be a margin.

Redefining Links with CSS

Alright, you want to redefine links (the <a> tag) so that they all look the same, except for the "hover" variant. So you're going to spend a couple of minutes duplicating your half-dozen properties four times in all of these variants so that they are all the same, except for the "hover" which will have a slight difference.

Since you've been reading what I said about global versus specific, you know that's no good. Instead of duplicating every-compound-thing from a:link to a:visited and to a:hover and to a:active (phew!), just redefine the <a> tag itself, once! Boom: all the links will share a set of properties defined globally. Then add only the differences you want to the "hover" variant. You're done. That takes less time and is more economic. Especially if you want to make a slight change afterwards — you won't have to make that change four times.

Lastly, be careful when removing the underline from links. You may want to do it for aesthetics reasons, but good design calls for good usability, not just cuteness. Make sure, if you remove the underline, that links are still obviously links. The underline is such an established standard that you should think twice before you do that — or just do it where it doesn't break usability, such as in a menu where items are obviously selectable, while leaving the underline for links elsewhere in the text. Also, don't use underline on text that is not a link (used purposely here) — that's very misleading.