In this post I'd like to present you my latest website: Ermanno Falco - Fotografo di Torino (in Italian).

Ermanno is a photographer which operates in the Turin (Italy) area. He contacted me to create a photograpy portfolio website which he could use to upload his best works. Ermanno needed to indipendently manage the uploading/modify process of contens so it been clear from the bedinning that we needed a dynamic platfrom like Drupal.

From the start of the project, one of our goals has been to create a really usable website: we then decided not to use bad technologies like Flash and instead we opted for a pure XHTML and CSS website with a pretty consistent usage of Javascript, JQuery in particular, always keeping in mind the progressive enhancement approach though. In order to keep the design light and simple, we choosed colors and graphics in general which could be easy to the eyes, not distractful, which, from our opinions, could let the pictures be seen without distractions.

Also the number of features on the website has been profoundly limited, also with the goal of keeping things the pages and the whole website as simple as possible. The features of the website are: a homepage, a photo gallery, a blog, about and a contact area.

Implementation

Following a list of every feature of the website with all the underlaying implementation:

homepage

The homepage is a simple Drupal node having type which has 3 blocks created from views. Everything is then enhanced using Jquery. The ultimi contenuti (last contents) area contains the 3 block and it's hidden using Jquery. To implement image rotation we used the Jquery Cycle plugin.

photo page

The photo page, such as this, a cck node has been used. We used imagefield with 3 image variation rules: thumb, normal, big. Those three differs from the resolution used, the big variation also uses an imagecache action to add a simple watermark to the picture.

The view of a picture node contains the title, the normal variation of the image and a description. Clicking on the picture the picture is shown fullscreen using Shadowbox.

Shadowbox is also used to implement the visualizza presentazione (show presentation) feature which is also accessible from the picture page.

To the right of the picture there is a custom coded PHP block which displays all the other photos in the current categoria. This block has been custom PHP coded by me.

The precedente (previous) e successiva (next) have also been added using custom PHP code.

The comment form is hidden or displayed using JQuery. This way the form is shown only when really needed and only to them who really need it. This also makes our design lighter.

photo gallery

The first page of the photo gallery has been implemented using Panel which inside has a view for each one of the picture categories.

The picture category view is implemented with a view which takes the category name as paramether and then shows the appropriate contents for that view.

Shadowbox is also used here for the slideshow implementation.

blog

To implement the blog we used the stock blog module from Drupal core. We just added a category block, implemented using Taxonomy Block, and a tag cloud block, implemented using Tagadelic. There are then some simple html blocks which display some contact and personal informations.

about

The pages in the area chi sono (about) are simple page nodes with some images inserted using the inline module.

The 2nd level navigation here is implemented using the secondary links block. We stick with this to implemente persistent navigation.

Also here there are some simple html blocks for displaying contact informations.

contact

Implemented using the stock Drupal core contact module.

Usability testing

During the whole project development we conducted different usability tests. We did some simple friends and collegues feedback as well as complete usability test. This tests guided us through different improvements to the website from the whole user experience.

An example of our finding can be read in this blog post: Usability testing Drupal's comment form: findings and how to fix it's problems. There I describe how we usability tested Drupal comment form and what are the issues our users found using it. The resuts are pretty bad and should be carefully evaluated for those who are going to implement Drupal on a website which uses users comments as one of the main content source. On this topic there is also a little video of one of our users strugglying with the Drupal comment form.

Considerations on client autonomy

Ermanno, my client, has the possibility to administer/create/modify every aspect of the contents on the website. He can create pictures, edit the homepage, about pages, pictures categories and the contact details. Everything thanks to Drupal great flexibility!

More technical details

The website uses valid XHTML 1.0 Strict and CSS 2.1 code. In the CSS there are some vendor specific rules which borrowed from CSS 3.

The website implements different SEO solutions: clean URLs, pagetitles module, xmlsitemap module, nodewords module. We also use a content first and SEO friendly template.

The website sources are archived using bzr version control system.

The website is hosted at Site5. The domain has been bought at tophost.it.

Conclusions

I'm really happy for this website. Once again Drupal has made my job easier: it really is a great platform for building websites.

Right now, the website is still to young to talk about business results but I'm pretty confident that it will perform great!

What do you think about?

I'm looking forward all your comments, every kind of feedback is welcome.

Thanks!