Marketing Learnings


I’m getting started handling the Google AdWord Campaigns over at ClearGraph. Here’s some of the more interesting tid-bits I wouldn’t have found without talking to the Google consultants.

Ad Extensions are awesome

The content under the ad description are ad extensions. You can place as many as you want without costing you any extra per click. It’s an interesting way to incentivize people to provide structured content compared to the rather tiny description character limit.

Retargeting search ads

You can increase your search ad bid for Google cookied people who previously visited your site. This helps you appear on top more often in normal keyword searches. As a by-product, it also improve ad quality score since they’re more likely to click your ad. Suggested increase was +40%.

Better conversion tracking using position based attribution

Sometimes people will click on more than 1 ad before signing up. By default, only the final ad gets a conversion point. Like a sport’s assists, the “position based” model splits the conversion point between all ads that contribute to the conversion.

Tools > conversion actions > attribution model, pick “position based”.

Track Cross-device conversions

For some reason, it defaults to false.

Tools > settings, check “Include cross-device conversions”.

Quick tip: Use Markdown with Drupal


To use markdown on Drupal, you apply it as a text filter. Your content stays as-is then gets processed (through a filter) using Markdown before being displayed on your site as html.

Install a markdown filter module

  • Find a filter module like Markdown Filter
  • Copy link to download tar.gz link
  • In the modules area, Install a new module, Paste in the url
    install paste-url

Enable the markdown module (in module section)


Apply markdown filter (in configuration section)

  • In the configuration section, go to the Content Authoring, Text format section
  • Add a new text format
  • Make sure you check markdown

Select markdown as a text format in your content type


Download json button

Create a link that downloads a .json file

Create a link that downloads a .json file

On several of my personal projects I work with javascript objects so it makes sense to use json as a backup/output format. However, I found that I couldn’t easily figure out a way to actually download a file containing said data. I’ve seen it done, but didn’t know the right google query and was sifting through lots of stack exchange posts. I figure it’d be nice to post some easy code here and their references.

JSFiddle code

In Html:

In JS:

The download= attribute in the link sets the file name of the .json file.

On click,

  • I turn jsContent into Json using the stringify command
  • I create a blob of the json object (which makes it a file)
  • I generate a url for that file blob
  • Finally, I navigate the document to the download url which initiates the download.


Save json string to client pc (using HTML5 API)

The Basics of Web Workers

CSS tutorial: Create text bubbles that resize & truncate text


Dealing with dynamic text can be particularly troublesome for designers especially when there is no min/max length. Truncation is nice for large amounts of text but doesn’t apply to inline elements that scale nicely for small amounts. Well, proof of concept time.

Play with the sample code


So, as a web developer, have you ever been asked to add a text bubble to your page?

No problem. Super lazy way would be to cut a background image. A better, less lazy way would be to add a little border-radius here, and and some padding and you’re done.

Did your designer ask for the width of the bubble to be dependent on the dynamic text?

Sure, put the background color on a span so that width is based on the text.

Oh, did she mention that the text needs to also truncate nicely when it becomes longer than the content area?

… shit.

The trick here is the have two nested elements. One inline, and one block.

  • inline elements (like spans) get their width based on the content. Thus add the background color to the inline element.
  • block elements (like divs) have a fixed width and thus can also have overflow properties.

A few things to note

  • Need to hide the overflow and set the ellipsis for the text. (Line 6)
    overflow: hidden;
    text-overflow: ellipsis;
  • Need to prevent line wrapping. (line 17)
    white-space: nowrap;
  • Need to add the same border radius on both containers. This way the border is applied when both short and when cropped long.
  • The pointy is a css pointy as shown here.

Play with the sample code

Sifteo Cubes: Notes on Developing


Warning Sifteo cube development is still very ALPHA. And as usual, Documention is sparse/erratic. Here’s my personal notes trying to “get started”.

  • Need to download Sifteo’s developer’s kit, SiftDev SDK. It includes:
    • 6 Demo projects, with some brief documentation on features used
    • SiftDev, a developer’s version of Siftrunner
    • Siftulator (A cube simulator – kinda broken!)
  • Download & install the MonoDevelop (the IDE that your use to compiles/runs the apps)

Running the demos:

  1. Open up the MonoDevelop app.
  2. Open up the .sln project.  File > Open Project > … navigate to the demo folder and find the demo you want to run
  3. Fix the broken project references.
    • Project > Edit references
    • Delete the reference to Sifteo
    • Find the Sifteo.dll file by navigating to the Sifteo_SDK/
    • Click Add, and it will appear in the right pane.
    • Hit OK to apply changes
  4. Run the code. Menu Run > Run
  5. Open up the SiftDev app.
  6. Connect/pair your cubes
  7. Load the app by going to the Developer menu > load apps… > Select the folder of the demo
  8. Click on the app and hit Play!,

PS: I’m running Mac 10.6.8, SiftDev 1.1.2, MonoDevelop, Siftulator 00_05_09

Chinese language tips for web design


Update 2010, Oct 26 – New discoveries, much better font reference confidence

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. The process was PAINFUL…

After several months, this is coming up again as we define our style guide. I found a new article which describes and provides screen-shots for 5 common mandarin fonts. He lists in order,

  1. 宋体, Song Ti, a serif font very common in site font declaration
  2. 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
  3. 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
  4. 隶书, Li Ti, a brush script.
  5. 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy

Some [updated] Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “微软雅黑”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
  3. The standard chinese serifs is: 宋体 (Song ti)
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html” charset=”utf-8″>
  5. My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;