If you do much reading about web optimization, you will have heard people say that you should cram all your CSS into a single large file, and all the JavaScript into another, in order to save on loading times.

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. (Yahoo Developer Network)

In other places, you will be told that you should separate your CSS into multiple files to make it easier to manage. One for layout, one for typography, one for colors…

Which do you think is a better idea? Personally, I prefer quick loading times. Your users will thank you for faster pages; they don’t care if it’s easy to edit parts of your site or not. Generally I prefer to put all of the main CSS into one file, but on pages that require a large amount of unique styles, I include a separate file with the page-specific styles.

Firefox 3.0 is out now. If you’re a Firefox user, then chances are you’ve already downloaded and installed it, maybe played with some of the new features a bit. However, there’s serious work to be done, albeit quick work.

Whether you’re a regular Firefox user, or an advocate of another browser, if you run  website you need to test it thoroughly in the new version of Firefox.

Changes were made to the rendering engine in Firefox 3, improving standards support by far (I believe it passes the ACID2 test?). Those changes, of course, will affect how pages are rendered. So go through your sites and make sure they look alright.

Need an example? Take a look at MVH Media. Here’s a screenshot from Firefox 2:

After installing Firefox 3, it looks more like this:

By the time you’re reading this, I’ll probably have fixed it. But it just goes to show that you should keep up with changes to major browsers. I’m glad I caught it early.

This is yet another web-related topic that gets people arguing. Not quite as bad as “Mac vs. PC,” it really gets some people going. Which is better, a fixed-width layout, or a fluid one that resizes to fit the browser window. Unlike some people, I say that it depends on the project, and that there isn’t a one-size-fits-all solution (though I do lean slightly toward fixed-width layouts). Besides, if we all agreed on standards for everything, we wouldn’t have anything to argue about..

Both sides of the argument have their pluses and minuses, and generally I would say “go with what best suits the instance.” If you want a certain look, which will require vertical tile images, and other images of specific width, you may need to go with a fixed-width layout. If you want as much control as you can get over the look of your design, or if you need your content area to be a specific size, go with a fixed layout. (more…)

Pullquotes are used in most magazines, and many websites have adopted the use of them. They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention. This technique it great for long, wordy articles, since you can break-up the flow of the text a little, and highlight a noteworthy part of the text.

They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention.

Pullquotes on websites are generally blockquotes with a specific class assigned. Some CSS magic is applied to the class, and you have your pullquotes set-up.

I don’t use pullquotes too often, but I have classes defined nevertheless. (See my example pullquote above? It will look like a plain, unstyled blockquote if you’re reading this in an RSS reader. Visit the permalink page for the full effect.)

Here is my CSS:

.rpullquote, .lpullquote {
padding: 5px;
width: 202px;
margin-top: 8px;
margin-bottom: 8px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #990100;
border-bottom-color: #990100;
font-size: 15px;
text-align: center;
line-height: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
background-image:none;
}

.rpullquote {
float: right;
margin-left: 10px;
}

.lpullquote {
float: left;
margin-right: 10px;
}

As you can see, the first rule controls the visual aspect of the pullquotes, and the following two are used to float the pullquotes to either the left or the right. Feel free to tweak the styles to fit your stylesheet better.

Now, whenever you want to create a pullquote, just follow these steps:

1. Copy the text you want to quote.
2. Paste it into a new blockquote tag.
3. Add class="rpullquote" or class="lpullquote" (right and left, respectfully) to the tag.

The (x)html tag blockquote is generally used for, surprise, block-level quotes. For such a useful tag, it’s kind of plain looking, don’t you think? Why not spice it up a bit with some CSS?

This is an example blockquote, after applying some styling. Make something similar, or do your own thing.

Like my blockquote styling? I’ll show you how it’s done.

Here is a CSS rule that outputs a similar result:

blockquote {
margin:22px 40px;
upadding:3px;
color:#575757;
padding: 0 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
}

You will need a “quote-mark” image of about 32×32 pixels for this to work correctly. To make one yourself, create a new image and type a #e5e5e9 quote-mark into it.

Of course, you may want to tweak the color values and spacing so it fits into your template correctly.

The blockquote is one of the bloggers’ most-used tags. It’s a great way to quote an excerpt from a post you’re linking to, as I do frequently.

Don’t you hate it when you print a web page, only to have a bunch of extra junk that generates several pages worth of ads, RSS icons, and navigational links? What a waste of ink (it costs you $8000/gallon, you know).

Computers aren’t really suited for reading long documents, so it’s common to print overly long web pages for later reading. I do it now and then, though I mostly try to read things online (I’m not going to sit through a 40-page eBook though). Plus, if you’ve penned the ultimate guide to removing grape jelly stains (or whatever, it’s hard to think-up good examples), people will want to print it out to refer to in the future.

What you need is a print stylesheet. No website should be without one. (more…)

I’ve been doing some design work lately, and I’ve been dealing heavily with the Box Model.

If I want to create a 200px-wide box with 3px padding, I have to set the width to 194px. Why? Because otherwise the box ends-up as 206 pixels wide. Why is the box model like this? 200 pixels wide should mean 200 pixels wide. The three pixels in padding shouldn’t change the size of the box, just the textual content inside the box. It just makes more sense.

What do you think? Does the Box Model make sense to you as it is, or is my way better?