Berliner.de is a social network focused on Berlin. Berliner.de is for all Berliners and all other citizens of the world who are mad for Berlin or are eager to become so. On Berliner.de, users are able to add new content or comment and rate other people's contributions. They can make new friends, upload pictures, send messages, subscribe to interesting topics or just stroll around the vast amount of existing bits and pieces regarding Berlin on the site. The most important things going on in a user's network are presented in a newsfeed.

The users are backed up by an editorial department that is checking, finalizing and publishing all public contributions.

Berliner.de was developed by the long-established company BerlinOnline that runs (among other portals) Berlin.de, the official website of Germany’s capital, Berlin. Involved in the development of Berliner.de were (among others) Drupal community members fl3a and ambo.

The core technical bae of Berliner.de is built on Drupal 6 using many additional modules. These include the obligatory CCK, Views, ImageCache, Pathauto and Rules.

Development of the site

Following the extensive planning of the project, development started with detailed ideas in mind regarding desired functionality. Many of those were covered by existing modules. Others had to be realized and implemented using our own development and extensions. Drush is used for module maintenance and administrative stuff.

It might be of interest to some that Scrum was chosen as the project management framework. Using its simple but effective commandments for the first time, it lead to highly excited and contented Product Owners and Team Members.

Different types of content

Besides the standard content types, there are events, locations and articles to be found on the portal. These three types of content are organic groups with the option to post pictures in them. These pictures are a unique type of content and are presented on the site of the organic group using the modules Views and Viewscarousel. Other types are picture albums, related pictures, and content profiles.

Picture galleries

There is a lively discussion going on in the Drupal community regarding best practices when dealing with picture galleries. Some best practices has been discussed on http://groups.drupal.org/node/7018. During the development of Berliner.de, some of these practices and their related modules were tested. To be honest, none of them fulfilled all of our expectations. There was a demand to be able to comment and rate each picture as well as the whole gallery for a multiupload and integration with Views. That is why we had to develop a new solution. By doing so, evolution of the Image FUpload module was made through the contributions of the development team. Image FUpload is a module that is able to upload pictures in the background and, at the same time, set up their nodes. The consumption of the pictures into albums is done by Views and a node reference.

Community features

To enable users to get in touch with each other the Friendlist and Privatemsg modules were implemented. A tiny additional module generates a field that is used to notify the user in case there is a new message in the Inbox or a new friend request.

Necessary user profile flexibility is assured by using the Content Profile module in combination with CCK-fields. Thanks to Avatar Selection, users are able to choose between different types of default pictures or upload their own.

The heartbeat module assures that users will always be up-to-date about what’s going on in their network. It is possible to leave public messages on a user's profile wall – a feature realized by using the Guestbook module, whereas Forward and Service Links were the modules of choice when it came to sending a page via e-mail and the obligatory outbound posting options to some social networks. Last but not least, Facebook Connect is used to connect Berliner.de accounts with those of Facebook.

Performance

Due to the large amount of modules Drupal reads and uses on every request, the lengthy amount of time it took to load the site was not acceptable, even when caching was turned on. For a while, we exprimented with Boost as well as memcache, but performance was not increased to desirable levels. In the end, it wasn't the caching that was the biggest problem, but the time it took Drupal to load the more than 400 files (modules, includes, templates) needed on every request. The server infrastructure at that time was using a shared file system that led to slower reading capabilities. After solving this problem, Drupal was able to handle a request in less than a second. Read more on this issue at http://www.crashcow.de/work/drupal-gpfs-dateizugriffe-und-performance.

Theme

A purchased TopNotch Theme customized by changing some of the HTML and CSS to match the desired design and layout served as the foundation for Berliner.de's simple two-column layout.

With the goal of simplifying the process of adding pictures, events or places as much as possible, many efforts were put into the development of user forms. A stand-alone module sorts and readjusts forms, hiding fields that are not necessary for a certain action, and customizes the help text.
The same kind of simplification routine is used when it comes to the editing of the users data and profile. By separating the different kind of forms, the user is able to change diverse settings in a convenient way. For example: A user's avatar is edited on a respective site and this change is applied to all settings, including the guest book and core account data like nickname and password.

