Posted by Jack on September 24th, 2009

4 Comments

Rails mass mailing – it shouldn’t be this complicated

The requests we get from our clients for “social networking” type tools and features has grown exponentially over the past two years. To make a user experience relevant, easy, secure, means that an application will need to send email notifications to that user (to register, to tell them of friend’s messages, to send them newsletters or updates, to send tickets, calendar bookings .. the list goes on).

Why is this a problem? Because sending an email is not an instantaneous action. The more emails you try to send, the longer you may have to wait as the application sends them. Imagine an app that lets you invite 300 friends to an event. Multiply this with 300 people sending the same invite to their friends.

While Rails was kind enough to provide a simple way to send emails, it left out one important detail. You can only send one at a time!

If you find yourself in the unfortunate position where you need to mass mail then you’re on your own. So what do you do? You Google around of course. Someone is bound to have figured this one out.

It looks like there are 3 ways to solve this:

1. Use existing email marketing services

You can go with this option. There are plenty out there: Mail Chimp, Constant Contact, Thin Data, Campaign Monitor, Campaigner and others. All you need to do is generate some kind of mailing list and import it into one of these systems and then keep it up to date. But that’s not always practical. Not if you want your users to be able to initiate the mass mailing by themselves.  Don’t get me wrong, these services are great at what they do, but what we really want to do is to send mass emails from our own app.

2. Use existing code

If you really want your Rails app to be able to send mass mails at a click of a button you can try using Eric Hodel’s ar_mailer which is on version 1.4.0 as of June 2009. This has the advantage of letting you use the email addresses that you already have on your system (no exporting and importing to a different system) but before you get to that you still have to integrate it with whatever version of Rails you happen to be using.  Assuming you get it working properly, now you have a brand new background process to take care of.

Ar_mailer is great but leaves you half way there.

* The queue is not smart enough to prioritize emails. If one user sends 5000 invitations and after that another user wants to recover his password, he’ll have to wait until all 5000 emails are sent before he gets his password back. The users receiving the invitation won’t notice if  it takes a bit longer to reach them, but the guy that is trying to recover his password will be upset if he doesn’t get it right away. This is obviously not good enough.
* How do you monitor if an email has been sent or failed?
* If you have an email template and your client wants to change it all the time, what do you do?

3. Build it all from scratch

Even if you decide to do it yourself from scratch you’ll still need a queue to store the emails that will be sent at some time in the near future by another process running in the background. From there on, it depends on what you really need. Be prepared to put aside some extra time because it ain’t simple.

So what would be the perfect solution? Simply put: I don’t want to have to worry about it. I want to be able to say: “Here’s my email, here’s the list of people I want it sent to. Go and do it … please”.

Wouldn’t that be great? Sure it would! We’ve encountered this problem enough times to make us want to solve it for good.

And so we’ve set out to build it and this is what we think a mass mailing solution:

1. I want to be able to use it independently of the language I’m coding in – it needs to have an API
2. I want to be able to use the same code I have right now (layouts, email templates, etc.) – it needs to integrate easily
3. I want to know if a specific email was sent, failed or if it hasn’t been sent yet and I want to know why – it needs reporting
4. If a client complains that the emails aren’t rendering correctly I want to be able to see what they are receiving – it needs to let me look at the emails sent
5. I want to be able to easily resend any email – it needs to let me act on it
6. I want to create and manage email templates so that my client can edit them without asking me every time and without forcing me to change the code and to deploy my app all over again – it needs an optional template management system.
7. I want the queue system to be smart enough to distinguish between a single email and a batch of 5000 emails and prioritize them accordingly – it needs a smart queue system.
8. And most importantly, how can all of this be done with minimal effort to set it up each time I create a new app. – it needs a plugin.

Postage App!

We are currently developing this system which will help us build better apps. We’re building it according to our needs and we think that these might also be the needs of other developers out there. Check it out and sign up for an update on the developer free release!

  Posted by Vivian on September 24th, 2009

4 Comments

How I learned to stop worrying about “the fold”…

Having started out my design education and career in a more print-focused direction, one of the major shocks of web design to me was the notion of “the fold”. The fold is an outdated term referring to a literally folded newspaper; in theory, all of the headlines and important content on the front page would appear “above the fold”. I used to treat the fold as my general online page size and would try to keep content above this imaginary boundary. As the years went by, it slowly dawned on me: there is no fold.

WYSIWYG

What you see isn’t what they get

