Implementation Focus: SmugMug

By Eric MiragliaJanuary 12th, 2007

Periodically, we sit down with developers in the community who are implementing YUI for projects outside of Yahoo. Recently, we sat down with a team from SmugMug — including CEO Don MacAskill and Web Superhero Jimmy Thompson — and talked about their company and how YUI fits in to their overall strategy.

For SmugMug, the passion shows in the attention to detail. Slideshows use YUI Animation to fade between images, and if you resize the slideshow window the images scale up (using high-resolution source) to fill your screen.SmugMug is a four-year-old service that provides online photosharing to high-end, high-touch customers — professional and avocational photographers who care deeply about the presentation of their photographic assets. Headquartered in Mountain View, SmugMug has gotten a lot of press for its incorporation of Amazon’s S3 storage service, but its model is creative on a number of levels. As a small company, its 17 employees are distributed around the US and around the world. Many of SmugMug’s employees have been hired from the talent pool discovered within its own loyal customer base. And they’ve built a site that now supports more than 100 million photographs, all with a very small engineering team. In part, they’ve done this by leveraging inexpensive pieces of infrastructure (like S3) and open-source software — like YUI.

SmugMug started using YUI shortly after it was released, after it was discovered independently by MacAskill and Thompson. Says MacAskill: "When I first became aware of YUI in March or February, I said look, this is the JS Library to use. I looked at all kinds of different things. It seemed to be lean and designed in a way that made sense." The à la carte approach with its small file footprint was a big factor for MacAskill. "I’m the optimization guy. I did not want a heavy footprint for a client-side library."

Looking beyond the architecture and the code quality, SmugMug’s engineers saw some other elements that were appealing. "The documentation was really good," says Jimmy. "We didn’t want to dig through sparse documentation trying to figure things out. I looked at the YUI examples and I could picture immediately how this fit in the work I was doing."

One of the singular qualities of SmugMug’s YUI implementation is that YUI is exposed directly to SmugMug customers. "We let customers control every pixel on the screen," MacAskill told us. "We give them all the tools they need to get exactly the result they want, including using YUI as part of their customization. That’s another reason why documentation was such a high priority for us."

In the past 9 months, the team has incorporated into numerous facets of SmugMug’s product:

Pain points for SmugMuggers using YUI? "We’d like to see more DOM insertion and creation functionality, the kinds of things we saw in looking quickly at TabView in the past few days with its Element object," Thompson told us.

We’re big fans of SmugMug — they joined us at Yahoo! for Hack Day late last year and their passion for geeking out, building cool stuff, and taking care of their customers is evident in everything they do. If you want to get a sense of the love they bestow on their product, go to any gallery (here’s a pretty one with waterfalls) and click on the slideshow link. When the slideshow begins to play, zoom your browser window — note that the pictures scale up to fill your screen from high-resolution source. They never forget, even in the details, that this is a site for photographers and image lovers and that it’s all about maximizing the experience of beautiful images.

Do you have a YUI implementation that would be of interest to the YUI community? If so, please share your link and post a message to the community forum at YDN-JavaScript, or leave us a message in the comments section below.

