Our Blog

“When forced to work within a strict framework the imagination is taxed to its utmost – and will produce its richest ideas. Given total freedom the work is likely to sprawl.” — T.S Eliot

One of the things I enjoy most about being a designer is having clients who trust my ability to create something that represents them to their customers. It’s a big responsibility, and one that agencies shouldn’t take lightly. Part of this design process of getting a project off the ground is the initial phase of creating design options and different comps for the client’s consideration. In other words, choices.

Here’s the thing … growing up we’re basically taught that freedom is maximizing choices. The freedom of choice, right? You want running shoes? Here’s 50 different shoe companies offering 15 models in 5 different colors, each. The freedom to choose!

As a client, what could be greater than handing a project over to a competent designer, and giving them the freedom to “do your thing and make something great out of this”, letting them go to town creating the next big thing for you? The designer would have unlimited choices with branding profiles, the freedom to use their discretion regarding typography, mood boards and content transitions  — everything up to their professional expertise, which you’re paying for. Sounds great, right?

Unfortunately, the very freedom that clients often give can become the very bondage that slows the creative process, and ultimately blows up budgets and timelines. Or, on the flip side, leaves the client with a final product that didn’t quite live up to expectations, assuming any expectations were set.

Bob Garfield talks about the ‘tyranny of freedom’ and the ad industry’s obsession with breaking rules in his book And Now a Few Words from Me. He uses the example of a child, and how “lack of boundaries does not liberate, it enslaves…”. His point is what looks on the surface to be confining can sometimes be liberating, and the lack of boundaries can promote indecision for the designer.

It’s the client’s responsibility to set these boundaries. It’s the designer’s responsibility to help walk the client through that process and answer questions that, at times, the client may not know to ask.

To think outside the box, there has to first be a box.

Deep right? Bear with me — I’ll try to not get too zen, but it’s valid. It’s important to understand that creativity thrives on constraints. If you have a wide open plain of choices, that creates a load of pressure, especially given that almost every project comes with a budget and a set timeline, both of which already affect the project scope. When designers are given context  — restrictions and limitations — it stimulates creativity.

Here’s an example. I want you to sit at your desk, grab a blank sheet of paper, and I want you to draw something cool. Anything. Oh, and you only have 5 minutes. Feel free to email me your creations at calvin@elexicon.com. (No seriously, your submissions would make my day). Chances are if you took my example seriously, you’d sit there for half that time deliberating on what exactly to draw. The other half of the time would be spent quickly throwing together whatever it was that you settled on, and at the 5 minute mark, you’d likely not be incredibly happy with the results, or you’d second-guess your decision.

OK, now I want you to take the same 5 minute slot, and this time I’m going to give you a scene — a set of limitations. This time, its the zombie apocalypse and I want you to draw your war vehicle with all it’s weaponry that you’re going to drive to survive the hungry hordes. If you’re anything like me, your mind is immediately racing with all the guns and gadgets and armor that you’re going to attach to the outside of your car!

The example is silly, but this same concept rings true with project scopes and outlines that we designers receive from clients — the better we understand the project challenges and scope from the client, the higher the likelihood that we’re going to not only come in on budget and within the timeframe, but also that you’ll get more creative, better quality work.

I’m always attentive to advertising and marketing and brands, and our agency is especially attuned to revamps and refreshes, keeping tabs on blogs like Brand New. Airbnb recently updated their branding and, in my opinion, has really nailed it. The animation explaining the evolution and meaning of their clever new “Belo” logo sums up their re-focused mission nicely. It’s a delightful exploration: Just scroll down a bit on their home page.

As a past customer, they’ve really captured the essence of the value that I find in Airbnb: What they distill down to “Belonging.” I’ve rented spaces in San Francisco and New Orleans, staying in neighborhoods rather than hotel districts located near tourist attractions or convention centers. Both experiences gave me and my family the feeling of what it would be like to actually live in these historic and diverse cities, as opposed to a “just visiting” hotel stay. I’d call that belonging, alright.

This branding work reminds me of the popular TED Talk by Simon Sinek and his book, “Start With Why.” If you haven’t seen the talk, I’d recommend it … I’ve embedded it below. Once you’ve watched it, you’ll see how Airbnb has captured their “Why:” The central belief or ideal that drives a great business, inspires their employees and enchants their customers. Their “Why” statement would basically be their tagline: “Belong Anywhere.”

Last month, Matt Haughey of MetaFilter published a piece on Medium about the status of one of the true stalwarts of the internet:

MetaFilter is the little weblog that could, established in 1999 as one of the first community blogs. Over its fifteen year history it has expanded from a place to discuss interesting things on the web to include Ask MetaFilter as a community question and answer (Q&A) site, along with more subsections for things like music by members, completed projects by members, meetups among members, and most recently TV and movies.

While MetaFilter is relatively small (only about 62,000 have paid the one-time $5 for an account to date and 12,000-15,000 of those members come back to interact with the site every day), we have a great group of members, and I think we consistently have some of the best discussion on the web, with the sites attracting over 80 million readers last year. Our commenters are literate and thoughtful, and our site is watched around the clock by a staff of moderators. Despite the site’s modest stature its influence makes waves in the larger world (like mentions on popular TV shows: Tremé andMythbusters).

Unfortunately in the last couple years we have seen our Google ranking fall precipitously for unexplained reasons, and the corresponding drop in ad revenue means that the future of the site has come into question.

Haughey goes on to explain the situation at length.

His story is alarming for a number of reasons. MetaFilter is highly-regarded, with a reputation as a good citizen on the internet and has a community that is generally one of the best. The realities Haughey and his staff now face this are brutal and should have been avoidable.

