February 7th, 2010
The Superbowl meets social science
When biology and statistics cross paths, wonderful things transpire. Add in hard-hitting NFL action, San Francisco pizza, and a robot that serves beer, and you have the nerdiest Super Bowl party this side of the Mississippi.
Wired Magazine was kind enough to host such a party at their SOMA office, along with Boston-based Innerscope Research, who provided the gadgetry and science. This piece of technology was used on the International Space Station:
About 30 people participated in the study, which attempted to measure human vitals like skin temperature, breathing, and heart rate. The device also captured any movements during the game.
Before the game started, we were asked to fill out a few surveys about the advertising spots in this year’s Superbowl. Mainly questions about if we had seen certain company’s ads already, or if we had plans to purchase their products. Then, after each half, we answered how much we liked or hated each commercial.
The results of the survey will be compared with our real-time health stats from each event during the game. They tracked each commercial, as well as turning points in the game. For instance, when the Saints missed on 4th and goal, everyone’s heartbeats jumped:
The guys from Innerscope Research were also watching our vitals in real time on their iPhones:
At halftime, I had the chance to ask the engineers to single out my stats. They told me talk about something that was important to me, maybe a lady friend or something. My vitals jumped:
They also kept a tally of how many beers each participant downed. You were only allowed one beer per quarter, as well as one pre-game beer. The Wired Beer Robot was doing the pouring.
After the game, I asked to see more data. They found one interesting case where the US government’s 2010 census advertisement had low effect on the viewers and the Google commercial that followed it sparked the audience’s interest.
Another interesting datapoint was when CBS went to a commercial right as the referees were reviewing a call. The audience’s interest was so into the game, they didn’t even pay attention to the advertisements.
I am sure there will be a lot more interesting data that comes out of this experiment, so keep your eyes on Wired, and this site. I will try to do a follow up if I find more details.
February 3rd, 2010
Facebook's Lite isn't just faster; it's the new Facebook design
Or at least it should be.
Facebook Lite claims to be horsepowers faster than the regular site. But regardless of the hundreds of kilobytes saved when browsing FB Lite, the design keeps changing; and getting better than “regular Facebook”.
First off, everything important to you is at the top, like a section with upcoming events you’re attending:

Event names are also SEO-friendly now, so you can find them in Google. Event pages themselves have been simplified quite a bit too:


While some parts of the Facebook Lite design are simpler, others are more complex, but not in a bad way. A normal comment like this on regular Facebook:

… now has much more detail on FB Lite:

They are finding ways to show more content with less code. And giving your social graph a chance to comment on it, right inline.
I started thinking to myself that FB Lite was a sandbox for Facebook designers to test the new layout once I saw this thick red border on the home page:

This is a technique front end web developers use called diagnostic styling.
Their auto-complete search box works 10x faster, and only shows the names:

They removed the Home tab all together. Now you click the Facebook logo to see your home feed:

The home page shows more detailed versions of the comments that people post on your content. Links, photos, all of it. Anything you “post”, that gets commented on, you’ll see it in your home feed.

Even something as simple as someone “liking” a note you wrote. FB Lite tries to give you a full preview:

The region on the page that usually houses advertisements is replaced by little quips and tips:

Chat has it’s own popup application now. I wonder if Friendfeed is developing it because it’s fast.

I think if Facebook converted their regular site to this design, no users would complain. What do you think?
If you want to make Facebook Lite your default experience, check out this article.
January 27th, 2010
Apple tablet: thoughts, and leaks, from around the web
Apple’s new tablet drops in about an hour, and people are talking. Be honest, how well did you sleep last night?

