CSS-Tricks PSD to HTML

404 Page on a Static Site

Here’s a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The “/404.php” part is the path to whatever file you want to serve up as the error page.

In other words…

Remember that the .htaccess file works onApache servers only. I say “static” sites, because if you are using a CMS system already (like WordPress), there is already a system in place for catching 404 errors and this is unnecessary.

Links of Interest

Let’s talk about text

Dan Kaufman on online text readability.

First, the more distinguishable each character is from another, the easier it is to read. This is why typefaces with serifs (the little lines on the end of letter strokes - Times, for example, is a serif typeface) are not as popular online as sans-serif typefaces (those without serifs) such as Arial. In print, serifs work well but on a computer screen simplicity (sans-serifs) is more important than elegance


The Return of Table-Based Layout (Well, Sort Of)

There has been some good articles recently on how display: table; (and its subsidiaries) can actually be extremely useful in modern web layout. Here is one of them at Freelancer Magazine. Essentially you can code using nice semantic divs and accomplish stuff like equal height columns without much work. This stuff is part of the CSS 2.1 spec and it won’t work in IE 6/7, but most good browsers support it.
Read Article / Comment »

Typeface.js - A sIFR Alternative

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we’ll be doing until @font-face has wider spread support). I like sIFR, it has been around a long time has really proven itself as a good technology, but it’s not the only kid on the block.

David Chester wrote in to tell me about a new project he is working on called typeface.js. I played with it a little bit and it was pretty easy to use and worked well.

View DemoDownload Files


Note: I only include the download here because there isn’t a “complete working example” style download on the website itself. It took me a little bit to figure out exactly how it worked and where things go, so I thought this might be of assistance.

UPDATE: OK, the demo is back working again… the problem was that I was using quote marks around the font name and that was messing it up AND I applied multiple fonts (e.g. font-family:Optimer, Arial;). To have it work properly, don’t use any quotes and only apply the one font (e.g. font-family:Optimer;). The font I used in this example, Qlassik, is still not working correctly. In hindsight, I probably shouldn’t have used some random incomplete font =)

How to use it

1. Download it

Download it from here and include it on your page. Include it after any external stylesheets.

2. Find a font you want to use

David offers three you can download and use. Otherwise, go out and find a TrueType font that you like (that you can use without breaking any copyright laws!). For my example, I snagged a free on off DaFont: Qlassik. (* problematic, see above)

3. Include it on your page

Then run it through the convertor (at the bottom of the page). This will result in a new js file, include that on your page after the typeface.js file. Remember again these should come after your stylesheets.

<script type="text/javascript" src="js/typeface-0.10.js"></script>
<script type="text/javascript" src="js/qlassik_medium_regular.typeface.js"></script>

4. Starting using it in the markup

Now you are ready to start using it! Any text you want to use the new font, you’ll need to give a class name of “typeface-js” and then an inline styling statement referencing the new font name.

<h1 class="typeface-js" style="font-family: 'Qlassik Medium'">
	Testing a Headline

You’ll need to reference the font by its proper name. I find the easiest way to find out its proper name is to install it and then find it in the font menu of any open application.


I’ve been playing with this for maybe one hour, so I’d not going to make any snap judgements or recommendations, but it seems pretty cool so far. Something feels neat about the fact that it’s just JavaScript, not both JavaScript AND Flash like sIFR. or JavaScript AND PHP like FLIR.

I also kind of dig how copy and paste still works on browsers that support <canvas>.

It is also pretty easy to get started! Let me know what you all think.

Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What’s the deal with the “cardboard cutout” CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I’m pretty pumped about it. Don’t get too excited though, it’s gonna take me a while to complete it. I’m hoping it’s before or around the new year though.

Sanjeev Sharma

How did you manage to get IE6 on your Mac?

I run VMWare Fusion to run Windows XP where I run IE Tester. I have to have IE 7 installed in order for IE Tester to be able to test all the versions: 5.5, 6, 7 and 8. Somedays I wish I had a real PC with a real original version of IE 6 to test on, because there are little quirks and differences between the IE Tester versions and the real thing. You could use Parallels or Bootcamp to do the same thing, and IE Tester also runs on Vista. You’ll need an Intel Mac to run either of these. If you don’t have an Intel Mac or can’t/don’t want to run Windows on your Mac, you could use ies4osx which runs on Darwine (the OS X flavor of the “wine” virtualization software that allows you to run Windows programs without running Windows). I have ies4osx kind of slow and buggy, but it’s been a while since I’ve used it.

