Vblogging Tips: Easy Video Blogging Done Right

Comments Off on Vblogging Tips: Easy Video Blogging Done Right

I just wanted to point a link to Tom and Kerrie Everett in Vancouver, Canada.  They’re real estate agents in the Vancouver market and started doing short, simple and fun videos on their real estate website.  Over the course of less than 6 months, they’ve grown their business and audience by setting themselves apart from their competition with these short videos.

What is so great is that you’ll notice they’ve been featured by two television stations – one national (CTV) and one local (City TV) and have only done 11 episodes!  Also note that, while not really professionally produced, the videos are fun and informative.

Here is the takeaway:

  1. you can do videos easily with a digital camera
  2. you don’t need to make them fancy
  3. you do have to post regularly
  4. make them fun and short and you will probably be surprised at the results!
  5. OH, Kendra Todd (of Apprentice fame) is in one!!

More videos over at ThinkTom.com.  By the way, I went to grad school with Kerrie.

February 27th 2009 Uncategorized

Fake Twitter Profiles A Serious Problem

Comments Off on Fake Twitter Profiles A Serious Problem

I’ve found that, on Twitter, I’ve been befriended by people who claim to be either well-known (like Barack Obama) or people I know.  Problem is, they are fake profiles.  Even the Dalai Lama had his profile faked.  Often, the only thing that’s changed is the addition of an underscore or a middle initial.

Two reasons why this is a problem:

1) They may phish me at some point by responding to my Tweets, for example, and then asking for info I would only provide to people I trust.

2) They may be legitimized by being followers or being followed by others not wise to their scheming.  So, when someone else sees that these scammers are friends with someone they know, that third person may be fooled into befriending the scammer.

This whole development reminds me of the AOL chatrooms and instant message clients from the last century where random scammers would overrun the services and try to defraud you.  It drove me, and perhaps others, into services that were more secure.

Twitter needs to nip this in the bud before it gets out of control.

February 25th 2009 Uncategorized

Contest Epidemiology

Comments Off on Contest Epidemiology

In a competitive market, in a stalled economy, it’s all about getting noticed, and keeping people engaged. Getting noticed by the press is a good start, but to convert eyeballs to dollars, you need it to catch on. You need to achieve a critical mass of good reviews and word of mouth to achieve virality.

Virality is the engine that drives your personal economy, but getting there isn’t easy. It’s not just a matter of living long enough to succeed. You have to live long enough to not succeed. There’s a very good chance you’re going to fail. The number of people trying keeps going up, but the number of people in the top ten stays the same.

If you want to go viral, you need a hook. It’s the iSight barcode scanning in Delicious Library, the address book sorted by battleground states in Obama ‘08, the handshaking feature in Friend Book. It’s the story you tell the media, and the story your users tell their friends.

If your hook-fu is weak, you’ll have to step up your marketing. One external hook I’ve tried is holding a contest. It’s a good way to create a splash, but like getting press coverage, it’s not the size of the splash, but the quality of the ripples. The contest itself has to be viral, because the smart money is on slow money.

When it comes to contests, go small or go home. Don’t try to win on the size of your package. You can’t compete with the big boys who have people jaded to prize amounts. It’s like the insane take in heist movies. When the movie “Jackie Brown” went down over a couple of hundred thousand dollars. I remember thinking, “Jeez, not even a million. So-o not worth it.”

Yet, I watched that movie a dozen times, because the more I thought about it, the more I could relate to it. Two hundred thousand dollars is a hell of a lot of money in real life. Ask anyone who’s ever needed that much dough.

In the fantasy world of contests, however, that’s not a lot of money. Even a poor lottery take is way more money than you can afford. Why would anyone pay attention to your contest when the lottery has just as poor odds? People are jaded, because there’s only one winner, and it isn’t me.

Instead of playing to people’s jaded fantasies, play to that desire to feel like a winner. Vegas has this down cold — lots of little victories are what keeps people gaming, even though it’s costing them in the long run. Oh sure, there are the hardcore gamblers who think in jackpots, but I bet they started just like me — a guy willing to drop a twenty into the nickel slots just for that tiny thrill of winning back a decreasing percentage of my own money.