Modules

This is a list of the most important modules that were used to build Berliner.de:

Issues and Patches

During the work on Berliner.de, some bugs and mistakes were found. Those that could be solved have been. This is a list of important issues that were filed during the development:

Your Feedback

If you like this site, please do not hesitate to give us some feedback.

Comments

flocu’s picture

very interesting
thanks for sharing!

kaakuu’s picture

Nicely done but is there no English version?

ambo’s picture

...there are currently no plans to launch international versions of http://www.berliner.de. We're focused at Berlin and Germany as main target group.

I guess there could be an international version if there're enough people that want one :)

Regards - Andreas

minus’s picture

Nice job!

I was just wondering, how is the fconnect module working on a site this scale?

--------------------------
http://www.mortenn.no

ambo’s picture

Thank you!

We did not run into any performance issues on our servers using the fbconnect module. The main job while connecting to facebook is done by the clients browsers.

Or have I misunderstood your qustion?

minus’s picture

No you have not misunderstood my question :)

I'm going to use the module on a project myself and I was a little anxious :-)

--------------------------
http://www.mortenn.no

dalin’s picture

My ability to read technical German ist nicht sehr gut. Would you be willing to post an English summary of your experiences with GPFS, how it didn't work, and how you fixed it to the High Performance group on g.d.o. I'm sure all the other high performance nerds that hang out there would be equally interested.

________________________
Dave Hansen-Lange
Director of Technical Strategy, FourKitchens.com

ambo’s picture

I am willing to do so. To sum it up before: we don't fix it, we put drupal out of gpfs as there was no way to speed things up using that shared filesystem.

nihonsei’s picture

It is very nice design. It is my dream to build a site like www.berliner.de.

I would like to know about version of server, PHP, MySQL, Database size, etc. It may help me to start with a right Host.

Is it possible to make a site like www.berliner.de on a rental shared server with following specification?

Apache : 2.0
MySQL : 4.1.22
PHP : 5.2.11
Diskspace : 20 GB
PHP memory limit : 128M
Database size : 10 MB
and hosting company will not upgrade any specification for next one year. I faced a lot of problem with my local host in Japan.

Please guide me and tell me about specification, so I can move to other right hosting.

Thanks a lot!

Nihonsei

ambo’s picture

First of all: Thanks you :)

I think its not the problem to build a site of that size on a shared server, but I could be a problem to serve thousands of page views a day on a server with your specs. The 10 MB size of your database is to small and you host should update its MySQL Version to something bigger than 5.

We have a couple of servers that deliver the page to the user and for some of the performance issues you will need to have access to some advanced server configuration.

hackvier’s picture

Well done!!... nice website... how much time took it??
Nice practice of the rounded corners with the images. xD

targoo’s picture

It is a impressive job but I experience slow performance from here. Maybe everybody is watching your website now !

scottatdrake’s picture

Thanks for the great case study. Every time a read one of these, I come across a new module that I didn't know existed. I appreciate that you shared the problems that you ran into as well. Very educational.

themegarden.org’s picture

Great job and great site.
Congrats.

wallbay1’s picture

ambo’s picture

I am working on this :)

PC Pro Schools’s picture

Any word on the Eng version?

Thanks

duntuk’s picture

ambo’s picture

ok google translation is one way... but I am sure that - especially technical german - is not well translated by google. I just read over your link and I am not sure that I would understand it if I read it for the first time.

tekila’s picture

I really appreciate the great works you have done and above all for sharing the information. Now I come across new ideas that drupal can be used for great social Network sites as berliner. New modules and performance issues.
Can you provide some idea about what you said "A tiny additional module generates a field that is used to notify the user in case there is a new message in the Inbox or a new friend request" (module) is that a kind of pop-up I would like to know about this. Thank you Great work again.

ambo’s picture

