Two weeks later Floris and Roel arrive in Berlin. The Your Neighbours team is complete and after a few days, we move into the offices of Palomar5, an innovation hub in Berlin. The first few days are strange, we split the roles, make endless to-do lists and start to work together for the first time of our lives. We’re now a web agency based in Kreuzberg, Berlin.

Our team consists of several disciplines that complement each other. Founded in 2009, Your Neighbours is owned and managed by:

Edial Dekker – concept & strategy.
Floris Dekker – design & art direction.
Roel van der Ven – development & technology.
Kamiel Blom – audio & video.

Unlike our short existence would suspect, we’ve already worked with clients who are a lot smarter than us. Among others, we’ve worked with Nokia, Deutsche Telekom and Universal Berlin. Our personal network is influential, supportive and helps us to be flexible at all times.

You can find more information here if you want to know what we’re doing exactly.

The concept.

Instead of having a fancy homepage and an even fancy-er blogpost page, we decided we wanted to create something that would work for all the different kind of posts we want to write here. There has a been a lot of writing about certain people who design a new template for every post they write, and we think that’s a great idea. However, having 3 people who want to be writing blogposts on a weekly basis, it just wouldn’t work out for us. Of course we still wanted to be the coolest kids on the block so we came up with a solution. We have several templates for different kind of posts. This way we can keep experimenting with new templates, which can then be re-used over and over again. Right now we’ve made three unique templates, one for ordinary blogposts (focussed on readability), one for projects (focussed on imagery) and one for video (focussed on showing the video in a unique way).

The grid.

It’s 5 columns.

The navigation.

Since most of our visitors will go straight to a blog post anyway, we didn’t really see any use for cluttering the interface with a horizontal menu bar on top or a column full of distractions next to the text. So instead we made a nice little menu that you can always find on the top of the page and should navigate you through the rest of the website.

The technical stuff.

This site runs on Wordpress with a custom Lighttpd configuration to speed up things. We’ve made an extensive post on setting up and tuning this here.

If you want to know more about Your Neighbours and what we do, please read our introduction post. Also, we’d love to hear your opinions on the website so feel free to leave a comment or get in touch with us.

YNBS has been nominated for ‘Infographic of the year 2010′ finalist. From 110 entries; five nominees have been chosen for the annual Infographic prize and we’re proud to be among them. The prize award is a joint initiative of The Dutch Association of Journalists (NVJ) and the Association of Dutch Designers (BNO). Check out the other nominees here and you will understand why we are very proud to be nominated for this prestigious award. The jury consists of Lize Alink (NVJ), Jelrik Atema (winner of 2008), Hennie van der Zande (graphic designer / art historian), Mark Bryson (editorial designer for the BBC) and Yuri Engelhardt, who was a professor of mine while I was studying data visualization at the University of Amsterdam. The winners will be announced at the Infographics 2010 event on the 5th of March. We hope to see you there!

Commissioned by Burgerlink, Your Neighbours made this animated infographic to explain petities.nl – a platform where you can sign petitions online. We were responsible for the art direction, the concept and the storyline for this video and another one. Also might also want to check out in60seconds, who did a great job animated this ‘explanimation’.

http://www.petities.nl/

The cool thing about a matrix printer is that its paper supply is basically an endless roll of paper. Because of this the printer would just keep on printing 24/7 without having to insert new paper. After the Palomar5 project we used the printer on other conferences as an alternative for a backchannel.

Palomar5 was established as a non-profit initiative seeking innovation outside of corporate structures. The founders of Palomar5 feel that “innovation” itself is in need of reformation.
As an Initiative, Palomar5 explores new spaces for innovation and new formats for people to cooperate and make real change.

Changing the future of working.

In order to achive their goal of the changing the way people work with eachother in the future, Palomar5 organized a huge innovation camp; inviting 30 highly talented younsters from all over the world to live and work in the camp for 6 weeks. All these people were below 30 years of age and ranged from MIT students from Boston to TED fellows from India. After this all the camp attendees would have the opportunity to present their work to 250 industry professionals and influencers.

The logo.

We started with the logo and after many variations we came up with a solution that grasped the concept of the camp and triggered the viewer to look beyond their first impression. We created a coorporate identity focussed on telling the story behind Palomar5.

The branding.

The keywords in for the branding identity were: minimalistic, industrial and modern. This translated well into: no bullshit, legit, and it has to look cool enough so that people who see it have the idea their going to an inovation camp and not at a senior’s home. We created everything from the brochures, invitations, coorporate website, posters, badges, planning and the Palomar5 Labs website.

http://www.palomar5.com/

Burgerlink is also a supporter of Hack De Overheid (translates to Hack The Government), an event we co-found and organize that concerns open (government) data.

http://www.watstemtmijnraad.nl/

