The Process
First, the PSD file is sliced, then the constituting images are manually cut. We never use WYSIWYG techniques; usually, these yield messy code that's as hard to keep up as tables.
The images are individually saved as JPEG, GIF or PNG depending on several criteria (compression, size, position, use).
We then arrange the images in directories by placement and function, naming them accordingly. Placement indicates where in the layout the image resides, whereas function indicates the image is used for the logo, for background, in a form — as submit button, to round up corners or are part of the content.
Even if you never need to use them yourself, somebody later will. It would be a nice gesture to make it easier for them; also, it might lower your future maintenance costs.
Sometimes, several images are stitched together in one image called "sprite". By using it as a background image and showing only a part of the image, one can use the same image to cover a whole menu, per say. This provides less connections to the server.
The HTML is, to be exact, XHTML 1.0 Strict. This standard provides the maximum compatibility for future browsers, while avoiding the overkill of XHTML 1.1.
Just as the images, the tags follow a "functional map" of the page: we write the skeleton for the main sections of the page, assigning them proper seamantic id and class names so, even for inexperienced back end programmers, the structure is simple to grasp.
We only write the amount of markup that is necessary for the layout to work, avoiding useless wrappers and classitis and divitis. The tags are used as what they're meant to do, i.e. Hs for headings, Ps for paragraphs and lists for enumerations, be it a menu or a collection of items.
The reasons for why we do it like this are multiple: the source is light, easy to comprehend and search engine friendly.
Also, commenting and indentation are part of the process. There's nothing uglier than beautiful code that can't be read. Well, except ugly code that can be read.
To keep the templates tidy, we separate the content from the presentation: no style tags in the markup. This ensures an easy update path: just plug in another set of images and CSS files. Actually, we wish it were that simple. But it would be a lot easier than hacking endless sheets of table declarations with inline cell-paddings and spacer GIFs.
The CSS is always separated from the XHMTL. Moreover, depending on complexity, we might separate the style reset, the layout, the colors, the typography, the forms etc.
We keep the amount of hacks to a minimum. We'd like to say we never use them, but sometimes it's necessary.
We target the majority of the browsers in the wild today: Mozilla Firefox, Internet Explorer, Opera, Safari, Chrome and derivates. The least advanced browser that we support is Internet Explorer 6.
There is no extra charge for fixed elastic, fluid, pixel or em-based layouts. That's just mean. We're people here, not robots.
Extra Features
Javascript development, AJAX, various techniques: sIFR, Typeface.js, flash players and so on.
Prices
250€ is the starting price for the basic one page template, deliverable in 24 hours.
Additional pages or features, such as JavaScript, AJAX, sIFR, custom Flash are charged 30€/hour.
To obtain a code, please send us the design first using the "Order Now" form. We will be back shortly with a quote and a deadline. Should we a agree on these, we will deliver the finished template on the specified deadline.
If we fail to provide the template in time, you can either choose from 50% off the price we agreed or to cancel the agreement.