There is no way to control the way online content is viewed and experienced by your audience. You can plan wisely to an extent, but you’ll go nuts trying to get the same site to show up in the same way on all computers across the world. Browsers and operating systems vary between user to user, and even with the same set-up, their viewing areas within browsers can vary too, due to stupid Bing toolbars etc. Monitors are getting increasingly gigantic leading to higher screen resolutions; with the wide range of physical and virtual viewing sizes, the old notion of a defined fold really goes out the window. Fluid or elastic width layouts (like Google Maps) can be a great solution to have your site look its’ best for various users, but those options come with their own headaches (like ridiculous line lengths across 30″ monitors…)

Long scrolling pages, FTW!

I was always told that going too far below the fold annoyed users and that the content would be completely lost and ignored, due to “too much scrolling”. I have no idea where that misconception came from, but maybe it stems from the 56k modem days where too much content one a single page wouldn’t load fast enough to maintain interest. Technology has obviously grown beyond the whine of a dial-up connection. I love having a lot content available on one page; instead of clicking to read short pages, I can just keep scrolling – I don’t have to wait for a series of pages to load, just one –albeit larger– page (check out Black Estate Vineyard for a great example). The fold is really useless in this case since it’s proven that people scroll – as long as you provide them with the tools at the bottom of the page to move on, or go back up, there is no problem with long scrolling pages.

Some other pages that take full advantage of vertical scrolling include: thismortalmagic and the idsgn blog where you can keep clicking “More posts” if you’re interested in additional content. Even corporate marketing pages like Basecamp utilize length to their advantage; if I feel like reading all of their testimonials, everything is here for my enjoyment. If this content doesn’t interest me, I haven’t lost anything.

Beyond the fold: enriching the user experience

The space that web designers have to work with now is no longer limited to just a width and height. There are many ways to enrich the user experience with additional content above, below, and hidden behind the visible content. As long as the layers of information are relevant to the user, the additional dimensions can promote easier browsing and encourage discovery. As these web technologies and capabilities grow, the idea of the fold becomes increasingly outdated. Exercising common sense in UI design basically covers all aspects that the fold was meant to dictate, things like important content should be high up on the page so the user notices it when they arrive (wow, who would’ve thought of that…).

I would love to see a shift in online experiences from the dated “all content in the fold” sites to a more blog-style experience, where everything is on the table. We shouldn’t have to worry about overwhelming the user – as long as the content is edited, compelling and engaging and well designed, they should have the final decision on what they want to read or ignore.

  Posted by Dominic on September 21st, 2009

1 Comment

Dialogue vs. Copyright

What do you do when someone claims you stole from them?

We were recently contacted by a well regarded designer who felt that the some of the iPhone icons we were giving away for free, bore too close a resemblance to his own icons (which he was selling from his site), and that we were possibly infringing on his copyright.

We hadn’t seen his icons before, and knew we hadn’t copied them. Our hackles were raised, but fortunately we let it rest overnight and followed up the next day. How? We did the *Canadian* thing and politely replied to his email, explained the situation. After a couple emails, we easily came to agreement.

Who was right?

The episode left me with a lingering question. Was it even possible to infringe on someone’s copyright without ever having seeing their original work ? And further, what are the rules around copyrighting images and icons in particular.

Legal battles that shaped the computer industry.

After searching around and reading for a few hours I discovered that there are plenty of places that you can find typically obtuse legal information about copyright. We did, however, find an excellent  article, from a book titled “Legal battles that shaped the computer industry.” By Lawrence D. Graham. You can find it in google books

Two salient points from the article were:

1. “Icons are protected as soon as they are fixed in a tangible medium of expression.” This seems fairly self-evident; they need to exist in some format that is perceivable.

2. “Copyright law prohibits the unauthorized copying of the icon designs, but does not prevent others from independently developing and using similar designs. Unless a given icon design is particularly original and creative, copyright law prevents only the nearly exact copying of the icon design.”

This second point leaves a bit of ambiguity. Essentially, if the icon is not ‘particularly original’, then copyright law prevents the exact or nearly exact copying of it.

However:

A. what does ‘not particularly original’ mean?
I’d be interested in hearing what others think, but after some thought, my interpretation would be that any ‘icon -> concept’ which has been created before would certainly not be ‘particularly original’. For example, the ‘lightbulb -> idea’ icon would not be particularly original, as it has been used for decades as the representation of the ‘eureka idea moment’.

and secondly,

B. what does ‘nearly exact copying’ mean? My interpretation would be that while ‘exact’ copies would be indistinguishable,’nearly exact’ designs would be merely difficult to distinguish.

The assessment

So turns out that, ‘yes’ you can be infringe on someone’s copyright without ever having seen their work. It  just takes a major coincidence (call it zeitgeist or the collective unconscious) . But ‘no’, based on my understanding of the copyright (see above) it was clear that our designs passed neither test to indicate copyright infringement.

