Although we’re still a long way off, recent events — in which MakaluMedia staff have played an important part — have brought us a few steps closer to such a world.

MakaluMedia hacker and researcher Arto Bendiken has long been interested in distributed systems, and “information about information”, and naturally developed an interest in the Resource Description Framework (RDF). RDF, in short, is a technology that allows the representation of data as “knowledge”. If two independent systems store their data in RDF, and share common semantic “vocabularies”, then the two systems can effectively share their “knowledge”. What does RDF look like? A simple example has been taken from this Quick Introduction to RDF.

  @prefix : <http://www.example.org/> .
  :john    a           :Person .
  :john    :hasMother  :susan .
  :john    :hasFather  :richard .
  :richard :hasBrother :luke .

As it happens, our Drupal team, led by Arto, has been working for a few years on a project with our colleagues at M.C. Dean and Raincity Studios in the development of a sophisticated collaboration and communication platforms for the US government, based on the Drupal platform. (Certainly it represents one of the largest and most complex Drupal instances in the world.) This platform presently supports more than 60 international clients servicing use cases ranging from policy definition collaboration, to natural crisis management, to school operations in the African continent.

This project represents a natural fit for RDF technology, given the value realized in sharing “knowledge”, not just “data”, between the various instances of the platform, as well as the growing number of other RDF-enabled systems around the world. Towards this end, the project team has been working intensively during the past months to design, develop and begin to integrate an RDF storage, management and access framework into Drupal. And since a primary objective of this project is to release the developed products as freely available open-source software, much of this RDF work can be tracked and accessed from the Drupal RDF project page.

Given that Drupal forms the core technology of the platform , the project team naturally maintains a close relationship with the its founder and leader, Dries Buytaert. In guiding the evolution of the Drupal platform, Dries has always demonstrated a willingness to take bold steps in the direction of progress, and this has been evidenced once again this week. In his keynote speech at the Drupalcon Boston 2008 conference, Dries made the big announcement that the future versions of Drupal (beginning with version seven), will be based on RDF.

Drupal presently dominates the market of open-source content management systems, and so this announcement represents a huge step forward to the building of a truly “Semantic Web”. If interested, you can read various reactions from the blogosphere at Network World and SitePoint.

We are tremendously proud to have been a part of this progress, and look forward to continuing work towards a world of networked knowledge.

On January 24, Catalog Choice saw its biggest day yet, when it was covered in a fantastic piece on NBC’s “The Today Show”:

Over the course of the day, the catalogchoice.org website saw over two million page views, and registered 60,000 new user accounts, bringing the total number of registered users, three days later, to over 500,000!

In addition, “Catalog Choice” was the number one search term for the day on Google:

Coping with the traffic.

Coping with a sudden increase in traffic, orders of magnitude more than typical, was a challenge. The front-end web application servers quickly became overloaded, and later the back-end DB server became overloaded (we were servicing over 2,000 DB queries per second!) Since it’s still not possible (with our hosting providers, at least) to bring on additional servers on-demand, we quickly made several modifications to the application:

1. We made a number of layout modifications in the application that would allow us to cache content to a far greater extent.

2. These same modifications also targeted the reduction of DB queries.

With these modifications, we were able to cope well with the secondary traffic surge.

Lessons learned.

It’s quite possible that Catalog Choice is now one of the largest Ruby on Rails applications running on the internet, in terms of number of users. Over the past few months of operation, we’ve learned some lessons:

1. Although not related to Rails, we’ve learned that it’s a good idea, especially for a site with this broad of a user base, to be conservative on the use of client-side technology. When originally launched, we had implemented elegant page transitions, catalog finder live type-ahead, and other similar UI features — all done with JavaScript (AJAX) in a way that gave the site a desktop-application feel. We considered this acceptable practice, as we were designing for IE 6/7, Safari 2/3 and Firefox 2/3.

   However, when you have 500,000 users, even 1% on older browsers represents quite a large crowd! So we’ve since modified the site to work in a far more traditional manner, relying very little on client-side JavaScript, and where necessary, degrading very gracefully.

