A nice introduction to dynamic page caching complete with source code.

Ever since I first started making web pages, I wanted a CMS that would allow me to make content updates by simply going to my website and changing the content right on the page. My fantasy was that this system did not require me to know any programming language or tagging system beyond HTML and CSS and it didn’t require me to play with a database. In my fantasy, the system took minutes to implement and my clients could use it as easily as I could.

When a web-site has been running since 1996¹ you would expect it to have enjoyed some evolution, with the odd redesign thrown in along the way. The web-site at apple.com is one such site. Flickr user Kernel Panic maintains a gallery of screen captures of Apple’s home page and it represents an interesting journey through the history of the company. It’s amazing to me that the basic design of apple.com as it stands today is the same as it was in 1998 — how’s that for consistency?

But what would Apple’s home page have looked like in the years prior to 1996? Sadly we never got to see an apple.com home page for the launch of the Apple I, Apple II, Lisa, Macintosh or MessagePad… until today! Dave Lawrence of Newton Poetry fame posted a couple of mock-up apple.com home pages for the Lisa and MessagePad machines on his weblog and Matt Pearce answered Lawrence’s call for others to add to the meme. Between them, they’ve come up with a few beautifully crafted and clever images of the home pages that might have been.
Continue Reading…

Tim Brown has written one of the most comprehensive guides to font embedding with CSS that I’ve ever read. There’s some good information here and all the common stumbling blocks have been addressed.

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Read more: http://informationarchitects.jp/100e2r/

A large part of my professional work involves the build and deployment of WordPress-based websites. Now as any designers/developers among you will appreciate, it can be extremely annoying frustrating to sign off a build only to come back later to see that your client has (inadvertantly) messed things up because WordPress has placed too much power in their hands.

I was delighted then to read “10 WordPress Dashboard Hacks” because there are some really useful code snippets presented therein:

• Remove Dashboard Menus: At last I can remove certain menus from the client’s view — whilst obviously still leaving full control for the Admin user
• Define Login and Dashboard Logos: Great for branding.
• Disable the “Please Upgrade Now” message: I never want my clients to do this. I think this is one of my responsibilities.
• Customise Dashboard Widgets: Again, it’s about keeping control. Not exposing the client to things which could be hazardous.
• Provide Help Messages: Because they’re helpful (if done correctly).

Some of these are definitely going to be rolled out on to some of my client’s sites in the near future.

In an article on the web-design advent calendar, 24 Ways, Meagan Fisher advocates setting aside Photoshop and building design comps directly in our preferred flavour of HTML.

That’s how I always work anyway. Only once have I ever built a design in Photoshop before writing the code and that was for the front page of this website — it took ages and felt totally un-natural and counter-intuitive to me. I did it because I understood that that’s how all designers work. I wanted to try it out to see if it made the process any easier for me, it didn’t, at all.

Even so, I think Meagan has overlooked a quite important point: not all web-designers are writers of code.

Continue Reading…

Transm.js allows you to add programmable image transitions to your web-pages. It uses unobtrusive JavaScript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari 2+, Chrome 3+ and IE 6+. Works also on older browsers supporting JS 1.5 and images along with filter or opacity, else it’ll degrade and your visitors won’t notice a thing.

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible.

Fortunately, there are ways to get scripts to download without blocking any other resources in the page, even in older browsers. Unfortunately, it’s up to the web developer to do the heavy lifting.

There are six main techniques for downloading scripts without blocking:

• XHR Eval - Download the script via XHR and eval() the responseText.
• XHR Injection - Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.
• Script in Iframe - Wrap your script in an HTML page and download it as an iframe.
• Script DOM Element - Create a script element and set its src property to the script’s URL.
• Script Defer - Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.
• document.write Script Tag - Write the <script src=””> HTML into the page using document.write. This only loads script without blocking in IE.