Dialogue beats Courtrooms

What turned out to be more relevant than who was legally ‘in the right’, was my re-confirmation that most of the time, the person on the other end is acting in good faith, sincerely describing their position, and is often quite reasonable in  discussion and agreement. People are generally good at heart and in intention. Dialogue beats courtrooms.

  Posted by Alex on September 10th, 2009

30 Comments

Free iphone toolbar icons

Lately we’ve been getting more involved in developing iPhone apps for our clients. iPhone apps have their own size and UI standards, so we decided to speed things up for you by sharing some clean and simple iPhone toolbar icons. Feel free to download this 160-piece set, and use it in on your own projects. If you decide to download or use them,  please drop a link to this blog post. Thanks!

2009/10/06 Update: We’ve received several inquiries about our iPhone icons. We’ve decided to license them under a Creative Commons Attribution-Share Alike license.  You may use the icons for both commercial and non-profit purposes, as well as modify them (in fact we challenge you to make ‘em better).

  Posted by Andrés on September 9th, 2009

No Comments

TWG Sponsoring TEDxTO

As long time fans of TED, The Working Group is proudly sponsoring tomorrow’s TEDxTO event at the Theatre Passe Muraille. Dom and I look forward to meeting fellow attendees, and watching the great line-up of speakers (13). Give us a poke and say hi if you see us there.

If you’re looking to catch the event online, check out http://ted1.epresence.tv/webcast/ for a live stream. The show starts at 1pm, goes till 7pm.

You can also follow TEDxTO on Twitter: @TEDxTO or Facebook: Fan Page.

  Posted by Vivian on September 8th, 2009

5 Comments

4 Fears of @font-face

The future of web typography seems to be almost here with Firefox 3.5 supporting @font-face, making web-safe fonts a thing of the past. Through CSS3’s linking/embedding of any font file, @font-face opens the floodgates to the millions of font options available to designers. The design possibilities are extremely exciting, but in the coming @font-face infancy, we can likely expect a dark period of uglification.

1. Bad typography is too easy
2. Illegible and annoying sites
3. @font-face + CSS3 effects = disaster
4. Pirates and the shipwrecked

Bad typography is too easy

A lot of bad or amateur-looking print design is victim of poor type decisions paired with improper typographic finesse. With all the choice out there, why pick Papyrus or Hobo for a menu or brochure? It happens far too often in print and now it can happen easily online with @font-face. For every beautifully crafted typeface, there are probably 10 mediocre ones, and 25 really fugly ones; the odds are stacked against us, but hopefully designers will exercise restraint and common sense.

Illegible and annoying sites

@font-face has the potential to marry beautiful typography with usable, accessible, and indexable content, but there are also foreseeable legibility disasters in this free-for-all. One of the best things about web-safe fonts, such as Verdana and Georgia, is that they are fairly cross-platform reliable, and have proven legibility. With its large x-height, giant counters, and distinctly varied characters, Verdana was designed to be read easily on-screen at small sizes. However when used in print, it sometimes falls comically flat – look at how IKEA just screwed their print branding by using this traditionally web typeface.

Techniques like Cufón and sIFR are technologically hefty, often limiting use just to headline text. Since @font-face is lightweight enough to use throughout an entire site, paragraph text styled poorly in an awkward font can easily impede legibility and annoy users. It’s not worth sacrificing access to the content just to make something look nicer.

CSS3 effects + @font-face = the internet circa 1995

Pair a little cheesy text-shadowing with a “funky” typeface and the internet has been set back 15 years. There is probably never an online situation that calls for drop-shadowed, glowing, or flaming type; we’re talking web design, not cereal boxes. Like crappy flash intros, just because it exists, doesn’t mean it should be used. Let’s hope that clients don’t get a whiff of this one and start requesting it for home page headlines.

Pirates and the shipwrecked

Though it can be argued that pirates will always find a way to get what they want for free, why make it any easier to steal fonts? If used incorrectly, @font-face can offer up copyrighted font files for free. Solutions like Typekit are taking steps in the right direction, but there are bound to be inexperienced slip-ups at first. Browser compatibility issues with @font-face may also end up leaving users on older browsers behind, viewing (in theory) less typographically rich content. It will be fun watching the online typographic revolution unfold once copyright issues are resolved, and cross-browser support is ready. Hopefully @font-face will make the internet a more beautiful place, and not like a bunch of designers got drunk on the punch and barfed typefaces everywhere.

  Posted by Georges on September 2nd, 2009

19 Comments

Livin’ on the edge: Ruby, Rails, and Snow Leopard

