I've moved my blog to a new domain. Visit jeffwongdesign.com

Merchant's Tire Sucks

The Background Story
I went in to get my oil changed yesterday... When my car was returned, I was missing about $1.50 from my change box. While this is a trivial amount, I needed it for tolls that evening—the toll vendor wasn't there to give me change, so I had to wait for strangers on the highway to exchange dollars for coins. If I had ran the toll, I'd pay $40 in fines per toll (x2). This was extremely unnerving and frustrating.

$10 a Day = $2400 a Year
If 1 employee steals $10 worth of change from customers every day, they'd make $2400 a year. Within 15 miles, there are 15 Merchant's Tire. I'm sure there are plenty of Merchant's Tires that don't steal, but I'm not going back.

"Your Trusted Source for Tires, Wheels and Service"
This is their address:
2055 CHAIN BRIDGE ROAD
VIENNA, VA 22182

The Follow Up
So I got a twitter reply from Merchant's Tire to fill out this form. We'll see what happens next. Everyone knows pennies add up.

Photos from Thanksgiving





Perfect Typography

Tim Brown - More Perfect Typography from Build on Vimeo.


Tim Brown is Type Manager for Typekit. He studies, promotes, and advances the craft of web typography on a daily basis, and shares what he knows at Nice Web Type. Tim has written for A List Apart, and he helps web designers with tools like Web Font Specimen.

Rockmelt vs Rubiks

I love start up cultures... especially the super nerdy ones. This video of RockMelt brought a huge smile to my face. Maybe it's time to dust off my rubiks cube and practice again. Thumbs up for keeping it nerdy.

Chronic UV Exposure

That is exposure to the sun without using sun protection. Learn more about skin cancer. Hat tip: Annie

Happy Bday Carrie

I hung out with Annie's sisters/friends this weekend to celebrate Carrie's birthday. In her honor, I created her an "isms" page that features some of the PHP/Javascript and CSS I hacked together this past week. Check it out.

(In order from left to right: Julia, Valina, Carrie, Annie)

iPhone HDR + Ferrari

A was driving home and a guy in a Ferrari pulled up beside me. You can compare the quality of HDR vs non-HDR. I think I'll be shooting with this new feature on all the time now. What do you think?

Without HDR


With HDR

Ugliest Font Car Decal

This is the ugliest font ever... and the worst thing, it was in GLITTER text.

CSS Penguin


As an attempt to learn more about CSS and web development, I've mocked up a penguin based on one of my friend's illustrations (Emily Wilson). The image above is just a bitmap, so check out the CSS version. Also check out Emily's write up about it too.

Friday Face

Wow, what a week. I got to see Jim speak as well as Steve Case. We're working on some exciting stuff over here. It's looking really exciting, and I'm ready to crush our favorite competitors. If only I had a dribbble account to "accidentally" leak some of my work... heh.

CSS iPhone Icons

You can only view these incredible icons (built entirely with CSS) in Chrome or Safari. Check it out here. Try to make the text bigger (by hitting command +). ;)

Too Bright

I'm usually a fan of brighter colors, but wow is this too bright. It just hurts to look.

State of Cloud Computing

Looks like the guys at Jess3 made another video, but this time about the State of Cloud Computing. I love the animation and style they used to tell the story. For those of you who don't know what cloud computing is, this is a great intro. For those of you who do, just sit back and enjoy the eye candy (since you probably already know this, and more). Here's an older post about another Jess3 video about the State of the Internet. Hat tip: Simon Owens



Watch the video here.

Danny MacAskill Skills

Way Back Home is the incredible new riding clip from Danny MacAskill, it follows him on a journey from Edinburgh back to his hometown Dunvegan, in the Isle of Skye. You can read about it and watch the interviews with Danny here. Watch the video here. Hat tip: Priidu Zilmer

Condo Porn

It's been a while since I've posted some condo porn. Here's some cool stuff I've seen recently. It really makes me want to decorate my corner of the office.



Google User Experience

