The mobile browser upload problem

In a pair of recent posts, Andre Torrez outlined an idea for solving the “how do I get photos from my iPhone onto a website” problem. I like this idea, and I’d happily install this hypothetical Community Camera app if anyone ends up developing it.

The central mechanism for Andre’s idea is a new URL protocol camera: (similar to http:, mailto: or ftp:) that a simple camera application could claim control over. One such built-in protocol on the iPhone is sms:, which lets you easily direct users to send an SMS message. For example, clicking on this link (with URL sms:+12125551212) would switch you over to the SMS application with the phone number already filled in. Here is a handy list of other iPhone-supported protocols. But if you’re not reading this on an iPhone, pressing that link will probably give you an error message.

One of the good design aspects of hyperlinks is they’re not always expected to work, the web is chaotic and broken links are relatively harmless. So it’s certainly okay to offer these links even if they won’t work for everyone. An improved design would allow web applications to detect whether or not a given protocol can be used. That way I could write some JavaScript code to check whether camera: or sms: links are supported, and make the process much more seamless for users. As far as I know (correct me if I’m wrong), such a mechanism doesn’t exist yet. It exists! See update below.

The email workaround

One workaround solution, used by many web applications including Flickr, is to provide a special email address that allows you to upload photos as an attachment. The benefit is that every computer with a browser supports email links, smartphones and otherwise. The downside is the unwieldy sequence of steps you have to follow. In the best case scenario, a user has already saved the web app’s special email address to her contacts:

  1. Switch to the Camera app, take a photo or find the one you want from your library
  2. Press the “utility button” and choose “Email Photo”
  3. Fill in the email address from contacts and press send
  4. Switch back to the browser and wait for the attachment to be received by the web app

A number of factors complicate this process, starting with the initial messaging. The natural thing to say is “Email a photo to upload,” linked with a mailto: URL protocol. But on the iPhone you can’t attach photos from the Mail app, it only works from the Camera side of things. So that “Email a photo” link should probably go to a page that explains the process outlined above, including the important step zero “add our special email address to your contacts.”

Email uploading requires that you’re willing to read a bunch of steps, understand them, and follow them. Additionally, the web application is left with no button that initiates the process and no way of giving feedback about whether it worked or not. If you reload the web app and you see your photo, then it worked. If not, maybe you’ll get a email bounce message. It’s a process that works okay for experienced users, poorly for novices, and that fails ungracefully.

Plus there is the implementation challenge of receiving and parsing email, which is kind of a pain in the ass. As an alternative to Andre’s plan, if somebody wants to write a general purpose email-to-upload service, I would find that pretty useful. Or does this exist already? I haven’t looked very hard.

Compare those steps above to the camera: method (including step zero, “install the Community Camera application”):

  1. Press the “upload photo” link, with its “camera:” URL protocol
  2. Using the native app that appears, take a photo or choose one from your library
  3. When finished, the app switches you back to a page that has useful feedback

This is a better user experience, but it does require that someone go and write that native camera app (and that I install it). And unless there’s some way of checking for camera: support, even this will require some additional explanation.

Multimedia Messaging Service

Yet another solution can be found in SMS, or its more advanced permutation MMS (Multimedia Messaging Service). Using the sms: protocol mentioned above, I could create a link to sms:email@example.com that behaves almost exactly like the email upload method, while avoiding some of its complexity. On the iPhone, you can attach photos from the Messages app, and you can send MMS messages to an email address. And since there’s a link that initiates the process, it allows web apps to give some feedback on the page in response to a click event.

The downside to this method is that it requires the user to have a mobile plan with reasonable rates for sending MMS messages, and could fail ungracefully for users who aren’t fully informed about their mobile plan.

In any case, writing all this up has made me realize web browsers should let you detect whether a given URL protocol is supported. Browser makers, please build that into your next release!

Update: Andre tweeted a clever trick for detecting URL protocol support! Here’s how it might work in PHP:

<?php

// This will only work if the sms: protocol is supported
header('Location: sms:email@example.com');

// If not, fall back on this other page
echo '<html><head><meta http-equiv="refresh" content="0; url=sms-not-supported.html" /></head></html>';

?>

Sanja Iveković exhibition subsitewww.moma.org

I just put some finishing touches on the subsite for Sanja Iveković’s exhibition Sweet Violence. Designed by Shannon Darrough, it follows a similar approach we used with the Francis Alÿs site, maintaining a spare and understated presentation.

Link

A redesigned phiffer.org

I’ve been tinkering with a new design for this site for a few months and have finally gotten to the point where it feels polished enough to start using. It’s not a huge departure from what was here before, but I’ve made some structural changes to how the WordPress theme works that should make it easier for me to maintain and improve. The old theme was ambitious, I invented my own object-oriented template system that shunned the well established conventions of making WordPress themes. This is all fine and good when a site first launches, but over time I forgot how all the parts fit together and was left puzzled by my earlier choices. This new theme is much more straightforward, no PHP fanciness this time around.

