Joey Coleman: The Story of James mobile project: My work up for an journo award

The Story of James mobile project: My work up for an journo award

One of the projects I completed for The Hamilton Spectatoris up for an Ontario Newspaper Award in the Online Multi-Media Special Project category.The project up for the ONA is the Story of James project which I created the interactive mobile component of.

The mobile project involved the manual coding of HTML and CSS for use on mobile smartphones, the encoding and compression of video clips for consumption on smartphones, and the placement of mobile 2D bar codes on James Street for people to access the pages.

The bar codes were designed to be located in front of the places and buildings the story was written about – in effect bring the story into the physical space.

The mobile project was a branch of the paper’s larger The Story of James special section project however, it was not my first choice.

I was hoping to use Living Stories source code to create web project to mark the 75th birthday of the local Roman Catholic bishop. The 75th birthday milestone required that Bishop Tonnos retire after 27 years leading the large diocese that stretches from Hamilton to Owen Sound. This project was proposed in my cover letter.

This Living Stories project offered the opportunity to explore the role of the Catholic Church in the local community, tell some of the interesting stories of the Bishop’s tenure such as his refusal to grant a Catholic Funeral Mass to local mobster Johnny “Pops” Papalia and the untimely death of Father Sean O’Sullivan.

Thankfully, I was asked to put my energies into The Story of James project by the senior web editor who approached me and asked me to think about how I’d apply my web skills to this special print section.

I thought about it and realized that the story about physical spaces offered the opportunity to tell the story in those spaces.

The question was how to get the story into that space. We could make a downloadable pod or vodcast. The drawback is that it requires people to know or see an advertisement for the URL. In the case of iPods and the like, the product would need to be downloaded in advance.

I needed to create a mobile website for smartphones to get the story into the space. This had the added advantage of creating The Spectator’s first mobile web project and allowing me to challenge my skills in the expanding mobile space. News is increasing being consumed on mobile devices and professional journalists will need to deliver our content to these devices if we are to thrive.

How to get the content to those mobile smartphones – QR codes.

How to promote those QR codes (after all this would be the first use of multiple QR codes in Hamilton) – the print newspaper.

How to get QR codes into the print edition posed the greatest challenge.

The size of a QR code is determined by the size of the information being communicated and the error redundancy desired. In this case, the information is a webpage URL and the error redundancy required is high as CMYK  printing presses produce some blur around the edges of images. This meant that the codes would have to be at least 2 to 4 inches in width and height.

The amount of work required to determine the minimum error redundancy required for newsprint was prohibitive. We’d have to create the section well in advance, print dozens of test copies on the presses (the first papers coming off the presses each night are not distributed outside TheSpec building as the quality is poorer than later prints and we’d need those later prints to determine the redundancy required), and redesign/reprint in an trial-and-error process until the right balance between error redundancy and size was found.

To have a QR code blended onto a full page map in the print edition was a logistical impossibility.

The solution in this case was the purchase of EZ codes. EZ codes have a set size: 11X11 and can be printed as small as 11mm by 11mm. The simplicity of the codes is the result of their closed-source commercially controlled nature. Instead of requiring the entire URL encoding in the code, EZ codes merely point to the servers of the company which licenses them. The company, ScanLife, then redirects the codes to their ultimate destination or runs a program/protocol if the code is programmed for a task other than directing to a URL.

The use of EZ codes allowed for the integration between the print and on-street products.

The next challenge – the one which I enjoyed most – was compressing the content to consume bandwidth and improve load times.

As someone who wrote his first HTML webpage in 1996, I was taught in the age of 14k modems when early dial-up speeds required that web pages be designed with the highest efficiency and no add-on frills.

With many smartphone users limited to 500MB, I needed to conserve their data plans. This goal had to be balanced with the desire to provide a great multimedia experience.

The biggest compression challenge was the creation of video content. The data size requirement meant short and informative videos were required – every added unnecessary second meant sucking bandwidth from end user’s data plans. The encoding was done to provide sufficient quality to be impressive to the viewer yet minimize the size of the video files. The Spectator’s website offers a flash video player and the encoding used prior to conversion to .flv is the standard .mov at a resolution of 640 x 480.

This would not work for the mobile project. I decided to use a 3gp encoding in Final Cut Pro with low-bitrate stereo audio at a resolution of 320 x 240 – the screen resolution of many Blackberries.

The videos were produced and filmed by one of TheSpec’s most talented senior photographers Barry Gray.

The photos used on the mobile site were also converted to lower file size. Each one was changed into a .gif or .png and the resolution lowered to a width of 320 pixels maximum. I used my favourite open-source image conversion and tweaking software, Irfanview.

The text was written and provided by the project editor.

I combined all this content into 15 “stops” on James Street from King and James in the south to the CN Station on James North which is now known as LIUNA station.

It was quite an exciting project bringing journalism into the physical space of one of Hamilton’s most lively and historic streets. Combine this with it being my first mobile project and first large scale use of 2D bar codes, and you can see why working on this project was the perfect ending to a summer at The Spectator which saw me break all their online record and change the online media landscape in my hometown.

The final part of the mobile project occurred after I left; the placement of the EZ codes in the paper and on James Street.

Each EZ code was accompanied with a brief description of the location which the mobile content was informing readers about. Each of the 15 stops had a bar code and people were able to interact with The Spectator in a way they never had before. Over 2000 code scans occurred on September 25, 2010 – the day of a major festival on James Street North. The newspaper also promoted the codes on the front page above the fold during the days leading up to the festival.

While 2000 scans does not seem to be significant – it represented about 250 unique users – the impact of the codes cannot be underestimated. I walked along James Street that day observing how people were interacting with my work. The curiosity of people scanning codes with their phones often resulted in the scanner (techno-geek) explaining to a small group of people what the codes were all about and sharing the experience of viewing the content with a small crowd – in a similar fashion to the olde-style sharing of newspaper sections on a commuter train.

**The tactile experience of interacting with newspaper content is recreated for the digital age. **

The impact didn’t end when the reader closed their mobile browser – they discussed how The Spectator was cutting edge with using new technologies to read readers and deliver content.

There was one significant coincidence,  one of the Mayoral candidates – whom The Spectator endorsed in the previous election he lost in 2006 – rolled out his own use of QR codes completely unaware of my project. Di Ianni’s campaign didn’t have to explain 2D bar codes as the paper was already doing so.

It was an interesting coincidence but nowhere near the level of* The Daily Telegraph *crossword coincidences of WWII.

What would I do differently if engaged in a similar project today?

EZ codes are great for print, but they carry an expensive price tag. I would print one QR code in the newspaper directing to the project mobile index page and only use QR codes on the large promotional materials located on James Street.

Now that many smartphones are compatible with HTML5 and CSS3, I’d invest time into creating a style sheet which recognizes different phone models and changes the resolution of the page to reflect the device which the content is being viewed upon. The style sheet would also include coding to change the layout based upon the orientation of the mobile device. My project was written with the vertical orientation in mind. I failed to properly script to optimize horizontal orientation. Further, I’d include gestures for touch screen phones.

The iPad2 includes a camera meaning it can respond to QR codes. If time allowed – and last summer the Great Stadium Debate stole most of my time from the project – I would create a separate project for the iPad and similar devices such as the Galaxy Tab and RIM Playbook.

There are many opportunity for journalists to engage with mobile device users and this project is only the first of many I hope to create in the mobile space moving forward.

The ONAs will be announced on April 30th at a gala in Waterloo.

Do you know of other journalists using 2D barcodes? I’m interested to check their projects out. Let me know by email, Twitter, or in the comment box below.