Linux Digital Video - Webdesign Requirements

Found at: http://www.kinodv.org/article/print/12/-1/1/

Publishing date: 11.12.2002 09:51

Website Redesign Requirements

The current website is http://kino.schirmacher.de, which is only a slight improvement over the previous one, and the one before that was so bad that I didn't even keep a copy...

My problem with the current design is that it looks too "primitive" compared to websites designed by a professional. I'm open to all suggestions to improve the look and feel, but I can't easily describe exactly how it should look like. All I know is that many other websites simply look better somehow.

The current design does not use any graphical elements. The only colors used are the one in the navigation bar.

Overall design

The purpose of the website is to distribute a Video Editor program for Linux, and to build a community. The audience are people working with digital video, and I have a significant percentage of video professionals and artists visiting this website. Therefore the overall design should be adequate for visitors with a strong graphical or artistic background.

I would like to have more graphical elements and more use of color, but of course no large gifs, no animations, no flash at all and the graphics should not distract from the information in the website. The website must load fast.

It might be possible to render article titles, header lines or other objects dynamically as gif or png graphics. I'm currently using this technique on another website, where I'm using a PHP function which takes a text string as input and returns a PNG graphic with that string, in a true type font and anti-aliased. If this technique is used, the professional must define the typeface, size and color, I would be responsible for the PHP coding.

Logo

There is no real website logo. The current "Linux DV" title does not look good enough. Much of the space in the top area of the page is wasted. The silly pinguin must go.

Navigation bar

The current one looks a bit primitive. It is also too large. I would like to have an extra section in the navigation bar with a "Search" text input field and button, but righ now it would not fit.

A possible modification would be some sort of hierarchical navigation bar, where a click on a heading opens a few more links related to that heading and hides any previous displayed links. But I'm not sure what the optimal design is in my case.

The navigation is coupled with the display of categories and articles in list form, click on "Latest News" and "Developer Guide" to see a sample.

Front Page

The website does not have a real front page yet. I'm currently using the "new articles listing" view, from time to time I switch to a view of a new interesting article.

Pages

Most pages of this website are article pages. Other pages include lists of new articles, categories, authors, search results, the login page, the edit article page etc. The main difference between article pages and other pages is that articles are written by the author using predefined building blocks (such as headlines, images etc.), whereas all other pages must be designed by modifying template or php files.

Articles

A sample article: /article/view/42/1/7/.

Articles have five areas: the title line, the intro text, author and publishing information, the body with the actual article, and the footer with navigation.
Static pages (this one for example) do not have the intro text and the footer block. They are not listed in the article categories. The purpose of static pages is providing a standard format for pages other than true article pages, such as legal info, title page etc.

The footer navigation block contains a link to a print view of the same article, one can send a link to this article to a friend and for longer articles there is also a next / previous page link plus individual page links. Here's an example for a footer for a multi-page article: http://www.softwaretesting.de/article/articleview/50/2/.

The footer must be redesigned. I don't like the primitive look with only text links. Many other websites have small icons for the same functions. I would like to have icons too, plus icons for sending to a friend, sending email to author, downloading article as a pdf, switching to print view and back, editing one's own articles and adding comments.

Building Blocks

The article author can choose from a number of building blocks such as headlines, images, program listing text, factbox etc. Here's a sample page with all available building blocks in the default design: /article/view/32/1/7.

Headlines

Five types of headlines can be defined. The default styles differ only in the size for the text. I like web pages which use a colored text or background, or other graphical elements such as a dot, a line or a frame around the text. Some web sites use a gif image with antialiased typeface for the headlines.

Images

Images are always rendered to one of three predefined sizes or the original size. An image can have a title. Image building blocks could be improved by adding a drop shadow, a frame around image and title, or by rendering the image on a colored background.

Factbox

The current design of a factbox is simply a light gray box with the factbox text on top, displayed at the right side of the article.

Code

The current code box looks too similar to a factbox. It is a light gray box with the text displayed in a monospaced font, but larger.

Ordered and bullet lists

The current design is probably ok. Just an ordered/bullet list.

List pages

The website uses several lists: lists of categories, articles and downloadable files. I would like to have one common design for all those lists.

Currently the following types of lists are predefined:

List of articles of one category: /article/articleheaderlist/7 (articles can be in more than one category, thus the different entries in the category column)
List of articles in all categories: /article/articleheaderlist/0
Archive list (a list of categories followed by a list of article intros): /article/archive/0
List of authors: /article/author/list
List of all articles by one author along with some personal information: /article/author/view/3
List of downloadable software: /article/static/1 (I hand-coded this to sort of match the look and feel of the other lists)

If lists grow too long they are split into individual pages, with a navigation block (page forward/backward links) at the bottom of the list. The navigation block must be consistent to the one for the article design.

Other pages

All other pages, such as login, change personal info, write and edit an article should share the same design as the articles. One extra element are error messages (for example, bad password), which should be consistent throughout all pages.

Discussion forum

A major difficulty is the discussion forum. Right now I'm using a discussion forum software from another company. The style differs wildly from the rest of the website, unfortunately it is much more difficult to customize and the discussion forum provided with ezpublish is inferior.

It is currently displayed in a separate window because I could not get it properly integrated. The colors should be adapted to match the rest of the website (this is the only kind of customization available).

The technology behind the website

The website is based on the PHP based software "ezpublish", which relies heavily on PHP templates. The templates contain html code plus {variables} which are filled in by the PHP code. For example, the template that defines the intro block of an article looks like this:

<!-- BEGIN article_intro_tpl -->
<br />
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
        <td class="article_introhdr">
        <u>Summary</u>
        </td>
</tr>
<tr>
        <td height="5">
        </td>
</tr>
<tr>
        <td>
        {article_intro}
        </td>
</tr>
</table>
<!-- END article_intro_tpl -->

<!-- BEGIN article_header_tpl -->
<br />
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
        <td class="article_author">
        {intl-article_author}
        <a class="article_author" href="{www_dir}{index}/article/author/view/2">
        Arne Schirmacher</a>
        </td>
</tr>
<tr>
        <td class="article_author">{intl-article_date} 11.12.2002 09:51
        </td>
</tr>
</table>
<hr noshade="noshade" size="1" />
<!-- END article_header_tpl -->

This approach is very flexible. In case a needed variable is not available, I can add some PHP code to supply the required variable content. One can also rearrange the order of template building blocks on a page.

It will be my responsibility to code the templates from the design delivered by the professional.

| Back to normal page view |