However, the nature of Google in 2014 is such that determining where MetaFilter went wrong (or even if they went wrong) is difficult.

What we do know is that, as the company has grown over the years, Google has become increasingly opaque and monolithic. It has also become seemingly hostile to some of the principles it was originally known for. The famous but informal Google motto  “Don’t be evil,” has become a punchline to some observers, particularly after the sudden shuttering of Google Reader and the intrusive full-court press on Google+. This MetaFilter story only adds to the narrative of a Google that is losing sight of the open internet, where the cream rises to the top.

At the surface, the MetaFilter situation is related to positive changes Google has made to their algorithm aimed at reducing instances of low-quality content and serving up high-quality content. However, if you do a Google search today, you still get content farm results and low-quality answers from sites like Ask Yahoo! If this were a case of MetaFilter losing out to quality competition, or utilizing unsavory SEO techniques Google is flagging, it wouldn’t be so disturbing—it would be expected. As it is, you have MetaFilter losing out for reasons that remain opaque to the outside.

Here you have an extreme case that offers a harsh lesson: you can do all of the right things and still lose out if you are too dependent on a third party company for your success. It’s true with Facebook and other social media sites, and it’s true with Google too.

MetaFilter, for example, is now pivoting to another, less ad-dependent business model, but it seems they should have done so earlier as a safeguard against the shifting sands of Google’s algorithm.

Our guidelines for customers remain what they were before: keep your SEO efforts clean and produce good content while striving to engage  your users in a meaningful and lasting way. Just remember that what happened to MetaFilter underlines the importance of the engagement component. Search results can change, but a proper web strategy can minimize the damage to your business when they do.

For some more background on the story, check out this episode of the TLDR podcast.

Spam emails are extremely annoying. Unfortunately, spambots are getting smarter and smarter every day. People have developed some pretty clever methods to prevent spam, but the most popular are also an inconvenience to your users. I’m speaking, of course, about Captcha.

According to the Captcha website, Captcha is

“a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot.”

Typically, the test will consist of distorted text embedded in an image.

But what if the user can’t read the distorted text produced by Captcha? It becomes a nuisance to hit the refresh button multiple times to get a legible Captcha so you can submit the form. Being in the user-experience business, we went looking for a better solution. We looked into several different technologies, but almost all of them were too bloated in size for us to find them appealing, so we had to come up with another way.

First, some explanation about spam bots: they will typically fill out every input field in a form whether or not it is visible to the user. This useful piece of information has led to the creation of the honeypot method. The honeypot method consists of putting a blank input field in your form and hiding it from the user. The bot will come across this input field and fill it in. If the form field is filled in, the sender should be marked as a bot and the form should not send. Unfortunately, setting an input field with display: none; isn’t enough to combat spam anymore. It is certainly a step forward, but as I mentioned above, spam bots are getting smarter every day and many of them have figured this little trick out and can work around it.

To prevent spam on our new forms, we used a few different “honeypot” methods combined into one form to determine if the user is a bot or not. We first implemented the standard blank honeypot text input field and set it to display: none;. When the form is submitted, we then perform a server-side check using PHP to see if the input was filled out. If so, we trigger an error and prevent the form from sending. After testing this method, we waited a couple of days to gauge its effectiveness. Unfortunately, we were still receiving some spam emails each day using this out-of-the-box honeypot functionality.

We then began investigating more solutions to combat spam. This is where we really learned just how smart these spam bots are becoming. When we had first implemented the honeypot input field, we had named the input “anti-spam”. This was a bad idea. Bots are able to read through the input attributes and determine what type of input is focused and, apparently, are able to determine if the input field is supposed to be filled out based upon the name. So we learned a valiable lesson: name your honeypot fields something completely irrelevant to combating spam.

After changing the honeypot input name to something like “promo_code” we waited another day or two to see if we had better results. A day or two went by without spam, but on the second or third day we received another spam email. This was an improvement from the previous rate, but still unacceptable.

That’s when we realized some bots can bypass input fields set to display: none;. So diving headlong deeper into the spam battle, we implemented a method found in MailChimp’s subscription form that sets the honeypot input field to position: absolute; left: -5000px;. This allowed the input field to be “visible” but positioned off screen so the normal user couldn’t see it. We weren’t going to stop there, though. We’d had enough of those emails trying to sell us shoes and prescription drugs.

To be sure no bots could send our contact form, we implemented second and third honeypot inputs. The second honeypot field was an HTML5 email input. I do believe this field was the key in preventing our spam emails. Bots, no matter how smart, will ALWAYS fill out an email input. Just be sure to name your honeypot email input field something different than your actual email input field and name it something totally unrelated to spam prevention. We used the name “email_2” for our honeypot email input. This email input was “hidden” the same way the other input field was, by setting it in a <div> with position: absolute; left: -5000px; set. If either one of these input fields were populated, the form would trigger an error and not send.

The third and final method we used to combat spam is something a little more in-depth and tricky than your average honeypot input. When a spam bot finds a form on a page it will typically fill it out within 5-10 seconds and submit. This is much faster than what a human can do, so we figured it would be wise to do a check against how long it took to fill out the form. To do this, we put in a hidden input field and set the value to populate upon page load with the time the page was loaded. When the form is submitted, we perform a server-side check if the time between loading the page and submitting the page is larger than the minimum time it takes to fill out the form. We set this minimum time to 10 seconds to be sure we weren’t going to prevent any real users from sending our form. If the form is submitted in under 10 seconds, it will trigger and error and not send.

It’s been just over a week since we’ve implemented these spam prevention techniques and we haven’t seen a single spam email come through since. As spam bots continue to evolve, however, we may have to revisit this solution down the line. But that’s part of the spam arms race that’s not going away any time soon.