This website runs on a FreeBSD VPS (thanks Mischa), with MySQL 5.0.87 and Lighttpd 1.4.23, custom configured to our likings. We use PHP 5.2.11 with FastCGI boosted by the popular eAccelerator, a fork of the Turck MMCache project.

Wordpress can be a pain. The Loop is quite heavy on the database, and it can take you some time to find out what code is causing al those MySQL queries. When developing your template, think of what it would need from the database; is it really necessary to load this here?

Disclaimer: tweaking your server can be fun, but this won’t make other optimizations obsolete. You still have to consider your template code to be clean, don’t use large images and try to use sprites when possible. Use CSS multiclasses and reduce your HTTP requests by combining external JavaScript and CSS files.

First, set up Lighttpd to be nice to Wordpress. To do this, we need a bunch of modules. Important: beware that the order of the modules here can cause side effects! In lighttpd.conf we used the following:

server.modules = (
"mod_expire",
"mod_redirect",
"mod_alias",
"mod_access",
"mod_auth",
"mod_status",
"mod_fastcgi",
"mod_magnet",
"mod_compress",
"mod_accesslog"
)

mod_expire

To make use of client-side caching you need to understand the browser cache. Adding expire tags to static files will tell your browser to not load a file again from the server when it didn’t change since the last visit. This can improve the browsing experience and reduce page loading time. This is what happens on a page with a bunch of images after setting expire tags:

To add these expire tags to the HTTP header we added the following to httpd.conf:

$HTTP["url"] =~ "\.(png|js|jpg|gif|ico|css)$" {
expire.url = ( "" => "access 40 days" )
}
$HTTP["url"] =~ "\.(html|htm)$" {
expire.url = ( "" => "access 1 seconds" )
}

mod_magnet

For a better URL structure Wordpress supports nice permalinks. On an Apache webspace you just set the .htaccess files to behave (and rewrite URLs) in a certain way and your done. On Lighttpd this works a bit different. Back in the days I implemented a working permalinks structure for Drupal, based on this writeup.
Wordpress is also dependant on these types of rewrite rules to be able to use permalinks, so we needed a similar approach.

Make sure Lighttpd is able to load the .lua file by adding this:
magnet.attract-physical-path-to = ("/usr/local/etc/wordpress.lua")

Finally, you can download our wordpress.lua here.

mod_compress

To reduce traffic, Lighttpd is able to compress your files before delivering them to the visitor. Most browsers nowadays (yes, Internet Explorer 6 as well) support the Gzip header, so it’s a good idea to make use of this feature. Lighttpd needs a temporary directory for this, so be sure to set this (and fix permissions) before testing:

compress.cache-dir = "/usr/local/www/cache/"
compress.filetype = ("text/plain", "text/html", "text/css", "text/xml", "text/javascript")

eAccelerator

To reduce queries, decrease PHP execution time and serve webpages fast we looked for a intelligent caching system that would lighten the server but still understand the dynamics of externally loaded data (Twitter) or comments. eAccelerator seemed a good fit, but after reading The Murmatrons’ article on their SuperCache plugin we couldn’t wait to have it running on our server. Installing eAccelerator as a Zend extension was a breeze, but setting up PHP took some trial and error. Here are our settings added in PHP.ini:

zend_extension="/usr/local/lib/php/20060613/eaccelerator.so"
eaccelerator.shm_size="32"
eaccelerator.cache_dir="/tmp/eaccelerator"
eaccelerator.enable="1"
eaccelerator.optimizer="1"
eaccelerator.check_mtime="1"
eaccelerator.debug="0"
eaccelerator.filter=""
eaccelerator.shm_max="0"
eaccelerator.shm_ttl="0"
eaccelerator.shm_prune_period="0"
eaccelerator.shm_only="0"
eaccelerator.compress="0"
eaccelerator.compress_level="9"
eaccelerator.keys="shm_only"
eaccelerator.allowed_admin_path="/usr/local/www/piwik"

The last variable makes it possible to control eAccelerator from a backend page. From here you can purge the cache, turn it off or on:

You’ll need to copy the PHP file which comes with the eAccelerator build to your webroot for this to work, be sure to set your username & password!

WP SuperCache Plus

To make use of eAccelerators’ caching features but still be able to serve dynamic content we installed WP SuperCache Plus. This plugin is now being maintained from the Murmatrons Trac environment, you can download it there. After installing we are able to tell Wordpress to tell which storage engine to use, choose the caching level and modify headers.

Roundup

Wordpress isn’t always really code-efficient, but choosing a proper caching and considering environment settings can make a pretty big difference! After setting up your server, be sure to move on to your template code and XHTML, there’s still a lot left to optimize there too!

PS:
All the modification and changes mentioned here in httpd.conf or PHP.ini will require a Lighttpd restart.