Edupaper
Written at 11:24, on Thursday 23 August 2007. Tags: drupal portfolio webdesign .
Edupaper is an innovative company with a green goal: it intends to reduce paper use in education by implementing mobile applications. Using electronic paper will reduce the number of books students need to carry, and in effect reduce the number of trees which have to be cut for books that students. Furthermore, by equipping and connecting them with Open Source Software such as Dokeos, it will enable students to learn more efficiently. Of course, when Frits Hoff, CEO of Edupaper, approached me for designing his website, I gladly accepted.
After a few iterations we finally settled on this design, which I am quite fond of. Since modern electronic paper has such a high resolution and strong backlight, it’s allmost as sharp as regular paper and can still be used outside. To support this communication goal, I focused on the typography, using large corpses for legibility and employing a vertical rhyme. Another goal was to make it as clean and fresh as possible, which I think is achieved very nicely by the use of just a few supportive colours.
The design was built as a Drupal theme. There were some small challenges, mostly in getting the vertical rhyme just right so it would line out with the background stripes. There was a very annoying issue with images seemingly getting a 7px padding in Firefox, which was clearly seen in Firebug, despite that all paddings and margins were explicitly set to 0. To solve this, I resorted to floating all content images, which isn’t very nice but at least they line up properly.
For the logo, I used an alpha-transparent PNG image, since I wanted the background lines to shine through. This meant that a little bit of Javascript had to be used for Internet Explorer 6, which doesn’t support this natively. It was very easy with a jQuery plugin, but unfortunately it required upgrading of Drupal’s jQuery version, which is stuck at 1.0. The Drupal developers decided to stick with the same major version of jQuery so module developers have a stable target to work with, but it makes it so much harder for us theme developers since most plugins available nowadays require version 1.1. Fortunately, the jQuery upgrade module takes care of upgrading Drupal’s Javascript so it works with jQuery 1.1, but it requires you to replace the system jquery.js. This isn’t always feasible, especially in a multi-site installation. But I digress…
All in all, I think the website turned out great, and I’m certain it brings a new level of professionalism and clear communication which will take Edupaper to the next level.
Comments closed (4 total) | Permalink
Nice theme indeed. I like how you used the primary links in the top with the icons, as a toolbar.
And yea. Putting text with CSS on a very tight grid is indeed extremely hard, esp. if images are involved :)
Oh, and it looks like I am either blind, or you forgot a link to edupaper.nl :)
Thanks! The links at the top are actually a static HTML block, since the icons are added via CSS (they’re decorative).
And you’re not blind; the link to edupaper.nl was stripped off the image. I’ve fixed it now, thanks for reporting it!
The current theme is much better than the old one of edupaper. Nice work.
However, the text does not line out with the background stripes on the current version of http://www.edupaper.nl. At the top it does, but below some image, the text doesn’t line up anymore.
Too bad, because the idea is nice!
Unfortunately, that’s what happens after the designer relinquishes control back to the client! :-) I’ve send him instructions on how to crop the images, so I hope he fixes it soon.
Thanks for the compliment!