Anders Kleve

When should we use image replacement instead of actual images?

The perfect place to use CSS image replacement is the logo for a website. A logo will often include the text title of the site, which eliminates the need to display the title of the site in actual web text. For both SEO and Accessibility purposes, it makes sense to have the title of your site be an h1 tag as the first thing on the page. With CSS image replacement, you get the best of both worlds. The h1 tag contains the text title of your site, but if a “regular” visitor sees your site with both CSS and images enabled, they will see the graphic logo.

Steve Davis

If you replace the h1 with an image, how do you also have an image (typically the logo) in the header that acts as a link to the home page, as is the convention.

This is a great follow-up to the previous question. I said above you should be replacing the h1 tag as that makes the most sense for SEO, accessibility, and semantically. But… this complicates things if you want to make it into a link. If you wrap the inner text in an anchor link, depending on what technique you use, it will either hide or push off the page the text, leaving no clickable area. So what you should do is perform the actual image replacement on the anchor, not the h1 itself (something like “h1#logo a”). Same theory, just leaves the area clickable.

Denzil Rowe

Which is better for building a website layout, Photoshop or Illustrator?

Whichever one you like better and feel more comfortable in. Although it doesn’t hurt to know them both well.

James Dadd

If you could build everything from scratch for a website, infrastructure through to front-end programming what would be your ideal stack?
Prog/Script Lang/Framework:
JS framework:
Database engine:
Design (CSS/Tables/Templating..):

Server: Don’t know enough to comment. I guess it’s usually Linux or FreeBSD + Apache
Prog/Script Lang/Framework: PHP or Ruby, although I’m a huge novice with both
JS framework: jQuery
Database engine: MySQL
Design (CSS/Tables/Templating..): CSS/XHTML + CMS

Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering how I might be able to host them myself and pocket that hundred bucks instead of giving it to the hosing company. Is there an easy way of doing this?

Absolutely yes, you should offer to host your clients sites and profit from this.

If a client already has their own hosting, that’s fine, but if this will be a brand new site and they don’t already have hosting, I think you should go so far as to suggest that you host it. As a freelancer, you should invest in some decent hosting, and host all your sites right on that server. Why?

  • You’ll be more comfortable on your own server. You’ll learn how to create and manage databases quickly. You’ll have access to any logs. You know what the environment is like, what software its running and on what platform. Your backup procedures don’t need to change. You’ve already dealt with customer support. You know how the backend works, how to set up cron jobs and all that. The list goes on and on and on. It just feels better to work on a site on your own server.
  • You’ll have the control you need. Need to upgrade versions of PHP? It’s your server, you can do whatever you want with it. If the client owns the hosting, you might have to go through their IT guy and who knows what all red tape.
  • It’s a value-added service. Knowing how to handle web servers is a high level skill, even at the basic level. Most clients don’t even want to think about it, they just want their website to work. Handling the hosting of a client’s site can makes you look even more valuable, which of course you are!
  • You can charge for it. Never once have I had a client complain about the fees charged for hosting. They know it costs money and takes time.

At Chatman Design, as of maybe a month ago, we have now consolidated every client site we have onto a single server. It’s so sweet, I gotta tell ya. We have the 1GB Joyent Accelerator, and there is about 15 sites on it. Each one is different. There are Ruby on Rails sites on it, ExpressionEngine sites, WordPress sites. The Beacon Athletics site we do has about 5 different softwares running different parts of it. And it all runs on our one server and everything works wonderfully. The yearly cost for the server is $1,250. We probably pay for that with just 2 of the clients fees, and the rest on top of that is gravy.

As I’ve mentioned before, CSS-Tricks runs on Media Temple (the grid-service), which only costs me $480 a year (because I had to upgrade to a bigger MySQL container). Media Temple is also very nice. I bet I have 40 different random sites all in that one account.

Should you buy the domain name as well?


Don’t buy the domain name for the client. They own the business under that name, they should own the domain name. If, god forbid, the relationship goes sour, you don’t want to be in that position. Plus domains are annoying to transfer. They are easy to buy, let them do that part and give you the login and you can handle the DNS stuff.

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.