It follows that if you want a lot of people to be enticed by your contest, it behooves you to have a lot of winners. If I told you I was going to give one of my Twitter followers a thousand dollars, would that entice you to follow me? And if you did, what are the chances you’d be following me when the contest was over?

On the other hand, what if I just started giving one of my followers a dollar, and kept doing it, every day? By the end of a thousand days, so many people would have tweeted about getting a dollar from me, I’d have a bunch of new followers — many of whom would have stuck around long enough to decide they like following me anyway.

If you want your product to have a storybook success, you need to have a good story. The story of your product should compel you to action. If you find yourself wondering what your next move is, it’s finding that story.

Luscious Qwynn
“Free” is a powerful psychological tool. So are all the other psychological tricks that “gaming” (a.k.a. casinos and the gambling industry) and contests use. Is it fun? Yes, and I don’t want to take anyone’s fun away. But it doesn’t really feel right.

Being able to tell a story is a rather different thing (that somehow brackets the part about contests, and I’m not sure about the connection). A good story gets retold to friends. A good story makes people feel good about your product. A good story doesn’t let the truth get in the way. =)
J. T. Glover
The business of being an author is getting to be increasingly fraught. Trying to get people to buy is always hard, but with fewer publishers, fewer people with money to spend, etc., new authors are always being advised to find clever marketing gimmicks. No authors give out money, that I know of, but many run contests for Advance Reading Copies of the books, or signed paperbacks, etc. These contests can be anything from making a LOLcaption on the cover of their book to the most creative picture of a person with the book in hand. Book trailers are another idea that have had mixed results thus far, but it is interesting to see where authors are willing to go, and at what price, to sell their books. Catherynne M. Valente, an author I read, had a book released yesterday. It got good advanced press, but there was also a HELL of a lot of clever marketing she put into it. See, for instance, the (NSFW) trailer at the bottom of her page for the novel: http://www.catherynnemvalente.com/novels/palimpsest/. Also more related stuff on her home page itself. These are things that publishers and writers weren’t doing twenty years ago, let alone fifty. As with so many things, the Web made it possible. And this morning Palimpsest is up to Amazon Rank 214 or so. Due in large part to good writing and good blurbs, but also, I think, to her PR.
Mike Lee
I should point out a better strategy than giving someone a dollar is spending that dollar on some personalized merch. I’ll never think an evil thought about Rogue Amoeba with my plush Ammo looking at me.
Ambiguously Disgruntled
We lose a piece of our souls when Marketing and P.R. become more important than content.
Mike Lee
We lose the ability to walk when we let pie become more important than real food, but that doesn’t mean we can’t share our favorite recipes.

February 25th 2009 News

The Biggest Mac OS X Screen – 98,304,000 pixels

Comments Off on The Biggest Mac OS X Screen – 98,304,000 pixels
98,304,000 pixels of resolution

98,304,000 pixels of resolution

At the University of Utah, Prof. Juliana Freire is working on DeepPeep, an ambitious effort to index every public database. Now, check out the screen–Mac OS X 30 inches * 6 across * 4 down = 720 square inches and 98,304,000 pixels of resolution.

Link to article.

February 24th 2009 Uncategorized

WordPress plugins in use

Comments Off on WordPress plugins in use