“What Apple has done in the last few years, with products like the iPod and iPhone, is not invent new markets, but make them dramatically improved through quality integration of software and hardware. You can’t win on specs any more. You win with a full user experience. -Louis Gray
Leaked photos from Engadget:
Jason Calacanis says it’s the best device ever:
TechCrunch CEO Mike Arrington:
“10-inch Apple” is trending right now on Twitter
Scobleizer is glued to Twitter, marking his favorite buzz about the upcoming announcement:
Steve Jobs will not just change the e-book market, but I think he will redefine rich mobile experiences, just like he has in the past with iPod and iPhone.
Are you excited about the new device? What is the highest price you would pay, now that you know most of the features? I would throw down $599 or $699 depending on how awesome it was. The price would come down in a year, and then everyone could afford one.
Enjoy the announcement, and follow Sam Diaz’s live-blog coverage
January 21st, 2010
Suggestion engines: the web directory is back
Ever since the information superhighway has existed, web developers have tried to build the perfect roadmaps for people to find compelling content. Yahoo started it, Google copied them, but there hasn’t been any true visions of a web directory in a long time.
Today, Twitter and Tumblr launched “suggestion engines”.
Tumblr is the best place for “meme blogs“, but it also has very interesting content. Their first attempt at a directory categorizes their sites pretty well. I was able to find a few really interesting websites.
Twitter uses various algorithms to showcase featured users. They also solved, or patched, the ever loathed suggested users list.
The social web needs these discovery engines for people to find new stuff, simply said. I would like to see some competition from Delicious, Foursquare, Digg, Stumbleupon, Wordpress, Facebook and Google. And it should be visually pleasing to interact with.
Startups like Gravity have an interesting take on how conversations should be aggregated and displayed.
Have you seen cool visual interfaces for finding interesting web content?
January 19th, 2010
Forget Fox, Conan should move his show to the web
The web is catching up to mainstream media every day, but it needs a boost from some big names and audiences before the capacity for streaming video is truly tested.
Web-based television network Revision3 has written an open letter to Conan O’Brien, luring him into the free vortex of the interwebs.
I think Conan has a lot of choices in front of him right now, but he should definitely consider moving to the web. If he thinks that he won’t reach as many people as he did with his weekly 12:30 AM broadcast, he’s wrong. The web is on all the time, and its content is interactive. And it’s accessible everywhere.
Conan moving to an all-internet broadcast can fully take advantage of user-engagement advertising, and possibly redefine the industry.
What do you think of this? If you’re a fan of Conan, do you object to him only streaming on the web?
And let’s be honest. It’s not long before all of your households stream web content over the big screen.
January 19th, 2010
Chirp: The Twitter Developer Conference
Twitter has evolved past the label of “social network” to “communication platform”. It’s not about what your page looks like, or how many followers you have; it’s about the message, and the ability to spread it across the world in milliseconds.
The Twitter API is one of the easiest to get started programming with if you are a beginner, so it’s only fitting that Twitter would throw a developer hoedown to get people building things. Chirp, the Twitter Developer Conference, is scheduled for April 14th.
I will try to get some more details from my friends at Twitter, but this should be a great event.
I think some of the ideas to come out of this event will be beneficial to the Twitter userbase; there hasn’t been a true Twitter developer garage yet, but dozens of companies have been started to build products for Twitter. Now, great minds can gather and collaborate on new ideas.
Will you attend the event? With Twitter’s worldwide reach, I bet there will be satellite events in sync with the live event.
Check back with The Web Life for more details as they come in.
January 6th, 2010
Interview with Blippy co-founder Philip Kaplan (invites)
Blippy.com takes sharing to a whole new level. When you sign up, you add accounts like iTunes, Amazon, or Netflix, and Blippy aggregates all of your purchases for your friends to see.

It’s fun to see which apps people are buying for their iPhones, or which TV shows people are watching on Netflix, but then I discovered the “add debit/credit card” link. Even though I was nervous that I was giving up a bit of my privacy, I still thought it was interesting that anyone could comment, like, or even learn from my purchases. (I spend too much on cameras).

I wanted to find out more about Blippy, so I got some feedback from co-founder Philip Kaplan. Here’s our dialog:
How would I explain Blippy to my 55-year-old Mom?
Kaplan, aka pud: Blippy makes it easy and fun to automatically tell people about the things you’re buying.
You “connect” Blippy to one of your credit cards, and every time you use that card to buy something, your friends get to see where you were and what you bought. You can also use Blippy to automatically tell people about specific products you bought from online stores like Amazon and iTunes. (my mom just got an iphone & thus itunes, so i think this is a mom-worthy explanation!:)
Where did you get an idea to start a service like Blippy?
pud: Every time you use your credit card to buy something, there’s potential for a really interesting social interaction.

You might be trying a new restaurant, buying a new gadget, or downloading new music from iTunes. Blippy makes it easy to share & discuss your favorite purchases with friends. Your private purchases stay private, but your other purchases become potentially much more interesting.
When I started adding services, I got a feeling deep inside that I was giving up a good portion of my privacy, but I didn’t mind. I bet other users hear about your product and that is their wall to entry. How do you plan to nurture users into the site and make them feel comfortable sharing very personal information?
pud: Blippy makes it easy to only share the things you want to share. Many Blippy users connect only one credit card to Blippy, and use a different credit card for private purchases. Blippy also makes it easy to delete or edit your purchases, and control who gets to see them.

