Web dev

Project Gutenberg

Paul Scrivens (of 9rules) started a series of monthly redesign contests. First in a row was Project Gutenberg, a lovely project of collecting free books and transforming them into e-books.

I jumped the wagon as I see it as a perfect example of multi-platform oriented web site. Here I want to give insight into reasoning behind my proposal.

Gutenberg redesign


Every site needs a good structure, and this one is no exception. I chose XHTML 1.0 Transitional and then went to the content.
Site name is the obvious 1st heading, with intro message going next as simple paragraph.

Next step was to regroup the content to better serve the purpose. Gutenberg is certainly the prime example for information-driven web site. Its main purpose is to bring you the e-books and to call for action of producing more of them.

Old site has find a book and recent books at the top and search form at the bottom. These should go next to each other, as both serve the same purpose - locate the book. Search form was recoded to use semantic form elements - fieldset, labels and inputs. Legend element neatly serves as semi-heading. Some of you might recognize the float labels form styling I showcased in Dots section of this site.

I first wanted to put the Help create eBook next. It seemed logical, as it’s the second goal of the web site (recruitment of authors). On closer examination, it was obvious that news should come first, as the staff used it to point readers to the books of the moment. Books like Peter Pan since the movie is in the mainstream news. So came the news.

With screen estate largely taken, I then decided to move the Help create to the bottom. One who wants to contribute will certainly find the section and one who simply lurks will be spared from scrolling.

With that resolved, the rest was easy. Subprojects were next in the list. I then extracted the HOWTOs to their own section, and logically divided the rest of the important information into the Project colophon.

Site wide navigation came last. The page has good, solid content where information can be reached without looking for global navigation. It’s also good for PDAs. Remember I mentioned multi-platform? This site is most likely to be accessed using smart phone or some PDA. User may find himself waiting on the airport or in the train. What better way to spend time than read something good?

Simple structure with efficient markup gives fast download. All we now need are some styles to make it happen.


I believe that strong information-driven sites benefit most from the minimalistic designs. Site should be pleasant to look at, with design being unobtrusive as possible. There are 3 media styles, one being for screen, tv and projection and the other two for print and handhelds. As I said, handhelds are very important. I could test these only on PocketPC platform (both 2002 and 2003) where they work OK. For actual project, testing in other devices is necessary.

try-out: Pocket PC with the book Colours and images are the fruit of the momentarily inspiration. Initial idea for the logo was “book that melts into PDA”, but I was not satisfied with try-outs. To keep it in the “free spirit”, I used the image from FreeImages stock. There are not many of them, but they are mostly of good quality.

Site heading is replaced with image, while the intro-message is left intact. Hence the user with CSS on + image OFF will see the message which contain the site name. iBiblio logo was tucked in the pages of the book.

In handheld style, image is removed, as well as intro message. Only the site name is there, with smaller font-size. PDA screen estate is precious and user certainly don’t want to admire my graphic while looking at 300px width and even less height. Content is the king.

Fluid two column layout fits the screen as well as PocketPC2003 screens. PocketPC2002 does not support CSS at all, and it shows unstyled version of the page. Left column takes more space since the content is more important.

Help create section is given a little boost by extending to full width.

Thanks to CSS, the navigation is moved to the top, using the simplest possible menu style.

I avoided the CSS hacks as much as possible since the small differences can be tolerated on such layout. And there you have it.