Latest Intelligence From the Field

The API is Coming

If you’ve never heard of an Application Programming Interface, you’re missing out. It powers many of your favorite apps and services that you use every single day. From posting to Facebook, to calling customer service, to seeing who’s talking about what on Twitter, there’s an API for practically everything nowadays.

Put simply, an API is a way to interact with another product or service. Many people might equate it to knocking on your neighbor’s door to ask for information. Here’s what it might look like to ask your neighbor for a cup of sugar, if you were an API:

*Knock Knock*
“Hey! How much sugar do you have?”
“I have 2 cups of sugar.”
“Can I have 1 cup?”
“Sure, here it is.”

Now, imagine all the data you interact with on a daily basis and the number of ways to record and utilize those interactions. Here’s a couple ways you can do it:

  • Pull every Facebook post that involves your girlfriend, find all the pictures that you’re both tagged in, and put them in a slideshow to music; that’s one simple way to make use of an API.
  • Pull every library of congress article.
  • Vuurr recently combined APIs from various startups at Hollywood Hackday where we built TuneClash, the world’s music trivia game with integrated video chat.

That’s just a couple examples. The power of the API will really be unleashed as more and more data becomes available.

In 2012, Barack Obama announced that he’s signing an executive directive to ensure that every government agency has a public facing API, thus making the information available in an effort to increase transparency. The power of this information floating around is sure to change the way we look at government and information in the future.

Here’s a situation you might experience a couple of years from now:

You’re driving down the street and your phone gives directions to the car stereo via its API. While driving, your phone also talks to the “traffic lights’” API and calculates your car’s average speed and its distance to the next light. The API discovers you will reach a red light at the next intersection. So, in order to increase efficiency, the API tells you over the stereo, “You’ll be hitting a red light in 2.1 miles, if you slow down by 3 mph, you can time the next light to be green.”

The limits to what you can do for your business with APIs are only confined by what data is available and by your imagination. The programmers at Vuurr are API specialists and can help your company develop, document, and deploy your API.

Whether you’re turning traffic lights green, or just asking your neighbor how much sugar he has, we’ll help to make sure you’re passing the competition.

How To Create & Apply Retina Graphics To WordPress

Whether you’re a fan of it or not, Apple’s new retina devices have created a new set of opportunities for web-developers to make the internet an even more beautiful place. After spending a few months with an iPad with a retina display (3rd generation) and recently acquiring a MacBook Pro with a retina display, I decided to see how long it would take and how difficult it would be to prepare this site, built on WordPress, to display retina graphics. Turns out, it’s surprisingly easy.

Before diving in to actual tips, tricks, and code, it’s important to understand what the difference is between a standard display and a retina display.

Right now, I’m typing this on a MacBook Pro, 15″ retina display that is 2,880 pixels wide and 1,800 pixels tall, or a total of 5,184,000 pixels. Compare this to a standard 15″ MacBook Pro with 1,296,000 pixels, and you’ve got a retina display that has four pixels to every one single pixel on the standard display, providing the ability to display much crisper text, graphics, video, and animation. Because of this new ratio, we want all retina images on a web page to have four times the number of pixels as the standard image. Long story short, we’re going to take all images in our WordPress theme, posts, and pages, and make them twice as wide and twice as tall (or four times the original size).

To make life a little easier, I used a javascript library called retina.js, which you can find here. The library looks at all the images in their HTML format, generated by your WordPress, and tries to find the same image in the same location on your web server (or CDN, or whatever), but with the string “@2x” added just before the file extension.

For example, if your site’s logo was found at, the retina.js library would automatically try and find[email protected], replace the standard image with that one, and set the size to the pixel height and width of the original image. However, this is only part of the equation – you need to provide the retina.js library with images that are four times the size of the standard. To do this, all images on the site need to have these high resolution duplicates created.

Creating Double Resolution Images
If your site assets are available as vector files (Adobe Illustrator, EPS files, etc.) you can simply scale them to twice the height and width, and then re-save for the web. Bitmaps are trickier. If you have Photoshop files that aren’t smart objects, you’ll need to recreate them at double resolution or they’ll look pixelated. That said, if you have smart objects and lines/vectors in your Photoshop layout, you can go into your Image Size settings and set Pixel Dimensions: Width and Height to 200 percent. (Check out bjango’s excellent article if you’d like to read more about Photoshop workflows when designing for retina displays.)

Most WordPress themes have post and page images along with some background images defined in CSS. We’ll treat these as three separate areas to update our images for retina compatibility in WordPress.

