As with Serverlove, Gavin created the designs handed them to me and I turned it into a fully functioning WordPress build.

The brief

The current website was running on a bespoke CMS and Melbourne wanted to start using WordPress for its ease of use. Thankfully, someone at Melbourne had already converted the existing site content into a WordPress install so that made my life a lot easier.

The design

Having worked with Gavin Burnett before on a few projects like Your Office Anywhere, I knew what to expect: a very clean, almost minimal design with graphical flourishes that would be relatively easy for me to build and that’s what Gavin delivered.

The development

As with most of my recent WordPress builds, I’ve tried to make use of custom post types and custom fields as much as possible in order to make it easy for the people managing the site to add/edit content.

Where possible CSS3 was utilised to ensure minimal HTML classes had to be used throughout the site. Properties like border-radius reduced the amount of HTML used on the old site significantly; this should have a impact on two levels:

1. Easier for the client to maintain – adding classes in WordPress’s WYSIWYG (visual) editor just isn’t fun
2. Better content to HTML ratio which may (and no guarantees here) improve search engines rankings

Timelines

The development of this WordPress build took 6.5 days from start to finish for the development with a total turnaround time of just under two months (the first meeting was 19th October and the launch was 7th December) which is pretty quick for a website of this size and shows how fast websites can be turned around when the client really pushes it through.

The deadline on this site was tight as Melbourne wanted the site up and running for their new office move. View pictures and a video of Melbourne’s incredible new office.

Summary

Having worked with Melbourne before, I jumped at the chance to again because they’re a great client. They’re open to good ideas, they pay their invoices on time and for this project in particular they assigned a Project Manager, Josh, who ensured that the project didn’t slip – plus as they’re a technically minded bunch it means I don’t have to spend as much time explaining how to do things to them as I do with other clients (not that I mind doing that). All these ingredients make for a successful project.

The brief

The concept of the website was work in progress. Jobs would be posted to the portfolio whilst still in progress and to-do lists would be posted on these portfolio pieces detailing what had been done and what was outstanding. Comments would also be encouraged on portfolio pieces – something which other agencies often shy away from.

Barraclough had a tight deadline – they wanted their new site up and running as quickly as possible in order to demonstrate their skills to potential new clients. Fortunately after having completed a few similar sites for other agencies recently I was able to accommodate a quick turnaround.

The design

Barraclough supplied a very modular design and were very particular with regards to how it was implemented. They were an interesting client to work with as they were very concerned in gaining a perfect representation of their designs in the HTML/CSS templates – something which can be hard to achieve but very satisfying when it does happen.

The development

I was able to make extensive use of WordPress’ custom post types and custom fields for the website’s: portfolio pieces, to do lists and staff members.

I wanted to make the website as easy to use as possible and I think I achieved this with custom fields – one of which can be seen in the pictures in this case study.

Timelines

The website was built within two weeks of the client first contacting me; with the client taking a further week or two to perfect the copy and images on the new site after the code was complete.

WordPress

I made use of WordPress’s custom post types to make sure adding new case studies was as simple as possible for the guys at Marble Media. It’s the part of the site that has the most prominence so I wanted it to be really easy to manage.

JavaScript

I used the Slides plugin for jQuery to achieve the case study slide shows on the site. Having used lots of plugins in the past (and written my own code too) to perform tasks like this I can safely say that this plugin is the best I’ve used so far.

Timelines

As this was converting an existing website into WordPress is was quite a straightforward job. I did however rewrite some the HTML/CSS and JavaScript as I felt it was not as semantic nor as reusable as it could have been.

There was around 3.5 work days that went into this project.

Background

I originally worked on the HTML/CSS and WordPress build for the first SQUAD website a few years ago with another agency so a solid structure was already in place.

Process

Step 1: I created a design in Photoshop for the homepage and presented it to the client. Once we had agreed upon an established style I then created the other pages by ‘designing in the browser‘ to speed up the process.

SQUAD had strong branding in place and an idea of how they wanted the website to look so this the design was a fairly straightforward process.

Step 2: I updated the WordPress theme and custom plug-in code to make use of the new features that have been created since the website was first created.

Step 3: The site then sat on a staging server while the client went through, got to grips with WordPress and perfected the copy. Once they were happy with the new site, I put it live.

