2014: Year in Review

2014 was a big year at AREA 17. We had the opportunity to work with some amazing new clients, develop deeper partnerships with existing ones, have our voices heard from coast to coast (and country to country), soak up some California sun, and come back home again to expanding studios in Paris and New York. We wished a few old friends the best in new adventures and welcomed a cadre of talented new colleagues hailing from as far away as Dubai and Detroit and as close as Long Island and Brooklyn Heights.

Auto populating code/pre tags with HTML content using JavaScript

On a recent static style guide build I got tired of manually inserting sample code content into <code> tags; especially as I hadn’t fully made up my mind on exactly what the markup should be. Each change meant I was copy and pasting the new markup into a new window in my text editor and search and replacing the < and > so that it would render as expected in the browser. I see most problems as a Front End problem so I wrote a quick function to do this for me. I’m writing this down and sharing because a quick Google search didn’t reveal any similar functions.

I recently came across an interesting article by Simon Owens on the Nieman Lab’s site called “It’s small touches that can make a difference in New York’s layouts.” The piece starts with a simple observation:

Alternatives to Compass in a Rails project

For years we were using Compass with Sass with our product, Krrb, to make our lives (mine at least) a bit easier:

no browser prefixes to take care off
cool shortcuts
easy image sprites generation

However, there were still performance issues.

Compass is huge and take lots of time to compile—from five to eight seconds for each deploy. So I decided to get rid of it completely.

“Who invests in you matters more than how much they invest in you. As Paul Rand often said, the quality of the client will determine the quality of the design. If you get money from the wrong people you will be negatively constrained, so choose well.”

John Maeda’s move from President of the Rhode Island School of Design to the venture capital firm KPCB last year is as clear a sign as any of the increasing value placed on design in business. This topic, which has been covered extensively over the last few years (I offered my own take this past summer), is presented in a refreshingly personal monthly newsletter by Maeda that arrived in my inbox today, including the above quote.

The newsletter, a companion to Maeda’s twitter stream @designandvc, shares his thought-provoking and valuable observations that tend to stay with me long after I’ve read them. I would also suggest reading Maeda’s article for the Wall Street Journal, “Three Principles for Using Design Successfully“ as well as the Design and VC blog post where he’s collected an archive of articles on the subject, going back to 2004. I look forward to more from Maeda as he continues to champion the role of design and designers from his new post in Silicon Valley.

Designing Vancouver

I recently spent a week in Vancouver, where the seeds of my AREA 17 adventure were planted. It was there I met Arnaud Mercier in Y2k while working for Blast Radius and I still remember the buzz that was created when his Elixir Studio Subway portfolio got sent around, along with the news that he would soon be joining our ranks. I was only a couple of weeks into my first real position as a designer, and over the next couple of years I had the opportunity to learn from him and a host of other incredibly talented art directors whom I continue to hold in high regard. I guess that’s why Vancouver has always felt particularly rich in design for me, despite the fact that the Canadian city does not have as many cultural offerings as New York or Paris (a fact subtly lamented by Arnaud at the time). So it was with an odd sense of pride that I discovered a thriving design culture, especially in Gastown, the city’s oldest neighborhood.

Designers, step away from your computers: A missive in support of field research

airbnb gets a redesign

When airbnb released its new site design and rebrand by DesignStudio this summer it caused an uproar, to put it mildly. There was so much written about the work that it seemed even the most sheepish designers poked their heads out from behind their monitors to weigh in.

Estrella Damm, the beer of Barcelona. Illustration by Alex Trochut.

In 1992 the Olympic Games were held in Barcelona. Since then, the local design scene has grown immensely, so much so that Barcelona now has more design schools than any other metropolitan region in Europe. The city is now recognized globally as a forward thinking design city with the branding to prove it.

In order to maintain Barcelona’s recent reign of design dominance the city’s local government, public and private institutions, and companies have made big efforts to create and build the Barcelona brand.

But how exactly do you brand a city?

Segment.io — a standardized interface for
web analytics

Implementing an analytics tool for analyzing site traffic and basic user behavior is pretty easy these days. For most people Google Analytics will work just fine — it’s free, it has a great interface, and it’s trivial to implement.

At Krrb our needs are slightly more complex. While Google Analytics supports the majority of our traffic analysis, it doesn’t give us everything we need.

