The main site of www.lamia.nl was based on Drupal, but hadn't been updated for a long time. When I started thinking of a redesign, I realized that a full Drupal site wasn't necessary for what is in principle a brochure site. So I decided to remake the site as a static page, old fashioned, hand coded html,css and javascript.
I still wanted to have some interaction on it, so I decided to have the content areas dynamically updated in a tabbed main view. I also wanted to make the links to our websites a bit more interesting.
For the design I went with the classic business colors, blue and grey. The fonts for the title and menu bars are roman inspired small cap fonts, i.e. lowercase is small caps, serif for the title, sans for the menu. The font for the greek lambda was picked to fit with these fonts.
I drew up the design in Photoshop, with a main title, a sidebar, a row of buttons for navigation and the main content area that would hold the dynamic overlays with content. Then I sliced it up and proceeded to code the structure in html divs.
There are four popups defined, that hold the about, profile, experience and contact tabs. Some simple Javascript switches between these tabs. The result is that once the page is loaded, navigation between these 'pages' is instantaneous.
In designing the graphics and backgrounds, I've tried to keep the possibility of expanding the site later. The popups have a little transparent png as background. In future I could have a state with no popup showing, and fill the main area with news or other content.
I did run into a little bug with Safari (and apparently Internet Explorer as well): for the button state changes I was adding an element style on the button when active and removing it when inactive. This worked in Firefox (3.5) and was very clean, as I had the off- and rollover-states defined at load time, and could then add the on-state dynamically. When I tested in Safari however, I saw that you can add an element style in javascript, but you cannot remove it anymore. So now I am just switching the classes.
In the end I have a single index.html and a folder with pictures. Nice and simple. I will however yet pull apart the main page and the divs, to allow me to add a non-javascript version with links to four sub pages. There are still people browsing without Javascript turned on.