The rgba() colors, the text-indent: -9999em's, or the -webkit-transform? Panic's actually been doing that on their blog too: http://www.panic.com/blog/ But still cool stuff :)
Some UI issues:
- The front page acts weird if you have it any less than full width. Things get pushed around in a weird way, including getting pushed off the page. But this is really just a nit-pick, because the important things stay on the page.
- The Flickr import is slick, but needs a progress indicator after you click the Set to import.
- The buttons at the top really should have some text underneath them. By themselves, I had to hover over each to figure out what they mean. I'm sure I'll get used to it after a while, but it's confusing up front.
- Twitter's disabling basic auth in June. Better get switched to OAuth soon ;)
Great look - feels more like an app then a webpage.
A few usability comments:
- I kept trying to click the buttons embedded into the help tips, but they're roll-over only.
- The ui doesn't respond instantly - probably because it's loading additional content. While we've been trained to deal with this on normal HTML links, the site looks enough like an application that it seems like things are broken. Please add some sort of progress indicator.
- Progress indicator while uploading, too. I tried uploading a directory and nothing happened. Then I tried another dir, and nothing happened. Eventually, the second directory started showing up.
- When I rotated my small image, the UI got messed up - the text field for the name of the image started overlapping the image itself.
Do you have a source on Twitter disabling basic auth in June? That would be pretty huge, and the API documentation says:
While we have no plans in the near term to require OAuth, new applications should consider it best practice to develop for OAuth. [...] There are still a number of archetectural use cases to work through before we consider the deprication of Basic Auth. Before any changes begin to happen, we will discuss them with the community through the support channels, and give at least 6 months lead time before making any policy changes.
One of the ways that you can create a good looking button or clickable image is to set the background image of an element so that you can take advantage of features like :hover pseudo-classes. Sometimes you don't want the text to appear inside of that element, like if the text for your button is inside the image. The solution is using a huge text indent number (-9999, to take it off of the left side of the page). It's basically a trick. An em is just a measurement, equivalent to the width of the letter M.
You'll notice sometimes when clicking a link that you'll see the dotted outline text extend all the way to the left side of the page. That's because the text inside of that element is actually way far off 9999em's to the left of your display. Like a bad act getting pulled off-stage by the big long hook around the neck.
in our experience, a drag drop action is incredibly hard for a user to perform, and should really be reserved only for when it add significant UI context to the action.
i'd stay far away from having users drag and drop goods into a shopping cart.
I would like to pass along congratulations to Michael Yuan. This site is beautiful and inspiring. Would you guys mind sharing the tools you used to produce it, and how long it took?
Yeah, the attention to detail is simply astounding. Look at this page near the end for example: http://divvyshot.com/#to-about
Instead of going with a plain old Google Maps widget, the designer made a 3D map of their area in San Francisco. I mean, just look at the attention to detail on that map alone. Street names are naturally absolutely positioned, the drop pin has rollover and active images, and clicking on it will take the user to a full map. Astounding job.
Another cool thing I noticed: Move your mouse near the "Sign up now, it's free." link. It start's pulsing. Move your mouse on top of it, and it pulses more strongly. Very nice.
EDIT: I see it was designed in-house by Sam. Darn. Excellent team