Timelines

As a lot of the work was already in place for this job the timelines were relatively short with around 4 work days going into this project.

YOA had already approached a designer, Gavin Burnett to create the look and feel and were looking to me to create a search engine friendly website from Gavin’s designs.

Fortunately, the client had been using WordPress to experiment with microsites to see if they could gain some SEO results. Therefore, they were very keen that the new website should use WordPress – which suited me too.

Features

Once again, I made use of some new features of CSS3/HTML5 including:

• using @fontface for the headline fonts
• using @media queries to create mobile friendly version

Extending WordPress

It’s always a good idea to ensure a Content Management System makes it as easy as possible for the client to add/edit copy on their website and I used custom WordPress plug-in functionality to make sure updating content such as the main ‘masthead’ copy on the site was simple.

Project duration

The build took around 5 days and then once all the other services like training, basic SEO had been factored in the entire process took around 2 weeks; the whole project took just over 2 months from receiving the designs to putting the site live.

Sidenote: Admittedly, this is longer than expected to build and launch a website of this size. Timings *should* be around 3-4 weeks maximum but it’s important to realise that clients can have other commitments (i.e. running their business for one) and other development projects may be running concurrently making project durations longer than originally planned.

Summary

This was an interesting project to work on because the client invested heavily in a complete rebrand of their existing style.

I think the designer came up with a brilliant concept and having worked with Gavin’s designs before on the Serverlove project I knew what to expect design-wise: a nice clean design that was pretty simple to convert into HTML/CSS templates.

Visit the new Your Office Anywhere website.

Straightaway I saw this as another chance to use WordPress and in particular the new custom post types features. The client, Catherine had a pretty decent knowledge of WordPress as Marble Media had set her up a basic blog to get her started and she had taken to it very well. Therefore, I felt changing to a different system could only hamper her.

The brief

Creating a simple user-focussed job search site; let’s not fool ourselves here, the model this is based upon begins with A and ends in uthenicjobs because it is just so simple to use. The client felt this model would prove more popular with job seekers then the approaches adopted by the competition. Marble Media involved me in the very early stages and allowed me to submit my opinion on their ideas and tell them what would and what wouldn’t work.

The philosophy

This client was an expert in their chosen market -legal recruitment- but quite naive in terms of web development and so I wanted to adopt an approach where I would take the idea and prototype it as quickly as I could – present it to the client gaining feedback before tweaking the result until it met their needs. This approach worked quite well, it did however produce slightly more work for me, but I felt it was the only way to due to the circumstances.

Stage 1 – receive designs, sitemaps and start coding

The design agency supplied me with quite comprehensive site-maps so I knew exactly how the system would work. They also supplied page designs (PSDs one page/section) at a time.

Thanks to the extensive planning from the agency I was able to get straight into coding WordPress very early on.

Stage 2 – test test test

This website will live and die on how good its search is and frankly it was very tricky to get a complex search to bring back accurate results without slowing down the site. The client and myself spent many an hour talking on the phone or emailing each other to discuss how the search was working and whether or not it matching her expectations.

Knowing very little about legal was quite difficult for me to see how the results should work and admittedly, at certain points, this was quite frustrating for all parties but, fortunately, it did work out eventually.

Going live

Once again getting the client to understand the process of a staging and production server was a massive help here. Once they appreciated that the staging server was there to show them progress (and would not always be perfect) and the production server was there for live stable code it made things much easier for me. Once we were ready to go live there were minimal issues thanks to having this system in place.

Project duration

I was first contacted by Marble Media in July 2010 and they started design work around that time. My involvement, besides my comments on their ideas, started in August 2010 and stretched to around mid-late November working more or less 4 days a week on the project during this time (with a 2 week holiday inbetween). Then the site was tweaked every now again (maybe around 1-2 days a week throughout December) before finally launching in January 2011.

Overall I’d say about 3 months of development time went into this project from start to finish.

Upon reflection, the iterative process I opted for, which admittedly was very good for the end product, did add an extra 2-4 weeks on top of the project. A word of warning for myself and others: be very careful when opting for that process on a fixed price project.

Summary

Time will tell how successful Just Go Direct will be. It’s up to the client to go out and promote it to legal firms and legal job seekers and they are certainly capable of doing that. Fingers crossed that it will be a success.

