<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><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" version="2.0">

<channel>
	<title>Dan Rubin's SuperfluousBanter</title>
	
	<link>http://superfluousbanter.org</link>
	<description>Suffering from chronic idiocy since 1977</description>
	<pubDate>Mon, 15 Sep 2008 09:36:24 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.3</generator>
	<language>en</language>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/superfluousbanter" type="application/rss+xml" /><item>
		<title>The Final Word on IE6</title>
		<link>http://superfluousbanter.org/archives/2008/09/the-final-word-on-ie6/</link>
		<comments>http://superfluousbanter.org/archives/2008/09/the-final-word-on-ie6/#comments</comments>
		<pubDate>Wed, 03 Sep 2008 15:19:10 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[Internet]]></category>

		<category><![CDATA[Technology]]></category>

		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=599</guid>
		<description><![CDATA[A <a href="http://chrisfullman.com/">friend of mine</a> recently asked the question <a href="http://chrisfullman.com/2008/09/why-the-hate-on-internet-explorer-6/">"Why the Hate on Internet Explorer 6?"</a> He explains some very logical reasons why it doesn't make sense to be so negative about IE6, and as I agree with him on just about all points, I thought I'd give the clearest answer I could.]]></description>
			<content:encoded><![CDATA[<p>A <a href="http://chrisfullman.com/">friend of mine</a> recently asked the question <a href="http://chrisfullman.com/2008/09/why-the-hate-on-internet-explorer-6/">&#8220;Why the Hate on Internet Explorer 6?&#8221;</a> He explains some very logical reasons why it doesn&#8217;t make sense to be so negative about <span class="caps">IE6</span>, and as I agree with him on just about all points, I thought I&#8217;d give the clearest answer I&nbsp;could.</p>
<p>Simply put, <span class="caps">IE6</span> shouldn&#8217;t get any hate. Nor should it receive any love,&nbsp;either.</p>
<p>The best thing the <a href="http://www.webstandards.org/">web standards community</a> (and any other smart web folk) can do is stop complaining about an ancient browser whose <a href="http://www.microsoft.com/">developer</a> waited too long to replace, and just stop supporting it&nbsp;altogether.</p>
<p>One of the benefits of web standards is that our documents are marked up correctly before we reach the presentational stage. One of the benefits of <span class="caps">IE6</span> (et al) is that we can target specific versions using <a href="http://www.quirksmode.org/css/condcom.html">Conditional Comments</a>. The combination of the two means we can still send our <em>content</em> to old browsers, but not have to bother with the <em>presentation</em>, thus saving ourselves hours of needless headaches and frustrations, while not punishing the users of said old browsers by denying them access to our&nbsp;content.</p>
<p>There&#8217;s constant discussion about whether or not to continue support for <span class="caps">IE6</span>, and the only reason ever given these days in favor of supporting that browser is its market share. That market share is diminishing, and we&#8217;ve already reached the <a href="http://www.microsoft.com/windows/internet-explorer/beta/">second beta of <span class="caps">IE8</span></a>, so let&#8217;s start dropping it already. Make the argument against supporting <span class="caps">IE6</span>, to your clients, your boss, your team—whoever needs to hear it, keep applying pressure and don&#8217;t back&nbsp;down.</p>
<p><strong>It&#8217;s time to stop supporting <span class="caps">IE6</span>.&nbsp;Period.</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/09/the-final-word-on-ie6/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Regex Patterns for Single Line CSS</title>
		<link>http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/</link>
		<comments>http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/#comments</comments>
		<pubDate>Fri, 29 Aug 2008 13:30:30 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=497</guid>
		<description><![CDATA[Single-line CSS formatting has its uses (and plenty of pros and cons), but if you've been staying away from it for fear of the time-consuming conversion process from your normal multi-line formatting, here are some regular expressions you can use to make the conversion easy.]]></description>
			<content:encoded><![CDATA[<p class="alert"><strong>Update:</strong> You can now download the Textmate macro file rather than recording your own (<a href="#download">skip to the download&nbsp;&raquo;</a>).</p>
<p>There has been <a href="http://orderedlist.com/articles/single-line-css">plenty</a> of <a href="http://www.flickr.com/photos/jonathansnook/2800852816/">discussion</a> about the pros and cons of single-line style sheets, and I&#8217;ve been including them as an option when teaching <span class="caps">CSS</span> management and organization in my <a href="http://webdesignworld.com/">Web Design World</a> <a href="http://superfluousbanter.org/presentations/2008/">presentations</a> in Chicago, Seattle, and later this year in Las Vegas (at <a href="http://webbuilderconference.com/2008/">WebBuilder</a>) and&nbsp;Boston.</p>
<h3>It&#8217;s a matter of&nbsp;preference</h3>
<p>As a fellow <a href="http://sidebarcreative.com/">Sidebar</a>-ian (<em>Sidebarbarian?</em>) <a href="http://orderedlist.com">Steve</a> has been trying to convince me to use the single-line approach for a while of course, and <a href="http://avalonstar.com">Bryan</a> and <a href="http://snook.ca/jonathan">Jon</a> have also become fans of this formatting style for their own work. Although they are enamored with it, I haven&#8217;t taken to it yet, still preferring to write my style sheets using the &#8220;normal&#8221; indented formatting most of us are used&nbsp;to.</p>
<p><img src="http://farm4.static.flickr.com/3083/2858224571_a4a5c2171b_o.png" alt="" title="Multi-line CSS vs Single-line CSS in Textmate" width="500" height="200" /></p>
<p>Now, before anyone gets their knickers in a twist about why they love, hate, &#8220;can&#8217;t live without&#8221; or &#8220;will die before they try&#8221; single-line formatting, let&#8217;s just take a step back and remember one thing: it isn&#8217;t anything special, just an alternate formatting style that doesn&#8217;t affect the way the browser interprets the style sheet one iota. It&#8217;s a personal preference—remember that before jumping on or off this particular&nbsp;bandwagon.</p>
<h3>Always keep your options&nbsp;open</h3>
<p>Now that I&#8217;ve got that out of my system, let&#8217;s talk practicality: there are indeed benefits to be had when using single-line <span class="caps">CSS</span> formatting—for example, I find it can make a difference <em>after</em> a project has been completed, at which point I&#8217;m usually more interested in visually scanning a style sheet for the selectors first, and then for a particular property I&#8217;m interested in editing. This is where I&#8217;ve found single-line formatting can come in&nbsp;handy.</p>
<h3>But my editor already does&nbsp;that!</h3>
<p>This is the point where some people will start going on about how you could just use <a href="http://macromates.com/">Textmate&#8217;s</a> &#8220;foldings&#8221; feature to get the same visual result (without altering your file), or how <a href="http://macrabbit.com/cssedit/"><span class="caps">CSS</span> Edit</a> has a handy list of all the selectors in a column on the left side of its window, or that you could always use your editor&#8217;s &#8220;find&#8221; command and search for the selector you want to edit. Yet while those are all perfectly logical, sane suggestions, they don&#8217;t account for flexibility and&nbsp;choice.</p>
<h3>Just another way of doing&nbsp;things</h3>
<p>Much like <a href="http://hicksdesign.co.uk">Jon Hicks</a> with <a href="http://www.hicksdesign.co.uk/journal/browser-polygamy-movement">his harem of web browsers</a>, I tend to be a bit of a &#8220;text editor polygamist&#8221;, bouncing from Textmate to <span class="caps">CSS</span> Edit to <a href="http://panic.com/coda">Coda</a> to <a href="http://www.barebones.com/products/bbedit/">BBEdit</a> to <a href="http://panic.com/transmit">Transmit&#8217;s</a> text editor and a host of <abbr title="command line interface"><span class="caps">CLI</span></abbr> editors, mostly depending on my mood (though sometimes contextual if I&#8217;m at a computer that doesn&#8217;t have a particular application—a WindowsXP box with nothing but Notepad, for instance). It&#8217;s the times when I&#8217;m using an editor that doesn&#8217;t have &#8220;foldings&#8221; or pretty columns of selectors that I start to appreciate single-line <span class="caps">CSS</span> when making quick edits, so I&#8217;ve started converting style sheets to a &#8220;simple&#8221; single-line format (without the left-aligned tab blocks to start each rule&#8217;s properties) once they are ready to go&nbsp;live.</p>
<h3>Patterns fit for a&nbsp;kilt</h3>
<p>Editors like Textmate and BBEdit have built-in commands for formatting (the standard, multi-line approach) or compressing (the entire style sheet on one line, ostensibly to reduce file size by stripping white space) <span class="caps">CSS</span>, <del datetime="2008-09-15T09:14:26+00:00">but no way to convert to single-line formatting</del> and Textmate&#8217;s &#8220;Format <span class="caps">CSS</span> Compressed&#8221; bundle can format your stylesheet to a single line per-rule, though it&#8217;s all squished together, making it difficult to scan due to a lack of whitespace. Converting a style sheet by hand every time would be much too time-consuming to bother with, but that&#8217;s where regular expressions come to the&nbsp;rescue.</p>
<p>In Textmate, you can record a macro using each of these regex patterns as a separate step (I&#8217;m sure other editors have a similar feature, so please feel free to post details in the comments below). This allowed me to create a &#8220;Format <span class="caps">CSS</span> Single-line&#8221; command, complete with a keyboard shortcut, which enables an easy switch between multi- and single-line&nbsp;formatting.</p>
<p><img src="http://farm4.static.flickr.com/3018/2807882379_3c8d360872_o.png" alt="" title="Single-line CSS macro in Textmate" width="500" height="200" /></p>
<p><del datetime="2008-08-30T14:45:33+00:00">Unfortunately, as of this writing Textmate macros cannot be exported and shared</del> For those using Textmate, getting the macro is a simple matter of downloading, expanding and double-clicking this&nbsp;file:</p>
<ul id="download">
<li><a href="/downloads/2008-08/Format-CSS-Single-line.tmMacro.zip">Download the &#8220;Format <span class="caps">CSS</span> Single-line&#8221; Textmate macro &raquo;</a> (<span class="caps">ZIP</span>,&nbsp;<span class="caps">1KB</span>)</li>
</ul>
<p>While similar to &#8220;Format <span class="caps">CSS</span> Compressed&#8221;, this macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules), and adds whitespace that matches my standard formatting preferences (which I find makes it easier to scan quickly). To switch between each formatting style, just run each command in turn (via the <em>Bundles</em> menu or the keyboard&nbsp;shortcuts).</p>
<p>However, that wouldn&#8217;t be much use to everyone who <em>doesn&#8217;t</em> use Textmate, so here are the respective groups of regex I used for the&nbsp;conversion:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">\n<span style="color: #7a0874; font-weight: bold;">&#123;</span><span style="color: #000000;">3</span>,<span style="color: #7a0874; font-weight: bold;">&#125;</span>
\n\n
&nbsp;
<span style="color: #7a0874; font-weight: bold;">&#91;</span> \t<span style="color: #7a0874; font-weight: bold;">&#93;</span>+
&nbsp;
<span style="color: #7a0874; font-weight: bold;">&#40;</span>?m<span style="color: #7a0874; font-weight: bold;">&#41;</span><span style="color: #7a0874; font-weight: bold;">&#40;</span><span style="color: #7a0874; font-weight: bold;">&#91;</span>;:<span style="color: #7a0874; font-weight: bold;">&#93;</span><span style="color: #7a0874; font-weight: bold;">&#41;</span>\s+
$<span style="color: #000000;">1</span>
&nbsp;
\s<span style="color: #000000; font-weight: bold;">*</span><span style="color: #7a0874; font-weight: bold;">&#125;</span>
 <span style="color: #7a0874; font-weight: bold;">&#125;</span>
&nbsp;
\s<span style="color: #000000; font-weight: bold;">*</span><span style="color: #7a0874; font-weight: bold;">&#123;</span>\s<span style="color: #000000; font-weight: bold;">*</span>
 <span style="color: #7a0874; font-weight: bold;">&#123;</span> 
&nbsp;
<span style="color: #7a0874; font-weight: bold;">&#91;</span> \t<span style="color: #7a0874; font-weight: bold;">&#93;</span><span style="color: #000000; font-weight: bold;">*</span>,<span style="color: #7a0874; font-weight: bold;">&#91;</span> \t<span style="color: #7a0874; font-weight: bold;">&#93;</span><span style="color: #000000; font-weight: bold;">*</span>
,
&nbsp;
<span style="color: #000000; font-weight: bold;">@</span>import<span style="color: #7a0874; font-weight: bold;">&#40;</span>.<span style="color: #000000; font-weight: bold;">*</span>?<span style="color: #7a0874; font-weight: bold;">&#41;</span>;
<span style="color: #000000; font-weight: bold;">@</span>import$<span style="color: #000000;">1</span>;\n\n</pre></div></div>

<h3>What&#8217;s&nbsp;missing</h3>
<p>In Textmate and BBEdit I can return to multi-line formatting with a single command, but that might not be as simple in other editors. What I&#8217;d love to see is a pair of shell scripts that convert from multi- to single-line and back, and possibly a web-based processor that does the same (paste your style sheet into a textarea, select your formatting, hit &#8220;process&#8221; and the script produces the result). If anyone would like to take on those tasks, I&#8217;ll happily update this post to link to the products of your&nbsp;labor.</p>
<h3>And in the&nbsp;end&#8230;</h3>
<p>If you&#8217;ve never tried single-line formatting, this makes it easy to experiment without committing yourself (and I do recommend giving it a try—you may be surprised once you&#8217;ve worked with it a few&nbsp;times).</p>
<p>Ultimately, because I can return to multi-line with a single command my primary text editor should I ever feel like it, automating the switch from multi- to single-line is a convenient way to get the benefits of single-line formatting without backing myself or my clients into a formatting&nbsp;corner.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Simple CSS Hover Tab Thingy</title>
		<link>http://superfluousbanter.org/archives/2008/08/simple-css-hover-tab-thingy/</link>
		<comments>http://superfluousbanter.org/archives/2008/08/simple-css-hover-tab-thingy/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 14:52:34 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=546</guid>
		<description><![CDATA[Ok, so the name won't win any awards, but let's be honest: neither will this mini-tutorial, or the idea itself (nothing groundbreaking here, move along...). But after throwing together a quick little (you guessed it) hover/tab/thingy for my <a href="http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/">previous article</a>, I thought I was fun enough to share, in case you find a need for it someday.]]></description>
			<content:encoded><![CDATA[<p class="alert"><strong>Update:</strong> The original edit of this post and demo file didn&#8217;t quite work in <span class="caps">IE6</span>/7 (ok, didn&#8217;t work at all, really). That&#8217;s what you get when you rush and/or don&#8217;t care about certain browsers :) See the comments for my quick explanation of the fix (the demo now works in <span class="caps">FF2</span>/3, Safari 2/3, Opera 9, and&nbsp;<span class="caps">IE6</span>/7).</p>
<p>Ok, so the name won&#8217;t win any awards, but let&#8217;s be honest: neither will this mini-tutorial, or the idea itself (nothing groundbreaking here, move along&#8230;). But after throwing together a quick little (you guessed it) hover/tab/thingy for my <a href="http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/">previous article</a>, I thought I was fun enough to share, in case you find a need for it&nbsp;someday.</p>
<h3>The usual&nbsp;suspects</h3>
<p>The &#8220;thingy&#8221; in question is just a simple unordered list, with each list item containing an anchor and an image—we want the images in this case because I want them to display in my <span class="caps">RSS</span> feed and for anyone who can&#8217;t (or chooses not to) view the styled version of this&nbsp;site.</p>
<p class="info"><strong>Note:</strong> Feel free to reference images in the stylesheet rather than inline if that suits your purposes. Because I know you need permission, don&#8217;t&nbsp;you&#8230;</p>
<p>If you were too lazy to click the link to my <a href="http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/">previous article</a> above (and who could blame you, really), here&#8217;s a quick <a href="http://superfluousbanter.org/projects/demos/simple-css-hover-tab-thingy/">demo&nbsp;page</a>.</p>
<h3>Moving right&nbsp;along&#8230;</h3>
<p>First, the markup (with URLs truncated to save&nbsp;trees):</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;ul id=&quot;hover-tab-thingy&quot;&gt;
  &lt;li id=&quot;one&quot;&gt;&lt;a href=&quot;...&quot;&gt;One &lt;img ... /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id=&quot;two&quot;&gt;&lt;a href=&quot;...&quot;&gt;Two &lt;img ... /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id=&quot;three&quot;&gt;&lt;a href=&quot;...&quot;&gt;Three &lt;img ... /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div>

<p>Simple, uncluttered, uncomplicated. Just how I know you like&nbsp;it.</p>
<p>Next, the <span class="caps">CSS</span>—not <em>quite</em> as short as the markup, but that&#8217;s how the story often&nbsp;goes:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code"><pre class="css css" style="font-family:monospace;">ul<span style="color: #cc00cc;">#hover-tab-thingy</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span>;
  <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span>0;
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span>;
  <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">498px</span>; <span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#hover-tab-thingy</span> li <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span>;
  <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span>; <span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#hover-tab-thingy</span> li a <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span>;
  <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">9px</span> <span style="color: #933;">21px</span>;
  <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#eee</span>;
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#999</span>;
  <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">9px</span>;
  <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span>;
  <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span><span style="color: #993333;">uppercase</span>;
  <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#fff</span>; <span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#hover-tab-thingy</span> li a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f60</span>;
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span>; <span style="color: #00AA00;">&#125;</span>
li<span style="color: #cc00cc;">#one</span> a<span style="color: #00AA00;">,</span>
li<span style="color: #cc00cc;">#one</span> a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#e5e5e5</span>;
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#555</span>; <span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#hover-tab-thingy</span> li a img <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span>;
  <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span>0;
  <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span>;
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span>;
  <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">460px</span>;
  <span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span>;
  <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">-9999px</span>;
  <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span>;
  <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#e5e5e5</span>; <span style="color: #00AA00;">&#125;</span>
li<span style="color: #cc00cc;">#one</span> a img<span style="color: #00AA00;">,</span>
<span style="color: #cc00cc;">#hover-tab-thingy</span> li a<span style="color: #3333ff;">:hover </span>img <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span>0; <span style="color: #00AA00;">&#125;</span>
li<span style="color: #cc00cc;">#two</span> a<span style="color: #3333ff;">:hover </span>img<span style="color: #00AA00;">,</span>
li<span style="color: #cc00cc;">#three</span> a<span style="color: #3333ff;">:hover </span>img <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">border-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f60</span>; <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>This is all fairly straightforward, so here are the highlights that may help when duplicating this on your&nbsp;own:</p>
<ol>
<li>The entire idea is that you have tabs that are each associated with content (images in this case) which are made visible when the user hovers over the tab. There are more things you could do with this, but that&#8217;s your job,&nbsp;grasshopper.</li>
<li>The tabs are floated; the content elements (<code>img</code> in this case) clear the&nbsp;floats.</li>
<li>The content elements are set to <code>position:absolute</code>, so they can appear in the same location for each tab. To accomplish this, the <code>ul</code> is set to <code>position:relative</code> (in short: an absolutely positioned element will be positioned relative to its nearest positioned ancestor—see <a href="http://www.stopdesign.com/articles/absolute/">Doug Bowman&#8217;s great write up</a> for more), and it&#8217;s probably a good idea if the dimensions of your <code>ul</code> (the container for your content) have a lot in common with those of your content&nbsp;elements.</li>
<li><span class="caps">IE6</span> has a problem reverting elements that set <code>display:block</code> on <code>:hover</code> to their original state (e.g. <code>display:none</code>). To counter this, use a negative left margin as the default positioning, and then set <code>margin-left:0;</code> on the hover state, which works in all modern&nbsp;browsers.</li>
<li>The <code>width</code> and <code>height</code> is specific to my example (the dimensions of the images I used), ditto for the <code>padding</code> on the tabs and the <code>top</code> positioning on the <code>img</code> elements (to push them below the tabs). Bend them to your&nbsp;will.</li>
<li>Everyone dies at the end of <em>The Departed</em>. Seriously, everyone. That should be the subtitle of the&nbsp;movie.</li>
</ol>
<h3>Obligatory&nbsp;wrap-up</h3>
<p>This may be something that you&#8217;ll find use for on a regular basis—one of those tiny snippets of reusable &#8220;stuff&#8221; that you&#8217;ll be glad you don&#8217;t have to type every time. Or you&#8217;ll never need it because you can&#8217;t for the life of you think of any reason why you&#8217;d need to reveal some content whilst hovering over a tab (I&#8217;m pretty much just painting the sarcasm with a roller at this&nbsp;point&#8230;).</p>
<p>Whatever your future may hold, now you have something you might not have had before, and that&#8217;s never a bad thing—unless we&#8217;re talking about some sort of disease, in which&nbsp;case&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/08/simple-css-hover-tab-thingy/feed/</wfw:commentRss>
		</item>
		<item>
		<title>I Need Some Spacing</title>
		<link>http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/</link>
		<comments>http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 06:28:10 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=502</guid>
		<description><![CDATA[Way back in June over on <a href="http://subtraction.com">Subtraction</a>, Khoi <a href="http://www.subtraction.com/archives/2008/0617_spacing_is_e.php">presented a tweaked version</a> of the <a href="http://gmail.com">Gmail</a> interface (and then <a href="http://www.subtraction.com/archives/2008/0618_lost_in_spac.php">a follow-up article</a> regarding the feedback on the first), improving spacing and alignment by making a few small but significant changes overall...]]></description>
			<content:encoded><![CDATA[<p>Way back in June over on <a href="http://subtraction.com">Subtraction</a>, Khoi <a href="http://www.subtraction.com/archives/2008/0617_spacing_is_e.php">presented a tweaked version</a> of the <a href="http://gmail.com">Gmail</a> interface (and then <a href="http://www.subtraction.com/archives/2008/0618_lost_in_spac.php">a follow-up article</a> regarding the feedback on the first), improving spacing and alignment by making a few small but significant changes&nbsp;overall:</p>
<blockquote><p>&#8220;&#8230;by normalizing the space between like elements, aligning elements along similar spatial planes, moderately increasing the space between stacked items and paying attention to how elements are framed by negative space, we can get what is, in my opinion, a significantly more attractive Gmail interface.&#8221; <cite>&thinsp;&mdash;&thinsp;<a href="http://subtraction.com">Khoi&nbsp;Vinh</a></cite></p></blockquote>
<p>This is something I&#8217;ve wanted to see for a while in Gmail, and in fact had presented a few examples last year (July 2007) as part of my interview process at Google (I really must write about my series of amazing job interviews last summer, but I&#8217;ll leave that for another time). After reading—and commenting—on Khoi&#8217;s post, I had intended to publish my variation on Google&#8217;s mid-2007 interface, but as the dedication to blogging continues to elude me, this too fell a few pages back in the Moleskine to-do list—until&nbsp;now.</p>
<h3>The&nbsp;Setup</h3>
<p>I took a slightly different approach than Khoi, though my goals were&nbsp;similar:</p>
<ul>
<li>Give all elements more room to&nbsp;breathe</li>
<li>Make it easier to target navigation and oft-used&nbsp;links</li>
<li>Normalize alignment of text and other&nbsp;elements</li>
<li>Do it all without drastically altering the appearance of the&nbsp;interface</li>
</ul>
<p>That last goal was important and acted as a guide to the rest: I wanted to present improvements that could be made right away without causing a negative reaction among Gmail&nbsp;users.</p>
<p>Rather than adjust the line height of the main message area, I decided to bring as many of the other elements in line with that as I could. You&#8217;ll notice spacing improvements within each line however, reclaiming some poorly used horizontal space. Like Khoi, I felt the message lines were a bit crowded, so to give the impression of more room in those lines, I removed the grey horizontal lines between each item and allowed the background color to bleed through (all they need is some separation—further emphasis on those lines just adds weight). The result is that it <em>feels</em> like there&#8217;s a bit more space, without actually adding&nbsp;any.</p>
<p>The main navigation lost its underlines (again, removing unnecessary visual weight—the &#8220;this is a link&#8221; cue is superfluous here) and gained space (matching the baseline of the message list). The &#8220;Compose Mail&#8221; link got an extra highlight by way of a background; the extra padding makes it the only navigation item that doesn&#8217;t align with the baseline, but that also gives it a little more contrast vertically, thus it stands out more without having to scream for attention. Less important text links within the message area were made slightly smaller (but kept their underlines), and &#8220;Mark as read&#8221; was pulled out of the drop-down menu and given its own button: I had spent a week or so watching people use Gmail before doing this exercise, and that was the second most frequent action users needed (right behind &#8220;Delete&#8221;) but was hidden in the&nbsp;drop-down.</p>
<p>Finally, all rounded corners were cleaned up a bit, footer text was aligned to the baseline, and the message list was enclosed on the right side (maybe it&#8217;s just me, but it&#8217;s always bugged me how those lines just run right to the&nbsp;edge).</p>
<h3>Reveal&nbsp;Already!</h3>
<style type="text/css" media="screen">
<!--
#gmail-realign {
	position:relative;
	margin:1em 0;padding:0;
	width:500px;
	height:498px;
}
#gmail-realign li {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}
#gmail-realign li a {
	float:left;
	padding:9px 21px;
	background-color:#eee;
	color:#999;
	font-size:9px;
	text-align:center;
	text-transform:uppercase;
	border-right:3px solid #fff;
	border-bottom:none;
}
#gmail-realign li a:hover {
	background-color:#f60;
	color:#fff;
}
li#gmail-realign-before a,
li#gmail-realign-before a:hover {
	background-color:#e5e5e5;
	color:#555;
}
#gmail-realign li a img {
	position:absolute;
	left:-1px;
	top:30px;
	width:500px;
	height:460px;
	clear:both;
	margin-left:-9999px;
	padding:1px;
	border:3px solid #e5e5e5;
}
li#gmail-realign-before a img,
#gmail-realign li a:hover img {
	margin-left:0;
}
li#gmail-realign-after a:hover img,
li#gmail-realign-baseline a:hover img { border-color:#f60; }
-->
</style>
<ul id="gmail-realign">
<li id="gmail-realign-before"><a href="http://www.flickr.com/photos/danrubin/2776612842/" title="view on Flickr &raquo;">Before <img src="http://farm4.static.flickr.com/3029/2776612842_1756099f61.jpg" alt="Gmail realign: before" /></a></li>
<li id="gmail-realign-after"><a href="http://www.flickr.com/photos/danrubin/2776614876/" title="view on Flickr &raquo;">After <img src="http://farm4.static.flickr.com/3276/2776614876_a8d32c8ecb.jpg" alt="Gmail realign: after" /></a></li>
<li id="gmail-realign-baseline"><a href="http://www.flickr.com/photos/danrubin/2776616190/" title="view on Flickr &raquo;">After (with baseline) <img src="http://farm4.static.flickr.com/3092/2776616190_66e45f4b86.jpg" alt="Gmail realign: after (with baseline)" /></a></li>
</ul>
<p>I&#8217;m still happy with how this turned out a year later, and it was well received by the Google interview crew. Compare the before and after images, and you&#8217;ll also notice that the improved spacing in this example actually <strong>reduces</strong> the overall height of the page, allowing two additional message lines to fit in the space of the&nbsp;original.</p>
<p>Both Khoi&#8217;s and my realign leave almost all the original elements of the interface intact—this is <em>very</em> important when making changes (even if only suggested ones) to such a popular application, and the same goes for any product, publication or web site that is part of a person&#8217;s daily&nbsp;routine.</p>
<p>Whether Gmail incorporates any of these suggestions is out of our hands, but it&#8217;s still nice to have the chance to&nbsp;compare.</p>
<p class="info"><strong>Note:</strong> many changes have already been made to the Gmail interface over the last year, and even in the last few months since Khoi posted his example. Not all are improvements, but at least someone&#8217;s making an&nbsp;attempt.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/08/i-need-some-spacing/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Some Thoughts on Logo Design</title>
		<link>http://superfluousbanter.org/archives/2008/06/some-thoughts-on-logo-design/</link>
		<comments>http://superfluousbanter.org/archives/2008/06/some-thoughts-on-logo-design/#comments</comments>
		<pubDate>Fri, 20 Jun 2008 10:26:04 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=491</guid>
		<description><![CDATA[A few months ago, I had the pleasure of answering a few questions for an article being written by my friend <a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a> for <a href="http://www.netmag.co.uk/zine/latest-issue/issue-175">.net Magazine</a> (<em>Practical Web Design</em> here in the States). Elliot quoted me quite nicely in the article, but I thought it would be interesting to publish my complete answers here, along with his questions, and he kindly gave his permission.]]></description>
			<content:encoded><![CDATA[<p>A few months ago, I had the pleasure of answering a few questions for an article being written by my friend <a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a> for <a href="http://www.netmag.co.uk/zine/latest-issue/issue-175">.net Magazine</a> (<em>Practical Web Design</em> here in the States). Elliot quoted me quite nicely in the article, but I thought it would be interesting to publish my complete answers here, along with his questions, and he kindly gave his&nbsp;permission.</p>
<p class="info"><strong>Note:</strong> The article itself is full of some solid information and quotes some bright minds&thinsp;&mdash;&thinsp;well worth picking up if you get the chance (as is the rest of the&nbsp;issue).</p>
<dl>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> Please could you tell us a bit about yourself and your work with logos so&nbsp;far?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> I&rsquo;ve always loved logos, and some of my earliest experiments with design were logotypes (I tend to prefer type-driven logos with minimal imagery). I don&rsquo;t get as many opportunities to design logos for clients as I&rsquo;d like, but I do a fair amount for friends and personal projects, sometimes for imaginary ideas just as an excuse to design a logo or&nbsp;logotype.</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> Which logo (that you&rsquo;ve designed) are you most proud of and&nbsp;why?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> I&rsquo;m torn between the current logo for <a href="http://superfluousbanter.org/">SuperfluousBanter</a> and a logo I did a few years ago for a real estate company that by brother was starting. I put most of the work I do into two categories: design for myself, and design for others&thinsp;&mdash;&thinsp;so those are my current favorites from each&nbsp;category.</p>
<p>In the case of SuperfluousBanter&rsquo;s current logo (there have been a few over the years), the &ldquo;sb&rdquo; mark on an orange field sporting a lighter spiral (with the counter of the &ldquo;b&rdquo; over the center of the spiral) has a nice balance of symmetry and asymmetry at the same time, without getting&nbsp;complicated.</p>
<p>With the logo for the real estate firm, the business name was that of the main partner in the company, so it required a visual mark in addition to the logotype in order to communicate the type of business. Not that it was groundbreaking in any way, but the mark does its job well, without being too complicated&thinsp;&mdash;&thinsp;the more basic the shapes, the easier it is to recognize an image at a glance (important for property signage), and the better its reproduction at various high- and low-resolutions. The qualities of the mark that make it my favorite are similar to those of the SuperfluousBanter mark: a combination of symmetry and asymmetry that results in balance (it&rsquo;s extremely important to have all three), and in this case, the end result was almost exactly what I pictured in my head before even sketching the first&nbsp;rough.</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> Can you name an all-time favourite (web-related) logo that someone else has designed? Why do you like it so&nbsp;much?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> It&rsquo;s hard to decide, but I&rsquo;ll go with <a href="http://simplebits.com">Dan Cederholm&rsquo;s</a> <a href="http://corkd.com">Cork&rsquo;d</a> logo. I like Dan&rsquo;s style in general, but the Cork&rsquo;d logo is just elegant in its own little way (recurring theme: combination of symmetry and asymmetry resulting in an overall balance). I wear the t-shirt so much that I&rsquo;ve almost worn it out&nbsp;;)</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> What do you consider to be the current trends in web industry logo design? Are they good or&nbsp;bad?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> While there are still a lot of &ldquo;web 2.0&rdquo; design trends everywhere (not just online, either), in my experience these design trends result almost as much from client demand as from designers imposing those trends on their work. As I said before, I&rsquo;m a fan of type-driven logos, with simple, straight-forward visual marks to support the type. Aside from the drop-shadows, bevels and other standard design clichés, I don&rsquo;t think there are any awful trends per se (some people might say there&rsquo;s been enough rounded type and bright, happy colors, but if a client wants their brand to be &lsquo;friendly&rsquo; etc., more often than not it&rsquo;s the right direction), but I could still do without blatant 3-D or an over abundance of filter effects. And let&rsquo;s not get into the pros and cons of&nbsp;reflections&hellip;</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> Where do you get your inspiration from and can you recommend any good places of inspiration or resources (books, websites, designers,&nbsp;etc.)?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> I&rsquo;m constantly searching for new sources of inspiration&thinsp;&mdash;&thinsp;my personal preference is to find as much as possible <em>offline</em> rather than use the web. Not only does it give my eyes some needed respite from the glare of the screen, but I find my reactions are different when reading a book, sifting through old album covers, digging through piles of magazines&thinsp;&mdash;&thinsp;the tactile experience engages more senses, and that helps get the creative juices flowing for me. As for specific resources, I think it&rsquo;s useful to have good examples around (for comparison if nothing else), and the <a href="http://www.amazon.com/exec/obidos/ASIN/1592530877/superfluous-20">Logo Lounge</a> series of books is a good place to start for more recent designs. A similar resource online is <a href="http://logopond.com/">LogoPond</a> (though I wouldn&rsquo;t personally subject in-progress work to public examination like some users of the site). If you can find books about logo design and branding written/printed prior to the mid-1980&rsquo;s, you&rsquo;ll find some great examples of how to design marks without going overboard (a simple mark that reproduces well in black after being faxed will likely translate quite nicely to the&nbsp;web).</p>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> How do you approach the logo-designing process? Is there a system (maybe in 6 steps) that you can&nbsp;recommend?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> While I don&rsquo;t have a fixed set of steps in place for any of my work (I like to think it helps avoid patterns and forces me to think from a fresh perspective on every project), I do tend to go about the problem-solving process the same way each&nbsp;time:</p>
<ul>
<li>Find out as much as you can about the client/product/organization/person/service that the logo will represent. Without that input, a logo is just some text, lines and&nbsp;color.</li>
<li>Research other brands in the same market&thinsp;&mdash;&thinsp;I used to use this step as motivation to &ldquo;design a better logo&rdquo; or &ldquo;beat the competition&rdquo; but I feel that was misguided. Now I use it primarily to get a feel for what is already successful, and to know what to avoid visually in order to create something&nbsp;unique.</li>
<li>Sketch and Play&thinsp;&mdash;&thinsp;this step is the most random for me: sometimes I&rsquo;m sketching with pencil in a <a href="http://www.moleskine.com/">Moleskine</a>, other times I&rsquo;m messing around in Photoshop or Illustrator, and a few times the good ideas have come on the requisite cocktail napkin or in the margins of a magazine. The experimentation is the fun part&thinsp;&mdash;&thinsp;it&rsquo;s not always needed (if you see the final logo in your head the first time inspiration hits, get to a computer as quickly as possible and just draw the thing!), but when you&rsquo;re waiting for the lightning to strike it&rsquo;s a good way to try things&nbsp;out.</li>
<li>Design in black and white until you have your logotype and/or mark, then add color and adjust as&nbsp;needed.</li>
<li>Once you have something, print it out. A lot. I tend to do most digital logo work in Illustrator so everything is vector and easily printed at various sizes. Print variations in type weight/style, as well as inverted versions of your logotype and mark. Print large versions and paste them to the wall, or lay them out on the floor. Look at them for a few hours, or a day, or a few days&thinsp;&mdash;&thinsp;as much time as it takes you to really let things sink&nbsp;in.</li>
<li>If it&rsquo;s paid work, don&rsquo;t deliver final art until receiving final payment. If it&rsquo;s for a friend, give them a <span class="caps">CD</span> over&nbsp;dinner.</li>
</ul>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> What tools feature in your logo-making process (and how prominently, like mainly Illustrator and only a bit of Photoshop?), and can you name any that people might not know about (i.e: any apps outside of the Adobe&nbsp;family)?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> I guess I already answered that for the most part. Illustrator is my primary weapon, though anything that allows vector illustration should be fine (even if you&rsquo;re designing a logo for a web site&thinsp;&mdash;&thinsp;there&rsquo;s nothing worse than designing a kick-ass logo in Photoshop at 72dpi and then realizing that you have to recreate it from scratch as vector art because the client wants to make&nbsp;t-shirts).</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> What problems have you encountered in designing logos and how do you avoid&nbsp;them?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> Aside from figuring out the starting point (always a moving target from project to project), clients and their expectations/preferences are the biggest problem. That&rsquo;s a bigger topic of discussion, but I retain as much creative control as possible, and let my clients know up front that I expect them to trust my opinions. If you&rsquo;re firm with your client from the beginning, their expectations will fall more closely in line with&nbsp;yours.</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> What general tips can you offer for other logo designers out&nbsp;there?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> Play. A lot. Look for sources of inspiration that may not seem immediately obvious&thinsp;&mdash;&thinsp;if you&rsquo;re stuck for ideas on a logo for a children&rsquo;s book, start digging through some heavy metal album covers, or a stack of performance car magazines, or some swimwear catalogs. The contrast can do wonders for your&nbsp;subconscious.</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> How would you define a good logo? What elements does it&nbsp;need?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> Though I have my own, subjective thoughts on this, I&rsquo;m sure not many would disagree that a good logo is one that communicates the intended message effectively. Usually that message helps define the brand in an easily digestible way. So a successful logo is one that can represent the brand (whether it&rsquo;s an individual, a small non-profit organization, or a multi-national&nbsp;corporation).</p>
<p>When it comes to the actual visual elements, I prefer logos that do the above described job without being complicated. Striking the correct balance between typography, color, shapes and symmetry isn&rsquo;t something that can be quantified&thinsp;&mdash;&thinsp;it will be different for every logo. I find that the logos that pique my interest the most are those with some level of balanced asymmetry: if you split a logo down the center of either axis, it should not result in a mirror image. Type is a straightforward way to achieve this, since you can very easily balance the letterforms without creating a mirror image. In fact, you&rsquo;d have to work very hard to achieve that effect, to the extent that if it was the <em>intended</em> effect, it would likely be a more creative end result (and as such, become a successful exception to the mirror rule), for example the <a href="http://www.johnlangdon.net/ambigrams.html">ambigrams of John&nbsp;Langdon</a>.</p>
</dd>
<dt>
<p><strong><span class="caps">EJS</span>:</strong> What would you consider to be mistakes in logo design, be them your own or made by&nbsp;others?</p>
</dt>
<dd>
<p><strong><span class="caps">DR</span>:</strong> A level of detail that precludes low-resolution or small-size reproduction, including color and type selection in some cases. This is a potential issue with the preponderance of photorealistic logos that are becoming increasingly popular with software companies, but I&rsquo;m starting to see it creep into other uses. I also feel like typeface selection is often not given as much careful consideration as it requires. Of course, logos can still be successful without being &ldquo;perfect&rdquo; by any one person&rsquo;s&nbsp;definition.</p>
</dd>
<p>Many thanks again to Elliot and the editors of .net&nbsp;Magazine.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/06/some-thoughts-on-logo-design/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Screencast: Finder Window Icon Trick</title>
		<link>http://superfluousbanter.org/archives/2008/06/screencast-finder-window-icon-trick/</link>
		<comments>http://superfluousbanter.org/archives/2008/06/screencast-finder-window-icon-trick/#comments</comments>
		<pubDate>Mon, 09 Jun 2008 15:18:50 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=490</guid>
		<description><![CDATA[To celebrate Mac Day (any Steve Jobs keynote address deserves a worldwide holiday as far as I'm concerned), I've decided to do my first screencast, so you'll have something to play with while waiting for the MacWorld madness to begin (it also helps justify <a href="http://twitter.com/danrubin/statuses/797749867">my purchase</a> of <a href="http://www.varasoftware.com/products/screenflow/">ScreenFlow</a> a few months ago).]]></description>
			<content:encoded><![CDATA[<p>To celebrate Mac Day (any Steve Jobs keynote address deserves a worldwide holiday as far as I&#8217;m concerned), I&#8217;ve decided to do my first screencast, so you&#8217;ll have something to play with while waiting for the MacWorld madness to begin (it also helps justify <a href="http://twitter.com/danrubin/statuses/797749867">my purchase</a> of <a href="http://www.varasoftware.com/products/screenflow/">ScreenFlow</a> a few months&nbsp;ago).</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="355" id="viddler_3c8ea91e"><param name="movie" value="http://www.viddler.com/player/3c8ea91e/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><embed src="http://www.viddler.com/player/3c8ea91e/" width="500" height="355" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" name="viddler_3c8ea91e" ></embed></object></p>
<p>Thanks to the awesome folks at <a href="http://viddler.com/">Viddler</a> for making my life a bit easier once I got past the &#8220;export&#8221;&nbsp;stage&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/06/screencast-finder-window-icon-trick/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Sidebar Creative: Collective Realignment</title>
		<link>http://superfluousbanter.org/archives/2008/04/sidebar-creative-collective-realignment/</link>
		<comments>http://superfluousbanter.org/archives/2008/04/sidebar-creative-collective-realignment/#comments</comments>
		<pubDate>Thu, 10 Apr 2008 11:46:13 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/?p=488</guid>
		<description><![CDATA[Two years ago in Austin, Texas, at SXSW Interactive 2006, an idea was conceived by 4 friends, and nine months later <a href="http://sidebarcreative.com/">Sidebar Creative</a> was born. That was a little over a year ago, and now that our fledgling design collective has had a chance to stretch its limbs, open its eyes, and all the other lovely things that newborns do, it's time for some changes (no, not the diaper kind; and yes, all positive).]]></description>
			<content:encoded><![CDATA[<p><img class="image-full" src="/p/blog/sidebar-realign-logo.png" width="500" height="60" alt="Sidebar Creative logo" /><br />
Two years ago in Austin, Texas, at <span class="caps">SXSW</span> Interactive 2006, an idea was conceived by <a href="http://flickr.com/photos/orderedlist/425937953/">4 friends</a>, and nine months later <a href="http://sidebarcreative.com/">Sidebar Creative</a> was born. <a href="http://superfluousbanter.org/archives/2007/01/introducing-sidebar-creative/">That was a little over a year ago</a>, and now that our fledgling design collective has had a chance to stretch its limbs, open its eyes, and all the other lovely things that newborns do, it&#8217;s time for some changes (no, not the diaper kind; and yes, all positive). But first, a mini-retrospective of &#8220;Year One: The&nbsp;Awakening.&#8221;</p>
<h3>Let&#8217;s go&nbsp;back</h3>
<p>Over the course of the first year, <a href="http://avalonstar.com/">Bryan</a>, <a href="http://snook.ca/jonathan">Jon</a>, <a href="http://orderedlist.com/">Steve</a> and I have learned more about each other and ourselves than any of us expected&thinsp;&mdash;&thinsp;and more about what Sidebar means to each of us, and how different that is from what we all expected at the beginning. We expected that joining forces would be a good way to attract larger projects and clients (which it was, and continues to be), but none of us anticipated the attraction of bringing our own ideas to the table and using our combined experience to bring them to&nbsp;life.</p>
<h3>Has anyone seen my&nbsp;shoes?</h3>
<p>Though the prospect of more client work was a key incentive at the start, our individual consulting businesses saw increases around the same time Sidebar launched (either a coincidence or potential clients hoping to get a lower price by contacting one of us individually&thinsp;&mdash;&thinsp;false logic for what it&#8217;s worth), and though we received RFPs for large, lucrative projects from day one (the stream of requests has remained steady since January 2007), scheduling and availability became a barrier to accepting many of them. The projects we <em>have</em> been able to work on, however, have been lots of fun, in one case even allowing us to stretch beyond the computer screen to design for pixels of another sort (more on that when we&#8217;re allowed to talk about it&nbsp;;)</p>
<p>Having more than enough client work has served us two-fold: on one hand, we&#8217;ve become even more selective about the clients we choose to work with than we were before (being selective is the key to staying interested and engaged: only accept projects you can be passionate about for clients you&#8217;ll enjoy working with), but it&#8217;s also afforded us the time to indulge our own&nbsp;interests.</p>
<h3>Dude, I hear a&nbsp;car</h3>
<p>And indulge we have: the Sidebar Network is home to four projects so far, with more on the way (use the network navbar at the top of any of the sites in the network to bounce between&nbsp;them).</p>
<p><img class="image-full" src="/p/blog/sidebar-realign-m3.png" width="500" height="60" alt="MyMileMarker promotional image" /></p>
<h4>My Mile&nbsp;Marker</h4>
<p>Known within our ranks as &#8220;M3&#8221;, <a href="http://mymilemarker.com/">MyMileMarker</a> tracks your vehicle&#8217;s mileage, <span class="caps">MPG</span>, and provides projections so you can judge just how much gas you&#8217;re really guzzling. The original idea was Steve&#8217;s, and we all chipped in during our spare time to make it happen, from brainstorming to <span class="caps">IA</span> to design (with Steve taking on all the <a href="http://www.rubyonrails.org/">Ruby on Rails</a> programming duties), including a handy <a href="http://mymilemarker.com/m">mobile site</a> that features a lick-able custom stylesheet for iPhone/Mobile Safari&nbsp;users.</p>
<p><a href="http://twitter.com/mymm"><span class="caps">SMS</span> via Twitter</a> and <a href="http://edwardscherf.com/">Edward Scherf&#8217;s</a> beautiful custom icons are the icing on the cake for this lovely little app that already has almost 10,000 users, spreading purely by word of mouth (thanks in large part to the <a href="http://twitter.com/">Twitter</a>&nbsp;community).</p>
<p><img class="image-full" src="/p/blog/sidebar-realign-snitter.png" width="500" height="60" alt="Snitter promotional image" /></p>
<h4>Snitter</h4>
<p>What do you get when you put Snook and Twitter together? Why, you <a href="http://getsnitter.com/">get Snitter</a>, of course. What started as an experiment of Jon&#8217;s to become familiar with <a href="http://www.adobe.com/products/air/">Adobe <span class="caps">AIR</span></a> has turned into one of the most popular 3rd party Twitter clients on <span class="caps">OS</span> X and Windows. The programming (including loads of cool filtering options) is all Jon&#8217;s&thinsp;&mdash;&thinsp;the rest of us chipped in feature suggestions and improvements, with Steve and I providing designs for the default set of themes. If you haven&#8217;t tried it yet, what are you waiting for? <a href="http://getsnitter.com/">Get Snitter</a> and start&nbsp;Twittering!</p>
<p><img class="image-full" src="/p/blog/sidebar-realign-overheardit.png" width="500" height="60" alt="Overheard.it promotional image" /></p>
<h4>Overheard.it</h4>
<p>With Twitter clearly playing a large part in our online lives, it was only logical for our minds to wander in its direction. After integrating MyMileMarker with Twitter, and seeing <a href="http://simplebits.com/">Dan Cederholm&#8217;s</a> <a href="http://foamee.com/">Foamee</a> introduce the concept of a <a href="http://bokardo.com/archives/foamee-a-barnacle-app-for-indebted-drinkers/">&#8220;barnacle app&#8221;</a>, we decided to follow the most popular word on Twitter (&#8220;overheard&#8221;) and see what people were talking about. After a few nights worth of sketching, design, development (by Jon, using <a href="http://www.cakephp.org/">CakePHP</a>) and testing, <a href="http://overheard.it/">Overheard.it</a> was released upon the world (the domain itself makes it a site worth visiting&nbsp;;)</p>
<p>Future plans for <a href="http://overheard.it/">Overheard.it</a> include event-specific filters (for those great conference quotes we all love), voting, and all manner of other potential&nbsp;silliness.</p>
<p><img class="image-full" src="/p/blog/sidebar-realign-plugables.png" width="500" height="60" alt="Django Plugables promotional image" /></p>
<h4>Django&nbsp;Plugables</h4>
<p>Bryan is quickly becoming a <a href="http://www.djangoproject.com/">Django</a> savant (and has been toiling away at various projects for a year or so), and in addition to doing his best to convert the rest of us to Django-ites, he likes to find problems that need solving&thinsp;&mdash;&thinsp;a few days ago (this past Friday, to be exact) he decided the Django community needed an easier way to access the growing library of 3rd party &#8220;pluggable&#8221; applications without having to dig around Google Code for hours hoping to find the diamond in the&nbsp;rough.</p>
<p>Three days later, he had designed, built and launched <a href="http://djangoplugables.com/">Django Plugables</a>, and if you have any interest in Django, you should check it out. Speaking of Django, you should also dig around Bryan&#8217;s recently relaunched <a href="http://avalonstar.com/">Avalonstar</a>, which, in addition to sporting a terrific design, is all Django,&nbsp;baby.</p>
<h3>It&#8217;s a miracle in a&nbsp;bowl</h3>
<p>The design community uses the term &#8220;realign&#8221; to describe an adjustment of direction rather than a bottom-up transformation, and that&#8217;s a good way to describe what has been happening within Sidebar since last summer (the course-correction was already evident in our <a href="http://www.digital-web.com/articles/interview_sidebar_creative/">Digital Web interview</a> with <a href="http://www.digital-web.com/about/staff/matthew_pennell">Matthew Pennell</a> back in September). It was clear that we needed to reflect our realignment on the site, while also taking the opportunity to realign the site itself, showing more of what makes us who we are as individuals, and with more emphasis on consulting, training and education&thinsp;&mdash;&thinsp;areas we all intend to spend more time focusing on in the coming year, including a series of <a href="http://sidebarcreative.com/training/#workshops">full-day workshops</a> we&#8217;re planning to bring to cities normally overlooked by larger&nbsp;conferences.</p>
<p>There are a ton of amazing ideas bouncing around the Sidebar <a href="http://campfirenow.com/">Campfire</a>, and I&#8217;m more excited than ever to be a part of this group. So go check out <a href="http://sidebarcreative.com/">our little realign</a>, and stay tuned: the best is yet to&nbsp;come.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/04/sidebar-creative-collective-realignment/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Email Doesn’t Scale</title>
		<link>http://superfluousbanter.org/archives/2008/02/email-doesnt-scale/</link>
		<comments>http://superfluousbanter.org/archives/2008/02/email-doesnt-scale/#comments</comments>
		<pubDate>Thu, 28 Feb 2008 00:07:40 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/archives/2008/02/email-doesnt-scale/</guid>
		<description><![CDATA[I've been wanting to write about my problems with email for a while now, but keep coming up short when it comes to explaining exactly <em>why</em> it fails for me. That is, until reading <a href="http://www.tantek.com/log/2008/02.html">Tantek's latest</a> on the subject...]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been wanting to write about my problems with email for a while now, but keep coming up short when it comes to explaining exactly <em>why</em> it fails for me. That is, until reading <a href="http://www.tantek.com/log/2008/02.html">Tantek&#8217;s latest</a> on the&nbsp;subject:</p>
<blockquote><p>&#8220;I&#8217;m probably responding to less than 1 in 10 emails that are sent directly to me, even fewer of those that are sent to a set of people or a list. The usability of email for me has deteriorated so much that I exclaimed on Twitter recently: <span class="caps">EMAIL</span> shall henceforth be known as&nbsp;<span class="caps">EFAIL</span>.&#8221;</p></blockquote>
<p>He goes on to explain his thoughts on why point to point communications do not scale, and how emails in general are becoming too bloated (the lack of a singular focus in many emails I receive definitely impacts my likelihood of responding), as well as how 1:many or 1:all mediums are superior to 1:1 methods (e.g. email). This is exactly what I&#8217;ve been trying to figure out how to&nbsp;say.</p>
<h3>Semi-solutions</h3>
<p>Tantek certainly isn&#8217;t the first to write about the the problems with email - <a href="http://www.mikeindustries.com/blog/archive/2007/07/fight-email-overload-with-sentences">Mike Davidson&#8217;s solution</a> last year was to reduce the length and detail of replies to a <a href="http://sentenc.es/">specific number of sentences</a>, but that hasn&#8217;t allowed me to make a sufficient dent in my&nbsp;inbox.</p>
<p>Similarly, <a href="http://www.43folders.com/izero">Inbox Zero</a> (a process many of my friends use to keep the noise down) just doesn&#8217;t seem to work for me. Plus, having an empty inbox won&#8217;t stop people from communicating with me via email when they should be using another&nbsp;medium.</p>
<h3>It&#8217;s not you, it&#8217;s&nbsp;me</h3>
<p>Both <em>Inbox Zero</em> and <em>Sentenc.es</em> aim to reduce the impact of the full inbox by making it easier to empty on a regular basis, but for me that doesn&#8217;t solve the problem as I see it&thinsp;&#8212;&thinsp;it isn&#8217;t a matter of finding a way to work around what email has become, it&#8217;s just that email is being used improperly, and I&#8217;d rather use other methods of communication that are more appropriate to the type and relevance of the&nbsp;message.</p>
<h3>How do we fix&nbsp;it?</h3>
<p>Email isn&#8217;t broken for everyone (or at least, if it is they don&#8217;t realize it yet), but I find more people becoming frustrated with email every week. Add the whole <a href="http://en.wikipedia.org/wiki/Spam_(electronic)"><span class="caps">SPAM</span></a> problem into the mix (over the last 6 months, more and more of my <em>valid</em> incoming/outgoing messages are getting caught by <span class="caps">SPAM</span> filters than ever) and I just see email continuing its downward&nbsp;spiral.</p>
<p>I&#8217;m not sure of the solution - as long as my clients continue to send me emails and expect a response, I&#8217;m a bit nervous to tell them to shove it (it&#8217;s hard enough to get them to all use Basecamp instead for project communication, let alone stop using a method that still works for <em>them</em>), but perhaps that&#8217;s what it will come down to. Tantek&#8217;s article ends with a list of suggestions that can serve as a decent starting point, and his <a href="http://tantek.pbwiki.com/EmailReduction">Email Reduction project</a> is also worth checking&nbsp;out.</p>
<p>Does email = efail for you? How do you feel about the future of&nbsp;email?</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/02/email-doesnt-scale/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Pardon Our Dust</title>
		<link>http://superfluousbanter.org/archives/2008/02/pardon-our-dust/</link>
		<comments>http://superfluousbanter.org/archives/2008/02/pardon-our-dust/#comments</comments>
		<pubDate>Wed, 27 Feb 2008 22:22:44 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/archives/2008/02/pardon-our-dust/</guid>
		<description><![CDATA[If you're visiting this site for the first time, and are seeing the default WordPress theme (aka Kubrick), please rest assured that a custom designed theme is hiding somewhere within the WordPress installation--WordPress is just having a bit of a tantrum lately, and has decided to keep reverting back to the default shortly after I reset the custom theme in the admin.]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re visiting this site for the first time, and are seeing the default <a href="http://wordpress.org">WordPress</a> theme (aka Kubrick), please rest assured that a custom designed theme is hiding somewhere within the WordPress installation&thinsp;&#8212;&thinsp;WordPress is just having a bit of a tantrum lately, and has decided to keep reverting back to the default shortly after I reset the custom theme in the&nbsp;admin.</p>
<p>Those of you who are return visitors are hopefully missing the usual orange and brown goodness that has graced these pages for almost 2&nbsp;years.</p>
<h3>Hosting&nbsp;Woes</h3>
<p>For the last few weeks, my homepage hasn&#8217;t been loading at all - Dreamhost didn&#8217;t seem to think it was a problem on their end (though I&#8217;d made no changes to the site between it working and ceasing to work). After going around in circles with them for too long, I uploaded a fresh install of WordPress, moved my plugins and theme directories, changed a few hard-coded absolute URLs, and things were working again. For about 5&nbsp;minutes.</p>
<h3>Artificial&nbsp;Intelligence?</h3>
<p>Perhaps my blogging software is trying to tell me something? I&#8217;ve planned a redesign for well over a year, but other endeavors have taken priority (e.g. <a href="http://sidebarcreative.com">Sidebar Creative</a>, <a href="http://webgraph.com">Webgraph</a>, <a href="http://roundersquartet.com">Rounders</a>, various client/consulting work, <a href="http://design.isinthedetails.com">presentations</a>, <a href="http://futureofwebapps.com/2008/miami/workshops.php#jumper02">workshops</a> and toying with things like <a href="http://virb.com/danrubin">Virb</a>). I&#8217;ve also been seriously thinking about hitting the redesign over the last month or so&thinsp;&#8212;&thinsp;is WordPress now smart enough to read my mind? Or is my soon-to-be-replaced theme getting jealous? It&#8217;s creepy from where I&#8217;m&nbsp;sitting&#8230;</p>
<h3>Separating Content From&nbsp;Presentation</h3>
<p>Okay, so it&#8217;s not the use for which that phrase is intended, but in a way, it&#8217;s interesting to see my content without its custom skin. I&#8217;ve been reading through many of the articles I&#8217;ve written, and paying more attention to the text. Perhaps this is a normal issue with designers trying to objectively read their own content while getting distracted by their own designs&thinsp;&#8212;&thinsp;if you haven&#8217;t tried it, give it a shot sometime; it may help expose issues with your design, or your content, or at the very least allow you a fresh perspective on your own&nbsp;writing.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2008/02/pardon-our-dust/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Pink for October</title>
		<link>http://superfluousbanter.org/archives/2007/10/pink-for-october/</link>
		<comments>http://superfluousbanter.org/archives/2007/10/pink-for-october/#comments</comments>
		<pubDate>Tue, 02 Oct 2007 22:17:28 +0000</pubDate>
		<dc:creator>Dan Rubin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://superfluousbanter.org/archives/2007/10/pink-for-october/</guid>
		<description><![CDATA[As you may have noticed (if you're viewing this site in a standard browser), I've ditched orange in favor of pink, and things will stay that way for the rest of <a href="http://pinkforoctober.org/">October</a>. I'm doing this, along with <a href="http://sites.pinkforoctober.org/">many other sites</a>, to support Breast Cancer Awareness Month.]]></description>
			<content:encoded><![CDATA[<p>As you may have noticed (if you&#8217;re viewing this site in a standard browser), I&#8217;ve ditched orange in favor of pink, and things will stay that way for the <a href="http://pinkforoctober.org/">rest of October</a>. I&#8217;m doing this, along with <a href="http://sites.pinkforoctober.org/">many other sites</a>, to support Breast Cancer Awareness&nbsp;Month.</p>
<p>For more information on this project (created by <a href="http://usabilityworks.org/">Matthew Oliphant</a>), check out the <a href="http://pinkforoctober.org/">Pink for October</a>&nbsp;site.</p>
]]></content:encoded>
			<wfw:commentRss>http://superfluousbanter.org/archives/2007/10/pink-for-october/feed/</wfw:commentRss>
		</item>
	<feedburner:awareness xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">http://api.feedburner.com/awareness/1.0/GetFeedData?uri=superfluousbanter</feedburner:awareness></channel>
</rss><!-- Dynamic Page Served (once) in 1.095 seconds --><!-- Cached page served by WP-Super-Cache --><!-- Compression = gzip -->