There are a few WordPress plugins that help me publish this site as I want it. Here are a few of the key plugins I currently use on Stopdesign.

  • Amazon Showcase by Aaron Forgue
    Drop in any ISBN and this plugin takes care of the rest for Amazon reading and recommendation lists.
  • Live Comment Preview by Brad Touesnard
    Lots of plugins generate a real-time comment preview. This one seemed to be easy to configure and get working right away.
  • Postalicious by Pablo Gomez
    This plugin automagically pulls in my Delicious links on an hourly basis, publishing an entry for each link I create. (It can also be configured to publish sets of links in a single entry too.) It’s a useful plugin for automating posting of links created elsewhere — it can also handle ma.gnolia, Google Reader, Reddit, or Yahoo Pipes. Pablo, the author, is incredibly responsive. After I emailed him a casual suggestion on a Saturday afternoon, he had a new version of the plugin (with my suggestion incorporated) in my Inbox later that same evening.
  • Twitter for WordPress by Ricardo González
    Set it, and forget it.™ Once installed and configured the way I wanted it, I’ve never had to think about my tweets showing up on the site again.
  • WP Super Cache by Donncha O Caoimh
    A must for speedy page-load times and to keep the server humming along, especially on high-traffic days.
  • Search Unleashed by John Godley
    Does several cool tricks with search for a WordPress site, including query term highlighting and searching across every post and comment field. I’m using the plugin for the results page, itself. But I wasn’t able to use the query term highlighting on entry pages because that conflicted with pages cached with WP Super Cache, and I wasn’t able to figure out how to prevent caching of entry pages referred by a search.

A friendly reminder: some authors put in lots of time and effort into plugins that are free for us to use at will. If you can afford to, send a donation their way, especially for plugins that do any heavy lifting for your site.

February 17th 2009 wordpress

We Added A New Java Chat

Comments Off on We Added A New Java Chat

Facts be faced I haven’t been posting lately. So if you want to chat it up and get some solid advice feel free to join us in the chatroom.


February 13th 2009 News

Keith W. Bell

Comments Off on Keith W. Bell

Keith W. Bell site The Keith W. Bell site, at first glance, appeared clean and professional, albeit perhaps fittingly plain. Once we started exploring more deeply, kicking the site’s tires and looking under the hood, so to speak, we quickly came to the conclusion that this is one top-notch piece of work. If you derive pleasure from looking at well-structured code and thoughtful features not overdone, you’re going to love it. And if you need the Keith W. Bell site to be accessible: it’s access granted.

February 11th 2009 Uncategorized

Trading places

Comments Off on Trading places

I know traffic here is far from representative of the rest of the web. Regardless, I see an interesting trend developing. The numbers are drastic enough, I wonder if they prove the trend extends beyond the focus of Stopdesign and the type of people attracted to the content I post.

I’ve been following user agent stats for the past few years. It was only three years ago (January 2006) that Internet Explorer held the dominant percentage of aggregate traffic (70%+) on Stopdesign. Back then, Firefox was just over a year old. 1 I remember being impressed that Firefox had already gained 10–12% of traffic at that time. Apple’s Safari was just 2 ½ years old 2 and was hovering around 3–4% of Stopdesign’s traffic.

So that’s where we were then. IE dominated. Firefox trailed far behind in second position. This is where Stopdesign’s traffic is now:

Screenshot of a stats table for Stopdesign.com traffic shows Firefox at 66%, Safari at 11%, Chrome at 9%, Internet Explorer at 8%, and other browsers at 2% or lower.

* Stats represent the last 5 weeks or so of traffic for Stopdesign.com. Captured with Shaun Inman’s excellent website analytics package, Mint, via his User Agent 007 Pepper.

Chrome traffic is higher than normal because of the Recreating the button entry posted two days ago. My theory: Chrome users tend to be more heavily invested in Google products, so they’re attracted to content about Google. (Note: I don’t have access to data that backs this up, nor am I speaking on behalf of Google. But it’s a logical conclusion for anyone to make.) Thus the spike in Chrome’s percentage, which had been hovering around 2% prior to posting the button entry.

For those who care to see the IE breakdown, here are those numbers:

Screenshot of the expanded stats table for Stopdesign.com traffic shows IE7.0 at 6%, IE6.0 at 2%, and IE8.0 and other versions at less than 1%.


  1. Mozilla.org: Mozilla Timeline
  2. Wikipedia: Safari (web browser): History and development

February 7th 2009 browsers

Recreating the button

Comments Off on Recreating the button

Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “custom buttons” in our apps (among other custom controls). These buttons just launched in Gmail yesterday, and they’ve been in Google Reader for two months now. The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.

