Learning From Competition by Marco Arment

Marco Arment on the release of Readability, fonts and his product Instapaper.

« Reacting well to competition requires critical analysis of your own product and its shortcomings, and a complete, open-minded understanding of why people might choose your competitors. »

He’s now actively working on integrating quality fonts in his app. Competition is always good for consumers. It pushes things forward.

iCloud Missing Hovers and Link Cursors

When MobileMe was first released, I managed to play around briefly using a friend’s account (I never owned one). I was curious to see the apps in action.

The main thing that caught my attention was the lack of any link cursor around the interfaces. It felt as if everything was static and non-clickable. That, and the missing hover state on the buttons. I thought this would be fixed shortly, but never managed to see how it progressed as time went by.

No need to tell you how high my expectations were for iCloud’s web apps.

Sadly, they’re still broken.

iCloud Mail Screenshot with Broken Behaviour

The screenshot above from iCloud’s Mail is a good example of elements that should have both hover states and link cursors. They’re all clickable, yet currently appear to be static. The iCloud and Refresh icons do have hover states but no appropriate cursor.

Same goes for the Contacts and Calendar apps.

Surprisingly, the dashboard where the large apps icons are displayed features link cursors. But no hover state love for them.

KNOW THE AUDIENCE

iCloud web apps are used by desktop users. You can’t log in to these apps within Safari using an iOS device. Therefore, mouses and trackpads are the main inputs.

What’s the most useful interactive feedback you can provide to a mouse or trackpad user?

A hover state and a link cursor.

Yet, they are almost nowhere to be seen in the apps.

All buttons have an active (pressed) state. They prioritized active states over hover states, as if the iOS users were the main audience for these web apps.

They’re not.

iCloud Mail Screenshot of Fixed Behaviour

Pictured above is an example of a fixed interactive behaviour.

So please, Apple, add the proper hover states and link cursors to your iCloud’s interfaces. The apps will look much more responsive and enjoyable than a static image as it currently behave.

Switching Email from Google Apps to FastMail

Updated on February 27th 2012, see bottom of this post.

I finally decided to quit Google Apps as my email provider. After exploring and analyzing alternatives, I finally settled with FastMail.

Google Apps was powering my mailbox for the past 3 years. I’ve never experienced any issues or significant downtime. The technical side was not the reason of the divorce.

Google’s products are usually awesome : Gmail, Reader, Docs, Translate, etc. They all work like a charm and look gorgeous with the recent UI overhaul.

But I don’t trust Google as a company.

My mailbox is very important to me and I’m sure you feel the same about yours. I wouldn’t ask anyone I don’t trust to take care of any precious personal items.

Same goes for my emails.

It was a logical step to move them out of Google’s grasp. Thus began the search for the perfect email hosting service supporting custom domains.

THE ALTERNATIVES

The popular alternatives were the following :

I expect a very high uptime for my mailbox. One running on a shared web hosting plan, VPS or dedicated server was not an option. I don’t want to spend time managing the server side of my mailbox. They all fail once in a while, whatever the company and/or setup. It’s also more expensive.

Feel free to let me know about any services I missed. I’d love to expand the list because I found the options to be quite limited.

It seems Media Temple is cooking a new email service. Check the Media Temple Product Roadmap for details.

FASTMAIL.FM

I ended signing-up for FastMail after reading Marco Arment’s recommendation of this service.

FastMail is now owned by Opera. They are experimented, apparently stable — still early to judge but their pingdom is available to the public — easy to setup, well documented, etc.

Fastmail Screenshot : Compose

The interface is oldschool, don’t expect anything like Gmail. Although, I found it to be working just fine for handling configuration, aliases, domains, etc. I always use Apple Mail under OSX or iOS anyway.

I had to contact the support team once after signing-up and received an answer in about 24 hours. I was expecting faster but that’s a normal time-frame for support I believe.

The Personal Enhanced plan starts at US$39.95 per year. Less than $3.50 per month. This allows unlimited custom domains.

Fastmail Screenshot : Preferences

Custom (Virtual) Domains

