Posted tagged ‘html’

Micro templates for rapid web design prototyping and development in PHP


When you are developing a new web site, it’s common to start by writing a static HTML version that will later be converted to a theme in the CMS of your choice. It takes away the mental overhead of adhering to theming standards and lets you focus on the client-side technologies (HTML, CSS and JavaScript) unhindered.

When working on an early static version of a site, I often find that I do miss simple templating, especially for listings (be it news posts, sidebar banners or anything that needs to be “filled up” to make the page look as it would in production) – So I set out to look for a clean, simple and minimal way to introduce templating into static projects, using PHP.

I found this post on micro templates by Brad Touesnard that perfectly suited my needs, but felt that it was missing some polish and examples for people to fully utilize it. I wrote a couple of examples for common tasks such as displaying lists and nesting templates, and released it as a library that you can use in your projects to enable faster prototyping and development.

Live demo

Click to see a live running demo.


Click to download the latest version, with examples.


Click to see the Bitbucket repository


Download php-microtemplate and put it on a php-enabled server, navigate to the php-microtemplate folder in your browser and look at the examples.

If you want to use it from scratch, just include microtemplate.php at the top of any php file:


Add an empty templates folder, so the directory structure looks like this:

Now you can use the t() function to display templates (which are just PHP files) from your templates/ folder, for example this snipped will display the content of  templates/header.php:


You may optionally pass a second parameter that will send a variable or array to the template (to be used as $v inside the template), and a third optional variable that can set the folder path where the function will look for templates, which is useful if you prefer a nested directory structure for your templates.


Short tags (short_open_tag) need to be enabled in your php.ini

Minimal server online status checker (HTML/JavaScript)


Starbuck, noooooo!

Above is an example of a nifty server status script I have been using in a recent project.

Here is the base code for monitoring a web server:

<img src="" alt="status" onerror="this.src='files/offline.png'" />

The setup is:

  • An online icon (online.png) on the remote server you want to see the status of.
  • An offline icon (offline.png) on the server that is going to show the status page.

If the image on the remote server fails to load, the onerror event is triggered and the javascript rewrites the image tag to show the offline image. You can use relative or absolute paths for the offline image. This snippet is fully compatible with all major browsers, including Internet Explorer down to version 5.5!

Click here for a demo.

Below are the images I use, found on Clker, an excellent online clipart resource.


If you find this useful or have any suggestions for improving it, feel free to write in the comments!

15 web design resources that will save you time and improve your designs!


I have been doing quite a lot of creative work recently in the domain of web design (get it, “domain”, har har!) , and I’d be happy to share some of the great web sites and applications that have helped me make better and cleaner design and code jobs. I have divided the sites into six categories, so take your pick and dig in!

If you have any suggestions of your own, I’d be happy to hear them, leave a comment and be heard!

Cliparts and photos

image – Royalty free photography, or stock.xchng, is the little brother of  iStockphoto. They offer royalty-free photography for non-commercial use, and an option to contact the authors for use in commercial application using a very relaxed license. My experience with the people there has been great as a whole, highly recommended and great array of photographs, but also clip art.

image – public domain clip art offers public-domain clip art uploaded by users. Great site for any smaller images that you might need, such as bullets and icons.



Common font list
When designing a page, you need to make sure you use a font that is visible to and looks visually similar for every viewer, and degrade gracefully in the cases where the font is not present on the viewers computer. This useful webpage displays common font families that work over a wide array of browsers and operating systems.



BrowserShots has lost its glory days as the go-to site for making sure your web pages look equal across all browsers due to its increasingly long rendering waiting time and restrictions, and with IETester mentioned below, you can verify that your page runs properly on all major browsers.

But BrowserShots has introduced a fantastic gallery of web designs, and this is a place where you can find great inspiration.


ColorSchemer gallery and ColourLovers palette gallery
Finding the correct colors for your site can be a surprisingly difficult challenge, but when browsing these galleries, this becomes a fun experience. The idea is that you pick a scheme, which contains roughly 3-8 colors, and then try to base your design around these. If you try it, you’ll find a surprisingly clean and beautiful site looking back at you when you are finished. Using schemes with multiple variation of the same color (like this one) has worked the best for me.