The brief

They provided a pretty decent brief to begin with - I’m led to believe that they initially approached a big name Manchester-based agency first and perhaps this led to them creating a more informed brief than is typical.

They knew they wanted WordPress and they had clear goals of what information needed to be displayed on the website and the relative importance of each section. They had also considered their audience and were keen that this website was to cater to both the general public as well as scientists – with the general public being the main audience.

Once I digested the brief, I created a proposal along with a timeline for the key milestones on the project and submitted to the client all the time making it perfectly clear that I expected a 50% deposit upfront and 50% payment uon completion. They agreed and so I drew up a contract to make everything official.

Stage 1 – interactive wireframes

From that brief I created interactive wireframes in HTML/CSS which helped to guide the client through how the website would work. After the wireframes were approved I started design work.

A quick word about wireframes

I’ve used wireframing when working inhouse at agencies but I’ve recently started to do it with direct client work. It does seem to have a few distinct advantages when compared to simply starting design work straight away:

• it teaches the client that the look and feel is less important than the information they are trying to display
• it informs clients how much copy they need to provide

Once the client is sold on the wireframes it makes the design process much easier.

Stage 2 – design comps

Before starting the design work, I produced a questionnaire for the client to complete which asked them if they had any existing branding that needed to be retained and if there were any other websites they liked (and more importantly, why they liked them). Once I had this information it was much easier to create an informed design i.e. one that was much more likely to get client approval first time with minimal revisions.

CUT’HIVAC had a few design requirements, they wanted to make use of the blues on this UPMC website in some way and also that the logos of their partners would be represented on every page. Another consideration I had was that, as this was for a small team, who would be spending more time on their scientific project than the website, that the home-page should be more or less auto-generated from content on other pages and the client wouldn’t have to worry too much about making sure it was updated regularly.

Stage 3  – Front-end build and WordPress integration

The front-end build was very quick for two reasons:

1. Because I designed the website – I knew exactly how I was going to build it and that was constantly on my mind during the design phase
2. Because I built the wireframes in HTML/CSS a lot of the structural code was already done and just need colours, typography and any images

I’m using WordPress’ custom post types more and more on client work because it’s a: really easy to do and b: it makes it easier for clients to manage content that doesn’t quite fit into their usual idea of a page. On this project, I set up 4 different custom post types for Publications, Events, Contacts (for the directory on the contact details page) and Partners.

Stage 4 – Staging and production servers

The penultimate stage was to put the website onto a staging server which allowed the client to see exactly how the website would work before putting it live on the production server. Once again, the aim of this is to minimise mistakes on my behalf and more importantly so the client knows exactly what they’re getting and so rarely asks for changes after the site has gone live.

Just before going live I made sure the website was claimed in Google/Bing Webmaster tools and that the relevant Google Analytics code was present and then it was time to set it live.

Summary

This project was one of the first where I’ve followed a very strict process as outlined above and it proved very successful. The fact that the client was based in Paris and we could only communicate via email and the occasional phonecall made the fact that this launched on time even more impressive.

Visit the CUT’HIVAC website

Whilst working with mediaburst last year on their website redesign, they asked me to look at an exciting new SMS/web app they were building. That app turned out to be Florence or Flo for short.

Recession busting SMS

Mediaburst believe they can save the NHS money whilst simultaneously enhancing the lives of patients by using text messaging.

Patients simply send and/or receive text messages to/from clinicians who can monitor the results. Text messages are sent to/from Flo which makes the system seem less like people are texting a computer and more like they’re texting/receiving texts from a real person who cares about them.

Florence is still in trial mode in the NHS but it has shown positive results thus far. It was also instrumental in saving someone from a heart attack when it identified a pattern of raised heart rate in a patient and alerted the doctor.

Read more about it here on NHS Local

My thoughts behind the design

I was asked to design the web interface which the doctors/nurses would use. Along with mediaburst, I was determined to make sure the interface really intuitive and uncluttered.

I wanted big text, lots of whitespace and the most streamlined navigation possible; I felt that clinicians have enough to deal with so the easier Florence was to use the more likely they would like it. I opted for colours that matched NHS brand guidelines so that the clinicians would feel at home using it.

Summary

