Frederick's Timelog

Easier Web Designing

A lot of people (including myself) design Web sites with a clear process:

1. Think of ideas.
2. Make a mockup in Photoshop.
3. Convert to XHTML/CSS
4. Tweak design.
5. Add functionality.

Normally, the step that takes the most work is the third one: converting the Photoshop mockup to XHTML and CSS.

Fortunately, there are services out there to take care of this step. Many people already know PSD2HTML, an established name in this field, but there’s an interesting new competitor called HTML Markup.

Ordinarily, I wouldn’t use these services because of their (typically) high prices. However, if I needed it done extremely quickly, these services are probably the best choices.

HTML Markup offers affordable Photoshop to HTML conversion at lower prices. They convert to HTML or XHTML/CSS, and advertise their services as cross-platform compatible on IE, Firefox, Opera and Safari; PSD2HTML, on the other hand, charges $9 for Safari compatibility and $9 for Opera compatibility. HTML Markup will also make sure that the output is optimized for the Web.

More »

Customizing 404 error pages (on WordPress blogs)

If you’ve ever seen a 404 error (“not found”), you’ll relate to the frustration that users experience when all they get is a “Sorry, can’t help you” type of message.

That’s why I’ve customized the 404 errors on Frederick’s Timelog to be a bit more user-friendly.

If you go to any random non-existent page (for instance, http://www.frederickding.com/posts/234u0af) you will come up against a 404 page with an evident error. The red background immediately indicates a problem, while the blue section indicates possible remedies.

On a random URL, the possible remedies are limited to a site search. However, if you go to a misspelling (for instance, http://www.frederickding.com/podcasts as opposed to http://www.frederickding.com/podcast), there’s a neat feature that says “Go to [the correct URL]“.

How was this accomplished? (Code samples follow after the jump.)

More »

Homer Simpson in CSS

Can you believe it? Homer Simpson can be represented as characters on a page, formatted with CSS!

You can see this amazing feat animated by Ned Batchelder using jquery, and recorded for your viewing pleasure below. Or, you can download it as a compact (947 KB) QuickTime file.