Most Blippy users are sharing. Some start out not sharing anything — but once they see how much fun everyone else is having, they come around..!
What other services are you planning to add in the future?
pud: We’re focused on making Blippy super fun and interesting for people. Discover interesting things other people are buying, learn more about your friends, see shopping trends, discover new music and movies, compare prices… we hope to make it fun and easy to do all of these things and more.
I like that each business or venue has their own page (http://blippy.com/business/name). Do you have plans to integrate Blippy into these core services like iTunes, Amazon, and Netflix to let customers earn coupons or rewards?
pud: That’s something we’ve thought about. We might do something like that if our community wants it.
When will Britney Spears start sharing her updates on Blippy?
pud: If you ever run into her, please ask her for us!! :)

Update: Use the code ZDNET to get an invite to Blippy. It’s good for 50 invites.
December 24th, 2009
My top 10 Crunchies 2010 picks
TechCrunch hosts the “web Grammys” every January, and I think I know who will win this year.
I like this award show because it highlights new and emerging startups that people need to learn about.
It’s exciting to see the movers and shakers get up on stage and accept their awards.
Here are my picks, but you should evaluate each site and vote for yourself:
Best Internet Application: Yelp
Among the nominees are Groupon, Dropbox and Posterous.
Groupon is a “group coupon” website that allows you and your friends to sign up for coupon deals. Dropbox is a file-storage site, and Posterous is a simple blogging platform. All of these sites are cool, but Yelp is hands-down more useful. I find myself using it every single day and explaining it to more and more people (especially visiting family at home for Christmas). Yelp wins.
Best Social App: Aardvark
The word “social” is becoming taboo online. But Aardvark jumps out at me in this category. It’s more fun and interactive than others in this category. And it’s very useful.

Brizzly is in the list, but I’m still unsure they know what they are. DailyBooth was a one-hit wonder and Farmville is more like a drug than a social web app.
Best Mobile App: Google Voice
It was hard to pick Google Voice over Foursquare, but it’s a more mature mobile app. I hope that Foursquare qualifies for this category in 2011 because they have a lot of work to do. Gowalla is also in this category, but they have even more work to do to top Foursquare, like build another way to use their product beside iPhone.

Best feature is the ability to have your voicemails transcribed and emailed to you.
Best Technology Achievement: Google Wave
I actually hate to say it, because there are no real good use cases for Google Wave in 2009, but I do think it’s the best technology achievement.
It’s more impressive to me than Bing, Chrome OS, and Silverlight (haha). The runner up in this category would be PubHubSubBub, which has the ability to change how publishers exchange data with subscribers.
Best Bootstrapped StartUp: atebits (Tweetie)
Tweetie is the most useful Twitter app, both for desktop and iPhone, and atebits constantly improves upon it. They charge $2.99 for the iPhone app and it’s worth it. I was actually surprised to hear that they are working with less than $150,000. Tinychat and Wufoo deserve a mention, but they haven’t had as big of an impact as atebits.
Best New Gadget: Motorola Droid
I’m not saying the Droid is cooler than the Apple Magic Mouse, Zune HD or Sonos S5. But it is more marketable. Finally, a phone on a solid network (Verizon), with a really open operating system (Android), on a trusted handset provider (Motorola), is easily accessible for anyone. And I cannot believe the Nook is in this category, what a joke.
Best Angel: Chris Sacca
I am not very hip when it comes to investors, but I really like @sacca’s Twitter account.

I have a ton of respect for the other angels in this category, namely Ron Conway, Betaworks, and Y-Combinator, but Sacca is hands-down the one I trust most.
Founder Of The Year: Jack Dorsey
It takes a lot of courage to leave a company like Twitter and start something fresh. Even something as fresh and risky as Square, a personal payment system that you attach to your mobile phone. Jack deserves this award for redefining the market in a tough economy.
Other nominees that deserve mention are Aaron Patzer from Mint, Jeremy Stoppelman from Yelp, and John Borthwick from Betaworks.
Best New Startup Or Product Of 2009: Spotify

