On almost any mailing list or forum you still encounter developers venting their frustration as to how buggy CSS is and how hard it is to switch from table layouts to CSS layouts. A lot of this frustration is not based on bad browsers or missing elements and concepts in CSS, it is based on an old school view of web design. Web design was never easy, but it can be if we start embracing the complexity of our development environment and be flexible enough to develop for it (more…)

I got some emails by people asking me how the script powering the css table gallery works. Instead of answering each and every email, please refer to the following if you are also curious:

• The making of the CSS table gallery

It is by far not a “best of breed” piece of scripting, but hey, it gets the job done.

The beginnings

Some month ago a colleague of mine considered it a good plan to start an own company in a market that is very competitive and has a lot of shady characters.

The project was planned as low-budget as possible: Hand coded HTML, no database functionality, no CMS and just a few pages to do. Nothing fancy.

He hired a designer to come up with a corporate identity and he did a logo and went through some Corbis CDs to find pictures of shiny happy successful people and mood-selling baby pictures.

It was my task then to deliver the web site. Of course the money for the designer ran out when it came to developing a style guide for type and screen design, which is why I made up the CSS on the spot while converting the five word documents the original site was planned for.

The site was a flexible, easy to resize and accessible xhtml + CSS solution and my pride and joy, as I wanted to make it an example of how we can deliver and create nice sites quickly. I even promoted it on here and in some forums to help it get the first hits and maybe a fresh perspective from other people (being the developer you are always too close to the project).
Now, some minor changes later the colleague wanted to get a more prominent contact facility, which was easily implemented. Then the millions of clients didn’t come. (more…)

I just finished a template for an idea a friend of mine had, and as it is Friday and I had some other good news I am sharing it with you.

Check how the page looks online (only the home and ‘brown’ links work).

The zip with the whole pack includes:

• the index and brown HTML document
• the CSS file
• the images
• the Photoshop PSD with the page

You will need the pixelhugger font if you want to edit the PSD.

The template is not bullet proof and I will do a re-cut in the next few days showing how you can alter the menu to allow for endless (well almost endless) resizing of text without overlapping.

Hope you find a use for it. It is a gift horse. :-)

I don’t know why this comes up now (after being a craze in July), but both Jens Grochdreis and Roger Johannson published posts about footnotes today.

While Roger’s post deals with Daring Fireball’s implementation, Jens points to an implementation at brandspankingnew. Joe Clark had a few well chosen words to say about footnotes and I tend to agree with him. There is no such thing as a footnote on the web, as this is actually what links are for – may they be page internal or to an external source.

I was really miffed by the implementation at brandspankingnew, as it is a perfect example of how not to create a sexy effect. Designers, hailing from a print background are always on the lookout for stuff like that and then they find JavaScript that turns spans into clickable elements (which are not keyboard accessible) and writes out HTML via innerHTML, thus making maintenance a nightmare.

So, from my point of view: Go NUTS on finding and trying out stuff like that, but when you do:

• Make sure the final result is usable regardless of input device
• Make sure the maintenance is easy – HTML should be in the HTML and not in a JavaScript variable
• If you need HTML that only makes sense with JavaScript, then create it via JavaScript and the DOM - thus leaving a clear path of objects that makes it easy to change and remove the elements later on