It's nice to see some other perspective at Google other than Marissa Mayer. John is a UX designer at Google. Matt was a co-founder of Feedburner. This is a talk about user experience, not design. There are so many things that affect UX that do not fall in the category of design. These are tips that anyone can use.

Watch the video.


The video's a little long, so here are the notes:

Make your app Fast
Focus on latency. Users should get immediate feedback if they do something. Mozilla optimized their download page by 2.2 seconds and saw their download conversions improved by 15.4%. Speed is important to Google. It takes 470 ms to download the Google search page in Firebug. Firebug lets you see how fast everything downloads, which is useful to analyze your web app.
Other tools are pagetest, page speed and yahoo yslow. Page speed and page test are add-ons to firebug. They will give you advice on how to improve.
Its OK that part of the aesthetic does not load quickly, as long as the content loads quickly.
Fred Wilson, an investor also says that the speed is the most important feature. Users dont care about how hard it is for your app to work, they just care that it works fast.

Make your users fast too
Provide shortcuts - small things add up over time and make the experience frustrating for your users.
Focus on the first field in the form. Saves 1/2 a second, saves a click.
Example: an airline site remembers the last inputs entered by a user.
Big targets are better than small targets when it comes to mouse clicks or mobile devices.
Tab order: users think a certain way when they use your app. Twitter devs made it so that the users go to "remember me" before going to the "sign in" button, even though the sign in button comes first.
Make sure users can submit a form by hitting enter.

Be Yourself
Make sure using the app is fun for the users. Don't have to be all corporate about it.
Don't over explain errors, messages, etc. It only needs to show what the user needs to know.

Engage in conversations with your users
The see you as being on their side and are more likely to forgive you if something goes wrong.
Listen to what people are saying about your product. Monitor blogs, facebook, twitter, etc. to see what people are saying about you. Blog search, technorati, etc. help you do that.
Twitter lets you see stuff that is too new for people to have written a blog post about it, or too small to write an email or a blog post.
When you respond, do it with honesty and humility. Matt has an anecdote here.

Surprise your users
Anecdote: The publisher at Google team decided to build a mobile version of the app. They designed and built it within a week. Someone tweeted about the feature before it was announced, so they called him into the office and showed him the app, which completely surprised him.
Use schwag wisely. It's a great way to build your brand.
Provide your own support: It's a good way to see what's going wrong and to fix it immediately.
Easter eggs that happen when the right things happen is a good way to surprise users.

Be willing to give up control
All of us use 3rd party libraries, use shared code, etc. The same applies to accounting, financing, etc.
For example, whenever feedburner needed anything more than simple graphics, they used istockphoto.com. What if someone else uses the same graphic? That's pretty low risk, and you'll find yourself working with the same artists over time to build your brand.

Be polite
Shoutout to Erica Hall - she gives a great presentation on how to be polite to users.
Be friendly to users, try to understand how your app might annoy users.
There are many error messages that tell you what is wrong (maybe) but no way to fix it or change it.
Make it easy to get started with your app.
Tripit lets you save your travel info. You forward your itinerary to them at an email and they create a shell account that you can sign up with if you want to.
Use Open ID, so people dont have to create a new account unless they have to.
Offer a way out.
Make it easy for your users to leave. No one likes to feel trapped, so don't build dead ends or dark alleys in your app.
Eg. Save changes OR Cancel and Don't save.
E.g. Netflix lets you put your membership on hold and explains what happens if you do.

Prepare for failure
Fast failure makes a lot of sense, but this is not about that.
This is about dead ends and blind alleys. Things that you did not prepare for.
Don't ask people to format phone numbers, enter http:// or ask which kind of card it is. Make messy data entry as easy as possible for the users.
E.g. BBC always has a high and low graphics version of all their content. If you expect a lot of traffic, make sure you have a low-res version of your app that still works, even if the high-res version goes down.
E.g. the "fail whale" at Twitter.