I’m immensely proud to be involved with Florence and especially proud of my role in this project. I feel this was the first time I was fully allowed to set forth a vision for a design and carry it all the way through.

A special mention must be made to the team at mediaburst who worked tirelessly to manage the project and take care of all the complicated programming/database side of things.

You can read more about Florence on the mediaburst blog post: ‘We’re changing lives.’

Project Duration

This was a very quickly turned around site; the time between initial contact with the client and the project going live was under two weeks and the actual work load was around three days total.

Credits

The design of the site was created by Gavin Burnett and I have to thank him for a few things: creating a design that was relatively easy to build, for using a headline font that was royalty free (and therefore could be used with Cufon) and providing detailed instructions of how the design should work. Most designers don’t do that but they should because it really makes a front-ender’s life easier.

The JavaScript pricing ‘slider’ was already in place I merely tweaked it slightly and reformatted the code slightly.

Background

I met with mediaburst a couple of months ago and we both decided that the whole site didn’t need to be made mobile; instead just certain aspects of it did. We both agreed that people wouldn’t be likely to want to sign up for mediaburst products via a mobile site rather they’d want to read more about mediaburst via their blog posts and case studies.

Mediaburst also felt that not having a mobile site considering their position as a mobile supplier may look a bit odd so they wanted one to cover that gap. They didn’t feel a mobiles site would get a lot of traffic therefore it needed to be kept simple and within budget.

Content

I think it’s a common myth that people on their mobile phones are in a rush to get stuff done and don’t want to read that much. I spend a lot of time on my phone reading websites when I’m utterly bored e.g. when I’m on the bus or waiting for my girlfriend and in those situations I want content to read.

The homepage of the site leads customers in to read the work and blog posts – hopefully they will read enough of these for them to absorb the mediaburst brand and to get in touch about purchasing products/services from them. It also gives existing customers an easier way to stay in touch with mediaburst – perhaps they’re an existing customer who can’t be bothered to read the blog but when they’re on the train home after work they may feel more open to reading mediaburst blog posts.

Refactoring the design for mobile

StiffRowlands did such a great job branding the original site and creating a mobile version was simple – it was just a case of decided what information was paramount and which information could be cut away.

The idea was very much to keep it simple and to copy, where possible, existing iPhone design ideals such as Back buttons and next/previous arrows in page headers. The Guardian’s iPhone app was a major source of inspiration as I feel it does a great job of making lots of content easy to navigate through.

Separate mobile site vs CSS stylesheet

In a lot of cases, it makes sense to simple add a different CSS stylesheet to create a mobile version of a site – but in this case, the mediaburst.co.uk website is quite heavy; it uses lots of WordPress custom fields and lots of different templates for different pages and I felt that a mobile user should get a much more streamlined site – one that was quicker to download and respond because it was doing less work on the server.

Mobile URLs

The site lives at www.mediaburst.co.uk/m/ and further sections of the site have URLs like:

• mediaburst.co.uk/m/work
• mediaburst.co.uk/m/blog
• mediaburst.co.uk/m/blog/blog-post-slug

The /m/ is a handy way for me to a: keep the site structure simple and b: recognise when WordPress should be showing a mobile themed template. I could have opted for an m.mediaburst.co.uk subdomain but that would have complicated matters further and this was to be a small project with a quick turnaround time.

WordPress set-up

The three main pages: Home, Work and Blog are set-up as normal pages in WordPress (just with a mobile-friendly template) so the client can edit the title and introductory copy. The individual work posts and blog posts are complete copies from the full website blog and case study pages- I didn’t want the client to have to rewrite these posts to make them mobile friendly as it would have meant too much work for them There is a switch in the template that works out if the blog post/case study should be showing the mobile template (worked out by whether the /m/ is in the URL).

There is some jiggery-pokery in the functions.php which checks if the user is running a mobile and if they are it redirects them to the mobile site. At first I wanted to simply show the site with the option for mobile users to switch to the mobile version but mediaburst felt it was best to redirect clients automatically in case they missed the mobile site link.

Project duration

From start to finish this project took 4 days. Including all meetings, design work and client approval. A very fast turnaround time thanks in all to the commitment from both parties to keep the site very simple.

Further reading

Mediaburst wrote more about their new mobile website on their blog.