Image 1: Container Layer

Layout

The layout is now based on a container layer (see Image 1), containing the header layer, the navigation layer, the main layer and the footer layer. The main layer consists of the content layer and the modules layer. This way I have a lot of control on the layout with Cascading Style Sheets, which means the amount of styling is reduced and made more clear to me (and to you, if you’re interested in HTML/CSS). When complexity is low, everyone/everything benefits from it.

Problems

I still have problems related to other browsers than Firefox/Mozilla based (like Internet Explorer), that don’t like this markup that well. But this is a learning process, and I’m working around the lacks more and more. I’ve found some inspiration and solutions to this at 456 Berea Street, which is a great site for CSS and HTML related issues.

Modifications

There has been a few modifications to a small part of Mambo and a bigger part of the zOOm Gallery. The Mambo modification was just that I needed an unordered list of menu items in the top menu. Internet Explorer doesn’t like to make html-table-cells inline, though it has no problems with ul/li elements. The zOOm modifications are such that I don’t need the overlib div (overDiv) when I turned overlib off – it confuses the content layer and didn’t show everything in it. I also put the title in a special element, so I could style it accordingly. I’ll make a diff so you can reproduce those.

Feedback

If you like, please tell me what you think about this design (drop me a line at the comment box). I’ll make it available as a WordPress Theme if there exists such a request.

Templates

The main goal was to use templates. Templates are kind of easy: you can imagine it as a simple html-page with a template language where you need it (like when you want to have a variable title or you want to iterate through guestbook entries). I like templates, I often work with them and I really think you should use them wherever you can. So let’s use templates.

Mambo, HTML and CSS

Another thing that came to my mind was using it with Mambo. This is not as easy as I thought because with Mambo you can’t use your own stylesheet and have correct html code. And I wanted it to validate as strict HTML 4.01. With Cascading Style Sheets. Which should also validate. This is a problem not solved so far (except when using the Mambo wrapper).

Sessions and Databases

Using sessions and a database today is kind of “state of the art”. I wouldn’t want to work without these nowadays, these mechanisms are really handy and make a programmers live easier.

Tables or divs?

When I came to designing I thought about a layout for displaying thumbnails – how much columns, should I use slow tables or fast divs? It uses divs, as you might have thought. But – which is really great I believe – it has no fixed columns. This means if you resize your browser window the thumbnails wrap to fit width. That way you – as the user – can control how much images you want to be displayed on screen. No more large white space between images – no more expanding websites where you have to scroll vertically (though there are mice out there that are able to do that). Isn’t that great?

View fotoalbum

I hope you got curious :) If so, then visit my beta version of fotoalbum. Tell me if you like it through the contact form in the menu or download fotoalbum to test it on your own. Have fun!