
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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/"
	>

<channel>
	<title>blog.tom-haynes.com</title>
	<atom:link href="http://blog.tom-haynes.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.tom-haynes.com</link>
	<description>Just another WordPress site</description>
	<lastBuildDate>Fri, 13 Jan 2012 20:14:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Spinners</title>
		<link>http://blog.tom-haynes.com/2012/01/spinners/</link>
		<comments>http://blog.tom-haynes.com/2012/01/spinners/#comments</comments>
		<pubDate>Fri, 13 Jan 2012 19:55:24 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[android]]></category>

		<guid isPermaLink="false">http://blog.tom-haynes.com/?p=253456751</guid>
		<description><![CDATA[I just read through the new Android Design guidelines and on the whole they&#8217;re thoughtful and well-designed. But why have they renamed dropdowns &#8220;spinners&#8221;? This is confusing me.]]></description>
			<content:encoded><![CDATA[<p>I just read through the new <a href="http://developer.android.com/design/index.html">Android Design</a> guidelines and on the whole they&#8217;re thoughtful and well-designed.</p>
<p>But why have they renamed dropdowns &ldquo;<a href="http://developer.android.com/design/building-blocks/spinners.html">spinners</a>&rdquo;?</p>
<p><img src="http://blog.tom-haynes.com/wp-content/uploads/2012/01/spinners.png" alt="Spinners" title="spinners.png" border="0" width="540" height="247" /></p>
<p>This is confusing me.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2012/01/spinners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fancy data structures</title>
		<link>http://blog.tom-haynes.com/2012/01/fancy-data-structures/</link>
		<comments>http://blog.tom-haynes.com/2012/01/fancy-data-structures/#comments</comments>
		<pubDate>Fri, 06 Jan 2012 18:56:46 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Joel Spolsky]]></category>

		<guid isPermaLink="false">http://blog.tom-haynes.com/?p=253456747</guid>
		<description><![CDATA[Joel Spolsky explains something I&#8217;ve always thought but never put into words: Spreadsheets are not just tools for doing “what-if” analysis. They provide a specific data structure: a table. Most Excel users never enter a formula. They use Excel when they need a table. The gridlines are the most important feature of Excel, not recalc. [...]]]></description>
			<content:encoded><![CDATA[<p>Joel Spolsky <a href="http://www.joelonsoftware.com/items/2012/01/06.html">explains something I&#8217;ve always thought but never put into words</a>:</p>
<blockquote><p>Spreadsheets are not just tools for doing “what-if” analysis. They provide a specific data structure: a table. Most Excel users never enter a formula. They use Excel when they need a table. The gridlines are the most important feature of Excel, not recalc.</p>
<p>Word processors are not just tools for writing books, reports, and letters. They provide a specific data structure: lines of text which automatically wrap and split into pages.</p>
<p>PowerPoint is not just a tool for making boring meetings. It provides a specific data structure: an array of full-screen images.</p></blockquote>
<p>Add in a pinch of real-time collaboration and you&#8217;ll see why Google Docs is so popular. I&#8217;ve used shared spreadsheets to collaboratively plan carpools, update sports rosters, track workouts, share menus, and much more, none of which has to do with math.</p>
<p>Spreadsheet software needs to embrace this and add functions to support it. We need an easy way of counting filled-in cells that isn&#8217;t the obscurely named COUNTIF(), and easy ways of applying background colors that are a function of cell contents (e.g. 1 is white, 100 is black, and everything else is a shade of grey between).</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2012/01/fancy-data-structures/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2011</title>
		<link>http://blog.tom-haynes.com/2011/12/2011/</link>
		<comments>http://blog.tom-haynes.com/2011/12/2011/#comments</comments>
		<pubDate>Sun, 25 Dec 2011 01:46:45 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[personal]]></category>
		<category><![CDATA[photos]]></category>

		<guid isPermaLink="false">http://blog.tom-haynes.com/?p=253456724</guid>
		<description><![CDATA[My year in photos. January February March April May June July August September October November December* * Jules took this one]]></description>
			<content:encoded><![CDATA[<style type="text/css">
.month {
  float: left;
  width: 265px;
  height: 265px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.month.even {
  margin-right: 0;
}
.month-text {
  left: 7px;
  bottom: 5px;
  position: absolute;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px black;
}
</style>
<p>My year in photos.</p>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Jan.jpg" alt="January" title="Jan.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">January</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Feb.jpg" alt="February" title="Feb.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">February</div>
</div>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Mar.jpg" alt="March" title="Mar.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">March</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Apr.jpg" alt="April" title="Apr.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">April</div>
</div>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/May.jpg" alt="May" title="May.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">May</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Jun1.jpg" alt="June" title="Jun.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">June</div>
</div>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Jul.jpg" alt="July" title="Jul.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">July</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Aug.jpg" alt="August" title="Aug.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">August</div>
</div>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Sep.jpg" alt="September" title="Sep.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">September</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Oct.jpg" alt="October" title="Oct.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">October</div>
</div>
<div class="month">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Nov.jpg" alt="November" title="Nov.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">November</div>
</div>
<div class="month even">
  <img src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/Dec.jpg" alt="December" title="Dec.jpg" border="0" width="264" height="264" /></p>
<div class="month-text">December*</div>
</div>
<div style="clear:both;"></div>
<p style="color: #777;">* Jules took this one</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/12/2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Colons</title>
		<link>http://blog.tom-haynes.com/2011/12/colons/</link>
		<comments>http://blog.tom-haynes.com/2011/12/colons/#comments</comments>
		<pubDate>Wed, 21 Dec 2011 03:43:23 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://blog.tom-haynes.com/?p=253456720</guid>
		<description><![CDATA[Take a look at the placement of the colon in “3:05” the Clock app on iPhone: It&#8217;s bottom-aligned with the baseline. Notice that the “3:27” in the iOS bar has the same placement. Of course, both of these things make sense because because that&#8217;s where both Helvetica and Helvetica Neue place it, and those are [...]]]></description>
			<content:encoded><![CDATA[<p>Take a look at the placement of the colon in “3:05” the Clock app on iPhone:</p>
<p><img title="clock-app.png" src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/clock-app.png" alt="Clock app" width="320" height="207" border="0" /></p>
<p>It&#8217;s bottom-aligned with the baseline. Notice that the “3:27” in the iOS bar has the same placement. Of course, both of these things make sense because because that&#8217;s where both Helvetica and Helvetica Neue place it, and those are the primary fonts in iOS.</p>
<p>But what about the time on the lock screen? It appears to be Helvetica (or Neue), but the colon has been moved up!</p>
<p><img title="lock-screen.png" src="http://blog.tom-haynes.com/wp-content/uploads/2011/12/lock-screen.png" alt="iOS lock screen" width="320" height="207" border="0" /></p>
<p>Did they modify the typeface, or is there other funny business going on here? Let me know (@trhaynes) if you know what&#8217;s going on.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/12/colons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Vertical overlap</title>
		<link>http://blog.tom-haynes.com/2011/11/vertical-overlap/</link>
		<comments>http://blog.tom-haynes.com/2011/11/vertical-overlap/#comments</comments>
		<pubDate>Thu, 17 Nov 2011 05:24:10 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456647</guid>
		<description><![CDATA[I&#8217;ve recently noticed a new design pattern appearing in mobile applications, and I haven&#8217;t seen anyone write about it yet. That said, I don&#8217;t really know it would be called so I can&#8217;t search to make sure. While all of these examples are slightly different, they all have one thing in common: overlapping content panes, [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve recently noticed a new design pattern appearing in mobile applications, and I haven&#8217;t seen anyone write about it yet. That said, I don&#8217;t really know it would be called so I can&#8217;t search to make sure. While all of these examples are slightly different, they all have one thing in common: overlapping content panes, used to convey hierarchy and provide a way of navigating it. For lack of a better name, I&#8217;ll call this the <b>Stacked Hierarchy</b> pattern.</p>
<p>The new Gmail and Facebook apps use a navigation that hides behind the main content, and can be summoned by a tap in the upper left &mdash; on a &#8220;Menu&#8221; button and row of lines icon, respectively &mdash; or by dragging the content out of the way using the menu bar.</p>
<p>Facebook&#8217;s also serves a place to list search terms (Gmail&#8217;s search is included in the main interface).</p>
<p><img src="http://blog.tom-haynes.com/wp-content/uploads/2011/11/Facebook-255.png" alt="Facebook on iPhone" border="0" width="255" height="366" style="float: left; margin-right: 20px;" /><img src="http://www.tom-haynes.com/wp-content/uploads/2011/11/Gmail-255.png" alt="Gmail on iPhone" border="0" width="255" height="366" /></p>
<p class="clear: left;">Another place I&#8217;ve seen this stacked hierarchy is in Asana&#8217;s HTML5 mobile app, <a href="http://app.asana.com">app.asana.com</a>. Here there are three levels of hierarchy, and the main menu is always visible, even if only slightly. There&#8217;s no dragging here (probably partly because it&#8217;s a web app living in Safari) but the cards do slide left and right, strengthening the sense of overlap.</p>
<p><img src="http://www.tom-haynes.com/wp-content/uploads/2011/11/Asana-flow-520.png" alt="Asana on iPhone" border="0" width="520" height="255" /></p>
<p>I also found some screenshots (on <a href="http://www.behance.net/gallery/Beeline-Mobile-App/2492987">Behance</a>) of a Russian application called Beeline that also appears to be using this strategy.</p>
<p><img src="http://blog.tom-haynes.com/wp-content/uploads/2011/11/Beeline.png" alt="Beeline on iPhone" border="0" width="313" height="224" /></p>
<p><b>Update (9/20)</b> Some readers told me about Twitter&#8217;s iPad app, which was apparently the first to implement the pattern (in both portrait and landscape views):</p>
<p><img src="http://blog.tom-haynes.com/wp-content/uploads/2011/11/Twitter-520.png" alt="Twitter on iPad" border="0" width="520" height="244" /></p>
<p>At first this stacking pattern struck me as weird because all of these screens are more constrained horizontally than they are vertically, so a smallish sliver of vertical content is actually quite a lot of screen real estate. This doesn&#8217;t seem to be a problem, however. Facebook doesn&#8217;t need the entire screen width for navigation, and Asana&#8217;s task card looks fine with a little less space on the left.</p>
<p>Lastly, the fact that these interfaces use card-like is vaguely reminiscent of Palm OS, except Palm only uses cards to represent entire applications. The hint of off-screen (or &#8220;teaser&#8221;) content also reminds me of the <a href="http://www.youtube.com/watch?v=EUeNCzRhhDE">Windows Phone 7 UI</a>, except I don&#8217;t believe Windows uses it for hierarchy.</p>
<p>Are there other examples out there? Has anyone else written about this or given it a name? <a href="mailto:trhaynes@gmail.com">Let me know.</a></p>
<p>I&#8217;m interested in seeing how this pattern evolves over time.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/11/vertical-overlap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>LomoKino</title>
		<link>http://blog.tom-haynes.com/2011/11/lomokino/</link>
		<comments>http://blog.tom-haynes.com/2011/11/lomokino/#comments</comments>
		<pubDate>Thu, 10 Nov 2011 20:17:27 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[lomo]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456630</guid>
		<description><![CDATA[Wow! Shoot analogue movies on regular 35mm film. A 36-exposure roll gets you 144 frames of lo-fi, wide-screen awesomeness. Check out the LomoKino or watch more mini-movies.]]></description>
			<content:encoded><![CDATA[<p><iframe src="http://player.vimeo.com/video/31503625" width="500" height="178" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></p>
<p>Wow! Shoot analogue movies on regular 35mm film. A 36-exposure roll gets you 144 frames of lo-fi, wide-screen awesomeness. <a href="http://usa.shop.lomography.com/lomokino">Check out the LomoKino</a> or <a href="http://vimeo.com/channels/lomokino">watch more mini-movies</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/11/lomokino/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Watching writing</title>
		<link>http://blog.tom-haynes.com/2011/11/watching-writing/</link>
		<comments>http://blog.tom-haynes.com/2011/11/watching-writing/#comments</comments>
		<pubDate>Thu, 10 Nov 2011 16:27:51 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[writing]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456625</guid>
		<description><![CDATA[Watch Paul Graham write his essay &#8220;Startups in 13 Sentences.&#8221; Text that is yellow will eventually be deleted, making it easy to see his writing process. What starts out as colloquial (&#8220;kind of happy&#8221;) eventually turns into formal and concise (&#8220;semi-happy&#8221;). Very interesting. Also read his post about the experiment.]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.tom-haynes.com/wp-content/uploads/2011/11/watching-writing.png" alt="Watching Paul Graham write" border="0" width="520" height="93" /></p>
<p><a href="http://www.stypi.com/hacks/13sentences">Watch Paul Graham write his essay &#8220;Startups in 13 Sentences.&#8221;</a></p>
<p>Text that is yellow will eventually be deleted, making it easy to see his writing process. What starts out as colloquial (&#8220;kind of happy&#8221;) eventually turns into formal and concise (&#8220;semi-happy&#8221;). Very interesting.</p>
<p>Also <a href="http://paulgraham.com/stypi.html">read his post about the experiment</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/11/watching-writing/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>US23</title>
		<link>http://blog.tom-haynes.com/2011/11/us23/</link>
		<comments>http://blog.tom-haynes.com/2011/11/us23/#comments</comments>
		<pubDate>Tue, 01 Nov 2011 13:38:47 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[photo]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456623</guid>
		<description><![CDATA[New highway signs. Very clean, great colors.]]></description>
			<content:encoded><![CDATA[<p><img src="http://blog.tom-haynes.com/wp-content/uploads/2011/11/US23.jpg" alt="US23" title="US23.jpg" width="540" height="540" /></p>
<p>New highway signs. Very clean, great colors.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/11/us23/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>La Presse</title>
		<link>http://blog.tom-haynes.com/2011/10/la-presse/</link>
		<comments>http://blog.tom-haynes.com/2011/10/la-presse/#comments</comments>
		<pubDate>Mon, 31 Oct 2011 17:57:48 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456618</guid>
		<description><![CDATA[I love how this shows the fluid nature of La Presse across papier, web, and applications mobiles. (via Brand New)]]></description>
			<content:encoded><![CDATA[<p><object width="500" height="281"><param name="movie" value="http://www.youtube.com/v/JhRWeOEQiCs?version=3&#038;feature=oembed"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JhRWeOEQiCs?version=3&#038;feature=oembed" type="application/x-shockwave-flash" width="500" height="281" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>I love how this shows the fluid nature of <a href="http://www.cyberpresse.ca/">La Presse</a> across <i>papier</i>, <i>web</i>, and <i>applications mobiles</i>.</p>
<p>(via <a href="http://www.underconsideration.com/brandnew/archives/la_presse_gets_squared_away.php">Brand New</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/10/la-presse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Finally</title>
		<link>http://blog.tom-haynes.com/2011/09/finally-2/</link>
		<comments>http://blog.tom-haynes.com/2011/09/finally-2/#comments</comments>
		<pubDate>Fri, 16 Sep 2011 16:20:59 +0000</pubDate>
		<dc:creator>trhaynes</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://www.tom-haynes.com/?p=253456616</guid>
		<description><![CDATA[Speaker Deck, a better-designed SlideShare?]]></description>
			<content:encoded><![CDATA[<p><a href="http://speakerdeck.com/"><img src="http://blog.tom-haynes.com/wp-content/uploads/2011/09/Speaker-Deck1.png" alt="Speaker Deck" title="Speaker Deck.png" border="0" width="356" height="69" /></a></p>
<p><a href="http://speakerdeck.com/">Speaker Deck</a>, a better-designed SlideShare?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tom-haynes.com/2011/09/finally-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