I’m addicted to Spotify, I can’t stop using it. Even though it’s not ready in the United States yet, the idea of it being a premium service here is very exciting. It’s better than Foursquare, Hunch, Bing, and Milo because it takes the streaming music problem and just solves. it.
If you want to try something similar, give Grooveshark a go.
And finally…
Best Overall Startup Or Product Of 2009: Android
When I walked into the Sprint store today to get my Palm Pre looked at, I got really excited when I saw the HTC Hero with the Android logo on it. I’ve used Android before and it’s the best mobile platform out there. It’s better than iPhone because it’s on more than one phone, and it’s tied to Google services, which are becoming a staple for everyone.
Android has unlimited possibilities too. It’s really easy to use, you can run multiple processes, and it’s just clean. Downloading something is a piece of cake.
Android deserves to win because its reach is greater than all of the services mentioned in this category (except maybe Facebook, who has probably won this award before).
What do you think of these picks?
Tell me if I’m way off-base.
If you are going to be in the bay area in January, get your tickets quick! I will do a recap of the event in January if you can’t make it.
December 8th, 2009
Web Form Design Best Practices, 2010
The most common element you see on any web page is a form. Some place to enter in some data; whether it be your username and password, or a wall post on your mom’s Facebook wall.
Luke Wroblewski is a pro at web form design. He was an afternoon speaker at An Event Apart in San Francisco today.
In general, forms suck.
YouTube has updated their upload form a lot over the years. The numbers don’t lie either, the design of the form matter. They went from 65k in July of 2006 to 234k in November of 2008.
Let’s start from the beginning. The primary goal of every form is completion. How can you make the user experience as painless as possible and still get their information correct?
Most people’s visual attention is focused on a vertical line at the beginning of each form element. They want to know what’s needed to complete the job.
You should have everything line up nicely, even the submit button. Give people an indication on all of the steps that are involved. Use progress indicators to communicate the scope, status, and position.
People see input fields and jump right in. Put the label of the form field above or before the actual input field. If you are asking people questions about stuff they already know, they don’t need to spend time looking for the label.
When you put labels inside of the form element, make sure there is a way for you to keep the label active when the user is typing.
Automatic inline help text exposure is good. That means give the user a small notice when the complete a form field successfully. The most important thing is consistency. Twitter and Gowalla do this really well.
You know those password indicators that let you know how strong your password is? Sometimes they are not a good idea because the user can never make their password too secure. They will always try to type the most hard-to-remember, cryptic password, and then they will forget it.
Not a bad idea to add some humor to the mix. Yahoo’s form validation is really smart:
Don’t fire off error messages too fast. And make sure the errors are actually errors:

