about

The Project

To Build a microsite, to host the live stream of the 2012 Trend Vision Awards by Wella. This was a basic agency build, that would add context and value to the live stream.

The microsite had to include editorial content on the Wella Trend Vision Awards, the competitors, and the winners. It would also need to include voting functionality to allow visitors to vote in two of the award categories.

The content of the website had to be able to update during the day so that at certain times, content became available or disappeared from the site. The schedule of this behavior would be decided by what was going on in the live stream. This, therefore, dictated that it had to be a manual, rather than automated process.

The overall design of the application would come from the agency representing the end client, and who was overall responsible for the look and feel of the Trend Vision Awards.

The last requirement, which is becoming pretty standard these days, as it had to work across Desktop, Mobile and Tablet , due to the use of the Blackberry handset within Wella meant that it had to work on Blackberry also.

Challenges

The time frame was relatively short for this project, which was a concern because the deadline couldn’t move, the site was tied in with a live event and therefore had to be up, running and stable in time for that event to take place. This would, however, mean adapting my approach in order to complete the project by the deadline. This was compounded by the fact that we could only allocate one developer to the project, me.

The other big challenge is one that, I face a lot now the requirement for multi-device support. This presents a challenge on 2 fronts. The first is one that we are used to as web developers, cross-platform, cross-browser differences. Although this has improved greatly in recent years on the desktop, mobile browsers still present challenges in the different ways they respond to HTML, JS, and CSS. The other is testing, because of a lot of handsets, browser, and OS combinations out there testing can be very difficult. Especially testing on devices that we had no access to like the Blackberry.

Skills Used

I choose to do this project in PHP, mainly because PHP allows for rapid development, and has a large number of pre-built content management applications. I also decided to go down the PHP route because it opened up the hosting opportunities, which at the time of starting the project hadn’t been finalized.

I used a CMS for the core of the project because that would quickly give me a framework from which to hang all the other aspects. I had a very short deadline, and so decided that I would use a CMS which I was already familiar and comfortable with, as well as being powerful and an adaptive enough to build out the other more custom content and features. For these reasons, I used the SilverStripe CMS.

There was a lot of frontend development required for this project, this meant using a lot of JS. I built the JS around jQuery partly because some of the more generic functionality could be supplied by plugins which would speed up development, and also because of the need for this site to work in multiple environments.

The Work

The build for this project was relatively straightforward using a combination of Silverstripe and jQuery meant that the rapid application development required of this project was relatively easy. More generic stuff could be handled by SilverStripe, such as content management, routing, templates, and pages. I could then concentrate on getting the templates build and looking as the client wanted, as well as the custom functionality unique to this project.

One of the most complex requirements was the UI around accessing information on competitors. This was to be built around a world map interface, with clickable continents and countries. That could be used to navigate the content. I originally looked at doing this with something like the Google maps API, but due to the visual design requirements, as well as the technical aspects, I decided that this wasn’t the ideal way. I, therefore, generated a series of images. one of which was for the world, this would be used to click on continents and then one for each continent that would be used to click on the country and get to the information

From these I produced a series of image maps, this was a relatively “old skool” way to do it, but it would mean maximum compatibility with multiple devices, OS, and browsers.

The last stage of building this interface was to write the JS that was able to add all the required behavior, to what was currently just a series of images. This JS responsible for handling the clicking of individual elements within the UI, but also positioning of “pins” to represent contestants, and the labels for those pins on hover.

Getting this interface to work smoothly and accurately took some time. This interface could have done with a lot more optimisation than I had time for.

Time was a constant in this project, the most important thing which overrode this project was getting it done and ready for the show. This meant that some corners were cut during the build. I was able to do this because the site was only going to be live for a short time, a matter of weeks then the code would be simply thrown away. This meant that writing maintainable code, in this case, wasn’t an issue.

I personally found it a struggle to do this as I always try and build code to the highest possible standard and quality. With the founding principle been reusability, maintainability, and readability. With this project it was more about getting it done, looking right and working how the client expected it.