Theme Images in HTML
After creating all of your assets at double resolution, simply upload them to your theme’s images folder. That’s it. Your markup should stay exactly the same, so you’ll still have tags like

<img src="" />

and the retina.js library will attempt to load images from your WordPress theme with the additional @2x string for retina displays.

Uploaded Images in Pages & Posts
Post and page images, whether inserted directly into the body or as a featured image, behave exactly the same way as theme images. The key difference is where you put them. Since post and page images are added to the wp-content/uploads/{year}/{month} folder pertaining to the date uploaded, you need to make sure that all retina images for WordPress posts and pages are put into the exact same folder as the original image otherwise the JavaScript library won’t find the image.

Theme Images in CSS
Properly loading retina images in WordPress via CSS is just slightly more complicated. For now, we’re essentially going to tell the CSS document to look for a cue that says “hey, I’m a retina display!”

Let’s just jump right into the code example – below you’ll find some of the CSS used for the logo on this site. The standard #logo rule simply outlines how to apply our background image. The media query below that translates to “If the pixel ratio is equal to or greater than 2, load this other background image instead, but display it in the same amount of relative pixels as the standard logo (thus providing the 4x retina quality).

#logo a {
	background: url(images/vuurr-logo.png) no-repeat center;
	width: 82px;
	height: 41px;

