How we built globaldev

By: Pete Lambert

Tags:

As a business we have a large and ever-growing team of developers, designers and managers responsible for a network of dating sites, numerous servers and several internal web applications and tools. However very little of what goes on behind the scenes has ever been revealed to a wider audience.

With several keen bloggers in the ranks and plenty of stories itching to be told we decided we needed to create a platform for our tales. The idea to build a blog solely for our development team was born.

So where did we start? The first step was to clearly define the focus of the site. Who would it be aimed at? What type of content would it include? How would it look? etc.

Working with a brand

Global Personals had recently been through a re-brand, during which our marketing team produced a strong new brand for the company, along with brand and style guidelines. These would form the framework and starting point for our own website's design.

Brand Guidelines

At first we wanted to go for a light colour scheme, but this was too far away from the original branding and trying to merge the brand colours into a lighter colour scheme didn’t work - leaving elements floating on the page and lacking any variation in strength or emphasis.

We then reverted back to the original brand palette, a far safer option and one that was met with gratitude by our slightly concerned marketing team.

With the colour scheme in place we then looked towards the layout. We have several key elements that we wanted to be located in prominent areas of the homepage. The first, and the most obvious was a list of ‘News & Articles’ or simply the blog. Although the most prominent and frequently updated content on the site are the news stories and articles we wanted to find a balance between these and the other peripheral content that reveals insights into how we work, such as our GitHub projects, Tweets and Flickr Photos.

With this in mind we used varying colours and shades, font weights and size to emphasise the more important content on the page.

Deciding on a platform

A decision we had to make early on was which platform to use. We had several requirements, it had to be an off-the-shelf tool and require very little tweaking to achieve our goals; it had to be configurable and support templates; and finally it had to be extensible, allowing for the addition of new sources of content in the future, widget or any clever ideas that we cook up in the future. We were also keen on using a hosted solution for a quick and pain-free setup.

So what tools did we look at?

At first we looked at Tumblr, a popular blogging platform which is a favourite with several members of the team. It’s a slick piece of kit, with a great interface, effortless setup and a big community. Unfortunately it didn’t give us the control over our templates and design that we needed and we really needed to create custom article types outside of the variants they have on offer. So we continued searching.

We ended up choosing Wordpress and hosting the site ourselves. This gave us the control that we wanted, the ability to extend the code base as required and release or stage our changes with ease. Wordpress is also supported by a vast library of plugins, of varying quality I will admit but still a great resource. Furthermore most of the developers here at Global Personals have experience with PHP so we could really get our hands dirty where necessary.

The build

Now we had to get coding. We set ourselves a very tight deadline - a week! Very motivating. A couple of the guys worked on setting up Wordpress, installing and configuring any plugins, rolling a few of our own tweaks and generally getting everything up and running.

I on the otherhand concentrated on the templates. We embrace new technologies and techniques here at Global Personals and all our new tools are built using HTML5, CSS3 - utilizing progressive enhancement or graceful degradation where necessary, and we were keen to showcase this on our new site. Further to this we wanted the site to be structured around a strict grid layout, both horizontally and vertically.

Using grids creates a harmony between elements on the page. It's not overly obvious and nor should it be but titles will align with paragraphs in adjacent columns, boxes will mysteriously end at the same pixel as their friends to the left and right. Harmony.

Going forward

So what do we have planned for Global Dev going forward? Well right now our priority is building up the content of the site with plenty of quality articles covering everything from new techniques and technologies to reviews of events that we attend.

As I put the finishing touches to this article I am traveling down to Brighton to attend the dConstruct workshops and conference, and so long as I pull my finger out this article will be joined by updates over the next few days.

In addition to plenty of fresh content we plan to brighten up the look and feel of the site. Due to the tight one-week deadline we didn't get the opportunity to really stamp our personality on the site. So expect a few characters and illustrations to appear over time.

And finally

Now I haven't covered everything that went into the site. I've missed out responsive layouts and how they'll revolutionise page design, how and why we work with grids and a shed-load of other ideas we've had. But I couldn't reveal it all in one sitting, I want you to come back!

Thank you for reading and if you have any questions or comments please use the comment form below or contact me at pete@globaldev.co.uk.


About the Author

Pete Lambert