by Ben Byrne, Founder, Cornershop Creative
This post was originally posted on Cornershop Creative's blog.
We’re proud to announce that our first project — other than our own site, of course — has gone live.
At UnitedforZero.org, you can voice your support for a declaration in the European Union Parliament, championed by our client, Global Zero, that calls for the elimination of nuclear weapons. On November 14th, Global Zero’s youth ambassadors will meet with the European Parliament to present them with a special display of signatures collected from the site and ask Parliament to endorse the Global Zero Action Plan for a world without nuclear weapons.
This is a campaign microsite, and as such, there aren’t many traditional “pages” to visit. However, there are a number of aspects to the site that make it particularly noteworthy.
It Leverages Salsa
Global Zero utilized the Salsa platform for CRM, advocacy, and fundraising. The UnitedforZero.org site is a standalone site that utilizes Salsa’s APIs for handling data. This allowed us to build a completely custom form with our own markup, validation, fields, etc., and then push successful signatures into Global Zero’s CRM database for tracking. We also leverage Salsa’s REST API in order to place the names of the signatories onto the “word art” (more on that later).
Global Zero isn’t your parents’ nuclear disarmament organization. They’re young and their constituents are young as well — this campaign is primarily targeted at students, which comprise Global Zero’s core constituency. Because of that, we knew we had to build a site that would look good and work well on mobile phones and other devices, so we built the site to be responsive. (Unsure what I’m talking about? Learn more about responsive design). We also included sharing tools to facilitate sharing on social networks used by students.
Because this campaign is aimed at residents of the European Union, we couldn’t just build the site in English. So there are three versions of the site — English, German, and French. We had to make sure the design could accommodate the varying text lengths this internationalization presented, and we also had to make sure that everything in Salsa was appropriately configured to handle different languages and locations. In case you’re wondering, there are actually three separate Salsa actions to mirror the three languages, but we collect everyone who signs into an overarching group that includes participants in all three languages.
It Pushes HTML’s Boundaries
The biggest technological challenge this project presented is the “word art” that participants see after adding their names. This word art consists of a background image that gets overlaid with user signatures in real time — as people sign on, their names appear in the word art. To get the realtime feed of names, we build a PHP proxy that queries Salsa’s REST API periodically to get recent names. But what makes the word art so challenging is that it’s not just a list of names: the names themselves reveal new artwork that overlays the photo of parliament, every time someone signs. Using text as a “mask” for another image isn’t something HTML “just does” — getting it to work in all major browsers required significant effort. At first we thought SVG was the way to go, but ultimately the HTML5 <canvas> element proved to be the solution.
Here’s some background on the challenges and solutions this posed, from the developer who made it happen:
At first blush, SVG looked like the right solution, as it supports text elements being used to mask an image. However, while the specification for SVG provides features for achieving a clean justified look to the text, these features are not implemented consistently cross-browser. HTML5′s canvas is really just a surface to draw on, so at first it seems less than ideal, but it turns out that we can get the position of an element and use that to render that element’s text onto the canvas at the same position. This allowed us to create an element that contains all of the names with plain HTML, in order to get justification. Then, we iterate over the names and re-render the canvas with each name, using compositing to achieve the mask effect after all names are rendered. It also means that when you move your mouse over a name, we can use simple CSS to change the name from transparent to opaque, creating the effect you see of individual names highlighting.
We hope you like this project and encourage you to support Global Zero’s efforts, particularly if you live in the EU. We’ve got several other sites in the works that we expect to be launching in the next week or two as well, so stay tuned for more announcements soon.