Be reliable
This brings the talk full circle. Speed and reliability are both critical. Stakes are higher for certain apps (banking) and an unreliable site can affect your brand.
Commit as a team to making your service as reliable as possible.

See all the notes here.

Centerville vs. Stonebridge

I went to another highschool volleyball game this weekend. This was the regional finals between Centerville and Stonebridge. Here are some videos:

Video 1


Video 2


Video 3


Video 4

Paradise in Vietnam

I was watching some top gear, and one of the shows was featured in Vietnam. One of the most amazing sceneries was filmed in Ha Long Bay. It's one of the places I'd like to visit sometime, and interestingly enough, it's very close to where Annie's mom grew up. Here are some more stunning photos of the landscape.



Ha Long Bay has an area of around 1,553 km2, including 1,960 islets, most of which are limestone. The core of the bay has an area of 334 km2 with a high density of 775 islets.[1] The limestone in this bay has gone through 500 million years of formation in different conditions and environments. The evolution of the karst in this bay has taken 20 million years under the impact of the tropical wet climate.[2] The geo-diversity of the environment in the area has created biodiversity, including a tropical evergreen biosystem, oceanic and sea shore biosystem.[3] Ha Long Bay is home to 14 endemic floral species[4] and 60 endemic faunal species.[5] - wikipedia



Some of the islands support floating villages of fishermen, who ply the shallow waters for 200 species of fish and 450 different kinds of mollusks. Many of the islands have acquired their names as a result of interpretation of their unusual shapes. Such names include Voi Islet (elephant), Ga Choi Islet (fighting cock), and Mai Nha Islet (roof). 989 of the islands have been given names. Birds and animals including bantams, antelopes, monkeys, and lizards also live on some of the islands. - wikipedia



The end of the Vietnam war, and the advent of "Doi moi", Vietnam's policy of opening its economy to foreign trade, means that Westerners and South Vietnamese now have a chance to visit Ha long. Vinh Ha Long or Bay of the Descending Dragon is often touted by proud Vietnamese as the world's Eighth wonder. One of the main attractions of Ha long is the bay's calm water and the thousands of limestone mountains dotting the seascape. The Bay's water is clear during the spring and early summer. Some of the islands are quite large and there are small alcoves with sandy beaches where swimming is possible. Ha Long bay lies in the northeastern part of Vietnam and is 165 Km from Hanoi. -vietscape.com



Who else wants to go?

Designer Slash Hacker

I spent last night hacking away at my parked page at jeffwongdesign.com. I added a bunch of stuff to make it a little more interesting. FYI, I'm not a developer, so this was a total hack based on a bunch of stuff I found on the web. Check out some of the sources below...



Random background image with PHP (Get Code).
In order to randomize the background, I used a PHP script. Then I changed the CSS to call the .PHP file. Then I set up an image folder, and point the PHP to it. I dropped about 15 optimized images, and viola! Randomized background images.

Full screen background image with CSS (Get Code).
In order to make the screen scale perfectly to the browser size, I used some CSS that updates the background on the fly. As a bonus, the site always shows a full image for any screen (even iPhone/iPad).

Custom AddThis button (Get Code)
I used AddThis for sharing/bookmarking, and simply transformed some text into a custom button. To make the menu appear beneath the text perfectly, I added a custom offset. The best part about AddThis is that it has a special custom interface for iPad and iPhone... so my site looks great on mobile devices.

Custom Twitter feed (Get Code)
I added a custom Twitter feed that pulls in my last tweet with a json call. I was surprised how simple it was to do—it's pretty much plug and play.

IE browser tested
Foo checked out my site this morning and noticed that it didn't work in IE. My CSS3 alpha background was gone... So instead, I stretched a transparent png as the background, so that it works in IE.

Centered DIV (Get Code)
In order to center the DIV (the black box), I borrowed a little javascript. Now the DIV is centered horizontally and vertically.

Custom Font-Face (Get Code)
I wanted to try loading in a custom font, "Museo". You basically need to gave the TTF, EOT and SVG and link to them with CSS.

