This website has a WordPress back-end, and a javascript-based front. The javascript communicates with the back-end through ajax. I made the first implementation of the front-end two years ago. Back then I had other plans for the back-end, but later the plan switched to WordPress. I still wanted to use the front-end, so I decided to make a custom theme for WordPress. Because WordPress has no support for a total conversion to ajax, it was unsure if it could work. But because I could just hack in the WordPress source if any problems would arise, I was confident it would work out.
There are basically two parts of this project: The fancy javascript-based front end. And the communication between javascript and WordPress using ajax.
Javascript
The main component of the javascript front-end is the animated menu. Enlarging buttons on mouse-over is trivial when using jQuery. However, it gets complicated when it has to be monkey-proof. (Yes, I also expect monkeys to visit this site.) When clicking like a maniac on the buttons, they should respond directly to each click, and at the end of the clicking-frenzy only one button should be activated. When a button is clicked while it is shrinking, the duration of the growth should be proportional to the amount it has to grow. So the duration of the growth is not the always the same.
Another layer of complexity is added with the submenus, which slide down when a button is activated. They should all behave correctly in the conditions above, but there are new rules for when a submenu-button is active. All these details are not very obvious, but they are very important because they ensure a slick user-experience.
The details on the communication with WordPress are explained here: How to make your WordPress theme fully ajax-based
CSS
Another important part of the front-end is the CSS. CSS can be very powerful because it can make the website scalable. But infinite scaling is not good, because that makes the lines of text very long and that is unpleasant to read. Making a scalable website is more difficult than a fixed-width website. A fixed width-website requires to specify the positions, whereas a scalable website requires to express the relations between the elements. This is where CSS lacks some features, so it is challenging to get it all right.
When combining CSS with semi-transparent png-images, a nice blending-effect can be achieved. This is similar to the gradients in CSS 3.0, but more flexible and supported by more browsers. (When I made the front-end, CSS 3.0 wasn’t even released yet so I didn’t have much choice.) I used these gradients in the menu-buttons, to allow the color to change within the gradient. This is not possible to achieve with non-transparent images. The semi-transparent images are also used in the header-bar. They fade-out the header-image similarly in every scale. Try resizing your browser, and you’ll see that the header-image appears and disappears in the fog at the edges of the header.
Design
I’m not completely satisfied with the design of the website, but it’s the best I could do within a reasonable amount of time. Considering my lack of experience in design and my technical background, I think that an acceptable design is good enough (for now…). The uniqueness of this website is now in the animated menu, and I think focusing on that technical part fits me better :)
I like this post| 3 people like this post.