Snow Leopard is out and I like having the latest and greatest, so I bought a new hard drive and clean installed Snow Leopard on it. This meant that I had the opportunity to reinstall my development environment with the benefit of a few years of experience and the advice of my fellow TWG’ers.

Here’s how I got my newly installed Snow Leopard up to speed for Rails development.

Ruby 1.9.1

First, I got Ruby up to date. Snow Leopard comes with Ruby 1.8.7 by default. There are many benefits to going with Ruby 1.9.1, so I went with that.

I wasn’t 100% ready to commit to Ruby 1.9.1, so I used rvm to manage my Ruby interpreters. Many gems aren’t ready for 1.9 prime-time, so I wanted the ability to drop back to Ruby 1.8 if this blew up in my face. For an overview of what is working under Ruby 1.9, check out isitruby19.com.

I installed rvm with:

Check out the rvm site for more information. There’s some great documentation there.

Next, I ran

to see all my installed Ruby interpreters. When you do this, you’ll see that the only Ruby installed is the system Ruby 1.8.7.

I ran ruby -v to see which Ruby was being used by default. I saw that I was using Ruby 1.8.7:

rvm will happily install and activate any version of Ruby you want.
I got it to install Ruby 1.9.1 with the following:

rvm will check to see if 1.9.1 is installed and, if it isn’t, it will download and install it for you. Once that is done, I ran rvm list again and now saw Ruby 1.9.1 listed as well as Snow Leopard system Ruby.

After that was complete, I ran rvm 1.9.1, and then ruby -v and saw that it worked:

But, I wanted Ruby 1.9.1 to be the default on my system. I got rvm to set that default by executing:

Now, the system is set to use Ruby 1.9.1 by default.

Side note: one of the neat features of rvm is that it can change your Ruby interpreter on-the-fly for you. This change isn’t permanent and only lasts for as long your Terminal session is open. For example, you can open one Terminal, execute ‘rvm system’, and have that Terminal use the Snow Leopard Ruby 1.8.7 while another one is running Ruby 1.9.1. This is very handy for compatibility testing.

MySQL

The next piece of the puzzle was MySQL. I have found that the best way to install packages like MySQL is via MacPorts.

If you haven’t done it yet, install MacPorts from here. There’s a package for Snow Leopard, so be sure to select that one.

The MacPorts MySQL package is called mysql5-server-devel, so I installed that:

MacPorts will handle all the dependencies and then install MySQL. I followed all the post-install steps that the installer recommended – start-up items, etc. The MySQL it installed is 64-bit, as it should be.

I then had to connect Ruby with MySQL and I needed the gem for that. To properly install the gem, I had to specify the architecture and the location of the mysql_config5 utility. The arch setting ensured that I got a 64-bit gem to go along with my new 64-bit MySQL installation.

Ruby Gems

I then ran gem list to see what gems I had installed. If you do this, you’ll see what I saw: not much. This makes a lot of sense because gems are installed relative to the version of Ruby they were installed with. So, all the gems that Snow Leopard had installed for Ruby 1.8.7 are no longer around for use. It was at this point that I was happy I used rvm. I dropped back to 1.8.7, got the list of installed gems and proceeded to re-install them under Ruby 1.9. But, dear reader, you don’t need to do this! Here’s how to get back to the default Snow Leopard gems under Ruby 1.9:

This’ll take a while. Go grab a coffee. Run around the block. Do something fun.

If any of these fail for you, check out isitruby19.com for tips on how to get it working.

Passenger

The next piece I needed was Passenger aka mod_rails. I needed version 2.2.5 (newest as of writing) for this to all work together. I installed it with:

This retrieved and compiled Passenger 2.2.5 for me. It might get a newer version for you. Once that completed, I ran:

The Passenger module depends on your current Ruby version, so you have to re-compile Passenger if you change your Ruby version. It is important that the Passenger compilation properly links with the Ruby interpreter you want to use. In this case, that’s Ruby 1.9.1.

When you do this the Passenger installation, double-check the paths that the Passenger compilation process outputs and ensure that it is properly finding the Ruby 1.9.1 installed in your .rvm directory. If you see paths that don’t go to .rvm in your home directory, then it is doing it wrong. If this happens, ensure that rvm is set to use 1.9.1 by default and try again.

Next, I edited my httpd.conf just as the Passenger installer recommended. I opened it up with open /etc/apache2/httpd.conf and pasted in the Passenger lines.

The Passenger Preference Pane makes everything easier, so definitely wanted that.
I got lucky and found that it had just been updated to support Snow Leopard, so make sure you get version 1.3 or greater.

Taa daa!

That’s it!
Set up a Rails project in the Passenger Preference Pane and try it out! You should see your fully functional Rails app running.