Ahold Annual Report and Corporate Responsibility websites, 2010
This listing is a two-for-one special! Ahold chose to work with RY because they’d heard good things about us, and we didn’t want to disappoint. They wanted a clean, concise website they could host. It had to surface information easily, be easy to use, and look clean while doing it. Oh, and it needed to be done in PHP.
Details
Layout Highlights
Ahold was one of the weirder projects I worked on, layout-wise. While it may not look like it, the Ahold AR and CR websites had more page layouts than any other project I’ve worked on so far. Subtle variations were used between content pages, depending on what needed to be displayed. Landing pages had to be flexible due to the range of items that could be displayed as well.
There were many pages that had to be tailored as well, due to the nature of their content. Not only that, but it should be noted that the AR and CR, while very similar in look, actually had differences between them, even so much as to the same layout pages.
Font replacement technology was used to serve up the Trade Gothic fonts, and I even managed to find a neat bug with fonts.com’s service. I’m sure they were pleased with my phone calls. I learned a lot about font-hinting and font-smoothing across browsers as a result.
We also took a mixed approach to certain effects used throughout the site. Many of the images were cut to be rounded, but much of the standard layout used CSS3, with a couple of exceptions made to make sure the user experience didn’t collapse when using a browser that couldn’t take advantage of what was applied. Browser specific tags (that is to say, IE conditional tags) were used to make sure that the site would fall back gracefully.
Back-end Highlights
Ahold was a different project in many ways. RY tends to host many of the AR and CR reports that we create; it’s an option that we give the client. As such, nearly all of our AR and CR reports are done in ASP.Net. The reason for this is that we have some methodologies in place to help speed up and ease production.
Ahold was different during development because unlike our normal projects, this one was done entirely in PHP. The reason for this had to do with the fact that Ahold would be hosting the site themselves. They use a linux/apache/php setup, and we had to recreate that locally. This got me some solid WAMP experience, as well as a refresher course on console and linux navigation. It was also my first time doing a project that had to be hosted over https during production – a client stipulation.
Due to the fact that the project was to be done entirely in PHP, I had to recreate much of the functionality we had built in ASP.Net for this PHP project. This ended up with my developing a navigation object using a sitemap file, encode/decode helpers, and a slew of other helper functions. It was a lot of work, but in the end saved us a lot of agony.
Front-end Highlights
Tucked away in Aholds AR and CR is a lot of subtle functionality. Some of the standard items are there, such as sliders and accordions, but we also added a functional html map, videos, a brand-filter, and an external link interception script.
The sliders and accordions come from the tried, tested (and being constantly improved upon) plugins I’ve developed for RY. We generally take advantage of colorbox for our overlay requirements, and Ahold was no exception. It’s easily one of the nicest and best to use. The interception script was a bit of jQuery trickery that looks for http links and attaches a colorbox call to them.
The map took a bit more work. I ended up developing my own semi-plugin that would attach itself to the list items within the map. The map displays points on the map, and when you click on them, you are presented with the brands that exist in that area. You could then click on the logos to be brought to the related page.
I had a lot of fun making this plugin, because it presented some unique challenges regarding the layering of elements, as well as making sure the box would center itself properly.
The filter plugin was a real treat to make. I opted to use data- attributes (thanks to my use of the html5 tag, these are valid) to add the filterable items. The navigation was auto-generated based on the items found within the data attribute. When it found a new one, it would add it to the navigation. The filter faded out any of the brands that didn’t match the filter. It also disabled the click event, which helped steer the user in the correct direction. The best part about the brands page was that with Javascript turned off, you still got a totally usable page – minus the filters.
In the end, the client was super happy with the end products, and found working with us to be a refreshing change to some of the unfortunate situations they’d gone through in the past. It was an interesting project, and came with its own set of challenges. This project was a challenge for me technically, but as always an educational experience.
Ahold AR 2010 website - http://arreport2010.ahold.com/index.php
Ahold CR 2010 website - http://crreport2010.ahold.com/index.php