Just Map It

Before joining AREA 17 two years ago I spent a year and a half trying to get my startup, justmap.it, off the ground. I wanted to create a simple app where people could log and share places. And while it’s been a grind, I’ve pushed forward and will be releasing a new, much more polished version soon. Maps and places continue to intrigue me and seem to always find a way into all of my work.

Recently I was asked to build a holding page that included an animating CSS gradient. My first reaction was: “Easy. CSS animation.” And I was quite wrong. JavaScript to the rescue!

The language of interactive design is still in its infancy and frequently draws parallels from its more established counterparts in architecture and the Fine Arts. These creative disciplines do share many similarities and often warrant a dialogue that isn’t mutually exclusive. However as design becomes more ubiquitous in every aspect of our lives, and informs decisions in boardrooms around the world, it’s worth reconsidering how we talk about it. One approach is by embracing simplicity and harnessing the virtues of unpredictability.

The first time I used jQuery on a website was June 2007; I used it for an image carousel that faded between sponsor logos. During the rest of 2007 and 2008 I used jQuery, MooTools and Prototype.js until settling on jQuery for everything in 2009. And I’ve been using jQuery on every site since. Until now.

Five Ways Good Design Can Help Your Business

The Cognitivie Puzzles Ogilvy campaign for IBM Software. Illustration by HORT and Carl De Torres.

This article was originally published on Adage.com as the third in a three-part series authored by AREA 17’s leadership team.

Good design is good business. Now more than ever this well-worn phrase, coined by long-time IBM Chairman-CEO Thomas Watson Jr., is worth repeating. In an increasingly competitive business landscape, design is the new battleground and the success of your business depends on it.

Incubating Your Own Products: Insane or Smart?

Studio life.

This article was originally published on Adage.com as the second in a three-part series authored by AREA 17’s leadership team.

At one time or another every agency has considered creating a commercial site that has nothing to do with its client work. Developing a new product takes time, focus and the ability to go into it with your eyes open. And when handled correctly, the payoff can be huge.

At AREA 17 we’ve done it—several times. It has been part of our evolution from a design studio to a full-service agency and has completely changed the way we approach our client work and relationships.

Five Things Your Interactive Agency Should Be Doing for You

This article was originally published on Adage.com as the first in a three-part series authored by AREA 17’s leadership team.

Is your interactive agency doing everything in its power to make your projects — and business — successful? How do you know? Whether you’ve just hired your interactive agency or have had a relationship for years, you may wonder if you’ve made the right choice. With digital budgets increasing year after year, it’s a question worth considering.

Here are five things to look for to make sure an agency is truly right for your organization.

I’m a huge sports fan. It’s a full-fledged passion. So you can imagine my excitement when I didn’t have to miss a World Cup game with WatchESPN. Then I learned that FIFA was supporting goal-line technology in all 12 stadiums during the tournament. To me, this only made one of the best sporting events in the world much better. This view, however, has been hotly contested. With technology creeping deeper into every sport the debate on its role has only increased.

The New York Times Innovation Report: The Cliff Notes

If you are in digital publishing and haven’t heard about the New York Times Innovation Report, well, maybe you aren’t really in digital publishing. I’m kidding. But, chances are you’ve heard about it but didn’t have time to read all 90 pages. No worries, here are the critical things that the New York Times thinks it should be doing and, by inference, you should too.

People always ask, “why do you keep coming back here?” I’ve already been to Iceland three times. Truth is, I’ve never really been into checklists: been there / done that. Accumulating travels. It was my third time in Iceland but it definitely won’t be the last. I’ll be back again and again and again, until I’ve fully satisfied my appetite for this country and its unreal landscapes. Hopefully these few photographs will make you hungry for Iceland too.

Data Behaviors — jQuery vs. querySelectorAll

In October 2012 I wrote an article for .Net magazine, “Get your JavaScript in order,” in which I detailed how I organise my JavaScript files and fire functions linked to DOM elements. The peer reviewer of my article, Ross Bruniges’, main concern was how the JavaScript searched the DOM because I had used the well known slowest method of searching through the page. Now I have an updated version that should put any doubts to rest: querySelectorAll.

(De)sign of the Times: Adaptive Information Architecture, Larry Wall, Cow-trails and Master-plans