2. For hosting, our infrastructure, like many these days, is based on virtual machines. We have N number of front-end web application servers, each practically maxed out in terms of CPU and memory. Based on the experience with the Today Show traffic, we’re thinking now that it might be better to have 2N front-end servers, each with half the CPU and memory, since it’s a lot easier to quickly add CPU and memory to an existing server (to meet demand), than it is to bring on additional VMs. (This is, assuming 2N front-end servers with half the memory are roughly comparable in cost to N servers with double the CPU and memory, which might not be the case.)

It has been a very exciting experience to watch the site grow, analyze the usage patterns, and adjust the application and its user interface to not only improve the usability and user experience, but to adapt to the changing user profiles (i.e. now that over 500,000 of our visitors are no longer first-timers, and that we have over 1,000 merchants in the system.)

How the site is doing.

When the site first launched, the consumer response was (and continues to be) nothing short of amazing. It is clear that this site is meeting a very big need in the United States; that is the reduction of unwanted paper catalogs. The industry’s response was, expectedly, lukewarm, especially after the Direct Marketers Association (the DMA) issued an email to all its members to “Just say no!” to Catalog Choice.

However, with half a million vocal consumers behind it, Catalog Choice has become an influential heavyweight. A website feature we launched last week alerts users to which specific merchants have refused to honor their opt-out requests, and provides the merchants customer support telephone number, just in case the consumer would like to give them a call. Within 24 hours, after being inundated with phone calls from angry customers, we had merchants changing their minds :-)

A misconception in the industry (promoted by the DMA) is that Catalog Choice seeks to do away with catalogs altogether. That couldn’t be further from the truth. Catalog Choice is about doing away with just those catalogs that are unsolicited and unwanted.

All in all, Catalog Choice has been a fantastic project for MakaluMedia. We’re fortunate to be one of very few companies having the opportunity to build and operate such a large-scale Rails site, and a site that serves such a meaningful social purpose!

HARDLY A MONTH HAS PASSED since we announced the launch of Catalog Choice, a website that MakaluMedia was chosen to design and develop by an amazing team of funding and supporting organizations, and the response to the site has been extraordinary.

In less than 25 days, more than 100,000 users have registered, opting out of more than 800,000 catalogs. And for us, as user experience designers and product developers, one of the most exciting statistics is the near 50% conversion ratio, meaning that nearly one out of every two visitors to the site has registered.

Update November 21, 2007: We are about at the one month point now, and have over 180,000 users, opting out of nearly two million catalogs!.

Catalog Choice has also been featured on the national television networks CNN, NBC and ABC (see videos below), and has been well received in the press and blogosphere:

• The New York Times
• The Boston Herald
• The Chicago Tribune
• Guy Kawasaki
• Joel on Software
• Adam Engst at TidBITS

The success of the site has served to validate much of our beliefs regarding user experience design. Some of principles that stand out include:

• Simple is better. Less is more.
• A successful user experience derives from near obsessive attention to detail.
• Don’t outsource your user support. On the contrary, put your best people on it. People love getting a personal response from somebody that knows what they’re talking about. You’ll reap the benefits in trust, patience and tremendous value in terms of feedback to the process of continually improving the user experience.

We’ve also learned a wealth about effectively operating a high-volume Ruby on Rails application. (On one particular day, the ABC “Good Morning America” spot was the very top news article on Yahoo News, and we saw 20,000 new user registrations in a period of four hours.) Having a great hosting partner helps a lot!

Finally, this project is proof positive that talented and motivated people, supported by an effective agile process and paying a lot of attention to clear communications, can build a successful project, even if separated great distances geographically. Our Catalog Choice team includes MakaluMedia staff located in the United States, Germany, Spain and Ireland!

And with that, we bring this article to a close. Our next project milestones include one million catalog opt-outs, and hopefully down the road one millions users! And remember, if you’re located in the US, and ready to simplify your life while helping the environment, head on over to Catalog Choice and sign up for a free account:

http://www.catalogchoice.org

Be sure to check out the following video clips.

• Catalog Choice on NBC

• Catalog Choice on CNN

• Catalog Choice on ABC Good Morning America

Last week, around Monday or Tuesday, we got an urgent request from our longtime German customer, Marek Lieberberg Konzertagentur:

We need a Rock-am-Ring photo upload and sharing site, ASAP!

So we hunkered down, conceived a rough concept, and Alex got to work from scratch designing and coding. About two weeks later, we just launched:

Rock-am-Ring Photo Sharing Site

