Community & Support

Case Study: www.aidshilfe.de relaunch

The Deutsche Aids-Hilfe (DAH) is the leading German non-governmental organization that deals with the concerns of people living with HIV/AIDS and helps raise awareness of effective HIV prevention techniques.
As the governing body for more than 120 local AIDS service organizations, it supports this work at many different levels.

The DAH website, aidshilfe.de, is one of the organization’s main communication channels. It offers information on HIV and other sexual transmitted infections and covers the field of counseling for private matters. The website also provides contact information for local self-help-centers, a broad selection of free information material, workshops, community features, etc.

Work on the aidshilfe.de project was supported by many partners. Christoph Schüßler designed the website, which was implemented in Drupal by Berlin-based Werk21. The new aidshilfe.de is a step forward toward a future-proof system that features an attractive new design, interactive features, user-friendly community functionality and great usability.

Drupal was used because of its obvious range of functionality, which meet most of the requirements of aidshilfe.de.
In addition, Drupal’s open, modular architecture and the support by the active Drupal community make it possible to implement almost any feature easily, either as a custom module or as one of the many modules hosted on drupal.org.

The main factors behind the decision to use Drupal were:

  • Open Source - Being open source, Drupal allows a website to be built on an open basis, without proprietary technology, which guarantees freedom for future development.
  • Maintenance – the site can benefit from Drupal community development available in new core and module releases.
  • Security - the great job done by the Drupal security team delivers the confidence and trust that is needed by a product intended for a highly privacy-conscious audience
  • Community - The large Drupal community guarantees future development and provides a valuable pool of information for developers and users.
  • Modules - The availability of modules means that it will be possible to easily include advanced features and support for new services
  • i18n - The support for multi-lingual sites as provided by the i18n module is a major advantage
  • Ubercart - The Ubercart shop offers the functionality required for managing orders of brochures, information material, etc.
  • User friendly - Drupal's user experience makes working with the system much easier.

Design

Aidshilfe.de is visited by people from various backgrounds seeking many different different kinds of support.
It is thus extremely important for aidshilfe.de to show an open, friendly and supporting user interface, which is demonstrated on the new front page: The phrase "gut zu wissen" ("good to know") is accompanied by a friendly face welcoming the user.

The color scheme is also friendly, calm, and appropriate to the wide range of different content available on the site, including medical information, news, science and lifestyle articles, personal opinion, etc. It also serves to establish a forward-looking corporate identity for Deutsche AIDS-Hilfe online that can be used in Twitter and YouTube branding, as well as WordPress themes and sub-sites for specific topics.

The front page itself is composed of portlets ("frontlets"), allowing users to personalize their aidshilfe.de-homepage to showing the information relevant to their individual needs.

The look and feel is continued throughout the page using two main menus: a vertical menu with helpful information and a horizontal menu with links to dynamic pages (e.g., news, events, workshops, and contacts). The absence of hard corners reinforce the welcoming environment of the site, while subtle 3D effects help the user to recognize the various layers of navigation.

Implementation

The implementation of the site was based on several established Drupal building blocks: CCK, Views, and Ubercart for the shop. These modules provided a solid framework for most of the site's infrastructure.
The portlet engine required a custom module by Werk21, which was easily implemented thanks to Drupal's modular architecture. Other modules used include are Simplenews for the newsletter, along with Simplenews Content Selection and Simplenews Template.

In many cases, the functionality provided by Drupal and its modules was more than enough to realize the requirements of the site. Some difficulties were encountered while setting up the multi-language requirements for the site, as the internationalization aspects required a significant amount of fine-tuning. Other areas requiring precision work included the menu system, which was extended to have tabs other than local tasks and splash pages.

A more detailed analysis on the use of modules and custom development will be conducted after the site has been launched for a longer period of time, but for now we can say that it was amazing how easily everything could be accomplished without patching Drupal core. Some minor patches to modules were required, but those were mostly accepted by the module developers.

In the pre-launch phase, professional usability tests were performed to ensure the site's goal of providing great usability.

Henry Sudhof, Lead Developer:

Developing Aidshilfe.de in Drupal was a lot of fun. The ideal combination of a project with a certain amount of ambition, combined with a system that makes it easy to realize the goals is a recipe for a rewarding development experience.

Improvements

Fresh, friendly design

The new design invites the users to enter the page, explore its features, get the information they seek, and then come back for more.

It was very important to us to create a suitable “look-and-feel” that despite of the severity of the theme encourages people to deal with HIV/AIDS and other STIs.

Community Features

Community features like profiles, comments and user pictures allow visitors to participate. This is enhanced by the customization options provided by the site.

Linking to other sources

The new site cleanly integrates content hosted on other websites, offering information from Facebook, YouTube, various blogs and other social media. Thus, the portal becomes a viable one-stop-shop for its target group.

aidshilfe.de aims to be part of the social community and to make a responsible contribution to the Web 2.0.

Better Workflow

The forms and workflow features provided by various modules simplify the writing of articles compared to the system's predecessor. WYSIWYG editing with the advanced CKEditor is similar to working with desktop applications, offering an easy on-ramp for writers.

The simple usability of Drupal allows a nice intuitive handling of the website.

New "Shop"

The new "shop" for the site, which is based on Ubercart, allows visitors to conveniently order free information materials. The order processing is a great improvement over the previous system used by the site. Furthermore, the ability to display products in various ways using taxonomies and views makes it much easier to present these "products" to their intended audience.

Information are a vital component of our educational work and prevention efforts. Thus, a user-friendly and flexible system was of great importance.

To summarize, we believe that Drupal was a great choice to realize the vision of the new aidshilfe.de website. Development and theming were simple, the community was helpful and the result meets the expectations. The launch was even accompanied by an ad campaign aired on national TV. We can strongly recommend considering Drupal for charity portal projects.

Team

Design

  • Christoph Schüßler

Werk21

  • Johannes Stahl (Project Coordinator)
  • Jan Kellermann (Technical Coordinator)
  • Henry Sudhof
  • Patrick Fey
  • Anja Kunkel

Project executive

Dirk Hetzel
Deutsche AIDS-Hilfe, Berlin

http://www.aidshilfe.de

Comments

Nice site, any chance you

Nice site, any chance you will be making an english translation of the website?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
My Drupal 6 Website - Ticket Cake

The Website is intended to

The Website is intended to support four languages (Turkish and Russian to follow later). The English version is still work-in progress, but our client has translated a large number of nodes already.

Great work and worthy of admiration

Excellent quality and design work is noted for many months ...
question: does done using the Panels module and modules used for the menus?

Hey there! Now this is a

Hey there!

Now this is a drupal.org frontpage case study!

I wonder how did you do the addresses section and the maps? I think this is not a contributed module? The interaction between the left column and the map is really nice... Custom coding there?

Cheers,
Sinan

That gay guy on the frontpage

That gay guy on the frontpage is ticking me off. Why does there need to be a gay guy so prominent on an AIDS related website? Yeah, I know... aids, gays but still that's just discriminating IMHO. Apart from that, nice looking site. usability is great, design is nice.

Drupal is like falling in love with a girl after you got to know her, instead of instantly falling in love with her appearance... :)

Thanks for the praise

As to your observation: you might be over-interpreting things a bit, moreover, the frontpage is actually a slideshow/morphing image and not just one single image ;).

~H

do you know these people?

Several people are displayed on the front page of the website. How do you know their sexual orientations? Perhaps you are projecting your own prejudices

amazing site,want to know how

amazing site,want to know how to do the person's profile switching effect?

Double encoding

You have some double encoding issues in the menu:

Menüpunkt: "HIV ist mir nicht egal!"

Which renders as Menüpunkt: "HIV ist mir nicht egal!" instead of the intended double quotes. Remember, any attribute value passed to drupal_attributes is check_plained automatically.

Thanks for the heads-up

Fixed that

:-)

~Henry

Great work

VERY nice site !

Just one question:
- which contributed modules have been used ?

Thanx,
Cesare

Long list

