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
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.--
The Manual | Troubleshooting FAQ | Tips for posting | How to report a security issue.
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
then:
Also, about 15 custom modules are used, some small, some rather big
~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?
-
@foggyperspectiv | foggyperspective.com (blog)
Stop Subscribing... Start Following!
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
-WJZ
---------
Thanage Community on COMMONS 2
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.
--
Drupal development services
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 ?
http://www.kreapix.com
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.