Gmail buttons

I thought it would be interesting to provide a portion of the background on our buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.


Today’s web apps allow increasingly complex interactions. Users can view, create, manage, and manipulate all kinds of data, from email messages to feeds to photos to blog posts, or even choosing what their DVR records on any given night. We’re at the point where these apps need something beyond standard HTML form controls and basic hypertext links to represent the actions a user can take.

A basic <input type="submit"> could be used for single actions, a <select> element could be used for a compact menu of actions, and <input type="radio"> could be used for selecting mutually exclusive options. But we’re left with no way to represent other interactions common in desktop apps. Such as a checkbox that represents more than just on or off. Or the use of auto-complete to refine or narrow the options in a drop-down menu. On top of this, the controls we can render have significantly different appearances across browsers and platforms. Even within a single browser, buttons and select menus have quite different designs.

Enter: the concept of custom buttons.

The first iteration

Not long after I started at Google, I remember seeing mockups for a new product that eventually become Google Spreadsheets. The mockups I saw used simple buttons that looked similar to default HTML buttons in certain browsers. But they were subtly different than any default buttons I had ever seen before. The giveaway was seeing three buttons sandwiched together to make a pill button:

Spreadsheet buttons

At first, I thought they were just generic browser-agnostic representations — and wishful thinking for the appearance — of actual HTML buttons. But once we started using an internal-only version of the product, I realized this button design actually got built into the product. That was fine. But I cringed when I realized how the buttons had been implemented. Each button was set up with a nine-cell table so they could place each corner image, and still allow the button to expand in all four directions according to the width and height of the text inside:

nine-cell table

Eliminating the table and corner images

button 2.0 I knew there had to be a better way to render these buttons than using tables, and especially nine-cell tables just for the tiny little corners. So I tried creating a few prototypes to improve our button code. My first button attempt, which I named Custom Buttons 2.0, (version 1.0 would be the nine-cell tabled version done by one of our engineers) used a similar trick that I used for event chips in Google Calendar: the top border was one element with 1px left and right margins, the middle of the button was another element with left and right borders, and the bottom border recycled the styles of the top border with 1px left and right margins. This created a one-pixel notch in each of the four corners, giving the subtle illusion of a small rounded corner.

That 2.0 attempt was fine, and worked pretty well (as I expected) in almost all browsers. But it required that each button as a whole either be floated or positioned absolutely with a width. I wanted a set of buttons that could be treated as inline elements, and that would take up as much horizontal space as the text inside each button needed.

Going inline

My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.

Demo page for Custom Buttons 3.0 A demo page for Custom Buttons 3.0 shows my progress to this point. As you can see there, I built in affordances for changing the border color on hover, and for reversing the gradient direction for the active/click state to make it feel like the button is actually pressable. I also attempted to show how we could sandwich multiple buttons together to form a pill button. The pill button wasn’t perfect — I didn’t want gaps in the top/bottom borders between each button. But it was a start.

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

So 3.0 buttons were fine. After some modifications by our engineers, they made it into live production code. I believe 3.0 buttons are currently still in use for edit buttons in Google Sites, and in editor modes for Google Docs. (As of this writing. Expect those to change in the near future to buttons described below.) But I was still bothered by the requirement of a background gradient image. Not only was this an extra request to the server, but if anyone wanted to change the colors of a button, they’d be required to create a new gradient image. This wasn’t flexible enough, in my opinion, and I thought we could push further.

Eliminating the gradient image

Instead of rendering the gradient with an image, I thought we might be able to simulate a gradient with a few bands of color. With a few light grays laid beside each other that were close enough in value, we’d get something that looked like a gradient. With only two bands of color, I got a glossy-looking button with a sharp division between the two bands of color. Not what I wanted. Adding a third band of color between the first two colors blended each color together better. So three color bands it had to be.