@media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1) {
  #logo a {
    background-size: 82px 22px;
    background: url(images/[email protected]) no-repeat center;
    width: 82px;
    height: 41px;

The CSS above should take into account most modern browsers. However, since only Safari supports (and displays) the retina assets at the moment, we’re unable to verify 100% that the Mozilla, Opera, and standard extension will function properly, so your mileage may vary.

A note on the JavaScript
If you analyze the retina.js library, you’ll see that it’s relying on the window.devicePixelRatio JavaScript function. This is just fine, but unfortunately it seems that at the moment Firefox on the desktop fails to recognize it (though, interestingly, Firefox on Android seems to work just fine). The latest Chrome beta supports window.devicePixelRatio as well, but since at the moment the release versions of Chrome and Firefox do not support retina displays, we’re going to leave the retina.js library alone and wait for wider browser support of devicePixelRatio.

Wrapping it up
There isn’t a single formula that will always just work when prepping your WordPress site to support retina displays and images. Following some of the strategies in this guide should get you very close, though. When you have questions or are ready with comments and observations, please feel free to sound off our the comments section.

Political SEO: A Vote For Good Rankings

Photo By Tom Arthur from Orange, CA, United States

The last presidential election had its fair share of scandalous accusations, drama, and “dog and pony” tricks surrounding one of democracy’s cornerstones. However, the election was drastically different from any of the elections that preceded it. Just as the telegraph allowed people to get information faster than ever before, the advent of cable news helped keep people more informed about “headline news.” Now, Google now holds more political clout than ever.

Instead of waiting for updates about the biggest “headlines” to roll across their screens, people today have the ability to find and choose news detailing information about their favorite candidates, and they can find it whenever and wherever they want it. Presidential candidate Barack Obama was both the beneficiary and the victim of this new and exciting power. In 2008, the authenticity of his citizenship came into question. The internet fueled rumors that Obama was born in Kenya. Google maintains it constantly updates its algorithm to always show the most relevant result. And yet, as everyone in politics knows, “relevant” is a moving target in the midst of election season.

How does a candidate implement a solid digital strategy to help their campaign?

“Share The Good News.”

Many would agree the best defense is a good offense. In terms of burying bad press, it’s harder to rank less than flattering results on the first page of Google if it’s already jam packed with good news. This means implementing an extremely comprehensive web strategy including everything from popular social media profiles like Twitter and Facebook, to having a website fully optimized for SEO.

Just like any brand, controlling your image is paramount to success. The front page of Google should include results to the candidate’s political website, personal website, Twitter, Facebook Page, major news articles, press releases and/or a Wikipedia entry. These strong websites can all align with the web strategy, and are fairly easy to rank.

Mitigating Detractors

A politician’s profession is much like that of a judge, it encompasses a lifestyle where it’s hard to please everybody. Any serious political candidate has detractors, and any viable political candidate has vocal detractors. Unfortunately, it’s easier than ever for these detractors to find an internet soapbox where they reach the eyes and ears of millions of potential voters. Sometimes these detractors tell flat out lies, other times they skew the truth to serve their own agenda; but regardless of their methods, mitigating these people is key to a positive online strategy:

  • Press Releases – Make sure that every event is followed by a press release. These are syndicated by major news sources. If you cite relevant news articles in each release, the citations will also help move those articles up in the rankings. Press releases are a great way to alert the press about accomplishments. If done right, they can yield positive press coverage you can leverage personally.
  • Blog Posts – Right alongside press releases, you should have an ongoing schedule of content posting to your website. This helps keep your content fresh and relevant in the eyes of Google. As controversy arises, write blog posts that firmly state your position and link to your other sources, like Tweets and Facebook pages, where you’ve upheld this view in the past. By tying your properties together in this fashion, you help grow the authority of all your social pages and websites.
  • Interviews – Interviews are the bread and butter of any serious political campaign, but encouraging reporters to push readers to your website for increased educational value is sometimes challenging. Make sure your press packet is exceedingly clear about what website to link to and has explicit instructions about how to do so. Also, include boiler plate text they can include at the bottom of their articles. For example, “To learn more about Ralph Nader’s views, visit his website at”
  • Meet The Press – Cultivate connections with well connected bloggers and reporters. Finding reporters on Twitter is one great way to make media connections. While you can certainly connect with people who list their social media profiles at the bottom of their articles, you can also take a more aggressive approach. Tweepz is an example of a service that aggregates Twitter profile information. You can search Tweepz using the “exact match quotes” feature. Here’s an example that Vuurr would use to find potentially sympathetic reporters:
  • For lesser known reporters, offer your interview opportunities contingent upon getting a link to one or all of your web properties in return. This will give less experienced reporters a chance to interview someone of import, all the while helping you control your web strategy.


    Political SEO is not like public relations. You need to have a strategy to convince not only the people whose vote you’re soliciting, but also the robots that index and rank your websites. Knowing how to work the algorithm is a diverse set of skills that takes years to develop. If you’re running for office and want to make sure that your online identity compliments your real life, Vuurr is the only company that deserves your vote.

Creating a Marketing Plan So You Don’t Miss The Big Win

At Vuurr, we work really hard. And when we’re done working really hard, we play really hard. So, it should come as no surprise that some of us follow a few high end alcohols on Facebook.

While jamming around, I came across a status update by our favorite French vodka promoting a new cherry variety. The status included a picture of two perfect drinks sitting on top of a post-modern table (See below), garnished with fruit so fresh they likely took the picture at the farm itself.

The caption read, “Try the Cherry Moon — a Shirley Temple, all grown up.”

Up until this point, I considered this vodka’s status to be a prime example of flawless marketing: appealing pictures, specifically targetted to dedicated fans, and highlighting a product the brand already knows these fans enjoy. Unfortunately, even after all the time spent dedicated to product promotion, the vodka completely ignored the equity they could have built into the ad, missing a chance to “nail it.”

Here’s a look at what they could have improved:

  • Although the picture was wildly popular amongst their fans (they received over 5,000 “Likes” in a short period of time), the status didn’t include any logo branding within the picture itself, hurting its effectiveness to those not yet in their fan base. In the new Facebook feed, the product picture is prominently displayed on the side of every user’s profile, taking focus off the product’s owner or brand name. Even with a very discreet brand logo on the picture, users’ awareness as to who posted the picture would have greatly increased. In addition, the brand likely would have received new fans to its page.
  • When posting pictures of things like food or drinks, most people are curious as to how these items are produced. In this instance, the first people on the page asked how the drink in the picture was made. Besides the fact that the lack of response by the vodka disappointed its loyal fans, the missed opportunity to provide information regarding the vodka’s origination inevitably hurt their online presence. In the food and beverage industry, fresh content is often difficult to create. For example, restaurants don’t often revamp their menus, nor do beverage conglomerates frequently release new drink recipes. Since Google gives precedence to sites with fresh content, writing and publishing new, on-topic content for Google to find is always a huge plus to a brand’s marketing scope.Cherry Moon Drinks On Facebook
  • This picture received over 800 shares. That means, even if only 20 people saw each share, that’s well over 16,000 opportunities to reach new consumers; thus, harnessing customers’ attention to the website, providing them information about the highlighted product, and creating an opportunity to introduce them to other products and recipes (that, of course, note the searched vodka as a needed ingredient – which brings me to point four…).
  • There are entire websites dedicated to the art of “mixology.” Creating new signature drinks with your product gives you the credibility and authority to garner links from them- one of the most important ranking factors in Google. The links to the recipe, for example, would have been a great way to increase the vodka’s site relevance because other sites providing information about mixed drinks could have linked to it.

The moral of this story is simple: you can move the ball all the way down the field, but if you don’t make it inside the endzone, you don’t get any points added to the board and you can’t win the game.

It’s important that every piece of a digital marketing plan is integrated with the other components. As companies get bigger, coordinating these parts to effectively work together becomes increasingly difficult.

That’s where ubiquitous digital strategy comes in. When you’re ready to tune your marketing machine, give Vuurr a call.

Introducing “Where I Rank” – Free Objective Rank Tracking

Without data, any online marketing effort is doomed to fail. As marketers, we don’t have the luxury of betting on feelings to perform for us, we need data. Now, you’ll be able to check your rankings objectively, in near real time. Introducing “Where I Rank”. (This software is now deprecated and no longer available. We leave this here for all the memories. Read to bottom of post for replacement).

Rank Tracking Tool

What is it?

Where I Rank is a simple web app that takes a keyword, your domain or internal page link, and then emails you minutes later with a simple ranking report telling you what position that keyword ranks in Google and Bing. There are many different ways you can use this:

  • Performance Bonuses – When you rank a clients site to a certain position, you get a bonus. However, you’ll need a trusted and objective third party like Where I Rank.
  • Personalized Results – Sometimes, it’s difficult for people to believe they actually rank in a certain spot when Google’s “Personalized Results” shows them on the first page and they actually rank page 5.
  • Verify your existing rank tracking system’s ranking results – is it accurate?

What Makes it Different from Others?

  • More Accurate Results – Because of our affiliation with industry leading partners Authority Labs we’re able to provide more accurate results by collecting the individual pages of search results in sets of 10 instead of one block of 100. This allows you to see more accurate rankings for your keywords.
  • Full URLs not just Domain – Most tools only allow you to check the domain itself and not subdomains or full links to a blog post or internal page. That’s useful to determine where individual pages and posts rank for your keywords.
  • Fast Results – Accuracy and speed is the name of the game. If a keyword you’re looking for isn’t immediately available, of which tens of thousands are, you can put in your email and get the result sent within a few minutes. You can also keep your browser window open and we’ll refresh the page when your results are ready!
  • Google AND Bing Results – We have the ability to give you the results for Google and Bing with the same speed and accuracy so why wouldn’t we?

WhereIrank has been phased out and is no longer available. For Keyword Rank Tracking look to AuthorityLabs (who provided whereirank data previously).

Impact of Google Adwords Quality Score on Cost-Per-Click

Before Google implemented quality scores for search advertising, Google searches were overrun with irrelevant ads that linked to sites with little content.  Any marketer could bid on nearly any term and show in the paid results and placement was simple: higher CPC bids equalled higher ad rank.  This created an overall poor search experience for the user.  Google eventually improved ad quality by being the first search engine to assign quality scores, which attempt to measure ad relevance.

Instead of the highest paid search position being awarded to the highest CPC bidder, Google’s new Ad Rank (AR) is based on both CPC bid and quality score (QS):

AR = Bid x QS

The bid is set by the advertiser, however the quality score is assigned by Google. Although there are a myriad of factors that impact quality score, the four that advertisers can easily control are:

  • Relevance of the keyword to the ad copy
  • Relevance of the the keyword to the landing page copy
  • Relevance of the ad copy to the landing page copy
  • Historical click-through rate (Google assumes that if your ad is clicked frequently for a particular search query, the user sees it as relevant)

Although this means significantly more work for the online marketer, it results in a major advantage for the marketer that is willing to do the work.  Here is an example of three different advertisers bidding on the same search term:

Google Adwords Ad Rank Algorithm

As you can see, the highest bidder (Advertiser C) is going to end up in the first paid search position.  Advertiser A’s ad will show first and with a bid that is 25% lower than Advertiser C’s bid.

How much will each advertiser actually pay?  The actual cost of each click is determined by the following formula:

Actual Cost = ( Ad Rank of the Position Below / Quality Score of Your Ad ) + $0.01

Here is what each of the advertisers above will actually pay per click:

Google Adwords Ad Cost Algorithm

Although Advertiser A has the highest Cost-Per-Click to be in position #1 in this case, the really interesting observation is the relationship between Advertisers B and C.  Advertiser B shows higher in the search results that Advertiser C, yet Advertiser B will pay less than half of what Advertiser C will par per click.  This is all due to the fact that Advertiser B has a significantly higher quality score.

Let’s see what would happen if Advertiser A raised his quality score to 10:

Google Adwords - Ad Quality Score Affects Cost

If Advertiser A raised his Google Adwords quality score to 10, he would realize a reduction in cost per click of nearly 30%.  When you are dealing with budgets in the millions of dollars annually, that could make an enormous impact on the bottom line.

So now you know that higher quality scores lead to better rankings and lower advertising costs.  Here are the simple things you can do right now to improve your Google Adwords quality scores:

  • Reorganize your campaigns into small, tightly targeted ad groups for improved relevance
  • Write targeted ads that include your target keyword in the title, body, and URL (if possible)
  • Utilize multiple landing pages.  The landing page should have a significant density of your target keywords for a particular ad group.  If all of your ads point to your home page, you are probably doing it wrong.
  • Include a clear call to action in your ad copy.  This improves Click-Thru-Rate which improves quality scores over time.

Improved Relevance

= More Clicks at Lower CPC

= More Conversions at Lower CPA

= Higher ROI on Your Ad Budget.

Now get to work…

UPDATE: Thanks to Tom for pointing out a typo in the diagram; last column QS and AR should have been 4.0, not 3.0

Why You Can’t Do Adwords Like Us

The world is full of light sources, and plenty of good uses for various types. You need to search for a wanted person from the helicopter? Spotlight will work just fine. You want to illuminate a room, 100 Watts of incandescence will do you just fine. You want to find your way through the woods, use a flashlight. You want to cut steel? Get your ass a laser.

The difference between a laser and any of the other sources is focus. You get those photons into an aligned focused state and powerful things can happen. You can cut things, read data off a disc, annoy the hell out of everyone in a movie theater, you name it.

Real change, real success, only comes as a product of extreme focused attention. If you are trying to succeed at 7 or 8 different things at once, odds are you’re going to get a handful of flashlights – illuminating some of the things going on, but not really doing anything powerful. Focus everything on one project, give it your entire attention, every waking moment you can sustain. It’s not a 100% guarantee to succeed, but odds are that you’ll get a laser every once in a while that changes your world.

Do one thing, and do it 100%. If it isn’t worth everything you have, then is it worth doing?

Vuurr brings a laser like focus to the way we manage our clients’ accounts to grow their business. It’s what we do, it’s what we breathe. It’s why we say “no” to more clients than we say “yes” to, so that we can keep that focus and make sure that we are able to be focused on the right things.

Learning HTML & CSS with Twitter’s Bootstrap CSS Framework

Twitter Bootstrap CSS Framework

We recently brought on a new employee who expressed interest in beginning front-end development, but only had minimal knowledge of HTML and CSS. They’d been frustrated with the standard tutorials that attempted to explain each single tag, and weren’t interested in continuing. On a whim (but apparently good guess) I suggested they continue working with HTML but immediately include Twitter’s Bootstrap CSS Framework while learning and developing.

The result was astounding. In three weeks we turned a college student into a junior front-end developer.

We found that by simply having something look nice and working from an incredible example page with great documentation, the learning process went much smoother, faster, and resulted in higher-quality work. Now after just three weeks we have a new junior front-end developer who now does all of our prototyping and initial front-end builds with the expected level of incredible Vuurr quality.

Where to Start Learning

To get started with Bootstrap, use their guide here:

Sitepoint has a pretty good walkthrough of Bootstrap 3 as well:

Call Tracking with Twilio & Google Analytics using Twimlbin

Nearly a year ago, I was working on a new feature for an app powered by Twilio when I realized that it would be significantly easier to get started with Twilio’s TwiML if hosting an XML file could be removed from the equation. Several weeks ago, Twimlbin was born. One of the features we needed to implement quickly was the ability to track calls both as a pageview and an event in Google Analytics. After building this feature, we found it more and more useful for many other call tracking instances. With this feature and the TwiML <Redirect> secondary verb, it’s possible to use Twimlbin as a basic analytics proxy – something we find incredibly useful.

How to setup Call Tracking

Simply create a new Twimlbin and set it to redirect to either a number directly or your script or you can clone one of the example bins we’ve provided.

For a Number: Clone this bin and replace the number with your own.


For a Script: Clone this bin and replace the URL with your app’s location.


Once you’ve setup the Twimlbin, simply put in your Google Analytics ID (near the bottom of the page) and you’re ready to go. You can even watch calls in real-time with the new Google Realtime Analytics feature.

twimlbin analytics calltracking

We hope you enjoy Twimlbin as much as we do. Tweet @TwimlBin if you have questions!