Don’t start validating the form until the user unfocuses their cursor from the form field.
Give people an opportunity to auto-complete a form. Think Google Suggest or Kayak:
Simple thing: make the submit button look different than the cancel button. No one clicks cancel or reset anyway. Avoid secondary actions all together if you can.
Use conversational dialog, but not too much help text. Forms are everywhere, we see enough help text.
More from Event Apart 2009:
December 8th, 2009
Instantiate the cascade: Object-oriented CSS in action
In web production, there is always a conflict between design and engineering. But the one thing they have in common is the user’s happiness.
Code is fragile. Even the cleanest code gets ruined the first time a noob touches it. The learning curve for CSS is actually pretty steep. You should know all the rules before you get started.
In many projects, re-using code is not a common practice. Style guides are non-existant and people don’t trust other people’s code. This makes filesizes grow enormously. Having a 1 MB stylesheet is a common occurrence.
So can object-oriented CSS work? Nicole Sullivan, a consultant for companies like Facebook, says that it’s an evolution of the language.
The architecture is about how we define the selectors.
Let’s start with a simple example: headings. When a designer hands off a mockup to a client-side engineer for slicing, they usually don’t get a style guide with heading sizes clearly defined. Think of your components as LEGOs.
What are the building blocks you need to make the page work? It’s okay to ping the designer back and say that a certain heading size won’t work.
Avoid location-dependent styles, aka Modular CSS, is not good. Instead of just sticking a heading anywhere, use them as headings.
Define classes along with headers instead so you can give elements within the page that are not headers, the styles of a header. Like this:
h1, .h1 {…}
h2, .h2 {…}
…
Use hacks sparingly. If you are hacking something other than IE, then your markup is bad. Make sure a hack doesn’t mess with your specificity.
Abstract structure into a separate class. Structure is not “look and feel”. It’s more about the overall layout of the page. This is where you write a lot of rules that will be reused. Give all the rules the same strength: use cascade order to overwrite previous rules.
CSS needs encapsulation. Don’t access sub-nodes of an object directly. Don’t just reference .inner, make sure you are as specific as possible.
Avoid singletons. Don’t style IDs ever! #myUniqueIdentifier is a no-no. You will always have more than one of something, especially if you have more than one web page on your site.
All of this is confusing, but it’s possible to work today. Check out Sullivan’s OOCSS code at GitHub and tell me if it worked for you.
Sullivan also has a wish-list of items that should be part of CSS, and one of them is the ability to use variables in CSS:
You would call them like this:
I think this is a great idea, but it adds another layer of confusion.
How much do you use CSS? I realize this is more of a consumer tech blog, but we are all becoming web developers nowadays. How important is it for you to learn CSS?
Let me know your thoughts in the comments below, or send me a message on Twitter.
More from Event Apart 2009:
Andrew Mager is a web developer at Ning, Inc. in Palo Alto. See his full profile and disclosure of his industry affiliations.
For daily updates on Andrew's activities, follow him on Twitter.
Subscribe to The Web Life via Email alerts or RSS.
SponsoredWhite Papers, Webcasts, and Downloads
- Achieving Cost and Resource Savings with UC white paper Microsoft Read how UC can help your company save by reducing out-of-pocket expenses, consolidating communications infrastructure, and leveraging human capital. Download Now
- Dynamic Virtual Client: What's in store for client technology going forward? Intel Dynamic Virtual Client, thin client advantages with rich client user ... Download Now
- Live Webcast: Oracle Business Intelligence for Midsize Companies: More Than Just Pretty Dashboards Oracle Oracle's Business Intelligence solutions are widely recognized as market ... Download Now
Recent Entries
- The Superbowl meets social science
- Facebook’s Lite isn’t just faster; it’s the new Facebook design
- Apple tablet: thoughts, and leaks, from around the web
- Suggestion engines: the web directory is back
- Forget Fox, Conan should move his show to the web
Blogs From Our Sponsors
Most Popular Posts
- Facebook's Lite isn't just faster; it's the new Facebook design
- Apple tablet: thoughts, and leaks, from around the web
- Suggestion engines: the web directory is back
- Forget Fox, Conan should move his show to the web
- Chirp: The Twitter Developer Conference
Top Rated
Premier Vendor Content Whitepapers, webcasts & resources from our Power Center Sponsors
Archives
Favorite Links
Blogroll
- AJ Vaynerchuk
- Alexis Gallisá
- Arquay Harris
- Calley Nye
- Carl Harris
- Caroline McCarthy
- Chris Lynn
- Dan Farber
- Jeremy Lwanga
- Josh Campoverde
- Kevin Cupp
- Liz Kao
- Marc Mendell
- Marianne Masculino
- Matt Mullenweg
- Mauricio Balvanera
- Michael Mattis
- Neha Tiwari
- New Media Minded
- Nikhil Bobb
- Rachel Mayo
- Ryan Block
- Ryan Merket
- Scott Beale
- Scott Parsons
- Stephanie Chu
- Veronica Belmont
- Viva Tung
- Webware
ZDNet Blogs
- A Developer's View
- All About Microsoft
- The Apple Core
- Between the Lines
- BriefingsDirect
- Collaboration 2.0
- Dev Connection
- Digital Cameras & Camcorders
- Ed Bott's Microsoft Report
- Emerging Tech
- Enterprise Web 2.0
- Forrester Research
- Googling Google
- GreenTech Pastures
- Hardware 2.0
- Home Theater
- iGeneration
- Irregular Enterprise
- IT Project Failures
- Laptops & Desktops
- Lawgarithms
- Linux and Open Source
- Managing L'unix
- The Mobile Gadgeteer
- On Sustainability
- The Semantic Web
- Service Oriented
- Smartphones and Cell Phones
- Social Business
- Social CRM: The Conversation
- Software & Services Safari
- Software as Services
- Storage Bits
- Team Think
- Tech Broiler
- Technology and the Global Supply Chain
- Tom Foremski: IMHO
- The ToyBox
- Virtually Speaking
- The Web Life
- ZDNet Education
- ZDNet Government
- ZDNet Healthcare
- Zero Day
White Papers, Webcasts, and Downloads
- Enterprise social software IBM Corp. In June 2009, IBM sponsored an interactive webinar to explore the ... Download Now
- Live Webcast: The Power of Centralization in Distributed Development CollabNet Distributed teams are common in software development today. However ... Download Now
- Unrivaled support from Novell, now available for Red Hat Novell If Linux is going to power your mission-critical applications, you'd ... Download Now








































