<?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/"
	xmlns:georss="http://www.georss.org/georss" >

<channel>
	<title>The Stairwell &#187; Code</title>
	<atom:link href="http://stairwellblog.com/category/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://stairwellblog.com</link>
	<description></description>
	<lastBuildDate>Mon, 30 Apr 2012 22:00:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>YouTube Channels are Launching Business and Boosting Online Profiles</title>
		<link>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/</link>
		<comments>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/#comments</comments>
		<pubDate>Mon, 30 Apr 2012 22:00:59 +0000</pubDate>
		<dc:creator>joshuasinason</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Digital Advertising]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Marketing]]></category>
		<category><![CDATA[Search Engine Marketing]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[browsers]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=3162</guid>
		<description><![CDATA[<p>Last week I wrote briefly about Chris Hardwick and his Nerdist Company.  In the week since I got the chance to speak briefly with the man about his YouTube Channel and how he’s preparing for the time when YouTube and Hulu become rivals to Comcast Cable and Dish Network, “Three to Four years is a good estimate,” Hardwick said when asked about a time table for that.  If his YouTube Channel is any indication he’s pretty ready. Along with a few others he’s building a huge following that could pay off big in the next few years.  Hardwick, along with&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>Last week I wrote briefly about Chris Hardwick and his Nerdist Company.  In the week since I got the chance to speak briefly with the man about his YouTube Channel and how he’s preparing for the time when YouTube and Hulu become rivals to Comcast Cable and Dish Network, “Three to Four years is a good estimate,” Hardwick said when asked about a time table for that.  If his YouTube Channel is any indication he’s pretty ready. Along with a few others he’s building a huge following that could pay off big in the next few years.  Hardwick, along with other mega YouTube Channel’s like Felicia Day’s Geek and Sundry, and a few others are starting big things using YouTube Channels and some other companies are boosting their online profiles in a big way.</p>
<p>YouTube channels are nothing new.  They’ve existed in some form for years, but it is only recently that they have become a major force for launching new brands and products.  Thanks to things like increased exposure via Playstation and Apple TV along with mobile and tablet video on the rise.  The YouTube channel has grown as a great place to launch a brand.  </p>
<p>Felicia Day’s Geek and Sundry Company launched on YouTube and Google Hangouts on April 1st and has already built up a huge following thanks to a big launch on YouTube.  Felecia started out producing short films and games but ballooned into a small viral media empire.  Geek and Sundry represents a huge leap as she launches various different products including internet publishing all funneled through her YouTube Channel.  Day was able to take a little bit of buzz she built up thanks to her own site and build it into something huge using a YouTube Channel.  And she did it all without spending much of anything on advertising.</p>
<p>One thing she did was do a large amount of cross promotion and build up her launch date in a big way.  She found other websites and channels that had similar audiences such as Hardwick’s and cross promoted with them using giveaways on Twitter.  Day used every form of social media including the brand new Google Hangouts to promote the launch of the YouTube Channel   in a big way and it paid off with some great viral buzz that she fed continuously until her much publicized launch date. </p>
<p>Speaking of the launch date, Felicia Day held a massive launch day promotion that included a 12 hour streaming marathon on the brand new Google Plus Hangouts (Aside to YouTube and Facebook; make this more accessible.  Streaming video is one thing you guys are lacking on and it’s going to make Google Plus look great in comparison.) This gave her some great buzz and even some trending topics on Twitter on her very first day of launch.  She showed off her brand and made some great content for her YouTube channel while getting some great buzz all in one day and all without spending much.  She made the launch of her new brand into an event and promoted it as such.  She did it in a way any small business with a dedicated niche market can do.  Remember, your niche audience is looking for things to talk about.  All you have to do is find a way to get the ball rolling.          </p>
<p>As I said, the new YouTube Channels are a good way to launch your brand and are great for SEO, but as just like the issues with streaming video, they still have some ways to go.  As much as YouTube Channels are a great way to get your brand across there are still some drawbacks to putting your advertising dollars and your time into them as a launch pad for your brand.  “They need to find an easier way for people to see them.”  Hardwick said, noting the leaps they’ve already made as far as digital streaming to television goes.  “YouTube needs to make your channel ‘one click away’ just like any other TV network.  When that does all come together, Day, Hardwick, and anyone else along for the ride that develops a base there could be in for a major windfall.                 </p>
<p><a href="http://www.sfgate.com/cgi-bin/article.cgi?f=/g/a/2012/04/15/prweb9402991.DTL">&#8220;How to Boost YouTube Views with Web Marketing Know-How&#8221;</a></p>
<p><a href="http://www.usatoday.com/tech/columnist/talkingtech/story/2012-04-12/hollywood-collective-agency/54233860/1">YouTube stars get Hollywood Superagents</a></p>
<p><a href="http://www.prweb.com/releases/Rush-Order-Tees/custom-t-shirts/prweb9395000.htm">Rush Order Tees Launches New YouTube Channel</a> </p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SEO is important. Very important.</title>
		<link>http://stairwellblog.com/2010/09/seo-is-important-very-important/</link>
		<comments>http://stairwellblog.com/2010/09/seo-is-important-very-important/#comments</comments>
		<pubDate>Wed, 01 Sep 2010 20:49:00 +0000</pubDate>
		<dc:creator>tyler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Search Engine Marketing]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Alt]]></category>
		<category><![CDATA[Anchor]]></category>
		<category><![CDATA[findability]]></category>
		<category><![CDATA[Findable]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Mark-up]]></category>
		<category><![CDATA[META]]></category>
		<category><![CDATA[Robots]]></category>
		<category><![CDATA[search engine]]></category>
		<category><![CDATA[search engine optimization]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[Tags]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2576</guid>
		<description><![CDATA[SEO can be tricky. The search engines are doing their best to index your site's relevant content, but there are things you can (and should) do to make sure they are successful.]]></description>
			<content:encoded><![CDATA[<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">There is a <a href="http://en.wikipedia.org/wiki/Exabyte">popular notion</a> that <em>all</em> of information ever produced by humans from the beginning of time up until around 2003 could be stored in a 5 Exabyte hard drive (An Exabyte is 1 million Terabytes). Or if you prefer, it is also claimed that all the words <em>ever</em> spoken could also fit onto a disk of that size. In contrast, today’s tidal wave of information is so prolific that we generate that much ‘new’ information every 2 days! Thanks mostly to the Internet.</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">We need tools like search engines to help organize and make sense of all the data we’re producing. In order for us to make sense of all this data it means making the right stuff ‘findable’ at any given time. This is where Search Engine Optimization (SEO) comes in. The search engines are <a href="http://computer.howstuffworks.com/internet/basics/search-engine.htm">doing their best</a> to index your site&#8217;s relevant content, but there are things you can (and should) do to make sure they are successful. Search engines get better all the time, but they’re still just robots and can not reason the same as you and I. They scan your content and your markup and collect what they ‘think’ is valuable. Until some significant computing breakthrough&#8217;s occur, It’s your job to provide them with hard data that matches your concept of what the site actual is meant to embody. This will, in turn, make you more easily findable to human searchers.</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">SEO can be tricky. It is not comprised of a singular practice, but rather a collection of several practices that can vary from project to project. These practices carry different weight in effecting the search rankings and due to ever-changing search engine algorithms different practices can become more or less important over time.</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">Confused yet? What’s worse is the search engine companies don’t really even come out and tell everyone what the secret sauce is. Periodically they leak out bits of information on their algorithms, but they are closely guarded secrets for the most part.</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">So, what should you be doing to implement SEO into your site? Here’s a basic run down of essential techniques for Content, Markup, &amp; Server-side SEO:</p>
<ul>
<li> Write copy that is naturally keyword rich (not stuffed). This means being honest. Don&#8217;t try to trick the search engines.</li>
<li> Make content visible to the search engines. Currently, technologies such as Flash, Javascript, and Ajax can make content harder to index.</li>
<li> Create an XML sitemap so the search engines can easily crawl and index your site. You can learn how to create one <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=156184">here</a>.</li>
<li> Name your files and folders in a descriptive manner. Use keywords whenever possible.</li>
<li> Keep keyword density around 7-9%. Anymore than that is not going to have a natural tone and you could get penalized by the search engined for going too much over that. Several free online tools exist.</li>
<li>Abundance of inbound/outbound links affect your page ranking. Search engines like sites that promote linking.</li>
<li> Follow all best practices and web standards when marking up your pages. This will help ensure that the search engines don&#8217;t have trouble indexing your site and give your content hierarchy. Search engines take this into account when they run their algorithms. Head tags (&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;&#8230;) are a good example of this.</li>
<li> Make the most of your &lt;title&gt; tag. It weighs heavily in determining ranking. Keep it under 12 words (70 characters) and remember to keep the language natural. Don&#8217;t just stuff keywords in.</li>
<li> Keep URLs clean and meaningful with keywords in them if possible</li>
<li>META description tag &#8211; Like the Page title tag, it also weight heavily  on the search results rankings. Utilize this tag for every page in your  site if possible. Try to keep it to around 150 characters. It can be  longer, but most search engine result pages will truncate your copy if  it is.</li>
<li> Anchor tags &#8211; The text labels for links are perceived as one of the most critical places to position relevant keywords.</li>
<li> Alt tags. These help make content such as images visible to the robots. Using them is a standard accessibility practice as well.</li>
</ul>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">Of course there are many more techniques you <em>may</em> want to consider depending on your goals and the site you are trying to optimize. As mentioned above, search algorithms change and sites like Google frequently experiment with ways to improve and keep up with the landscape of the web. Various content <em>types</em> such as images,video, and real-time data are starting to play a larger roll in how search results pages are populated and new ways of indexing this data are always emerging. At a certain point you may want to consider seeking the services of a professional if your site is complex or has some cutting edge features. At the very least, try and be pro-active in learning about the basics of SEO and keeping an ear to the ground concerning changes within the field.</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px">
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px"><strong>Further reading:</strong></p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px;padding-left: 30px"><a href="http://www.amazon.com/Ambient-Findability-Peter-Morville/dp/0596007655/findability-20/">Ambient Findability</a>: by Peter Morville</p>
<p style="font-family: Arial,Helvetica,sans-serif;font-size: 14px;padding-left: 30px"><a href="http://www.amazon.com/Building-Findable-Websites-Standards-Beyond/dp/0321526287/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1283369282&amp;sr=1-1">Building Findable Websites</a>: by Aaron Walter</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/09/seo-is-important-very-important/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt. 5</title>
		<link>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/</link>
		<comments>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/#comments</comments>
		<pubDate>Sat, 12 Jun 2010 22:48:26 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2410</guid>
		<description><![CDATA[<p>In the fifth and final part of our multi-part Frontend Optimization series, I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your images and javascript code.</p>
<h4>Optimize Javascript Code</h4>
<ol>
<li>Minimize DOM Access. Manipulating the DOM is very resource intensive for browsers.</li>
<li>Smart Event Handlers. Use Event Delegation. You can put on event handler on a container div and then figure out which button inside that div was actually clicked in the function to be executed.</li>
<li>Reduce size of private functions (those called only within the js itself, not those called in other documents). So function foobar() would become&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<p>In the fifth and final part of our multi-part Frontend Optimization series, I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your images and javascript code.</p>
<h4>Optimize Javascript Code</h4>
<ol>
<li>Minimize DOM Access. Manipulating the DOM is very resource intensive for browsers.</li>
<li>Smart Event Handlers. Use Event Delegation. You can put on event handler on a container div and then figure out which button inside that div was actually clicked in the function to be executed.</li>
<li>Reduce size of private functions (those called only within the js itself, not those called in other documents). So function foobar() would become function a() .</li>
<li>Use local variables whenever possible</li>
<li>Use the IF statement when
<ol>
<li>There are no more than two discrete values for which to test</li>
<li>There are large number of values that can be easily separated into ranges</li>
</ol>
</li>
<li>Use the SWITCH statement when
<ol>
<li>There are more than 2 but fewer than 10 values in which to test</li>
<li>There are no ranges for conditions because the values are nonlinear</li>
</ol>
</li>
<li>Use array lookup when:
<ol>
<li>There are more than 10 values to test</li>
<li>The results of the conditions are single values rather than number of actions to be taken.</li>
</ol>
</li>
<li>Avoid the FOR-IN loop</li>
<li>Use Duff’s Device for looping through arrays when you notice a bottleneck in loops that process a large number of items</li>
<li>Alias  javascript properties like foo.style or document.getElementById</li>
</ol>
<h4>Optimize Images</h4>
<ol>
<li>Use <a href="http://smushit.com" target="_blank">smushit.com</a> or <a href="http://punypng.com" target="_blank">punypng.com</a> to remove any unwanted metadata from your images.</li>
<li>Since smushit.com doesn’t strip meta from jpeg you can do it manually with <a href="http://jpegclub.org/" target="_blank">jpegtran</a></li>
<li>Be sure to always check between gif, png 8, png 24, and jpg when saving images for the web to ensure that you&#8217;re using the format that will yield the smallest file size.</li>
<li>Optimize CSS sprites to go horizontally instead of vertically, combine similar colors to keep color count low (in other words have a sprite with all green together and  another with brown, but only do so if it keeps file size lower and http requests down. Only do it if it will not yeild higher http requests and not yeild higher file sizes. the whole point is to reduce those factors.) Also don&#8217;t leave big gaps between image in the sprite.</li>
<li>Favicon &#8211; Get one. Browers will get a 404 error even if you don&#8217;t have one. 404s are slow to respond. So keep it under 1k and be careful about your expires header since you can&#8217;t rename the file if you want to change it.</li>
<li>png 8 is able to save full alpha transparency but only at 256 colors and only from fireworks or some other app than photoshop. I can greatly reduce size from png 24.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> <a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-4/">4<a/> 5</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt. 4</title>
		<link>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/</link>
		<comments>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/#comments</comments>
		<pubDate>Fri, 11 Jun 2010 15:59:00 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[browsers]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2413</guid>
		<description><![CDATA[<p>In the fourth part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help reduce your file sizes and configure your Apache settings to squeeze out more speed.</p>
<h4>Reduce File Sizes</h4>
<ol>
<li><em>See optimizing images for reducing image sizes.</em></li>
<li>Minify CSS and JS files. Use <a href="http://closure-compiler.appspot.com/home" target="_blank">Google&#8217;s Closure Compiler</a> for JS and <a href="http://iceyboard.no-ip.org/projects/css_compressor" target="_blank">ICEY</a> for CSS.</li>
<li>Minify HTML files with <a href="http://infohound.net/tidy/" target="_blank">HTML Tidy</a>.</li>
<li>Reduce file size with using relative links including //subdomain.example.com instead of <a href="http://subdomain.example.com">http://subdomain.example.com</a></li>
</ol>
<h4>Configure Apache and .htaccess</h4>
<ol>
<li>Disable ETags</li>
<li>Add future expires headers</li>
<li>Enable GZip Compression</li>
<li>Since 15% of users don’t have gzip due to proxies you can override that with gzip detection. See&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<p>In the fourth part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help reduce your file sizes and configure your Apache settings to squeeze out more speed.</p>
<h4>Reduce File Sizes</h4>
<ol>
<li><em>See optimizing images for reducing image sizes.</em></li>
<li>Minify CSS and JS files. Use <a href="http://closure-compiler.appspot.com/home" target="_blank">Google&#8217;s Closure Compiler</a> for JS and <a href="http://iceyboard.no-ip.org/projects/css_compressor" target="_blank">ICEY</a> for CSS.</li>
<li>Minify HTML files with <a href="http://infohound.net/tidy/" target="_blank">HTML Tidy</a>.</li>
<li>Reduce file size with using relative links including //subdomain.example.com instead of <a href="http://subdomain.example.com">http://subdomain.example.com</a></li>
</ol>
<h4>Configure Apache and .htaccess</h4>
<ol>
<li>Disable ETags</li>
<li>Add future expires headers</li>
<li>Enable GZip Compression</li>
<li>Since 15% of users don’t have gzip due to proxies you can override that with gzip detection. See page 130 of <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b" target="_blank">“Even Faster Websites”</a> for detailed description on solving this problem.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> 4 <!--<a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-5/">2</a>5</a>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt.3</title>
		<link>http://stairwellblog.com/2010/05/frontend-optimization-pt-3/</link>
		<comments>http://stairwellblog.com/2010/05/frontend-optimization-pt-3/#comments</comments>
		<pubDate>Thu, 27 May 2010 20:54:20 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2408</guid>
		<description><![CDATA[<p>In the third part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your HTML and CSS code.</p>
<h4>Optimize HTML Code</h4>
<ol>
<li>Get rid of iFrames if possible. They&#8217;re by far the slowest dom element and even prevent onload from firing until the onload of the frame src is finished. Also stylesheets will block the iFrame from loading. iFrames also share the max connections with parent. 2 connections per server don&#8217;t turn into 4 because the iframe src is on another server.</li>
<li>Get rid of table based layouts. This isn&#8217;t always the&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<p>In the third part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your HTML and CSS code.</p>
<h4>Optimize HTML Code</h4>
<ol>
<li>Get rid of iFrames if possible. They&#8217;re by far the slowest dom element and even prevent onload from firing until the onload of the frame src is finished. Also stylesheets will block the iFrame from loading. iFrames also share the max connections with parent. 2 connections per server don&#8217;t turn into 4 because the iframe src is on another server.</li>
<li>Get rid of table based layouts. This isn&#8217;t always the case, but in most sites going with a css based layout will dramatically reduce your html file size and number of dom elements (less dom elements = faster javascript executions).</li>
<li>Do a &#8220;divitis&#8221; checkup. Go through your markup, or better yet code markup entirely first from the get-go, to make sure you&#8217;re utilizing the proper elements in CSS and not using more elements then necessary.</li>
<li>Don&#8217;t scale images in HTML. (unless you want to blow it up in html.)</li>
<li>Always set image width and height attributes. Browsers have the ability to start to lay pages out before all the assets are downloaded. If it isn&#8217;t given image dimensions in the html it has to wait till the image is downloaded and that data can be received before it knows how to lay out that image on the page. Therefore if you set the dimensions on the html doc you can speed up the drawing time.</li>
<li>Flush the document early with your backend language if applicable. This will send html code to your browser even though its not done totally generating.</li>
</ol>
<h4>Optimize CSS Code</h4>
<ol>
<li>Avoid CSS Expressions. These puppies are powerful and IE proprietary. The problem is that they&#8217;re executed on load, resize, scroll, and mouse movement. just moving the mouse can cause it to execute 10k times. Use event handlers and javascript instead.</li>
<li>Delete selectors you&#8217;re not using. This is obvious but just like assets they can slip by on long development processes.</li>
<li>Delete duplicate or unused properties.</li>
<li>Use CSS Shorthand</li>
<li>Avoid CSS Filters. Another proprietary IE item. Most common is the AlphaImageLoader. It blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption per element and not per page which means the problem is multiplied.</li>
<li>Simply your CSS selectors. CSS reads right to left so &#8220;#foobar a&#8221; might seem easy cause you just find #foobar then style the &#8220;a&#8221; tags. Actually the browser must check every single &#8220;a&#8221; tag to see if its inside #foobar. So keep the rightmost selector item as unique as possible.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> 3 <a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-4/">4<a/> <!--<a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-5/">2</a>5</a>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/05/frontend-optimization-pt-3/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt.2</title>
		<link>http://stairwellblog.com/2010/05/frontend-optimization-pt-2/</link>
		<comments>http://stairwellblog.com/2010/05/frontend-optimization-pt-2/#comments</comments>
		<pubDate>Thu, 20 May 2010 16:57:13 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2402</guid>
		<description><![CDATA[<h4><span style="font-weight: normal;">Ordering of Assets</span></h4>
<p><span style="font-weight: normal;">In the second part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize how you order and attach assets on your website.</span></p>
<ol>
<li>Put JS files at the bottom of the html if possible.</li>
<li>Ensure that your stylesheets come last in the &#60;head&#62; (after any scripts attached in the &#60;head&#62;.)</li>
<li>Make all CSS and JS files External. This leads to better caching of assets. If they&#8217;re inline they have to be downloaded every time.</li>
<li>Don&#8217;t use @import it causes download order to be wacky in IE and if its used with&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<h4><span style="font-weight: normal;">Ordering of Assets</span></h4>
<p><span style="font-weight: normal;">In the second part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize how you order and attach assets on your website.</span></p>
<ol>
<li>Put JS files at the bottom of the html if possible.</li>
<li>Ensure that your stylesheets come last in the &lt;head&gt; (after any scripts attached in the &lt;head&gt;.)</li>
<li>Make all CSS and JS files External. This leads to better caching of assets. If they&#8217;re inline they have to be downloaded every time.</li>
<li>Don&#8217;t use @import it causes download order to be wacky in IE and if its used with &lt;link&gt; method than you don&#8217;t get parallel stylesheet downloads.</li>
<li>Load Scripts in parallel. By default multiple JS scripts will not load in parallel. Each one loads one at a time and stops loading everything else while it does so. There is a table on <a href="http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/" target="_blank">stevesouders.com</a> that shows browser buys indicators and techniques to load scripts in parallel. The best solution is to figure out whether or not the functionality in that JS file is something you want the busy indicator to show up for and use conditional comments to use the appropriate method for standards browsers and IE. You&#8217;ll also want to factor in load order. If you keep it for dependency reasons then its slower, if you don&#8217;t preserve load order its faster since the first script to download is executed immediately.</li>
<li>Don&#8217;t scatter inline scripts. Each time you get to one it stops everything and just downloads that one script. Put them at the bottom when applicable.</li>
<li>Since you only get around 2 connections per server (varies depending on browser), its best to spread out your assets on about 3 domains max including your current domain. This will ensure a greater number of parallel downloads, but be careful not to do too many dns requests as they&#8217;re hurtful to optimization.</li>
<li>Ensure that all the js that you load for the initial onload event is needed. Most major sites don’t need 70% or more of their js.  Anything not needed to display the initial page should be loaded later when its needed or just in the background.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> 2 <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> <a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-4/">4<a/> <!--<a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-5/">2</a>5</a>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/05/frontend-optimization-pt-2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt.1</title>
		<link>http://stairwellblog.com/2010/05/frontend-optimization-pt-1/</link>
		<comments>http://stairwellblog.com/2010/05/frontend-optimization-pt-1/#comments</comments>
		<pubDate>Mon, 10 May 2010 22:22:32 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2351</guid>
		<description><![CDATA[<p>In this first part of our multipart Frontend Optimization series I&#8217;ll cover my notes from Steve Souder&#8217;s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">&#8220;High Performance Websites&#8221;</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">&#8220;Even Faster Websites&#8221;</a> books that can help reduce HTTP Requests on your website.</p>
<ol>
<li>Combine as many background images that don&#8217;t tile into sprites as possible while checking to ensure that larger images combined don&#8217;t increase file size.</li>
<li>Combine js files into one single file. <em>Note: Checkout Sprockets, <a href="http://getsprockets.org" target="_blank">getsprockets.org</a> </em></li>
<li><em><span style="font-style: normal;">Combine all of the CSS files into one file.</span></em></li>
<li><em><span style="font-style: normal;">Remove any assets you&#8217;re not using such as, images, js files, stylesheets, movies, audio files, etc. It may seem obvious but sometimes they slip through the cracks during&#8230;</span></em></li></ol>]]></description>
			<content:encoded><![CDATA[<p>In this first part of our multipart Frontend Optimization series I&#8217;ll cover my notes from Steve Souder&#8217;s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">&#8220;High Performance Websites&#8221;</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">&#8220;Even Faster Websites&#8221;</a> books that can help reduce HTTP Requests on your website.</p>
<ol>
<li>Combine as many background images that don&#8217;t tile into sprites as possible while checking to ensure that larger images combined don&#8217;t increase file size.</li>
<li>Combine js files into one single file. <em>Note: Checkout Sprockets, <a href="http://getsprockets.org" target="_blank">getsprockets.org</a> </em></li>
<li><em><span style="font-style: normal;">Combine all of the CSS files into one file.</span></em></li>
<li><em><span style="font-style: normal;">Remove any assets you&#8217;re not using such as, images, js files, stylesheets, movies, audio files, etc. It may seem obvious but sometimes they slip through the cracks during a long development process.</span></em></li>
<li>Remove duplicate assets, JS files can be an easy culprit.</li>
<li>Base64 encoded images. Make sure the base64 images don&#8217;t have horrendus file size increases, but other than that the don&#8217;t require an http request. <em>Note: <a href="http://www.hedgerwow.com/360/dhtml/base64-image/demo.php">hedgerwow.com</a> has a php script to allow base64 on IE7 and below.</em></li>
</ol>
<p> Part 1 <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> <a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-4/">4<a/> <!--<a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-5/">2</a>5</a>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/05/frontend-optimization-pt-1/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Generic Twitter Widget using jQuery Template Plugin</title>
		<link>http://stairwellblog.com/2010/04/generic-twitter-widget-using-jquery-template-plugin/</link>
		<comments>http://stairwellblog.com/2010/04/generic-twitter-widget-using-jquery-template-plugin/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 16:06:03 +0000</pubDate>
		<dc:creator>Bryant</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Findings]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2267</guid>
		<description><![CDATA[<p>I swear on every new project I start, I’m always recreating the same old twitter sidebar widget.  NEVER AGAIN!  I finally sat down and made an extremely generic widget that with some css tweaking, should be able to fit into every project.</p>
<p>A few minor features it includes:</p>
<ul>
<li>Linkifying twitter text — adds links to #hash tags, @replys and standard links.</li>
<li>TimeAgo function — The twitter API sends the time the tweet was created using a funky time format.  This function returns it in a more pretty form such as “3 hours and 26 minutes ago.”</li>
<li>Loading icon until tweets are received from the&#8230;</li></ul>]]></description>
			<content:encoded><![CDATA[<p>I swear on every new project I start, I’m always recreating the same old twitter sidebar widget.  NEVER AGAIN!  I finally sat down and made an extremely generic widget that with some css tweaking, should be able to fit into every project.</p>
<p>A few minor features it includes:</p>
<ul>
<li>Linkifying twitter text — adds links to #hash tags, @replys and standard links.</li>
<li>TimeAgo function — The twitter API sends the time the tweet was created using a funky time format.  This function returns it in a more pretty form such as “3 hours and 26 minutes ago.”</li>
<li>Loading icon until tweets are received from the twitter API.</li>
<li>Fade-in (and out) javascript effect.</li>
<li>Gets users avatar</li>
</ul>
<p>As far as the jQuery templating was concerned, the process is very easy to setup.</p>
<p>First, you take your markup that will be the template and add it between two script tags at the top/bottom of your page. For the “type” attribute of the script, set it to “text/html”. Next inside your template replace the content you want to be dynamic with the following syntax: {%= variableName %}. You’ll notice the opening and closing tags, the equal sign (which is used to write the variable to the screen), and the variable name. Also, make sure you remember the variable names, because we will be using them later when we load this template in our javascript. Also, note that any code you put between {% %} tags will be rendered as javascript.</p>
<p>I am unable to include script tags inside this post, but I&#8217;ll add in the html so you can see what it looks like:</p>
<pre>
<div class="codecolorer-container text mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">{% if($i == 0){ %}</div></td></tr></tbody></table></div>
<div class="tweetCntr">
<div class="codecolorer-container text mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br /></div></td><td><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">{% }else{ %}<br />
&lt;div class=&quot;tweetCntr mt30&quot;&gt;<br />
{% } %}<br />
&lt;div class=&quot;avatarCntr&quot;&gt;&lt;img class=&quot;avatar&quot; src=&quot;{%= avatar %}&quot; alt=&quot;avatar&quot; /&gt;&lt;/div&gt;<br />
&lt;div class=&quot;textCntr&quot;&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
{%= text %}<br />
<br />
&lt;div class=&quot;extras&quot;&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;username&quot;&gt;{%= user %}&lt;/span&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;time&quot;&gt;{%= timeAgo %}&lt;/span&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;</div></td></tr></tbody></table></div>
</div>
</pre>
<p>In the beginning of the template  you will see I have some conditionals set up; those are just plain ole javascript conditionals. One last thing, the variable $i is a variable fromt he templating plugin that counts the number of iterations of this specific template. Typically we will send our templates an array of objects and this variable keeps count of which object we are on.</p>
<p>Pretty simple, right?</p>
<p>The next part to getting the templating going is to initialize it in our javascript. In the code below I have a function that gets called after the twitter API returns its data. The variable “data” holds all of the twitter data, so any properties within that object are ones assigned via the API.</p>
<p>Now the first thing we have to do is to create an array of objects that we will pass to the template we just made. In this case, I have a for loop set up that iterates over an array of objects that the twitter API sent me back. In the for loop, I create another object that holds the key-value pairs I will be sending into the template. The two function you see in there, linkify() and timeAgo(), are the functions I was speaking about in the introduction. After the loop completes, we will have an array of objects, and the keys to all of the objects correspond to the variable names we used in our template.</p>
<pre>
<div class="codecolorer-container text mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br /></div></td><td><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">//this function gets used as a call back in the getTweets function call - after json callback<br />
&nbsp; &nbsp; startTwitter = function(data){<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; var dataArr = [];<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; for(a = 0; a &amp;lt; data.length; a++){<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataArr.push({avatar: data[a]['user']['profile_image_url'], text: linkify(data[a].text), timeAgo: timeAgo(data[a]['created_at'], null, 4), user: data[a].user.screen_name});<br />
&nbsp; &nbsp; &nbsp; &nbsp; }<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; $('#tweetMarkup').render(dataArr).appendTo('#tweetsCntr');<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; twitterObj.loaderOff();<br />
&nbsp; &nbsp; }</div></td></tr></tbody></table></div>
</pre>
<p>Easy enough.</p>
<p>Next, we grab the jQuery object of our template – $(‘#tweetMarkup’) – and then call the .render() function while passing in our dataArr we created in the for loop. The render() function returns us our templates rendered into a big string, and the .appendTo() function adds the string into the DOM and prints it onto the page.</p>
<p>Well thats about it, I hope someone out there finds this little demo useful. I have attached a .zip file of the code so you can try it out. I also had some help writing the timeAgo and linkify functions, which is documented in the main.js file.</p>
<p><a href="http://bdpublic.billupsdesign.com/bryant/twitterFeed/" target="_blank">Demo Page</a> <a href="http://bdpublic.billupsdesign.com/bryant/twitterFeed/twitterFeed.zip">Files (.zip)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/04/generic-twitter-widget-using-jquery-template-plugin/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>SXSW 2010</title>
		<link>http://stairwellblog.com/2010/03/sxsw-2010/</link>
		<comments>http://stairwellblog.com/2010/03/sxsw-2010/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 21:45:27 +0000</pubDate>
		<dc:creator>Bryant</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[code practices]]></category>
		<category><![CDATA[latest trends]]></category>
		<category><![CDATA[new technology]]></category>
		<category><![CDATA[SXSW]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2236</guid>
		<description><![CDATA[<p><a href="http://stairwellblog.com/wp-content/uploads/2010/03/TEMP-Image_1_21.jpg"><img class="size-full wp-image-2247 alignleft" title="SXSW" src="http://stairwellblog.com/wp-content/uploads/2010/03/TEMP-Image_1_21.jpg" alt="SXSW" width="153" height="131" /></a></p>
<p>Being involved in the web industry, one event always comes to mind when talking about big conferences, South by Southwest.  One of my New Year&#8217;s resolutions was to attend this event to see what it had to offer and to experience what all the commotion was about.  I have to admit, SXSW was my first real conference, so I don&#8217;t really have anything to compare it to, but from what I have heard and what I experienced, it&#8217;s hard to compare it to anything in the first place.</p>
<p>Before heading to the conference I did not really know what to expect.&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://stairwellblog.com/wp-content/uploads/2010/03/TEMP-Image_1_21.jpg"><img class="size-full wp-image-2247 alignleft" title="SXSW" src="http://stairwellblog.com/wp-content/uploads/2010/03/TEMP-Image_1_21.jpg" alt="SXSW" width="153" height="131" /></a></p>
<p>Being involved in the web industry, one event always comes to mind when talking about big conferences, South by Southwest.  One of my New Year&#8217;s resolutions was to attend this event to see what it had to offer and to experience what all the commotion was about.  I have to admit, SXSW was my first real conference, so I don&#8217;t really have anything to compare it to, but from what I have heard and what I experienced, it&#8217;s hard to compare it to anything in the first place.</p>
<p>Before heading to the conference I did not really know what to expect.  I was very prepared with a full list of lectures and talks and knew exactly who I wanted to hear speak.  On top of the learning I also really wanted to network and meet new people in my industry.</p>
<p>To begin, SXSW is held in Austin, TX.  Austin is the capital of Texas and from what I gathered a pretty laid back and gorgeous town.  Downtown Austin, where the conference center is located, seemed to be the perfect size for a downtown area and had a wide array of various restaurants and bars.  Our hotel was about 10 blocks north of this area, so everyday (usually several times) we would make the hike back up to our hotel and get to see many of the awesome venues that make Austin the &#8220;Live Music Captial of the World.&#8221;</p>
<p>Ok, enough with the fluffy stuff, down to business.</p>
<p>So after we arrived on Friday and checked into our hotel we went straight to the conference center to pick up our registration badges.  This was our first experience at the &#8220;hub&#8221; of the conference, and everything looked perfect.  All of the talks and lectures were spread between 3 hotels and the conference center, which were all within a half block radius of each other. Inside of each building was littered with small &#8220;charging lounges&#8221; and table filled areas where people would congregate and refuel their various portable devices.</p>
<p>My first talk on Friday was Simple Steps to Great Webdesign, and featured Matthew Smith of Squared Eye.  Matthew gave a great presentation showing subtle things designers and developers can add to sites to really make them stand out and be unique.  He touched on simple things like grid layouts and typography, but also showed various javascript techniques and subtle flash animations that enhanced the site experience for the user.  This topics of this lecture were fairly general, but it was great being in a learning environment and hearing someone show me good and bad practices, instead of having to search them out and find them on my own.</p>
<p><a href="http://stairwellblog.com/wp-content/uploads/2010/03/CIMG00161.jpg"><img class="alignright size-medium wp-image-2250" title="Conference Center" src="http://stairwellblog.com/wp-content/uploads/2010/03/CIMG00161-224x300.jpg" alt="Conference Center" width="224" height="300" /></a></p>
<p>Unfortunately, because of a late check-in requirement at our hotel, this was the only lecture I was able to make on Friday, but I had a full schedule of events and talks scheduled for the rest of the days left, so after the talk we did some exploring around the Convention Center area and then went back to our hotel to get ready for dinner and a night on the town.</p>
<p>Flash forward to Saturday 8:00 am: Headed south on Red River St toward the events sporting my &#8220;hackpack&#8221; (basically my backpack which holds all necessary hacking gear: Laptop, Cell phone charger, camera, notepads, plethora of flash drives, etc..)  My talks on Saturday included:</p>
<ul>
<li>Re-Inventing the Wheel: Sketching your own IA Process</li>
<li>Pen &amp; Paper Tools to Get From Research to Design</li>
<li>CSS3 Design with HTML5</li>
<li>Third Coast: How to Be a Startup Outside of Silicon Valley</li>
</ul>
<p>My favorites of the day were: Pen &amp; Paper Tools, which was a very interesting way to conceptualize information from the client, and to visualize the data and turn it into practical useable wireframes, and Third Coast: How to Be a Startup Outside of Silicon Valley, which was a conversation curated by Ross Kimbarovsky and Michael Samson, the two founders of CrowdSpring.  This talk was different from most lectures as it was rather intimate (around 50 people) and Ross and Michael really pulled the crowd into the conversation by creating an open dialoge between everyone.  They focused on ways small businesses can foster and create communities anywhere you are and also gave great tips on how small business can leverage themselves and collaborate amongst each other.</p>
<p>Sunday brought more lectures:</p>
<ul>
<li>Beyond LAMP: Scaling Websites past MySQL</li>
<li>Your Design Process is Killing You</li>
<li>Interactive Agency Workflow</li>
</ul>
<p>After the weekend was done I had gotten a pretty good feel for how the rest of my time left in Austin was going to go, and I was already exhausted!  Between hustling to get to the next lecture, staying as focused as possible in each lecture, and lugging around all of my various necessities, I was beat!</p>
<p>One thing that was somewhat surprising, but I guess I should have expected it, was the amount of shameless self promotion. Stickers everywhere, flyers everywhere, tshirts, coozies, every form of sponsorship imaginable on a cheaply made drinking accessory.  It was annoying, but being surrounded by this much technology and geek-dom everywhere made it OK in my book.</p>
<p>As the conference went on, and I would meet more and more people, I started on seeing two obvious types of people who are at SXSW.  Group A would be people there to learn and grow as professionals.  When I would talk to these people they would discuss all the lectures they had gone to and new concepts they have learned and were excited to apply. Most of these people you could tell had a real passion for what they did and were at SXSW to meet new likeminded people to possible collaborate with in the future.  Group B was very different.  Group B consisted of people who were there to talk about themselves and their new latest <em>startup </em>or amazing idea.  Most of these people (who I talked to) did not really attend many of the lectures or talks, and many of them even joked saying that they should not have gotten a pass in the first place.  Group B should not be confused with anyone at SXSW who was promoting something, as many of the people who were promoting were actually passionate about their product and I enjoyed talking to them about it.  Group B people usually were not promoting anything specific, but were there promoting themselves and would reference startup X which was a &#8220;location based social media aggregator that was crowd sourced on an iphone app.&#8221;</p>
<p>After I found this clear distinction in groups of attendees I did everything I could to attend events that featured Group A type of people, because these people actually were there for the same reasons I there, and after talking when them I felt inspired to perfect my craft even more.</p>
<p>Monday came and went with more talks:</p>
<ul>
<li>Results Only Work Environments (ROWE)</li>
<li>Expression Engine 2.0 : Total Domination</li>
<li>Object C Crash Corse for Web Developers</li>
</ul>
<p>Tuesday, the last day, I went to possibly my favorite talk of the whole conference.  It was titled Getting Better: The Designer&#8217;s Path from Good to Great.  Similar to the Third Coast talk I mentioned above, this session was an open dialogue between all participants and the two guys curating the talk, Ian Coyle and Duane King.  Ian, who I was familiar with from my time in the Denver web scene, founded (and recently left) an agency called FL2 and Duane has his own agency called BBDK.  The two both talked about their carrer path being a designer and various times in their career where they each felt like their work had been taken to the next level.  It was great hearing from both of these guys and seeing how they developed and matured what they loved into successful business endeavors but still maintained great integrity and passion in what they both do.  The topics they covered ranged from very generic questions such as, how to handle bad clients and also more complex questions like, being so involved with what you do &#8211; do you find that it distracts from other areas of your life?   All in all it was a great talk to end my SXSW experience on, as I felt inspired and invigorated, ready to create!</p>
<p>All in all SXSW was an amazing experience that I hope to attend every year.  The benefits of learning so much are obviously there, but the intrinsic benefits of meeting new people and being so excited to love what you do, made it all worth while.  I would highly recommend  to anyone in the wide interactive industry to attend and take it all in.</p>
<p><a href="http://stairwellblog.com/wp-content/uploads/2010/03/CIMG0010.jpg"><img class="alignright size-medium wp-image-2252" title="Austin" src="http://stairwellblog.com/wp-content/uploads/2010/03/CIMG0010-224x300.jpg" alt="Austin" width="224" height="300" /></a></p>
<p>Words of Wisdom</p>
<ul>
<li>Don&#8217;t expect to attend every lecture your planning on, you just can&#8217;t do it.  At most I&#8217;d say 3-4 per day is do-able.</li>
<li>If you really want to go to a specific talk, get there early, they fill up quickly.</li>
<li>&#8220;Hackpack&#8221; is vital.  A solid bag that can hold all of your gear is amazing.  One of the best investments I&#8217;ve made.</li>
<li>If your trying to get into a big sponsored party, get there early! Like 7:00-8:00&#8230;Yeah its early, but you&#8217;ll appreciate it when its an open bar.</li>
<li>Pick a hotel that is not right next to the conference area.  We were about 10 blocks away and it was nice to get a good walk in to start the day and it let us see a little more of Austin than we would have not gotten to see otherwise.</li>
<li>Bring business cards!</li>
<li>Twitter, Foursquare/Gowalla, Facebook are awesome and are your friends. (I wish people everywhere used these like people were at SXSW)
<ul>
<li>With that being said, the aforementioned are great TOOLS, don&#8217;t be on them 24/7 or you will miss interacting with all the cool people that are there.</li>
</ul>
</li>
<li>Go to a variety of panels and discussions, not all from the same category (ie: design, development, business, social media).  Go there to <em>expand </em>your knowledge-base, not to become a master at one.</li>
<li>Eat as much mexican food as humanly possible.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/03/sxsw-2010/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>What I&#8217;ve learned: Time for the ad industry to catch up.</title>
		<link>http://stairwellblog.com/2010/03/what-ive-learned-time-for-the-auto-i-mean-ad-industry-needs-to-catch-up/</link>
		<comments>http://stairwellblog.com/2010/03/what-ive-learned-time-for-the-auto-i-mean-ad-industry-needs-to-catch-up/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 17:36:12 +0000</pubDate>
		<dc:creator>Ryan Nasipak</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Ads]]></category>
		<category><![CDATA[Advertising]]></category>
		<category><![CDATA[Dart]]></category>
		<category><![CDATA[Point Roll]]></category>
		<category><![CDATA[Rich Media]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2218</guid>
		<description><![CDATA[<p>Ok, everyone take a deep breath. I&#8217;m not going to go on an endless rant on why I think more companies need to modernize their approach to rich media ads&#8230;&#8230;or am I? (cue evil laugh) Ahhhh-ha-ha-ha-ha. </p>
<p>What I will say is that a little more progressive thinking would help cut out a lot of the senseless number of versions required for some companies running rich media ads and also (potentially) increase your margin for success. So how did I come to this conclusion? Through recent conversation with some ad partners and also jumping through a technical hurdle or two.</p>
<p>We recently&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>Ok, everyone take a deep breath. I&#8217;m not going to go on an endless rant on why I think more companies need to modernize their approach to rich media ads&#8230;&#8230;or am I? (cue evil laugh) Ahhhh-ha-ha-ha-ha. </p>
<p>What I will say is that a little more progressive thinking would help cut out a lot of the senseless number of versions required for some companies running rich media ads and also (potentially) increase your margin for success. So how did I come to this conclusion? Through recent conversation with some ad partners and also jumping through a technical hurdle or two.</p>
<p>We recently completed an XML fed rich media ad for a client. The ad featured a small content management system that allowed the client to update that XML feed and thus create a new ad &#8220;on the fly&#8221; for as long as they were running their ad unit. </p>
<p>So, why does this matter? It obviously doesn&#8217;t seem like a radical concept (or I would hope not <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ). It&#8217;s a process almost all designers have used when building a website. Make something the client can not only use but also maintain. Why? Because it ads value to both the client and the agency.  </p>
<p><strong>1.) It cuts down on versioning.<br />
2.) It gives content control to the client.<br />
3.) It removes back and forth (you know, the 45 email chains).<br />
4.) It ads flexibility to their ad campaign.<br />
5.) It ads longevity to the ad.<br />
6.) It softens mistakes. </strong></p>
<p>If you&#8217;re asking how? You&#8217;re in luck (descriptions below). </p>
<p><strong>1.) It cuts down on versioning -</strong> If you&#8217;ve ever created a rich media ad, you&#8217;ll soon begin to notice that there sometimes are 26 versions of an ad that accomplish the same goal. You&#8217;ll probably sit in photoshop or flash at some point and say (or possibly scream) &#8220;why am I doing this!?&#8221; and with good reason. A dynamic solution allows a designer to create one universal flash ad that updates in real time and then leaves 1 simple static ad (in the event flash cannot be delivered) for each iteration. Instead of doing 26 ads, maybe you can cut it down to 13. In terms of efficiency, that&#8217;s obviously huge.</p>
<p><strong>2.) It gives content control to the client -</strong> Making the client an active participant helps ads value to what you do. It also ads ownership and accountability to what is ultimately their product. More often than not, that leads to a richer experience all around (which is never a bad thing).  </p>
<p><strong>3.) It removes back and forth (you know, the 45 email chains) -</strong> I don&#8217;t think I&#8217;ll explain this one. Why ruin the fun for someone who has yet to experience one of life&#8217;s miracles. /sarcasm</p>
<p><strong>4.) It ads flexibility to their ad campaign -</strong> So what happens if you&#8217;re 5 weeks in to a 10 week ad campaign and you realize what (or the way in which) you&#8217;re advertising could be improved. Different wording, a larger percent off, an &#8220;hourly discount&#8221;, etc. etc. etc. Or what if you sold something that absolutely flew off the shelves and you like to replace another so-so sale, later in the campaign, with that same discount? </p>
<p>How is that going to happen if you have 50 versions of an add that all need updated by a designer, reloaded in to an ad portal and then relaunched individually? The answer is, it&#8217;s not.  </p>
<p>How about if you have an XML feed that populates those ad units instead? and all their ad sizes (728&#215;90, 300&#215;250, etc., etc., etc.). Update a single text file, hit submit and all your ads just changed in real time. No contacting the agency or the ad portal. Simply update your CMS and hit enter. So why isn&#8217;t this design strategy happening more? Maybe it makes too much sense? <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  </p>
<p><strong>5.) It ads longevity to the ad -</strong> An ad that updates via an XML document (and not a designer) is not only cheaper over time but it also stands to last infinitely longer than a static ad. Did your campaign change? Are you selling a different product? No problem.  Just update the CMS, relaunch the ad and you have now been able to recycle something that typically would have been thrown away. There&#8217;s value in that for everyone involved (a superior product, happy customers and ultimately more business). </p>
<p><strong>6.) It softens mistakes -</strong> So you spelled a word wrong? (unfortunately been there and done that). What next? Well, it obviously needs changed (my head is starting to hurt thinking about this) and ASAP. In a dynamic ad, 90+% of people are seeing the flash unit. Having the ability to immediately wipe out that mistake for nearly every user in about 60 seconds is HUGE. Log in to the CMS, update the XML and the spelling error is removed. You&#8217;ll obviously have to make changes to the single accompanying static ad (if the same error was made) but you&#8217;ll SIGNIFICANTLY reduce the pain of a small correction.  </p>
<p>So my question is, why are people NOT making more ads that are dynamic, flexible and client friendly? </p>
<p>If you&#8217;re shouting &#8220;We are! We are!&#8221; then I might have just wasted your time&#8230;&#8230;well, while validating your work. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  I hope you consider that an even trade. </p>
<p>If you&#8217;re shouting &#8220;Why aren&#8217;t we doing this!?&#8221; Well&#8230;&#8230;.Why aren&#8217;t you? Ads need love too. </p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/03/what-ive-learned-time-for-the-auto-i-mean-ad-industry-needs-to-catch-up/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

