ChiliProject is not maintained anymore. Please be advised that there will be no more updates.

We do not recommend that you setup new ChiliProject instances and we urge all existing users to migrate their data to a maintained system, e.g. Redmine. We will provide a migration script later. In the meantime, you can use the instructions by Christian Daehn.

New Landing and Getting Started page (Task #1275)

Added by Chris Dähn at 2013-06-23 01:35 am. Updated at 2013-07-02 08:07 pm.

Status:In Progress Start date:2013-06-23
Priority:Normal Due date:2013-07-23
Assignee:Chris Dähn % Done:

0% Website
Target version:-
Remote issue URL:


As discussed long time before on the mailing list it's time to design/create a (fancy) ;-) landing page and better readable (ok: fancy) :-) User Guide / Getting Started pages.

The target is to create static HTML pages which can be maintained in plain text - e.g. on github or whatever. So my task is to provide the HTML stuff and the content - Holger & Felix than can decide how to deploy / maintain it.

I reviewed many opensource and commercial sites of comparable projects and found as the best example for the integration of static HTML content and CP portal (ok, I know that maybe there are some issues with OPF/Finn... but their concept works good).

Tasks / Pages

The following static HTML pages will be build upon:
  • jQuery
  • Bootstrap.js
  • HTML 5 (static pages)
  • parts of original CP theme (CSS + images + parts navigation)

Landing Page

  • Navigation (top bar)
    • duplicate of CP portal without dynamic menus
    • link to User Guide
    • link to CP portal home / start page
    • link to Login
  • 3 Caroussel Items:
    • Project Management
    • Issue & Bug Tracking
    • Collaboration Platform
  • 3 Links:
    • Features
    • Getting Started & Download
    • Development (link to CP portal)

Features Page

  • Project Management
  • Issue & Bug Tracking
  • Collaboration Platform
  • Code Integration
  • Extensions
  • Download & Install
  • User Guide / Getting Started
  • Project Page / the ChiliProject Portal

Getting Started Page

  • short version of Install Guide (only for Debian / Ubuntu)
  • Download links
  • links to User Guide

User Guide Page

  • rewritten version of Redmine User Guide / manual
  • screenshots of current CP portal

CP Portal / Start Page

  • the Wiki page of the portal needs to be rewritten
  • short page with Download links and describing info sources for Developers
  • the Wiki page should fit into one screen page (max 1200x1000 px)
  • the CP portal sidebar should be cleaned up -> move File & Docu links into Wiki pages


Updated by Chris Dähn at 2013-06-23 11:06 pm

Demo-Site is online (first draft of Landing Page)

...still work in progress, but some contents are already there and the integration with a CP portal works already...

Updated by Francis Vo at 2013-06-26 05:14 am

Hey Chris,

I love the look, and it looks really great. I'm going to be really picky, so you have some feedback. I'm on a 1920x1080 resolution screen, so the way the page looks is different. I did re-size the window to look at how the page reacted.

There are some problems, when I view on a widescreen and a small screen. On the widescreen, the words move very far from the images on the carousel. Maybe try keeping the text and the image together near the center of the screen, kind of like page you referenced. On smaller screens or when I snap it to half my screen, the words overlap the image, and makes it very hard to read. I have no idea how to deal with it, so it might be good for now.

The 3 columns below the carousel, the Features and Development's text act differently. So Features's text already has line breaks in each paragraph. Compared to Development's text, where there are no line breaks and therefore change depending on screen size. Personally I like the look of the Features's look, it just looks cleaner, but it does take more time to make sure it looks good.

Also more about the 3 columns, there is this weird extra space left of the Feature column. It is not very noticeable when the screen is smaller, but as the screen gets larger that extra space becomes bigger. It just bothers me because the space doesn't grow on the right of Development column. Maybe grouping the 3 columns and center them, so the space grows on both sides.

The Featurettes look really good. Maybe make the titles links to a wiki page, and make the text vertically centered between the featurette-dividers.

I don't know, if that was helpful. Please let me what else you want opinions on. But also finalize it with the others because I'm pretty new and have no idea what team wants.

Good job

Updated by Chris Dähn at 2013-06-26 10:48 am

Hi Francis,

thanks for your feedback! Your very detailed hints help a lot! I'll try to fix the layout as soon as possible.

For the featurettes I planned to link them to a new "User Guide" comparable to the detailed descripton of OpenProject.

My next step (after fixing the Landing Page) is to write the new User Guide page (thats really much work) - after I created the layout of this page, I maybe could need some help writing the User Guide sections ;-)