This site is a good example of the productivity gains that can be realized (by great developers, of course!) with the Ruby on Rails web application framework.

Our new site features include:

1. User accounts, created from temporary accounts (i.e. every visitor instantly becomes a temporary user, which is migrated when they create their permanent account) with profiles. (This is an innovative technique that we’ll blog about soon.)

2. User uploading and management of images.

3. Probably the most advanced file upload interface on the web. You can select multiple files for upload (and we locally pre-filter by image size and type!), and they are sequentially uploaded and processed, with full interactive feedback to the user (You can literally upload hundreds of files at once.) We plan to publish this solution as Open Source.

4. Photo voting with AJAX (Digg-style, thumbs up/down). Notice we don’t display the count before voting, to avoid bias.

5. Photo commenting, with email notification, and 30 minute post-editing.

6. Community-based moderation. If three people mark an image as inappropriate, it’s no longer displayed, and we’re notified to consider suspending the user’s account.

7. Advanced slideshow viewer, with link emailing.

8. Photo tagging

9. AJAX implementation of carousel slider

10. Automatic creation of multiple sizes of uploaded files

11. Photo EXIF information display.

12. Lots of nice lightbox UI effects (signup, login, etc.)

13. Bilingual user interface (German/English)

14. Amazon S3 image storage and serving

15. Multi-tier server architecture

16. And lots and lots more…

There are still lots of features to add, but the main focus now is on database query optimization, to improve the page load times, and to support the large amount of traffic. (In the first 36 hours, we’ve got 900 images, and serviced 4 million database queries!)

All in all, this was a pretty amazing accomplishment, both in terms of what was produced and the time in which it was produced.

It was also a great (and fun!) team effort. Thanks to:

• Alex, for working like a madman to get this designed, and coded in a week and a half.

• Niall and Arto, for figuring out how to keep the servers handling the requests.

• Christian, for being late to his movie, while providing the German translations.

• Alvaro, Martin and Christian, for testing.

• Nespresso, for creating the caffeine that kept us going.

From the Panoramio blog post on May 31st:

The integration of photos from Panoramio in Google Earth has been so successful since John Hanke suggested it that we see the acquisition of Panoramio as a natural consequence. We have tightened our relationship with Google Earth more and more in recent months, and at the end we decided to walk one step further. After so much work together, honestly, we couldn’t imagine a better scenario than selling Panoramio to Google.

I was honored to work with “the boyz” back in October 2005, when we created the Panoramio identity (along with two other identities after it, including Cursoo).

I’m very excited for the Panoramio team, and just as excited that the identity work for the project had a small part in helping the team get to the next level.

Congratulations guys! :-)

The Word Count Journal idea is simple — sign up and then write a little bit each day for 365 days. If you write the minimum every day for a whole year, you’ll have written at least 66,795 words. Word Count Journal is especially well-suited to anyone who wants some encouragement to keep their words flowing every day.

I wasn’t sure if the idea would interest me as a blogger, but it’s actually pretty fun. You aren’t penalized for missing a few days, since you can always log in and quickly catch up on your posts.

I’ve even found it fun to write more than the day requires — you only need to meet the minimum, but it’s sometimes easier to keep on rolling.

My Word Count Journals Page

And now, a few words on the design of the Word Count Journal site.

Word Count Journal Identity Design
Our team had a great time working through the design of the site. I had the pleasure of designing the Word Count Journal logo, as well as assisting my colleague Alex Bendiken in establishing a site design based on the new identity.

I had long wanted to use the font American Typewriter for a logo, and this project seemed the perfect opportunity to use this font.

While Word Count Journal is an online journaling application, I wanted to bring in the ideas of analog journaling — the pencil icon and typewriter fonts — as these recognizable elements help convey the idea quickly.

You’ll note that the letters have been pretty tightly kerned, especially ‘Journal’ which I snugged so tightly that the ‘u’ and ‘r’ have merged into a ligature, and the ‘n’ and ‘l’ have been customized to allow for a close fit.

The pencil icon was kept intentionally simple, and also snugged into the space above the curl of the ‘J’ in Journal, keeping in the style of the overall “cozy” theme of the type treatment. Placement of the ‘Word Count’ text was a tough call — I wanted it centered in the space above ‘Journal’ initially, but decided to align the ‘t’ of ‘Count’ on the right edge of the ‘a’ in Journal.