Web Design From Scratch
A great resource for articles about the philosophy behind, and practical application to modern web design.



Sizer is a small application which allows you to easily resize your browser (or really, any) window to see your web pages (hopefully) degrade in a graceful manner. Simple and easy, yet invaluable.


Firebug (Firefox add-on)
Firebug is a great web developer tool built as a Firefox add-on. I have barely scraped the surface of this great tool, but it has been very helpful so far.


Your web design and CSS looks great in the latest versions of Firefox, Chrome, Opera and IE? You’re not done yet! Unfortunately, a large portion of people still use Internet Explorer 7 and 6 (*shudders*) and this tool will help you make sure your design stays true to its form. (although it probably won’t until you spend an hour trying to figure out why IE6/7 doesn’t handle inline block  properly, which brings us to…)

Fixes and hacks for common problems

This might seem like an odd choice at first, but if you’ve ever had a problem, googling will almost always lead to an answer. The great thing about the internet is that chances are great that somewhere, someone has had your exact problem and either asked about it in a forum or given a solution in a blog post, which will usually lead you closer to an answer.


It is fairly common knowledge that Internet Explorer 6 and below does not handle the alpha channel (transparency) for PNG images properly and displays the whole transparent area as a gray box. Resorting to GIF is possible for single-colored background, but for patterned backgrounds your only choice is PNG and this fix (Which is mostly done in CSS) will take care of that.

A quick note: I have noticed that the JavaScript used for tiling images in “IE PNG Fix”, which is called “iepngfix_tilebg.js” seems to break the dropdown functionality of Superfish, which I mentioned earlier. I have been looking at the problem, but haven’t been able to identify the culprit, although I suspect it is related to the way the JS places the image. Unless you absolutely need tiling support, it’s best not to use the JS code, so beware!

CSS Sticky Footer
Making a footer that always stays at the bottom of the page, moves with JavaScript and  works over all major browsers is a surprisingly difficult task, but CSS Sticky Footer takes care of it. It requires you to import a fairly large CSS file, but it shouldn’t break your layout too much, aside from a margin that needs fixing here and there.


CodeIgniter PHP Framework
CodeIgniter is a great framework for easily making web applications in PHP. The features I have enjoyed so far is the fantastic database handling using Active Record, the interesting Model-View-Controller approach (which was new to me) and the great performance I get from my applications. If you want to know what the hype is about, check out this video tutorial entitled “Create a blog in 20 minutes”!


Suckerfish JavaScript/CSS menu system
Another thing that seems like there should be a myriad of online, but is surprisingly difficult to find is a menu that works over all browsers, is completely free, simple to use and can be used in commercial applications. Look no further, Suckerfish is what you have been waiting for! And it degrades nicely to CSS-only under environments without JS too!

High on validation


thinlineThe thin… black line?

I think I’ve found my drug of choice. It’s neither alcohol nor tobacco, and probably not whatelse you can guess – it’s W3’s (X)HTML validation engine. Pressing that big button nervously, awaiting the  validation server to fetch ones page, perform its ruthless tests and spit out either that satisfying green glow, releasing endorfins at light-speed into your system, or being faced with that that ominous red banner that makes your skin creep like a bad trip (I would assume.)

Ah, to be alive!

PS. I think the cwalken twitter might be influencing me a bit too much for my own good. DS.

In other news…

royksopp-junior royksopp_the_understanding_prcd1

Covers for Junior and The Understanding, respectively

The new Röyksopp album, Junior –  is good. Actually, it’s very good. Not really “The Understanding”-good and far more poppy, but I think that might be because “The Understanding” will always hold a special meaning in my life. Somehow Junior reminds me of Pocket Symphony, which is something very positive – even with all the hype I thought Pocket Symphony was very solid. I hope Röyksopps pays their neighboring country a visit on their upcoming tour.