<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Vincent Gosselin's Blog</title>
	
	<link>http://blog.vincentgosselin.ca</link>
	<description />
	<lastBuildDate>Fri, 09 Mar 2012 17:15:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/vincentgosselin" /><feedburner:info uri="vincentgosselin" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:browserFriendly></feedburner:browserFriendly><item>
		<title>Learning From Competition by Marco Arment</title>
		<link>http://blog.vincentgosselin.ca/2012/learning-from-competition-by-marco-arment/</link>
		<comments>http://blog.vincentgosselin.ca/2012/learning-from-competition-by-marco-arment/#comments</comments>
		<pubDate>Fri, 09 Mar 2012 17:14:12 +0000</pubDate>
		<dc:creator>Vincent Gosselin</dc:creator>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[competition]]></category>
		<category><![CDATA[competitor]]></category>
		<category><![CDATA[instapaper]]></category>
		<category><![CDATA[learning]]></category>
		<category><![CDATA[readability]]></category>

		<guid isPermaLink="false">http://blog.vincentgosselin.ca/?p=197</guid>
		<description><![CDATA[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. » &#8230; <a href="http://blog.vincentgosselin.ca/2012/learning-from-competition-by-marco-arment/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a title="Learning from competition" href="http://www.marco.org/2012/03/08/learning-from-competition">Marco Arment</a> on the release of <a href="http://www.readability.com">Readability</a>, fonts and his product <a href="http://www.instapaper.com/">Instapaper</a>.</p>
<blockquote><p>« 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. »</p></blockquote>
<p>He&#8217;s now actively working on integrating quality fonts in his app. Competition is always good for consumers. It pushes things forward.</p>
<div id="tweetbutton197" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fblog.vincentgosselin.ca%2F2012%2Flearning-from-competition-by-marco-arment%2F&amp;via=vincentgosselin&amp;text=Learning%20From%20Competition%20by%20Marco%20Arment&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fblog.vincentgosselin.ca%2F2012%2Flearning-from-competition-by-marco-arment%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://blog.vincentgosselin.ca/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vincentgosselin.ca/2012/learning-from-competition-by-marco-arment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iCloud Missing Hovers and Link Cursors</title>
		<link>http://blog.vincentgosselin.ca/2011/icloud-missing-hovers-and-link-cursors/</link>
		<comments>http://blog.vincentgosselin.ca/2011/icloud-missing-hovers-and-link-cursors/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 13:54:26 +0000</pubDate>
		<dc:creator>Vincent Gosselin</dc:creator>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[feedback]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[icloud]]></category>
		<category><![CDATA[mobile me]]></category>

		<guid isPermaLink="false">http://blog.vincentgosselin.ca/?p=135</guid>
		<description><![CDATA[When MobileMe was first released, I managed to play around briefly using a friend&#8217;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 &#8230; <a href="http://blog.vincentgosselin.ca/2011/icloud-missing-hovers-and-link-cursors/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When MobileMe was first released, I managed to play around briefly using a friend&#8217;s account (I never owned one). I was curious to see the apps in action.</p>
<p>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.</p>
<p>No need to tell you how high my expectations were for iCloud&#8217;s web apps.</p>
<p>Sadly, they&#8217;re still broken.</p>
<p><img class="alignnone size-full wp-image-155" title="iCloud Mail Screenshot (Current)" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/10/icloud-web-apps-current.jpg" alt="iCloud Mail Screenshot with Broken Behaviour" width="500" height="262" /></p>
<p>The screenshot above from iCloud&#8217;s Mail is a good example of elements that should have both hover states and link cursors. They&#8217;re all clickable, yet currently appear to be static. The iCloud and Refresh icons do have hover states but no appropriate cursor.</p>
<p>Same goes for the Contacts and Calendar apps.</p>
<p>Surprisingly, the dashboard where the large apps icons are displayed features link cursors. But no hover state love for them.</p>
<p><strong>KNOW THE AUDIENCE</strong></p>
<p>iCloud web apps are used by desktop users. You can&#8217;t log in to these apps within Safari using an iOS device. Therefore, mouses and trackpads are the main inputs.</p>
<p>What&#8217;s the most useful interactive feedback you can provide to a mouse or trackpad user?</p>
<p>A hover state and a link cursor.</p>
<p>Yet, they are almost nowhere to be seen in the apps.</p>
<p>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.</p>
<p>They&#8217;re not.</p>
<p><img class="alignnone size-full wp-image-156" title="iCloud Mail Screenshot (Fixed)" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/10/icloud-web-apps-fixed.jpg" alt="iCloud Mail Screenshot of Fixed Behaviour" width="500" height="262" /></p>
<p>Pictured above is an example of a fixed interactive behaviour.</p>
<p>So please, Apple, add the proper hover states and link cursors to your iCloud&#8217;s interfaces. The apps will look much more responsive and enjoyable than a static image as it currently behave.</p>
<div id="tweetbutton135" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Ficloud-missing-hovers-and-link-cursors%2F&amp;via=vincentgosselin&amp;text=iCloud%20Missing%20Hovers%20and%20Link%20Cursors&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Ficloud-missing-hovers-and-link-cursors%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://blog.vincentgosselin.ca/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vincentgosselin.ca/2011/icloud-missing-hovers-and-link-cursors/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Switching Email from Google Apps to FastMail</title>
		<link>http://blog.vincentgosselin.ca/2011/switching-email-from-google-apps-to-fastmail/</link>
		<comments>http://blog.vincentgosselin.ca/2011/switching-email-from-google-apps-to-fastmail/#comments</comments>
		<pubDate>Thu, 29 Sep 2011 00:03:54 +0000</pubDate>
		<dc:creator>Vincent Gosselin</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[email]]></category>
		<category><![CDATA[fastmail]]></category>
		<category><![CDATA[google apps]]></category>
		<category><![CDATA[imap]]></category>
		<category><![CDATA[migration]]></category>

		<guid isPermaLink="false">http://blog.vincentgosselin.ca/?p=98</guid>
		<description><![CDATA[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 &#8230; <a href="http://blog.vincentgosselin.ca/2011/switching-email-from-google-apps-to-fastmail/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><em>Updated on February 27th 2012, see bottom of this post.</em></p>
<p>I finally decided to quit Google Apps as my email provider. After exploring and analyzing alternatives, I finally settled with <a title="Fastmail" href="http://www.fastmail.fm/?STKI=6333577">FastMail</a>.</p>
<p>Google Apps was powering my mailbox for the past 3 years. I&#8217;ve never experienced any issues or significant downtime. The technical side was not the reason of the divorce.</p>
<p>Google&#8217;s products are usually awesome : Gmail, Reader, Docs, Translate, etc. They all work like a charm and look gorgeous with the recent UI overhaul.</p>
<p>But I don&#8217;t trust Google as a company.</p>
<p>My mailbox is very important to me and I&#8217;m sure you feel the same about yours. I wouldn&#8217;t ask anyone I don&#8217;t trust to take care of any precious personal items.</p>
<p>Same goes for my emails.</p>
<p>It was a logical step to move them out of Google&#8217;s grasp. Thus began the search for the perfect email hosting service supporting custom domains.</p>
<p><strong>THE ALTERNATIVES</strong></p>
<p>The popular alternatives were the following :</p>
<ul>
<li><a title="Fastmail" href="http://www.fastmail.fm/?STKI=6333577">FastMail.fm</a></li>
<li><a href="http://www.rackspace.com/apps/email_hosting/rackspace_email/">Rackspace Email Hosting</a></li>
<li><a title="Fusemail" href="http://www.fusemail.com">FuseMail</a></li>
<li><a title="Runbox" href="http://www.runbox.com">Runbox</a></li>
<li><del>Microsoft Office 365</del> Just kidding</li>
</ul>
<p>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.</p>
<p>Feel free to let me know about any services I missed. I&#8217;d love to expand the list because I found the options to be quite limited.</p>
<p>It seems Media Temple is cooking a new email service. Check the <a href="http://mediatemple.net/roadmap/">Media Temple Product Roadmap</a> for details.</p>
<p><strong>FASTMAIL.FM</strong></p>
<p>I ended signing-up for FastMail after reading <a title="Let us pay for this service so it won’t go down - by Marco Arment" href="http://www.marco.org/2011/04/05/let-us-pay-for-this-service-so-it-wont-go-down">Marco Arment&#8217;s recommendation</a> of this service.</p>
<p>FastMail is now owned by <a title="Opera" href="http://www.opera.com/">Opera</a>. They are experimented, apparently stable — still early to judge but their <a title="Fastmail's Pingdom" href="http://stats.pingdom.com/x8mbe1jgimkn">pingdom is available</a> to the public — easy to setup, well documented, etc.</p>
<p><img class="size-full wp-image-107" title="Fastmail Screenshot : Compose" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/09/fastmail-screenshot-compose.jpg" alt="Fastmail Screenshot : Compose" width="500" height="298" /></p>
<p>The interface is oldschool, don&#8217;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.</p>
<p>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&#8217;s a normal time-frame for support I believe.</p>
<p>The Personal Enhanced plan starts at US$39.95 per year. Less than $3.50 per month. This allows unlimited custom domains.</p>
<p><img class="alignnone size-full wp-image-120" title="Fastmail Screenshot : Preferences" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/09/fastmail-screenshot-preferences.jpg" alt="Fastmail Screenshot : Preferences" width="500" height="298" /></p>
<p><strong>Custom (Virtual) Domains</strong></p>
<p>It&#8217;s very easy to setup. You can be up-and-running within 5 minutes if you force your domain&#8217;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&#8217; side while others on Fastmail&#8217;s side during that time.</p>
<p>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.</p>
<p>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.</p>
<p>This can be an issue for some people, depending on your email client. Let me try to summarize why :</p>
<p>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 <em>From</em> field of your emails.</p>
<p>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 <em>From</em> 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.</p>
<p>After, you simply select the email to send from within the new message window.</p>
<p>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.</p>
<p>Some email clients — such as <a title="Postbox for Mac and Windows" href="http://www.postbox-inc.com/">Postbox</a> — support multiple personnalities.</p>
<p>To setup multiple domains to use in iPhone&#8217;s Mail, you can enter the domains into the <em>Address</em> 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&#8217;t appear on the keyboard for this input. You will have to manually Copy &amp; Paste it from another field to this one.</p>
<p>Overall — even though it sounds complicated — the whole setup is fast and easy. Just take the time to read the <a title="Fastmail's Help" href="http://www.fastmail.fm/help/">Help</a> provided and you&#8217;ll be fine.</p>
<p><strong>Migration</strong></p>
<p><img class="alignnone size-full wp-image-114" title="Fastmail Screenshot : Migrate" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/09/fastmail-screenshot-migrate.jpg" alt="Fastmail Screenshot : Migrate" width="500" height="298" /></p>
<p>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&#8217;s ready.</p>
<p><strong>CONCLUSION</strong></p>
<p>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.</p>
<p>You can always create a free account on FastMail and try things out yourself to see if it fits you. Unfortunately, you won&#8217;t be able to see the domains management feature until you upgrade to the Personal Enhanced plan. If you do so, feel free to <a title="Fastmail" href="http://www.fastmail.fm/?STKI=6333577">use my referral code</a> so I get a tiny kickback.</p>
<p><strong>UPDATE (February 27th 2012)</strong></p>
<p>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.</p>
<p>I’ve been extremely satisfied with FastMail in the past months. I have yet to see any downtime.</p>
<p>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.</p>
<p>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.</p>
<p>So for all of you investigating on FastMail, I am most definitely recommending it.</p>
<div id="tweetbutton98" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Fswitching-email-from-google-apps-to-fastmail%2F&amp;via=vincentgosselin&amp;text=Switching%20Email%20from%20Google%20Apps%20to%20FastMail&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Fswitching-email-from-google-apps-to-fastmail%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://blog.vincentgosselin.ca/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vincentgosselin.ca/2011/switching-email-from-google-apps-to-fastmail/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why jQuery Masonry is Hurting Your Content</title>
		<link>http://blog.vincentgosselin.ca/2011/why-jquery-masonry-is-hurting-your-content/</link>
		<comments>http://blog.vincentgosselin.ca/2011/why-jquery-masonry-is-hurting-your-content/#comments</comments>
		<pubDate>Fri, 22 Jul 2011 02:07:32 +0000</pubDate>
		<dc:creator>Vincent Gosselin</dc:creator>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[content]]></category>
		<category><![CDATA[flow]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[masonry]]></category>
		<category><![CDATA[view]]></category>

		<guid isPermaLink="false">http://blog.vincentgosselin.ca/?p=29</guid>
		<description><![CDATA[<a href="http://masonry.desandro.com/">jQuery Masonry</a> 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. <a href="http://blog.vincentgosselin.ca/2011/why-jquery-masonry-is-hurting-your-content/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://masonry.desandro.com/">jQuery Masonry</a> 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.</p>
<p>Unfortunately, jQuery Masonry is hurting your content.</p>
<p>This is what a typical visitor&#8217;s view flow looks like on a site displaying its content with this style of layout :</p>
<p><img class="alignnone size-full wp-image-49" title="Viewflow_Masonry" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/07/Viewflow_Masonry.png" alt="jQuery Masonry View Flow Example" width="500" height="576" /></p>
<p>Notice how your focus bounce around the items and inevitably have you miss part of the content.</p>
<p>And this is what a more regular view flow looks without the use of Masonry :</p>
<p><img class="alignnone size-full wp-image-37" title="Viewflow_Regular" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/07/Viewflow_Regular.png" alt="Regular View Flow Example" width="500" height="576" /></p>
<p><strong>THE GOOD</strong></p>
<p>There is no doubt that Masonry can be extremely useful when used properly. The Tumblr&#8217;s archive page — see <a href="http://unfamiliar.ca/archive">The Unfamiliar&#8217;s Archive</a> for example — is a perfect match :</p>
<p><a href="http://unfamiliar.ca/archive"><img class="alignnone size-full wp-image-54" title="Tumblr-Archive-Screenshot" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/07/Tumblr-Archive-Screenshot.png" alt="Tumblr's Archive Screenshot" width="500" height="394" /></a></p>
<p><em>Note : I&#8217;m not certain that Tumblr&#8217;s archive page is actually powered by Masonry. It was meant as a visual example.</em></p>
<p>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.</p>
<p>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.</p>
<p><strong>THE BAD</strong></p>
<p>Now take a moment to visit the current <a href="http://www.aiga.org/">AIGA</a> website. Here&#8217;s a screenshot of the site, for reference :</p>
<p><a href="http://www.aiga.org/"><img class="alignnone size-full wp-image-30" title="AIGA-Website-Screenshot" src="http://blog.vincentgosselin.ca/wp-content/uploads/2011/07/AIGA-Website-Screenshot.jpg" alt="AIGA Website Screenshot" width="500" height="650" /></a></p>
<p>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.</p>
<p>It&#8217;s a complete disaster for all the members trying to get their content noticed on the front-page whether it&#8217;s an article, portfolio showcase, job offer, sponsorship, etc.</p>
<p><strong>CONCLUSION</strong></p>
<p>You spend hours creating your content, the last thing you want is to display a limited showcase of your work.</p>
<p>If you&#8217;re content is important to you and your visitors, get rid of Masonry as your primary display mode.</p>
<div id="tweetbutton29" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Fwhy-jquery-masonry-is-hurting-your-content%2F&amp;via=vincentgosselin&amp;text=Why%20jQuery%20Masonry%20is%20Hurting%20Your%20Content&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Fwhy-jquery-masonry-is-hurting-your-content%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://blog.vincentgosselin.ca/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vincentgosselin.ca/2011/why-jquery-masonry-is-hurting-your-content/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Requiem for Proper Pagination</title>
		<link>http://blog.vincentgosselin.ca/2011/requiem-for-proper-pagination/</link>
		<comments>http://blog.vincentgosselin.ca/2011/requiem-for-proper-pagination/#comments</comments>
		<pubDate>Wed, 15 Jun 2011 01:50:33 +0000</pubDate>
		<dc:creator>Vincent Gosselin</dc:creator>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[browsing]]></category>
		<category><![CDATA[pagination]]></category>

		<guid isPermaLink="false">http://blog.vincentgosselin.ca/?p=8</guid>
		<description><![CDATA[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 &#8230; <a href="http://blog.vincentgosselin.ca/2011/requiem-for-proper-pagination/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>This is a case against inverted pagination.</p>
<p>You’re visiting a new site. You reach the end of the first page and arrive at the inevitable pagination. There is an <em>Older</em> 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.</p>
<p>You scroll down the second page to reach the pagination. Once again, <em>Older</em> is displayed on the left side but an additional action link, <em>Newer</em>, appeared on the right side. Unfortunately, all these years of clicking the Next located on the bottom right side come back in force (see <a href="http://www.google.com">Google</a>, <a href="http://www.amazon.com">Amazon</a>, <a href="http://www.flickr.com">Flickr</a>). You in-adversely go for the <em>Newer</em> on the right side. It sends you back to the homepage. You are now 2 clicks away from your desired destination.</p>
<p>Example of this problematic pagination (as if currently viewing page 2) :</p>
<p>« Older | Newer »<br />
<em>Older</em> sends you to page 3, <em>Newer</em> sends you to page 1</p>
<p>Also notice how both words, <em>Next</em> and <em>Newer</em>, starts with the two letters <em>Ne</em> to accentuate the conflict.</p>
<p>Let’s call this inverted pagination style <em>The Diary</em>. 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 <em>Older</em> link is located on the left.</p>
<p>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.</p>
<p>I&#8217;m trying to find a proper explanation for using this broken pagination style.</p>
<p>But none of it makes sense.</p>
<p>The <em>Pile of Paper</em> 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.</p>
<p>Examples of proper pagination (as if currently viewing page 2) :</p>
<p>« Newer | Older »<br />
<em>Newer</em> sends you to page 1, <em>Older</em> sends you to page 3</p>
<p>« Previous | Next »<br />
<em>Previous</em> sends you to page 1, <em>Next</em> sends you to page 3</p>
<p><strong>Always put the action that sends you further into archive on the right side.<br />
</strong><br />
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&#8217;s a standard, and a rightful one. Whether you decide to experiment with the words is your choice; but I&#8217;m going to suggest sticking with the familiar <em>Previous</em> &amp; <em>Next</em>.</p>
<p><strong>UPDATE</strong></p>
<p>Harry Roberts — <a href="http://csswizardry.com/">CSS Wizardry</a> and <a href="http://csswizardry.com/inuitcss/">inuit.css</a> — was kind enough to share his thoughts on the subject :</p>
<blockquote><p>The usual paradigm is that progression is next, travelling right. I presume this is because we&#8217;re a left-to-right society.</p>
<p>Archive pagination is not progression, it&#8217;s regression (in time). It&#8217;s like the browser&#8217;s back button. You rarely go forward in time (your browsing session) unless you&#8217;ve previously gone back.</p>
<p>Google et al aren&#8217;t paginating on time, they&#8217;re paginating on relevance, so it&#8217;s sensible that you progress to the next page of results.</p></blockquote>
<p>I have to admit that this is a solid argument regarding a time versus relevance pagination.</p>
<p>Does this means a site like <a href="http://www.flickr.com">Flickr</a> or <a href="http://www.dribbble.com">Dribbble</a> — 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?</p>
<p>Is this the dawn of a new standard : time versus relevance?</p>
<p>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?</p>
<p>Obviously there is a lot of questions yet to be answered.</p>
<p>For the moment, I rest my case.</p>
<div id="tweetbutton8" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Frequiem-for-proper-pagination%2F&amp;via=vincentgosselin&amp;text=Requiem%20for%20Proper%20Pagination&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fblog.vincentgosselin.ca%2F2011%2Frequiem-for-proper-pagination%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://blog.vincentgosselin.ca/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vincentgosselin.ca/2011/requiem-for-proper-pagination/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss><!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching using disk: basic
Object Caching 541/676 objects using disk: basic

Served from: blog.vincentgosselin.ca @ 2012-05-30 02:54:27 -->