It’s very easy to setup. You can be up-and-running within 5 minutes if you force your domain’s DNS settings (MX in this case) at your registrar to refresh at this rate. Full propagation will of course take 24-48 hours as usual. This means some emails might end up on Google Apps’ side while others on Fastmail’s side during that time.

It is worth noting that custom domains at FastMail are handled as virtual domains. This means that you will only have one mailbox — username@fastmail.fm — and all your configured aliases and domains will direct to this mailbox.

Unlike Google Apps, you cannot create mailboxes for other users. If you need this kind of feature, you must go with the Family or Business plans.

This can be an issue for some people, depending on your email client. Let me try to summarize why :

When you wish to send emails from one of your custom domain — username@mydomain.com — you will need to configure your email client to use this address in the From field of your emails.

If you have multiple domains and you want to be able to send from each of them within Apple Mail for example, you can add multiple entries to the From field of your account configuration by putting a comma in-between such at username@mydomain1.com, username@mydomain2.com, username@mydomain3.com, and so on.

After, you simply select the email to send from within the new message window.

Unfortunately, you cannot define multiple names (personnalities) in Apple Mail. Whatever domain you choose to send the email from, the same name specified in the account settings will appear as the sender.

Some email clients — such as Postbox — support multiple personnalities.

To setup multiple domains to use in iPhone’s Mail, you can enter the domains into the Address field inside your IMAP Account preferences. You must separate each domain by a comma (see the example for Mail.app on OSX above). The problem is that the comma character doesn’t appear on the keyboard for this input. You will have to manually Copy & Paste it from another field to this one.

Overall — even though it sounds complicated — the whole setup is fast and easy. Just take the time to read the Help provided and you’ll be fine.

Migration

Fastmail Screenshot : Migrate

FastMail offers a migration tool that will fetch any IMAP mailbox and transfer emails from your current/previous provider to your new account. Migrating from Google Apps to FastMail was done in about an hour for approximately 2GB of emails. It works in the background and notify you by email once it’s ready.

CONCLUSION

Until now, FastMail is proving to be the right choice. I also feel much better knowing my mailbox is free from ads and into trust-worthy hands. That I pay for.

You can always create a free account on FastMail and try things out yourself to see if it fits you. Unfortunately, you won’t be able to see the domains management feature until you upgrade to the Personal Enhanced plan. If you do so, feel free to use my referral code so I get a tiny kickback.

UPDATE (February 27th 2012)

It’s been many months since the switch. According to the traffic generated by this post, it seems a lot of people are considering FastMail as an alternative to Google Apps. I thought I’d post a quick update.

I’ve been extremely satisfied with FastMail in the past months. I have yet to see any downtime.

They are also testing a new webmail UI (in beta) to improve the look of the aging one. Don’t expect anything near Gmail’s interface though.

I do have to mention the only downside : I’m receiving a bit more spam in my inbox. Maybe 2 or 3 a week (but sometimes 0). It used to be none when using Google Apps.

So for all of you investigating on FastMail, I am most definitely recommending it.

Why jQuery Masonry is Hurting Your Content

jQuery Masonry was introduced in early 2009. Since then, numerous sites — galleries, magazines, blogs — opted for this technique to display their intensive content. The objective behind Masonry is to eliminate blank areas as much as possible, therefore displaying more content to visitors in a restricted canvas.

Unfortunately, jQuery Masonry is hurting your content.

This is what a typical visitor’s view flow looks like on a site displaying its content with this style of layout :

jQuery Masonry View Flow Example

Notice how your focus bounce around the items and inevitably have you miss part of the content.

And this is what a more regular view flow looks without the use of Masonry :

Regular View Flow Example

THE GOOD

There is no doubt that Masonry can be extremely useful when used properly. The Tumblr’s archive page — see The Unfamiliar’s Archive for example — is a perfect match :

Tumblr's Archive Screenshot

Note : I’m not certain that Tumblr’s archive page is actually powered by Masonry. It was meant as a visual example.