You wouldn’t think so much goes into kerning of a few words, but I feel this little extra effort pays off in a more flowing identity.

Word Count Journal Site Design
Based on the logo, I assisted Alex in developing the initial direction of the site design, which he and the team completely fleshed out and built. I really like the cooler aqua blue and grays, combined with warm orange and bright yellow, and the use of American Typewriter throughout the site. Alex and the team did a great job keeping the structure simple, yet super-functional and beautiful.

If you’d like a space where you write a little each day, check out Word Count Journal!

Fincalena, a Belgian-owned builder and property agent working locally here on the Spanish Costa del Sol, contacted MakaluMedia for the development of a website which would give them an edge in the highly competitive Spanish property market. We met with the company, discussed their objectives and concluded that the site would attempt to achieve the following end results:

• Project a corporate identity combining Fincalena’s northern European roots with the essence of the southern Mediterranean market in which it operates.

• Improve the visitor process of finding a desired property.

• Introduce features and services which set Fincalena apart in the market.

• Allow collaboration with other agent partners in the area.

• Optimize for the Google search engine.

• Minimize the cost and effort associated with managing and maintaining the site.

Faced with these challenges, we set off to work. We’re quite pleased with the results, as are Fincalena, and this article describes the process.

http://www.fincalena.com

Phase 1: Corporate Identity

Fincalena worked with our Design Director, Mike Rohde, in the iterative process of identifying and designing a corporate identity. Our collaborative approach, which you can read more about here and here resulted in a set of outputs including color palette definition, typeface specifications, and a logo mark. In addition to the website, Mike produced a number of supporting print products, including property signage, based on the corporate ID.

Phase 2: System Specifications

After conducting a review of the competitor sites in the context our defined objectives, we felt that we could improve in a number of areas, through both enhancement of “typical” services (like searching for property) and through the introduction of some innovative new features.

• We decided to reduce the number of search criteria to three: location, type, and price range. We felt that the tendency to overwhelm the visitor with selection criteria is often counterproductive.

• We decided to make use of modern interface technologies such as AJAX, to enhance the user experience.

• Realizing that many visitors appreciate a printed version of a property profile, we decided to implement on-the-fly generation of downloadable PDF files.

• We decided to develop a mechanism to ease the process of publishing frequent and timely real estate news.

• We decided to develop a mechanism whereby Fincalena can collaborate in real-time with partner sites.

• We decided to leverage the Content Management System (CMS) framework that we’ve been independently working on as a standalone product.

Phase 3: Implementation

For the past year or so, we’ve been making a gradual migration from development in PHP, to development using the Ruby-on-Rails web application framework. Rails is a highly productive environment, both in terms of the well thought-out MVC model (specific to web applications), and in terms of the underlying language, Ruby. It’s this technology on which we based the generalized CMS product we are internally developing, and to be used in the Fincalena project.

As with most projects (especially those involving customers willing to work in an agile process), we began by developing the core system screens, and expanding outward, including iterative reviews, until we had a full set of site screens. This set of screens represents a nearly complete specification of data (content), services (features) and general layout.

From there, we began the parallel processes of visually designing the site, and implementing the back-end software.

On the home page, we wanted to immediately set the tone for the quality that can be expected from Fincalena properties, the lifestyle available to residents of this privileged region, and to provide the shortest path possible to property identification.

In the interior of the site, we focused on simplicity and removed, as far as possible, distractions that would take focus away from the properties. We spent a great amount of time on the organization and presentation of property metadata (such as price, features, etc.) and tried to subtly integrate features such as the downloadable PDF, and the AJAX-based filtering mechanism, which provides live updates of search results without a page refresh. We decided to use a Flash-based solution for the seamless presentation of the property imagery.

On the content management side, we extended our Rails-based CMS framework to the management of properties. This system reflects everything our organization has come to learn over the years about the design of human interface systems, and may be the focus of a future article. (And special thanks to FamFamFam for their icons released under Creative Commons.)

Fincalena have reported to us that after using nearly every property management system on the market, ours is (in their words), “by far the best in terms of ease-of-use and efficiency.”

Advanced Functionality

