Annual Reports & ASP.NET

Our Story carousel on the homepage

Our Story carousel on the homepage

Late January 2013 I bumped into another ex-VCCP’er (Here’s a link to VCCP) who was now working at Radley Yelder. They do more than few Annual Reports each year. They are also a .NET house. This was an opportunity to brush off my C# skills and get involved in a project with some substance after doing the ad agency thing for so long.

Boxes and images respond to window size

Boxes and images respond to window size

RY were already well into the design phase of Pearson’s online Annual Report when I joined the team as lead developer. Pearson is a huge publishing and education company. The AR 2012 site is essentially a handful of ‘landing pages’, with lightboxes to add a little more information to important points. The homepage is a carousel of key messages.

Lots of interesting infographics

Lots of interesting infographics



ASP.NET Webforms has been used primarily for the Masterpages. The homepage carousel and Zoom Search also benefit from having server-side fall-back solution. There’s also a bit of C# for injecting classes into controls in the Masterpages from the code-behind of individual pages. This is how the colourways are applied.

YouTube’s JavaScript API for video

YouTube’s JavaScript API for video



The week I started I read an article in net magazin’s &lquo;The Ultimate Guide To Web Design” by Mike Byrne. A snappy idea, and super simple, put a data attribute in your HTML code flagging where to insert your JavaScript functionality. When the page loads scan the DOM. Whenever a data-behavior attribute is found create a new object for each JavaScript object named, passing the node as an argument.

// args: j for jquery element to search inside
scan: function(j){
  if (j == undefined) j = $(document);
      var c = $(this);
      var list = c.attr('data-behavior');
      $.each(list.split(" "), function(index, b){
        if (typeof Main.behaviors[b] !== 'undefined'){
          var obj = new Main.behaviors[b](c);
          Util.output('data-behavior: "'+b+'" not recognised!');
    // then remove attr to prevent initialising more than once…

I like this approach. It adds some familiarity after coding in class-based laguages like ActionScript and C# for so long. Each idea (or task) is outlined in its own .js file. So I ended up inserting a whole bunch of script tags for WatchBigVideo.js, ShowReportPopup.js, SearchFocus.js, CustomStoryBackground.js etc.

Pearson Corporate Responsibility

Pearson Corporate Responsibility


Custom Events

All these separate JavaScript objects are self contained, which is fine and dandy. What happens when they need to talk to each other. I’ve got videos that need to respond to close buttons, and carousel timers that need to pause when the video plays.

var CustomEvents = {

	list: {},

	// args: e for string representing event, f for function to add event 
	addTo: function(e, f){
		// see if event name exists, add event name to list if it's not...
		if (typeof CustomEvents.list[e] === 'undefined')
			CustomEvents.list[e] = [];

		// add the function to the array for this event name
		//Util.output("Custom Event '"+e+"' added!");

	// args: e for string representing event, data for an object of optional
	// data to pass to each function on list
	doEvent: function(e, data){
		if (typeof CustomEvents.list[e] !== 'undefined'){
			// clone the array (as some functions may alter the original during the loop)
			var i;
			var ev = CustomEvents.list[e].slice(0);
			var n = ev.length;
			//Util.output("Custom Event '"+e+"' called, "+n+" response"+(n !== 1 ? "s" : "")+"!");
			for (i = 0; i=0; i--){
				if (ev[i] === f){
					ev.splice(i, 1);
					//Util.output("Custom Event ("+i+") '"+e+"' removed!");


I expand on this idea later when I start doing more preprocessing.



For a limited time only you can see the Pearson Annual Report 2012 site and the Pearson Corporate Responsibility Report 2012 site.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>