Abduzeedo has a new look as you can see, and we spent the last few weeks working not only on the new design but on a series of changes including new server at MediaTemple, upgrading our CMS to Drupal 7 and of course the new design. It was quite stressful for the whole team and I believe for you guys that had to deal with the downtimes. Everything is alright now and we would like to share a little bit of this whole process.

There are three important reasons for these changes:

• Speed
• Server/Drupal
• Design

Speed

Since the beginning of the blog we have been improving the site’s speed. We have learned so much about server side configurations and how to make Drupal run fast. We are never satisfied since our last update we were experiencing some weird problems like site going down because of cache. That is terrible because when the content was updated to all the site would go down.

We went back to the basics, we hired a specialist in Drupal and server optimization to help us to identify the reasons and the main one was that our Drupal didn’t support some more advanced caching systems like Varnish. After mapping those things out we started our migration process.

Varnish is an HTTP accelerator designed for content-heavy dynamic web sites. In contrast to other HTTP accelerators, such as Squid, which began life as a client-side cache, or Apache and nginx, which are primarily origin servers, Varnish was designed as an HTTP accelerator. Varnish is focused exclusively on HTTP, unlike other proxy servers that often support FTP, SMTP and other network protocols.

Server/Drupal

The process of updating Drupal was going smooth until we hit a major block. Our server wasn’t running latest software. We found that out when we switched the versions. The site went down, images weren’t loading and of course nobody was happy.

We contacted (mt)Media Temple and they were really amazing in providing us support and in a couple of hours we had our new server. The next step was for us to install the caching system we needed.

It took us few days setting up and migrating Abduzeedo from one server to the other. But after that we were able to have our “dev” version running so we could tweak things here and there. It was at that time that we decided that we needed a new design.

Design

We are designers and enthusiasts and one of our goals with the blog is always to try different things, to not settle for too long because Abduzeedo is for us a laboratory for that. We love to share what inspires us but also to apply different ideas in the blog skin itself. We changed our design 8 times including this new version and we can surely say that it’s not the last time.

But why a new design?

In the process of updating Drupal and changing servers we saw an opportunity to completely change everything. The only thing that was missing was the design. We were already thinking about that since the last version, so we decided to take the risk.

The new design is focus on simplicity once again. We don’t have many UI elements, the content is the UI. However we went a little bit further in terms of typography. The site now uses a non-websafe font from Google Web fonts. The font is the Source Sans Pro from Paul D. Hunt. It’s a very versatile font with a beautiful light version.

Source® Sans Pro, Adobe’s first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Another big change is the color scheme. We were using the dark/black scheme for the past 3 years. We really like the dark theme but it’s important for us to not settle, the only way to learn is by changing and taking some risks. We also wanted to make the content area of the blog more like a magazine so it would be easy to read on tablets especially.

There are a lot of new things we tried in this new design. Here are some features:

• Big cover image: We wanted to make the experience of visiting Abduzeedo more visual. Not just a grid of images but a big cover image for the home-page and also for the article pages. The downside was the additional scrolling, however we believe scrolling is cheaper today than it used to be. We look at websites like Apple, Nest, Rdio, FastCo Design, Squarespace to identify patterns in terms of design so we could apply to Abduzeedo.
• Responsive: The blog fits mobile phones, tablets and desktop. We spent a lot of time testing that in order to make the experience in these different medias very pleasant. There are always constraints with that, especially the ads. But we believe we did better than the last time.
• Footer content: Another area we paid a lot of attention was the footer. The last design had a very cluttered footer, it was useful, but it could be improved. This time we tried to make the sections more distinct and inviting, especially the RAWZ.
• Bigger: We wanted to make the text light and readable. We are still exploring the typography but we increased our content font in 2pt. It makes the content easier to read and more beautiful to the eye.
• Little effects: There are some little effects that you might find, we won’t list here, but one of our favorites is the parallax effect on the cover image (-webkit only).

An evolving project.

Abduzeedo will always be a work in progress. It’s in our DNA, we need to change and we want to change. We love to design things and with the blog we have freedom to try. We might fail, but the only way to find out is after you try.

We really appreciate your feedback and we know that the blog is not ours anymore, but we want you to understand that we, like you, are leaning new things every day and Abduzeedo is an opportunity for us to apply some of these things we learn and share with you.

There are bugs, as we said it’s still WIP so please let us know if you find issues. We haven’t fully tested it in IE 7 and 8, but, if you use one of these browsers, please update them or move to a better browser like Chrome 🙂