Birth Control for Geeks

Laptop On Laps & Sperm Quality Linked – According to a new study, using a laptop on the lap may be potentially damaging to sperm cells. Of course, there is not actually a lot that can be done about this, as the whole point of the laptop is so that it can be used on the lap. However, there is always the option to use it on a desk, or on top of something which can be used on the lap. -healthrelatedinfos.com

As I was typing on my laptop during a meeting, one of my coworkers asked me if I had seen the recent article about using laptops on your lap. So if you want to reduce the chances of having kids, be a geek. There are other ways to reduce the chances like smoking, eating mcdonalds, becoming obese, cycling, doing drugs, and being exposed to radiation (according to this article).

Hat tip: Gar

Dog Icons

I love these icons, and the fact that they're dogs makes them even better. The icon of the corgi is absolutely adorable. The flat geometric style is delicious. Check out more icons from alwayswithhonor.com

Quotes in Carter Sans

These quotes were used as a part of a promotional piece for the Art Directors Club Hall of Fame, and originated from some of the most innovative creative thinkers (ranging from photographers, artists, graphic designers, architects, and copywriters). My only criticism is that this design would have looked better flush left. The longer quotes are harder to read, and break funny.





The Carter Sans family is based on epigraphic letters used in inscription, and the gala graphics are suitably elegant and ceremonial. In the campaign materials, the letters A, D and C in all laureates’ names appear in three metallic colors to shimmering, subtle effect. The invitation and other gala materials are wrapped in a paper band that lists the 154 prior Hall of Fame inductees—a piece that pushed the typographic limits by registering four spot colors in 7-point type.
Ps. I love this font—I might have to get my hands on it when it comes out. I get turned on by metallic PMSs... it's been so long since I've done print work. I sure miss designing with PMS-877 (silver) on a nice juicy 120lbs cover stock of Cougar Ultra White. Ohhh la la.

Steven Seagal vs Balls

Steven Seagal has a tendency of attacking people below the belt. In this video, he tags the speed bag 74 times. I wonder how many times Chuck Norris has tagged the speed bag.



And a little bonus: Here's a video of Seagal running like a....



I just got a link from Wings with a spoof movie trailer, "Cock Puncher". Check it out.

Bevel and Glow Porn

I'm saving all these wonderful screenshots from dribbble.com. While I prefer more minimalist graphics, there's something absolutely beautiful about interfaces that render controls with total realism. The thing that makes all of these graphics realistic are the bevels--they create tight parting lines between the controls, which gives the interface such a nice tactile fit and finish. It makes me want to design an iPhone or iPad app when I see this sexy stuff. I'm also really digging the glow effect too. Check out my old blog post about textures.




Ultimate Peeping Tom



Parrot AR.Drone consists of a central cockpit surrounded by four propellers, each driven by an engine. It offers amazing possibilities for piloting, excellent maneuverability and extraordinary stability.The heart of AR.Drone contains all electronic components and two cameras: The first camera, located underneath, connects to an Inertial Measurement Unit, which allows the AR.Drone to measure its speed and perform flawless stationary flight. Parrot Smart Piloting (PSP) technology compensates for wind and other environmental conditions during outside flights. For the first time, these technologies, used primarily for professional and military applications, have been adapted to the gaming universe. The second camera, at the front, broadcasts and streams to the iPhone(TM) or iPod touch(R) screen, what the AR.Drone sees, as if you were sitting in the cockpit. This allows for the augmented reality gaming experience.The Parrot AR.Drone generates its own Wi-Fi network that simply connects to an iPhone(TM) or iPod touch(R) and turns it into a true piloting station. -stepup21.com

Our office has been acquiring several RC helicopters, but the ultimate RC flying device is the Parrot AR Drone with Live Camera, controlled by an iPad. While this is an awesome RC device, I can't help but to wonder if it's the ultimate peeping tom tool. And you want to buy it, it runs for $299.99m.


Watch the video here. To see how it works, and watch even more videos, click here.