To get that band of color and fake the gradient, I had to insert one more element in the button code. I chose <b> because it was short, and semantically, it didn’t mean anything. That element was absolutely positioned, so it could live inside the button and behind the text without affecting anything else. For the button itself, I used the almost-white #f9f9f9. For the <b> element I used #e3e3e3. The <b> element was absolutely positioned to the bottom of the button, and given a height of 40%. To get the middle band of color, I added a top border of #eee to the <b> element.

Another demo page for Custom Buttons 3.1 shows my attempt at getting this pseudo-gradient to work. It works in Firefox and Safari, and probably a few other modern browsers. But not everywhere. It was never perfect, and I don’t recommend using it in production code. Again, I couldn’t get this working right in IE. Google eng to the rescue again. To see the final code we ended up using in Gmail and Reader, you’ll have to reverse engineer the button code in one of those products.

Sweating the details

If we were going to undertake the task of recreating basic HTML form controls, we knew there were a lot of details that need to be accounted for and thought through. Like all the possible states of a button: resting, hover, focus, active, toggled-on, and disabled. There are also the accessibility ramifications of creating non-standard controls. I’m sure we haven’t factored in or solved every access issue yet. But engineers are working on that. Here’s a glimpse of the many states and types of buttons, along with the visual specs we had to think about and create if we were really going to replace default buttons and menus:

Visual spec for Custom Buttons 3.1

Major credit

I certainly didn’t create the concept of custom buttons at Google. Nor did I write the final code that made it into production. I merely initiated a couple steps to improve the methods we use to render custom buttons. My portion of the iteration is what’s documented here. There were many other steps in making these buttons a reality.

These buttons never would have made it into production code without the help of several Google engineers. One of the primary aids, Emil Eklund, helped fix a lot of my code for these custom buttons, and got it working in the browsers Gmail supports. He just posted an entry on the Official Gmail Blog yesterday about the label and folder-like functionality behind the new buttons in Gmail. Two developers (no longer at Google) also contributed heavily to the original button code: Ryan Carver and Greg Veen. They deserve huge props too.

Even more credit for the launch of these buttons in Gmail goes to one of the Gmail designers, Michael Leggett, who dreamed up all the fancy new functionality and interactions behind applying labels. Michael gave me lots of feedback and suggestions as we were building the original specs for 3.0 and 3.1 buttons. He also created countless iterations of the button interactions for Gmail, and endured numerous reviews and feedback cycles to finally get them launched in the product. If you like the new labeling menus in Gmail, Michael is the one to thank. The menus are especially slick if you use the new v and l keyboard shortcuts, along with auto-complete to apply labels (and even archive at the same time) without ever touching your mouse.

There are numerous other designers, developers, and engineers at Google who touched these buttons at one point or another. They all deserve credit too. I’ve only given props to four of the most prolific people who made these buttons a reality.

These buttons don’t permeate the entire Gmail or Reader interfaces yet for all browsers. (e.g. Compose view is still using default buttons for older WebKit browsers.) But now that these buttons are reusable components, expect to see us using them in more places throughout Google as we find good uses for them.

February 5th 2009 browsers, CSS, Design, Google

The State of the Web – Winter 2009

Comments Off on The State of the Web – Winter 2009

Winter would be a terrible thing if it weren’t for snowboarding and coffee. The snow in the pacific northwest hasn’t been particularly great this year, so I’ve opted to drink more coffee. More coffee means more frantic mouse clicking, which in turn means more motivation to work on side projects. After one snowy, two sunny, and five rainy afternoons, I finished the winter version of the State of the Web:

The State of the Web - Winter 2009

This one took a lot longer than the summer version, mostly because I’m slow at Adobe Illustrator and there doesn’t seem to be as much interesting stuff happening on the web right now as there was in June.

If you haven’t seen it already, check out the Summer 2008 version of this:

The State of the Web - Summer 2008

Lastly, I finally took some time and created a page that has everything I’ve created on it. Most of my comics and microsites have been spread out across various domains, so I got them all together in one central location. You can view it here: Everything.

February 3rd 2009 Uncategorized