phiffer.org header

I did indulge a bit in some front-end fanciness though. You may notice there’s a new header element that gradually changes in response to your mouse movement. The gradations of green squares correspond to regions of the page, but rotated 90 degrees. If you move your mouse up or down you’ll see changes in the header, only your mouse movements show up horizontal instead of vertical. So the more you browse below the fold, the more visual changes will appear in the header toward the center and right. All this is private to your browser (and saved, per-browser, using something called JavaScript localStorage), I’m not sending any of the mouse movement data to the server.

Aside from that I’ve mostly just trimmed back some text in the sidebar, added a new archives interface in the footer, and beefed up my links to projects and friends. It’s still a work in progress, but with a bit more fit and finish I could see releasing the theme for others to use.

jQuery crash pluginplugins.jquery.com

A jQuery plugin for crashing IE6. That’ll teach those motherf!%@#s to upgrade their s#%t.

Link

MoMA.org is one year old (or fifteen)moma.org

Oh man, I can’t believe it’s been a whole year!

It was one year ago tomorrow that we launched the latest redesign of MoMA.org. (March 6 is a day that will be forever ingrained in the Digital Media team’s memory!) But MoMA has had an online presence for fifteen years now, since 1995, when an exhibition site for the design show Mutant Materials in Contemporary Design was developed. The following year, the Museum’s website, MoMA.org, officially launched, and we’ve been doing exhibition feature sites ever since.

One year ago I was working remotely from Groningen, NL where Ellie was doing a study abroad program. The weeks leading up to launch day were pretty brutal, probably my most intense working process since college. It seems so absurd, in retrospect, that most of it went down for me in that sleepy Dutch college town. Happy birthday MoMA.org! It was worth it.

Link

The Ebert Clubblogs.suntimes.com

I just got my first email from The Ebert Club and realized I forgot to link to it here. Roger Ebert says:

I want to make some money from the web. It may appear that I have an enormously successful web site here. I do. But I’m not making any money. In the years since the site began, my share of the profits has come to a pauper’s penny. The Far-Flung Correspondents aren’t the only ones here working for free. To be sure, the Sun-Times pays me handsomely, although less handsomely since we all went through a “belt-tightening,” so as not to lose our pants.

He goes on to discuss Negroponte’s micropayment future that never came to pass. It’s a simple problem that has evaded that particular simple solution:

The web that we surf every day is not paying for itself, and we sure as hell aren’t paying for it. You read me for free, and I read everybody else for free. This is not news.

If you like Ebert’s writing, or even if you’re not very familiar with it, read more about The Ebert Club and consider sending him five bucks.

Link (See also)

MoMA interview with Yugo Nakamuramoma.org

I was happily surprised to see this interview by Shannon Darrough, who I work with on MoMA.org.

Nakamura’s MONO*crafts 2.0 was also a big inspiration for me when I was first getting into web design. It feels dated now, of course, but I remember feeling thrilled to see this bold assertion in the navigation: interfaces can be impractical, users can be invited to explore and play.

Link

danah boyd on ChatRoulettewww.zephoria.org

It’s about finding joy in randomness.

For most users of all ages – but especially teens – the Internet today is about socializing with people you already know. But I used to love the randomness of the Internet. I can’t tell you how formative it was for me to grow up talking to all sorts of random people online. So I feel pretty depressed every time I watch people flip out about the dangers of talking to strangers. Strangers helped me become who I was. Strangers taught me about a different world than what I knew in my small town. Strangers allowed me to see from a different perspective. Strangers introduced me to academia, gender theory, Ivy League colleges, the politics of war, etc.

I completely agree, ChatRoulette feels like my first experiences meeting random people in AOL chat rooms. But I can also understand why many people would find it too creepy to try out.

There’s an iPhone app called PhotoSwap that operates on a similar principle. It’s also fun, but it’s too bogged down by those who tag their suggestive, but PG-rated, images “NR” for no reporting to the system administrators.

Link

MoMA.org takes top museum website rankingwww.artsjournal.com

For the last year and a half I’ve been freelancing at MoMA’s digital media department, helping develop the MoMA.org front-end. In many ways it has been an ideal client for me: dependable pay, flexible terms, interesting work and people I get along with. I think I’ve done my best web development work here. So I’m very proud to see our efforts being recognized by Kunstpedia. Judith Dobrzynski summarizes the results on ArtsJournal:

The Museum of Modern Art takes the blue ribbon, with the Metropolitan Museum of Art not far behind.

Kunstpedia analyzed more than 680 museum websites worldwide, and ranked them thusly: “The scores are determined by comparing ranking data such as those of Google Page Rank, Alexa Ranking and Compete Ranking. Furthermore the number on-line references in the form of incoming links and references in user generated content have been analysed. The end score was determined by the sum of each individual score, given on basis of the position within the different data source which were analysed.”

Link