That's a very long list indeed, the major parts are

  • CCK
  • Views
  • Ubercart
  • i18n

then:

  • imagecache
  • Calendar/Date
  • ckeditor
  • Many CCK field types (file, nodereference, ...)
  • Webform (for event sign-ups)
  • Menu Block (for its great API)
  • Menu Trails (needs fixes for a site of that size -)
  • glossary (no i18n support so far)
  • taxonomy image (for the shop)
  • tagadelic
  • similar terms
  • related content
  • xmlsitemap

Also, about 15 custom modules are used, some small, some rather big

  • Custom Menus (create splashpages, tabbed menus and in-line forms)
  • Frontlets
  • Event Signup handling (uses Webform)
  • Ubercart extensions/payment options
  • Geocoding
  • various forms
  • cross-site search (google based)

~H

Very nice looking site! For

Very nice looking site!

For the event calendar, is that simply using the date + calendar modules? I'm trying to figure out what / how that drop-down in the calendar works.

Also, any chance of contributing your portlet / frontlet module?

Thanks! The event calendar

Thanks!

The event calendar is indeed just a calendar view with some heavy themeing and a bit of jquery; ajax functionality is in the works, but not yet ready for deployment.
As to the frontlet engine, we are in the process of cleaning up the code, adding English language strings and writing some documentation - all with the intention of registering it as a project sometime later this year.

~H

very fast registration, login, forget password part

First time I see a Drupal site, where the registration page works actually fast.

http://aidshilfe.de/de/user/register

Nicely done

Nicely done. I'm wondering what modules and how you implemented the multiple languages site like that. Please share the techniques. Much appreciated.

The multi-language part was

The multi-language part was certainly one of the least convenient issues encountered. In the end, the answer is that the site uses different menus for each installed language (and different CSS classes). Moreover, some creative use of multilingual variables, a bit of link rewriting and some advanced theming are used.
There are still a few chinks, where content-negotiation doesn't quite work right (not in normal operation, but inventing urls gets you there) or where pathauto URL aliases just exist in one language, but overall we're very happy with the language handling.

Pro: Impressive - Fast -

Pro: Impressive - Fast - wonderful Theme. Awaiting about more details.
Contra: Times New Roman is not really the best choice of font for reading considering that you want readers from anywhere in the world.
Note: applied in (i guess subdomain) --> http://blog.aidshilfe.de/

Regards

Beautiful web site :) I just

Beautiful web site :)

I just noticed that the link to the english version is : http://aidshilfe.de/en everywhere except from the home page (http://aidshilfe.de) where the english version link is : http://aidshilfe.de/en/node/1304 instead of http://aidshilfe.de/en

I love the theming of the site !

Twitter : @ismaeil_

Very nice setup! How have you

Very nice setup!

How have you put the search field in the "address" drop down menu?

Cheers
Tom

______________________________________________
http://drupalsn.com - Drupal articles/tutorials, Drupal Questions & Answers

That was a specific request

That was a specific request from the client ;).

Search on map

Really great website. My congratulations!

Please advise how you have implemented search on map? http://www.aidshilfe.de/de/adressen/suche?keys=berlin It is really awesome! What modules have you used?

Also interest in this

Also interest in this feature.

Actually, that's very simple:

Actually, that's very simple: just a view with an exposed filter ;)

Nice design

nice design, i wonder what theme you started with ?

Thanks for the good

Thanks for the good writeup.
A nice looking website.
Thanks!!

---~~~***~~~---
aac

Changing people

Good Work!

I think the images of peoples should change a little bit slower.

adress filter vs. map

Nice site. I'm also interested in how you realized the adress filter and map interaction (http://www.aidshilfe.de/de/adressen).

Nice work! I wonder how were

Nice work!

I wonder how were able to add the login form in the menu?

I mean the one in the picture below:
http://drupal.org/files/front2_small.jpg

Thank you.

Ah, that's a bit of an hack:

Ah, that's a bit of an hack: I'm using the theme functions of the menu_block module to replace certain entries with fully-fledged forms.

nobody click here