We proposed to Fincalena a mechanism to allow the automatic re-publication of real-estate news on their site. The result is a sub-system whereby Fincalena can subscribe to the RSS feeds of partner news organizations, and then selectively publish individual articles on their own site, and via a synthesis RSS feed for subscribers. In other words, we implemented an embedded aggregator.

Fincalena also wanted to collaborate with other local partners, for both strategic and technical purposes. To this end, we designed the architecture of the back-end system to allow seamless integration into partner sites, allowing for the coordinated management of properties, while providing the source traceability required by the individual partners.

We have just recently completed the first such integration, with Fincalena partner Bright SL:

http://www.brightsl.com

In terms of Google friendliness, we applied a number of techniques, especially in the design of URL structures, to help optimize the site’s representation in the world’s most important search engine.

Concluding Notes

Both Fincalena and MakaluMedia are highly satisfied with the results of this project. Fincalena have a powerful, innovative and future-safe platform on which to build and grow its business. For MakaluMedia, this project represented an opportunity to apply a broad range of cross-discipline skills and experience to a new business area for us.

S/D/R — The Big Three

Mere moments after the official announcement on Slashdot, the story made its way to Digg and Reddit. To date, Slashdot’s original announcement has garnered 852 comments. The Digg story has been “dugg” 1715 times and commented on 203 times, while at Reddit the story has gained 110 points.

While we have been receiving a constant stream of private congrats via e-mail, comments on all three sites cover the full spectrum from “love it” to “hate it”; the latter kind occasionally moving on to some disproportionately extreme reactions that may perhaps be a symptom of an excessive disconnect with Real Life(TM). Goes with the territory, and Alex is taking it all in stride, I hope. This much is obvious: had this been a vote, instead of CmdrTaco’s call, I doubt any single one of the proposed designs could’ve sustained a clear majority.

Unfortunately, what contributed to an initial negative backlash of sorts was the fact that when the story broke, the design preview was missing a number of elements, including the actual Slashdot logo itself. Slashdot staff quickly corrected the situation, but the posted comments show that a significant number of people thought the erroneous version was the final design, and were understandably upset.

The press release

OSTG’s press release was published on MarketWire, eventually being picked up by MSN Money as well. It includes this comment attributed to CmdrTaco:

“Alex Bendiken’s entry was selected because his design improved upon many shortcomings of Slashdot’s original design. His design moves commonly-used functions into positions of prominence, and improves the readability of articles. His entry required only minor changes to our core HTML, and breathes fresh life into a site that has remained aesthetically unaltered over its 8+ year lifespan,” said Slashdot founder and site director Rob Malda (aka Cmdr Taco).

Blogosphere reactions

The blogosphere has received the new Slashdot with open arms and an almost unequivocally favorable opinion:

• Steve Bryant posts on his eWeek blog that he thinks he Slashdot redesign “looks pretty damn good. Contemporary, but not so much that it’ll be outdated soon”. He also comments that “all of Google-dom is filled with the name Alex Bendiken” — well, actually, it’s only like 600 entries at the moment, but you, dear reader, are more than welcome to add your contribution to the growing number…
• John Gruber of Daring Fireball likes the new design, calling it “a big improvement that preserves everything that’s good about the classic Slashdot brand.”
• Rui Carmo of The Tao of Mac agrees with Gruber that the new design is “very slick indeed”.
• An editorial in PHP Magazine calls Alex’s design “very nice and well done”, while drawing on their own previous experience to add that it’s no easy task to satisfy everyone. How true…
• David A. Utter, staff writer at WebProNews, details the differences between the old and new designs, without neglecting the runner-up.
• Ryan over at CyberNet News blogs: “I believe that Alex really deserved to win. From the bunch of redesigns that I saw his was the best. He kept the integral parts that makeup Slashdot but he also implemented a slick interface.”
• Philipp Lenssen thinks the design “is cool. The font could be easier to read, tho”.
• Phil Crissman likes the new look, adding “I’m sure I’ll see a lot of comments along the lines of It’s the same, only different (true), you just added round corners/gradients (no and yes — they already had some round corners), and more such complaints. I’m of the opinion that it retains the characteristic slashdotness of the design, but manages to make it look current. Good job, I say.”
• Ronald Heft, Jr. states: “I personally love it. I’ve always hated the current design, and while the new one does resemble the current design, it greatly improves upon it. The site feels less jagged and seems like a more calming place.”
• Michael Angeles thinks the new design ” adds a good deal of white space around the margins by removing the black background and increases height between lines of text, which makes the left nav much easier on the eyes. The previous design always felt cramped to me.”, and goes on to ponder the merits of the font selection and the differences between Arial, Tahoma and Verdana.
• BorkWeb labels Alex’s brainchild “a pretty clean and snazzy design”.
• Scott Troyan blogs that “it looks nice. Very clean, retaining classic Slashdot elements, while rejecting the classic Slashdot ugly.”
• Adrian Lee ponders what makes for an effective website and states the redesign “takes that general look, and makes it much smarter and cleaner. Much easier to read and skim over, generally nicer on the eyes and I don’t feel like my attention is pulled around as much. Generally I’m impressed.”
• S. Shreyas calls the new design “a very decent layout and 100x better than the older one”, though critizing aspects like the grey color and whitespace usage, goes on to lament that the runner-up’s, Peter’s, design was slashdotted and unavailable for review.
• Darren Foong is short and succinct: “it’s extremely awesome.”

