<?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>Steele</title>
	<atom:link href="http://steelebranding.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://steelebranding.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 28 Oct 2009 18:12:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Shorthand methods for unbind in jQuery</title>
		<link>http://steelebranding.com/2009/10/28/shorthand-methods-for-unbind-in-jquery/</link>
		<comments>http://steelebranding.com/2009/10/28/shorthand-methods-for-unbind-in-jquery/#comments</comments>
		<pubDate>Wed, 28 Oct 2009 18:01:38 +0000</pubDate>
		<dc:creator>Brant</dc:creator>
				<category><![CDATA[New Media]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[example]]></category>
		<category><![CDATA[external]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[unbind]]></category>

		<guid isPermaLink="false">http://new.steele-associates.com/?p=142</guid>
		<description><![CDATA[Originally found on the Learning jQuery blog by Karl Swedberg Someone sent me an email the other day, asking that I add shorthand methods for .unbind(eventType) to the jQuery core file. He argued that since jQuery provides shorthands such as .click() for .bind(&#39;click&#39;), it should also include .unclick() for .unbind(&#39;click&#39;) for consistency. But he didn&#39;t [...]]]></description>
			<content:encoded><![CDATA[<p>
	Originally found on the Learning jQuery blog by <a href="http://www.englishrules.com">Karl Swedberg</a></p>
<p>
	Someone sent me an email the other day, asking that I add shorthand methods for <code>.unbind(eventType)</code> to the jQuery core file. He argued that since jQuery provides shorthands such as <code>.click()</code> for <code>.bind(&#39;click&#39;)</code>, it should also include <code>.unclick()</code> for <code>.unbind(&#39;click&#39;)</code> for consistency. But he didn&#39;t consider two things:</p>
<ol>
<li>
		I can&#39;t change jQuery&#39;s API.</li>
<li>
		Those shorthand methods used to be part of jQuery core, but with the release of 1.0, John Resig cleaned up the API quite a bit, removing all of the <code>.un<em>Event</em>()</code> and <code>.one<em>Event</em>()</code> methods.</li>
</ol>
<p>
	While I understand the desire for simplicity in developers&#39; code and consistency in jQuery&#39;s API, I think Mr. Resig made the right decision removing the shorthand methods. Keeping both &quot;un&quot; and &quot;one&quot; shorthands in there would have meant an additional 44 methods, with very little gain for most users of the library. Nevertheless, it&#39;s fairly trivial to create a plugin for this sort of thing.</p>
<p><span id="more-142"></span>
<p>
	If we want the shorthand methods for a particular project, we can simply iterate through an array of event types and add the &quot;un&quot; or &quot;one&quot; method to the jQuery prototype (<code>jQuery.fn</code>). Here is what it might look like:</p>
<div class="igBar">
	<span id="ljavascript-1"><a href="http://www.learningjquery.com/2009/06/shorthand-methods-for-unbind#" onclick="javascript:showPlainTxt('javascript-1'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite">
	<span class="langName">JavaScript:</span></p>
<div id="javascript-1">
<div class="javascript" style="font-family: monospace;">
<ol>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>$<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span></div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; <span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> eventTypes <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">&#39;blur&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;focus&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;resize&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;scroll&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;click&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;dblclick&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
</li>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(51, 102, 204);">&#39;mousedown&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;mouseup&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;mousemove&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;mouseover&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(51, 102, 204);">&#39;mouseout&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;mouseenter&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;mouseleave&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;change&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;select&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
</li>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(51, 102, 204);">&#39;submit&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;keydown&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;keypress&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;keyup&#39;</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">&#39;error&#39;</span><span style="color: rgb(0, 153, 0);">]</span>;</div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp;</div>
</li>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; <a href="http://www.learningjquery.com/wp-content/themes/ljq/docs.php?fn=$.each"><span style="">$.<span style="color: rgb(102, 0, 102);">each</span></span></a><span style="color: rgb(0, 153, 0);">(</span>eventTypes<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><a href="http://www.learningjquery.com/wp-content/themes/ljq/docs.php?fn=index"><span style="">index</span></a><span style="color: rgb(51, 153, 51);">,</span> eventType<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span></div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; jQuery.<span style="color: rgb(102, 0, 102);">fn</span><span style="color: rgb(0, 153, 0);">[</span> <span style="color: rgb(51, 102, 204);">&#39;un&#39;</span> <span style="color: rgb(51, 153, 51);">+</span> eventType <span style="color: rgb(0, 153, 0);">]</span> <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span> fn <span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span></div>
</li>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 0, 102); font-weight: bold;">return</span> <span style="color: rgb(0, 0, 102); font-weight: bold;">this</span>.<a href="http://www.learningjquery.com/wp-content/themes/ljq/docs.php?fn=unbind"><span style="">unbind</span></a><span style="color: rgb(0, 153, 0);">(</span> eventType<span style="color: rgb(51, 153, 51);">,</span> fn <span style="color: rgb(0, 153, 0);">)</span> ;</div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; &nbsp; <span style="color: rgb(0, 153, 0);">}</span>;</div>
</li>
<li style="font-weight: normal; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						&nbsp; <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span>;</div>
</li>
<li style="font-weight: bold; vertical-align: top; color: rgb(172, 170, 154);">
<div style="margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: 1.2em; font-size-adjust: none; font-stretch: normal; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: top;">
						<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">(</span>jQuery<span style="color: rgb(0, 153, 0);">)</span>;</div>
</li>
</ol></div>
</p></div>
</div>
<p>
	&nbsp;</p>
<p>
	To add the &quot;one&quot; shorthand methods, we can repeat lines 8&ndash; 9, using <code>one</code> in place of both <code>un</code> in line 8 and <code>unbind</code> in line 9.</p>
]]></content:encoded>
			<wfw:commentRss>http://steelebranding.com/2009/10/28/shorthand-methods-for-unbind-in-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Call to Action, Get Above the Fold</title>
		<link>http://steelebranding.com/2009/10/27/a-call-to-action-get-above-the-fold/</link>
		<comments>http://steelebranding.com/2009/10/27/a-call-to-action-get-above-the-fold/#comments</comments>
		<pubDate>Tue, 27 Oct 2009 22:46:30 +0000</pubDate>
		<dc:creator>Brant</dc:creator>
				<category><![CDATA[New Media]]></category>

		<guid isPermaLink="false">http://new.steele-associates.com/?p=137</guid>
		<description><![CDATA[Your designs need to convert visitors into clients.  How do you do that?

   1. Have a goal.
   2. Have a clear message.
   3. Have a clear benefit.
   4. Have a clear call to action.
   5. Put it all above the fold.]]></description>
			<content:encoded><![CDATA[<p>
	Your designs need to convert visitors into clients.&nbsp; How do you do that?</p>
<ol>
<li>
		Have a <strong>goal</strong>.</li>
<li>
		Have a clear <strong>message</strong>.</li>
<li>
		Have a clear <strong>benefit</strong>.</li>
<li>
		Have a <strong>clear call to action</strong>.</li>
<li>
		Put it all <strong>above the fold</strong>.</li>
</ol>
<p>
	Simple, but a lot of designs miss these factors.&nbsp; Here are four sites that get it right to show you some nice examples.&nbsp; We have even wireframed them (albeit quick and dirty) to showcase how simple the designs really are.&nbsp; Again, the beauty is in the details, art and message, not the layout.</p>
<p><span id="more-137"></span>
<p>
	<strong>1.&nbsp; <a href="http://www.MailChimp.com">MailChimp.com</a><br />
	</strong></p>
<p>
	&nbsp;</p>
<div class="wp-caption aligncenter" id="attachment_2012" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/mailchiimp.png"><img alt="Mailchimp Design" class="size-medium wp-image-2012" height="169" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/mailchiimp-300x169.png" title="Mailchimp Design" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>Mailchimp Design</strong></p>
</div>
<div class="wp-caption aligncenter" id="attachment_2013" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/mailchimp-wire.png"><img alt="MailChimp Wireframe" class="size-medium wp-image-2013" height="225" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/mailchimp-wire-300x225.png" title="MailChimp Wireframe" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>MailChimp Wireframe</strong></p>
</div>
<p>
	&nbsp;</p>
<p>
	<strong>2.&nbsp; Base Camp</strong></p>
<p>
	&nbsp;</p>
<div class="wp-caption aligncenter" id="attachment_2014" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/basecamp.png"><img alt="BaseCamp Design" class="size-medium wp-image-2014" height="172" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/basecamp-300x172.png" title="BaseCamp" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>BaseCamp Design</strong></p>
</div>
<div class="wp-caption aligncenter" id="attachment_2015" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/basecamp-wire.png"><img alt="BaseCamp Wire Frame" class="size-medium wp-image-2015" height="172" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/basecamp-wire-300x172.png" title="basecamp-wire" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>BaseCamp Wireframe</strong></p>
</div>
<p>
	&nbsp;</p>
<p>
	<strong>3.&nbsp; Rackspace</strong></p>
<p>
	&nbsp;</p>
<div class="wp-caption aligncenter" id="attachment_2016" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/rackspace.png"><img alt="Rackspace Design" class="size-medium wp-image-2016" height="175" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/rackspace-300x175.png" title="Rackspace Design" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>Rackspace Design</strong></p>
</div>
<div class="wp-caption aligncenter" id="attachment_2017" style="width: 310px;">
	<strong><strong><a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/rackspace-wire.png"><img alt="Rackspace Wireframe" class="size-medium wp-image-2017" height="175" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/rackspace-wire-300x175.png" title="Rackspace Wireframe" width="300" /></a></strong></strong></p>
<p class="wp-caption-text">
		<strong>Rackspace Wireframe</strong></p>
</div>
<p>
	&nbsp;</p>
<p>
	<strong>4.&nbsp; Freshbooks</strong></p>
<p>
	<a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/freshbooks.png"><img alt="freshbooks" class="aligncenter size-medium wp-image-2018" height="169" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/freshbooks-300x169.png" title="freshbooks" width="300" /></a></p>
<div class="wp-caption aligncenter" id="attachment_2019" style="width: 310px;">
	<a href="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/freshbooks-wire.png"><img alt="Freshbooks Wireframe" class="size-medium wp-image-2019" height="225" src="http://www.paperstreet.com/blog/wp-content/uploads/2009/09/freshbooks-wire-300x225.png" title="Freshbooks Wireframe" width="300" /></a></p>
<p class="wp-caption-text">
		Freshbooks Wireframe</p>
</div>
<p>
	<strong>Conclusion</strong></p>
<p>
	As you can see, each site had the basics above the fold:</p>
<ol>
<li>
		Logo</li>
<li>
		Menu</li>
<li>
		Contact Info (except Basecamp and Mailchimp)</li>
</ol>
<p>
	They also had the following which make them great sites:</p>
<ol>
<li>
		Call to Action</li>
<li>
		Key Benefits</li>
<li>
		Art tied to the Theme / Benefits</li>
<li>
		Secondary Benefits (if space available)</li>
</ol>
<p>
	Does your web site do this?</p>
]]></content:encoded>
			<wfw:commentRss>http://steelebranding.com/2009/10/27/a-call-to-action-get-above-the-fold/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