In this case, it allows you to flow around the content and get an idea of what was published in the past. If you need to find a very specific post, the search bar is positionned at the top.

The important part of this good use is that the archive is a secondary way to browse the content. The primary source does not rely on this overflow.

THE BAD

Now take a moment to visit the current AIGA website. Here’s a screenshot of the site, for reference :

AIGA Website Screenshot

I bet you reached the footer of the site and paid attention to no more than 25% of the content. The rest flowed through your vision but you did not focus on it.

It’s a complete disaster for all the members trying to get their content noticed on the front-page whether it’s an article, portfolio showcase, job offer, sponsorship, etc.

CONCLUSION

You spend hours creating your content, the last thing you want is to display a limited showcase of your work.

If you’re content is important to you and your visitors, get rid of Masonry as your primary display mode.

Requiem for Proper Pagination

This is a case against inverted pagination.

You’re visiting a new site. You reach the end of the first page and arrive at the inevitable pagination. There is an Older action link on the left side to direct you to older (previous) posts. There is no hesitation in your click, as it is the only available link.

You scroll down the second page to reach the pagination. Once again, Older is displayed on the left side but an additional action link, Newer, appeared on the right side. Unfortunately, all these years of clicking the Next located on the bottom right side come back in force (see Google, Amazon, Flickr). You in-adversely go for the Newer on the right side. It sends you back to the homepage. You are now 2 clicks away from your desired destination.

Example of this problematic pagination (as if currently viewing page 2) :

« Older | Newer »
Older sends you to page 3, Newer sends you to page 1

Also notice how both words, Next and Newer, starts with the two letters Ne to accentuate the conflict.

Let’s call this inverted pagination style The Diary. It evolves around the concept that the most recent page is at the end of the book, just like a diary. To see previous entries, you flip back pages by reaching the bottom left corner. This is why, in this pagination style, the Older link is located on the left.

If you really want your website to reflect this diary analogy though, shouldn’t your most recent content be the last page within the archive? You obviously want your readers to follow a story — like a diary — therefore viewing the oldest entries first; until you reach the most recent one.

I’m trying to find a proper explanation for using this broken pagination style.

But none of it makes sense.

The Pile of Paper analogy is the proper one and the classic. The most recent paper sheet goes on top of the pile. To view older sheets, your hand goes toward the bottom right corner to flip through pages. See the link with the interactive behaviour? Bottom right corner.

Examples of proper pagination (as if currently viewing page 2) :

« Newer | Older »
Newer sends you to page 1, Older sends you to page 3

« Previous | Next »
Previous sends you to page 1, Next sends you to page 3

Always put the action that sends you further into archive on the right side.

All search engines, blogs, stores and such have been designed like this for years. I previously listed Google, Amazon and Flickr as examples. It is now a cognitive behaviour for all of us. It’s a standard, and a rightful one. Whether you decide to experiment with the words is your choice; but I’m going to suggest sticking with the familiar Previous & Next.

UPDATE

Harry Roberts — CSS Wizardry and inuit.css — was kind enough to share his thoughts on the subject :

The usual paradigm is that progression is next, travelling right. I presume this is because we’re a left-to-right society.

Archive pagination is not progression, it’s regression (in time). It’s like the browser’s back button. You rarely go forward in time (your browsing session) unless you’ve previously gone back.

Google et al aren’t paginating on time, they’re paginating on relevance, so it’s sensible that you progress to the next page of results.

I have to admit that this is a solid argument regarding a time versus relevance pagination.

Does this means a site like Flickr or Dribbble — which got proper pagination by using the words Newer and Older in right order — should be using a regression (inverted) pagination style? Pictures in a photostream are listed using a time order, yet the pagination used reflects the one of relevance. What about the many other sites using a classic pagination regardless of the time or relevance scheme? Should this time-based inverted pagination be used only for blogs?

Is this the dawn of a new standard : time versus relevance?

How long will it take for the whole community to adopt it? Is this solving a navigation problem for most users or is it creating one by dividing a cognitive pattern?

Obviously there is a lot of questions yet to be answered.

For the moment, I rest my case.