One way to work together for writing the UserGuide could be:

  • I create a layout and define the content / document structure (sections)
  • we both decide who covers which sections
  • each section is then just filled with some screenshots and some and a description how to use the functionaliy X as notes
  • later I put all the sections together and convert the notes into continuous text (this hides that everything is written by different people)

What do you think? Or do you have an other idea?


Updated by Chris Dähn at 2013-06-27 01:46 am

  • fixed the alignment + layout issues for the 3 columns
  • added links to new userguide.html page
  • first quick and dirty content list / headlines for user guide

Updated by Felix Schäfer at 2013-06-29 11:49 am

Holger and I had a quick look and it definitely is an improvement over the current landing page :-) (I'm personally not completely sold on carousels).

Do you need help with the content?

Updated by Chris Dähn at 2013-07-01 12:47 am

I rewrote the landing page to:

  • make the carousel more leightweight and less annoying
  • reduce the text massively -> moved featurettes to separate page
  • brighter design / removed dark background colors
  • new links for demo page and discussion forums


  • writing the user guide
  • creating more screenshots

Here I could need some help of Felix & Francis.

Currently I create the rough content structure and add placeholders everywhere I need help / further information from you...

Updated by Henrik Ammer at 2013-07-01 05:24 pm

I agree will Felix and I am neither that fond of carousels. But I also agree on the improvement. These are my thoughts on the whole thing:

In the carousel there is left aligned text and buttons. In the three columns below its centered. I'd go with left even in the columns to create a more unified feel.

Instead of green buttons I'd use the red from the topbuttonrow, maybe increase the size and padding of them and make it one button per line instead of side by side.

And finally, dropshadows in the images on your images and arrows come from top left, but on the topbuttonrow the light comes just from the top.

Or maybe instead use the featurespage as front with downloadlinks above and below the text?

Updated by Chris Dähn at 2013-07-02 02:30 pm


thanks for your hints and reviewing the landing page. Here my thoughts:

  • carousel:
    my intention was to provide a leightweight possibility to present more information than fitting on a screen without scrollbars (even on small monitors)
    ...aaaand: it's so fancy and just state-of-the art :-D
  • text alignment for carousel and features:
    both are in different design / content contexts, and left align for the 3 column display destroys the fluid layout / look... the concept for this whole layout is done by a professional webdesigner - (and thus) not by me ;-) :-) a scalable text layout for small and up to large screens
    ...for any other page (every place outside this 3 column design) I completely agree to you: there should be only one alignment/layout all over the page
  • green download buttons:
    ...just for user convenience - because nearly all big open source sites currently use green buttons for download links, so I adapted this wide spread design aspect to get more attention to the download links
    ...I asked some users about this coloring stuff and they preferred the green ones
    ...and regarding one button per line: this would break the 3 column design where the "Learn more..." links should be vertically nearly in one line / close together
  • dropshadows:
    ...ok, these have to be fixed to be unified - I'll change that
  • featurespage as front page:
    ...before starting the works on the new landing page I gathered some opinions of end users and colleagues about how they find the current CP site and what they would like to change and what is currently not optimal
    ...the result was: the current CP (wiki) site is to overloaded - it's hard to find the links to the interesting topics (new users: features overview + demo + forums, frequent users: download link + changelog + forums + docu)
    ...that's why other open source projects and commercial sites behave the same: the first page must not be overloaded and must not have much text - the visitors mostly just invest a few seconds to find the links and infos they are looking for
    ...comparable sites:,,
    ...I experimented with different ways, e.g. putting the featurettes below the 3 colums - see: and

So: What looks better: The featurettes as separate page or below the current 3 colums layout?


Updated by Henrik Ammer at 2013-07-02 08:07 pm

So we agree to disagree? :)

  • Carousel for me feels non state-of-the-art. It feels done, done and done. planio you linked to feels way better. Nothing moving, just an image that tells the tale and cut to the chase text.
  • Independent features or not, but that close to each other, same type, same fontsizes just seems awkward to me. Although I'm not that fond of centered text at all since it's a readability nightmare when it comes to more then one-two lines and best used for punchlines.
  • After consideration, green is probably better. Red is, and probably always will be, an alarm/dont touch this kind of color.
  • If you go for an alignment of the buttons below, maybe solve it like did?

As you might understand by this, layout 2 is in my book the best one (even though it has a carousel :) since it mimics planio the most (which was the best one of the three examples you gave).

Maybe we should move this over to your forumthread instead of here?

Also available in: Atom PDF