International coverage

Here’s a quick sampling of reactions from the non-English part of the blogosphere:

• Chinese: Solidot, Gea-Suan Lin’s blog.
• Danish: Cssdesign.dk
• Dutch: Bakje.nl Jatlog, UZY.nl
• French: Scrapbrain
• German: Macelodeon, observatory, praegnanz.de
• Greek: pestaola.gr, Wiggler.gr
• Hungarian: Hungarian Unix Portal
• Italian: Luca Mondini
• Japanese: hirokixs
• Polish: miscz.pl
• Spanish: Abadia Digital, aNieto2K, Barrapunto, Bitperbit, DesdeGuate.com, menéame, Microsiervos, Un Blog Más, Vecindad Gráfica
• Thai: Blognode
• Turkish: Fazlamesai

More buzz in the blogosphere can be found at Technorati and, of course, Google.

In the interview (which begins at the 15:00 mark) the guys speak with Jason and Greg about their backgrounds as freelance graphic and web designers. They talk about working on projects as freelancers and why they went freelance, their process of working, inspiration, working remotely vs. face-to-face as part of teams, the challenges of working from home and more.

It’s an excellent podcast to listen to for designers who want to learn more, or for those interested in how these two designers work and think. Be sure to check in the archives, as The Web 2.0 Show has interviewed many other interesting personalities worth hearing.

Bob emailed me last summer, asking if I’d be willing to offer quotes on logo and graphic design for his new book, to which I heartily agreed. After all, I’d been collaborating with Ian Landsman and several other micro-ISV owners on logo and web design work, so it only made sense to share that experience with Bob and other Micro-ISV owners. (Micro-ISV stands for micro-Independent Software Vendor; in other words a small software developer, often one person.)

Bob called a few days later to ask his questions and discuss the details. We had a great phone conversation, which eventually turned into a post on his ToDoOrElse weblog, as Micro-ISV Tip #6: Visual Integrity.

Here’s a snippet from the article, which ended up in the book as well:

Q. Why should a micro-ISV get a professional in to do their logo?

A. There are certainly ways of doing it yourself, or buying an off-the-shelf stock logo for fifty bucks, with exclusive rights in the 200 dollar range. Problem is, if you have a very specific company and you’re looking to portray what your company stands for, you’re already adapting to an existing logo that may not fit what you do. You’re already starting off with a compromise.

It’s subtle, but because it’s important to get the idea of your company or product across quickly and fully. Any confusion or lack of clarity can delay the first good impression. Design is becoming more and more critical for businesses, particularly on the Internet where you see the identity long before connecting with a person.

In a nutshell, you should hire a design professional because is it’s not your specialty. If you’re a micro-ISV, you’re always trying to be very effective with your limited time and energy. By doing it yourself you may actually spend more time and energy than you want and yet may not be happy with the end results.

All those months ago, I hadn’t considered the reality of my words and name being captured in print. I’m quite used to seeing my words appear online — on my own blog and even on other websites — but there is something special about appearing in print. it’s so… permanent.

Many thanks to Ian Landsman, and his UserScape and HelpSpot logo blog post which opened which the door for this opportunity, and to Bob Walsh for giving me the opportunity to contribute. I hope my words help many more Micro-ISVs out there establish businesses with great design as one of the pillars of their success.