The following is a result of ongoing conversations about where online design has been and where it could go. These discussions led directly to the doorstep of Larry Wall, inventor of the Perl programming language. Love Perl or hate it, Larry’s thoughts on the constraints presented by web design are well worth serious consideration — even 16 years later.

UC Berkeley user paths. Photo, Peter Merholz

Eugene Kim: Would it be accurate to say that Perl doesn’t enforce good design?

LW: No, it does not. It tries to give you some tools to help if you want to do that, but I’m a firm believer that a language — whether it’s a natural language or a computer language — ought to be an amoral artistic medium.

– “A Conversation with Larry Wall,” Dr. Dobbs, 1998

Something’s always struck me as odd about interactive, online design. Considering the immensely social nature of the medium, it’s shocking how often it seems to exist in a bubble — or rather a box. Websites, mobile and iPad applications are all designed and developed by a group of people or individuals usually with the hope of mass consumption. And yet despite all that (hoped for) human traffic, most mass sites feel more like cloistered, master-planned suburbs rather than thriving, ever-changing and evolving cities.

“Every page is a homepage.” As side-door, social, and mobile traffic skyrocket, homepages are no longer the work horses they once were. The load now rests on the article page to keep users engaged and moving through the site – something the rise of mobile and one-hit readership has made essential. How? Better recirculation.

Here at AREA 17 we like to track project scope with User Stories. I completed Scrum Master Certification a few years ago and have been trying to find a suitable alternative to a physical project board ever since. In my opinion there isn’t any better way to track a project’s progress than using physical story cards pinned to a board. Having a visible representation of project status for everyone to see works incredibly well.

At AREA 17 almost all of our projects have a distributed team — often in very distant locations (New York, Paris, Argentina, London, Manchester). This makes sharing project status using a physical device almost impossible.

Instagram: @inthefrow

Recently a friend of mine and fashion blogger, @inthefrow, asked me if I’d help her determine who her most popular Instagram followers are. I knew Instagram had an API so I assumed the task would be trivial. Of course, it wasn’t as straight forward as I first assumed…

TL:DR

From a sample of 21,239 Instagram users:

6133 had protected accounts – thats 28%
Average number of followers: 843
Median number of followers: 194
Average number of people followed: 822
Median number of people followed: 265
Average follower/follows ratio: 1:1.76
533 or 2.5% are disabled or other wise invalid accounts

SVG Rendering In Browsers

I noticed some strange inconsistencies across browsers when exporting .svg’s for a recent project. Safari renders .svg’s based on coordinates, Chrome renders vectors optically. This applies to straight objects as well as curves. For example, by default if a circle is drawn on whole pixles the shape will render with hard edges. It’s become best practice to decrease the circles height and width from the center by a few half pixels to reduce the hard edge and make the shape look optically correct on 72dpi screens. In addition to Safari and Chrome, Adobe Illustrator CS6 has trouble displaying pixel results in .svg files as well. The different vector renderings make it difficult to keep consistency in Ai and cross–browser.

Although .svg’s may lack visual consistency, their strengths aren’t necessarily in pixel-perfection on 72dpi screens. As the web moves further from static images to elements that animate, we should consider .svg’s for their real advantages; interactivity.

Optical Cortex

Optical Cortex
The inner workings of a digital product agency

2014: Year in Review

Auto populating code/pre tags with HTML content using JavaScript

Details. Details. Details.

Alternatives to Compass in a Rails project

John Maeda: Design and VC

Designing Vancouver

Designers, step away from your computers: A missive in support of field research

Branding Barcelona

Segment.io — a standardized interface for
web analytics

Maps and Places

Animating CSS gradients

Designing with Unpredictability

Not built with jQuery

Five Ways Good Design Can Help Your Business

Incubating Your Own Products: Insane or Smart?

Five Things Your Interactive Agency Should Be Doing for You

Improving the Game: Tech for the Win

The New York Times Innovation Report: The Cliff Notes

Disconnecting

Data Behaviors — jQuery vs. querySelectorAll

(De)sign of the Times: Adaptive Information Architecture, Larry Wall, Cow-trails and Master-plans

Making Every Page a Homepage

Product Management with Trello

Instagram statistics

SVG Rendering In Browsers