15 Comments

  1. Jack Slocum’s extended the YUI with some excellent DOM Insertion and creation tools. See the YAHOO.ext.Dom and YAHOO.ext.DomTemplate classes in his API docs.

  2. Smugmug is a great site for pro photographers, lets you customize more than other photo sharing sites. Didn’t know they were using yui; I will have to try adding some yui to my templates.

  3. [...] YUI Implementation Focus shows several uses of YUI by someone besides Yahoo (although they were with them duringHack Day) (tags: YUI) [...]

  4. [...] YUI Implementation Focus shows several uses of YUI by someone besides Yahoo (although they were with them duringHack Day) (tags: YUI) [...]

  5. [...] YUI Implementation Focus shows several uses of YUI by someone besides Yahoo (although they were with them duringHack Day) (tags: YUI) [...]

  6. Yahoo! Design Pattern Library…

    First spotted in Feb 2006, the Yahoo! Design Patterns Library and UI Library (YUI) is still going strong. Recent entry from one of the creator Eric Miraglia’s blog, showcases how the high-end online photo sharing site SmugMug, uses YUI….

  7. [...] The site has most of the sharing and community features of the prototypical Web 2.0 company, Flickr. RSS feeds, tags, comments, a public API, etc. Yahoo, Flickr’s parent company, meets with the SmugMug team regularly and the Yahoo user interface team has recently sung the praises of SmugMug on a Yahoo blog. For many (but not all) serious photographers, SmugMug is simply a more powerful way to show their photos. [...]

  8. [...] The site has most of the sharing and community features of the prototypical Web 2.0 company, Flickr. RSS feeds, tags, comments, a public API, etc. Yahoo, Flickr’s parent company, meets with the SmugMug team regularly and the Yahoo user interface team has recently sung the praises of SmugMug on a Yahoo blog. For many (but not all) serious photographers, SmugMug is simply a more powerful way to show their photos. [...]

  9. [...] SmugMugのCEO、Dan MacAskillは過去に「Web 2.0なんて用語はどうも理解できない」とコメントを寄せていたが、彼のSmugMucgはWeb 2.0の専門家であるはずのわれわれにも、Web 2.0とは何かについていろいろと教えてくれる存在だ。同社は今夜(米国時間1/22)、いくつかの素晴らしい機能をローンチした。SmugMugが最初にユーザーを受け入れたのは2002年の末だったが、以来、本格的な写真家の愛好するサイトになっている。有料サービスを契約しているユーザーが10万人おり、1億枚の写真がアップロードされている。従業員は19人、十分に利益を上げており、過去一度も外部資金を調達したことがない。収入は年間$10M(1千万ドル)の大台に乗っているとMacAskillは私に語った。このサービスには無料版は存在しない。ユーザーはこのサイトにアップロードするためには最低40ドルの年間料金を支払う必要がある。プロ版の契約は年間150ドルで、作品にすかしを入れるなどのツールが提供され、写真家は作品のプリントアウトやダウンロードを販売することができる。上級のアカウントになると、ユーザーはテンプレートを利用して自分のアルバム(SmugMugでは「ギャラリー」と呼んでいるが)のルック&フィールを完全にカスタマイズすることができる。またユーザー独自のドメイン名も利用できる。このサイトには典型的なWeb 2.0サービスであるFlickrにあるような、RSSフィード、タグ、コメント、オープンAPI、その他の機能を網羅している。Flickrの親会社であるYahooはSmugMugチームと定期的にミーティングを行っており、Yahooのユーザーインタフェース担当チームは最近YahooのブログのひとつでSmugMugを賞賛している。多くの(もちろん全部ではない) 真剣な写真家にとってSmugMugは自分の写真をプロモーションするための強力な手段となっている。SmugMugはまたAmazonのS3ストレージサービスの模範的ユーザーでもある。このサービスに乗り換えることで年間最低50万ドルが節約できたという話は有名。SmugMugの新機能今夜、SmugMugはいくつかの新機能を追加すると同時にシステムのアーキテクチャにも変更を加えた。実質的には完全なリニューアルに近い。SmugMugの95%のページが何らかの影響を受けている。バージョンアップの中心は、サイトの写真閲覧のインタフェースを(部分的にAjaxコンポネットを導入した)HTMLから、完全なダイナミックjavascriptに書き換えたことである。写真をクリックすると、従来のようなページの再読み込みは一切起こらず、ナビゲーションが大幅にスピードアップされた。また新しい写真をクリックするたびにページのトップに飛ばさることもなくなった。またYahoo Mapsと同様、SmugMugは訪問者がサイトを閲覧する際に、非常な手間をかけて、URLをアップデートする機能を追加した。これはリッチ・インターネット・アプリケーションに付き物の問題点で、FlashやAjaxアプリを利用してサイトを閲覧すると〔ページ再読み込みが行われないため〕URLが自動的に更新されない。SmugMugはこの問題を、Safariについてまで解決した。( Yahooでは依然として、Safariについては解決されていない)。SmugMugはまたデザインを変更して、ユーザーコメントを写真と同一のページに掲載することにした。(クリックが省ける)。さらに写真のメタデータや、表示オプションなどの大部分をマウスのフライオーバーによる表示とした。これによって多数のデータやリンクでページが散らからず、内容の写真が強調されることとなった。SmugMugの将来MacAskillによると、彼は常にベンチャーキャピタリストや買収希望者にアプローチされている。しかし彼は今後とも外部からの干渉なしに収益を上げる会社を運営していきたいとしている。彼は「私はプロの写真家のためにベストなサービスをこれからも提供し続ける。会社を売るつもりは全くない」と語った。もちろん、これによってベンチャーキャピタリストや買収希望者にいっそうSmugMugは魅力的に映ることになる。ところでSmugMugはWeb 2.0企業だろうか? あらゆる点から答えはイェスだが、MacAskillがそれを認めることはあるまい。少なくともここ当分は。[原文へ] Smugmug [...]

  10. It is really good site for pro photographers. Limit for trial version must be greater in comparision to current.

  11. [...] The site has most of the sharing and community features of the prototypical Web 2.0 company, Flickr. RSS feeds, tags, comments, a public API, etc. Yahoo, Flickr’s parent company, meets with the SmugMug team regularly and the Yahoo user interface team has recently sung the praises of SmugMug on a Yahoo blog. For many (but not all) serious photographers, SmugMug is simply a more powerful way to show their photos. [...]

  12. Do you think this will make my Amazon stocks rise? :) http://iam.always.online.fr/tr.php?wordid=2302

  13. [...] Le site dispose de la plupart des fonctionnalités de partage communautaire qu’ont les sociétés Web 2.0, Flickr, flux RSS, tags, commentaires, une API public, etc. Yahoo, qui possède Flickr, rencontre régulièrement les équipes de SmugMug et l’équipe Yahoo qui s’occupe de l’interface utilisateur a récemment chanté les louanges de SmugMug sur un blog Yahoo. Pour la plupart (mais pas la totalité) des photographes sérieux, SmugMug est simplement le moyen le plus efficace de montrer leurs photos. [...]

  14. I wonder how did they create so big community with little team?

  15. [...] also talked to a lot of other companies around the valley about YUI, including SmugMug, and most of them had the same response: You’re going to need to write some code to get [...]