IA Summit

The IA Summit is the world’s most prestigious Information Architecture and web conference. It is the gathering place for a community that cares about how people experience information both on the web and in the “real world” since 2000. The Summit has personally been my professional home since 2007 and I was incredibly excited when I was called by Mike Atherton to bring order, stability and good ol’ fashioned CSS expertise to the table.

Problem

Historically, the IA Summit, like most conferences, produced their websites each and every year. Every year, we would recreate the taxonomy, structural layout, visual design and code to reflect that year’s “look and feel.” Every year, the website was unique, fresh and completely inefficient way of delivering the same content year-by-year. In 2015, the co-chairs set out to create something different. A scalable, reusable architecture and content management system.

My journey with the 2015 IA Summit started off in the mid-way point. IA had already been defined by Mike Atherton. Steve Fisher created a simple and beautiful style guide, along with “interactive wireframes.” And the previous team had been well into the integration phase of the front-end and back-end code within the Drupal 8 beta-release. Drupal 8, a road less traveled at the time, even for the most seasoned Drupal developers.

As with most any volunteer project, I noticed team members weren’t prone to getting things done in a timely manner. And how could they, there was no task board, or to-do list created to follow upcoming work. There was no standup meetings to talk through what was getting done, by whom and any road blocks in front of them. Also, the coded wireframes Steve crafted for the team, once integrated with Drupal, were a bit disjointed. The inheritance within the CSS was all over the board and selectors meant for a static coded wireframe, were getting demolished by all of the extra HTML provided by Drupal. There were even selectors that inherited previous styles in the wireframe version, but were moved to a proceeding area within the stylesheet rendering that inheritance obsolete.

The team was running out of time and needed help not only for the front-end code but to manage the team as well.

Objective & Action

The objective was to responsibly deliver the conference information from Drupal to various screen sizes. 
2015 IA Summit Asana Task List

Getting Organized

I started by creating an Asana list of development tasks that needed to be completed. These tasks were assigned to each individual, provided a due date, and the entire list was prioritized and organized into meaningful releases. This gave the team visibility into everything that needed to happen within the project, any dates associated with upcoming functionality, and a source of truth of the work that needed to be completed.

 

Setting Consistent Communication Points

Secondly, the team needed to talk. With a globally distributed team, from Minnesota, Boston, Washington D.C.,  and London (Reading), our communication needed to be a strong aspect of working together. So I set up a weekly GoTo standup meeting for the team to talk through any issues that may have come up during the week and work we’ll be completing the following week. This accompanied with more frequent pestering by me on Skype and the team started getting back on track.

 

Start Small And Progressively Enhance On The Way Up

The Sass (CSS) was another story. A lot I went back to the Fisher created wireframes and took from there, but was precise in how I used variables and extended styles within the Sass as to take what was provided and make production ready.

Like with any project, writing good CSS takes planning and patience. Creating extendable, reusable modules as opposed to selectors that are too specific, made whatever mess of code that Drupal spat out at us, manageable.

IASummit Mobile VersionLike with any responsive project, performance took a front seat. We started all the code from a small screen and low bandwidth state, and worked our way up.

We included only the javascript and HTML needed to the interface, asynchronously loaded javascript and CSS when appropriate, and included common CSS styles (for the header mostly) at the top of the document so the user doesn’t have to wait to see something in the UI.

Results

The 2015 IA Summit was the first IA Summit website powered by a scalable and sustainable CMS foundation that will reduce the cost of producing the IA Summit by an estimated $10,000 per year (cost to produce a conference website).