that little module does nothing more than checking your latest friendsrequest and your private message inbox and displays a message to you if there is anything new. one bonus is, that you have more possibillities to style blocks than drupal messages and the another one is that you can force such messages to appear in a different place than the normal drupal messages. and they only disapear if there are no longer new messages nor pending friendsrequests.

heyyo’s picture

You could divide by 2 the weight of the page...The size of your images are not well optimized.

The size of the whole page is 1178.2K.

After optimization with Smush-it

Smushed 58.14% or 571.23 KB from the size of your image(s)...

Cosmy’s picture

Congratulations for your work..
i have two question that maybe aren't properly about the usage of drupal, but around your site.
How have you realized the "beta" div in top left corner, and the feedback button on right-side?
The search form inside the primay-menu in the preface block, is the drupal search-mask or do you written it manually? In the first case how have you done to put it there?

ambo’s picture

The beta-flag is simply added via the page template.
The feedback form is this one - with a little theming and some use of hook_form_alter.

The search form is given by the search.module (e.g. the advanced one for the use of google appliance) and pushed at the end of the main menu in our template.php. not the best way, but a simple on without hurt any kittys :)

Glad to hear you like it.

Cosmy’s picture

The best ideas are simple, but the important thing is to have toughth these.
In specific I'd like to know how do you have trasformed the beta write to an image, and the feedback form in a sliding botton.
I've searched in your Js but I haven't found,

Thank you in advance

ambo’s picture

Theese are simple background images via css. the text is indented some hundred em's to the left, so that you don't see the text, but the images.

Cosmy’s picture

cool.. i've thought that it was a javascript effect! :)
And for the round corners of the teaser's images? Is it a module or javascript?

aac’s picture

Thanks for a nice case study. I came to know about some new modules through this writeup.
Congratulations for a great site!!

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

spelzmann’s picture

Very sexy looking site, best of luck to you and get us an English version! ;D

leamas’s picture

You have done a very nice job.

There was one part of the site that I was interested in and couldn't figure out how you did it.
On the page http://www.berliner.de/berlin-lexikon you have this filter by first letter/number of the content title.

I tried to replicate it to see whether I could do that but I have been unsuccessful. Is it done using Views?

ambo’s picture

I am really glad that all of you spend such a response to our work.

@heyyo: thanks for your tip with smush-it - I will have a look at it.
@leamas: yes, this is done with views - what else :). just take a look at the glossary view and you'll get it. Its just an attatchment displayed above the "normal" view.

regards - andreas

toNYb-2’s picture

I live in Berlin but do not speak German (yet) I wish there was something like this in English.

Also seems there is a healthy Drupal community in Berlin too.

grandcat’s picture

By doing so, evolution of the Image FUpload module was made through the contributions of the development team.

What did you change exactly?
I would really like to know this because I'm the maintainer of the project.

ambo’s picture

Hi Stefan,

did you forget about the donation you got through fl3a? Maybe there is some misunderstanding because of the translation, but I thought we helped you with some money to go on with your module... It was during the implementation of using FUpload with CCK-Image-Fields. There were several bugs and you told us to go on faster with developing if you get some donation.

Greetings - Andreas

edit: ok, i see there might be some misunderstanding with the translation. we did not contribute code to the FUpload module as it might looks like. we just supported grandcat with some donation.

grandcat’s picture

Yeah, that's true. The donation really helped a lot.
Additionally, there will be a port for D7 to support the Core ImageField module (thanks to all 3 donations and all user feedback).

P.S.: I really like your project Berliner.de =)

jaochoo’s picture

The site looks great. May I ask the following questions:
- On the frontpage, how did you realise the tabbed box ("Das Neueste auf Berliner.de", "Neue Events", "Neue Orte", "Neue Artikel")? Is it some Views in a block? In particular, I would like to know how you realised that it loads content without reloading the whole page.
- Is the red-feedback badge on the right of the window the Feedback 2.0 module you use?
- How did you realise the mapping to a Google mapping?