<?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" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Zazzle Tech Blog</title>
	<atom:link href="http://zazzletechblog.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://zazzletechblog.wordpress.com</link>
	<description>a peek under the hood at Zazzle</description>
	<lastBuildDate>Fri, 12 Jun 2009 18:10:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='zazzletechblog.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Zazzle Tech Blog</title>
		<link>http://zazzletechblog.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://zazzletechblog.wordpress.com/osd.xml" title="Zazzle Tech Blog" />
	<atom:link rel='hub' href='http://zazzletechblog.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Store Customization Showcase!</title>
		<link>http://zazzletechblog.wordpress.com/2009/06/12/store-customization-showcase/</link>
		<comments>http://zazzletechblog.wordpress.com/2009/06/12/store-customization-showcase/#comments</comments>
		<pubDate>Fri, 12 Jun 2009 18:10:32 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://techblog.zazzle.com/?p=289</guid>
		<description><![CDATA[Wow, you Zazzlers out there really blew us away with your amazing talent and creativity! Ever since we released the Advanced Store Customization Beta, our incredible Zazzle Community hit the pavement and worked tirelessly to build their own brands, create innovative user experiences, and perhaps most importantly, help each other out in our forums. Below [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=289&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Wow, you Zazzlers out there really blew us away with your amazing talent and creativity! Ever since we released the <a title="Advanced Store Customization announcement" href="http://techblog.zazzle.com/2009/05/07/announcing-advanced-store-customization/">Advanced Store Customization Beta</a>, our incredible Zazzle Community hit the pavement and worked tirelessly to build their own brands, create innovative user experiences, and perhaps most importantly, help each other out in <a href="http://forum.zazzle.com/advanced">our forums</a>.</p>
<p>Below is a showcase of some our favorites so far&#8230;</p>
<p><a href="http://www.zazzle.com/ars_celtica"><img class="alignnone size-full wp-image-293" style="margin:3px;" title="Ars Celtica" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_ars_celtica.jpg?w=450" alt="Ars Celtica"   /></a><a href="http://www.zazzle.com/saundejm"><img class="alignnone size-full wp-image-294" style="margin:3px;" title="Saundejm" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_blazoned.jpg?w=450" alt="Saundejm"   /></a><a href="http://www.zazzle.com/lisamarieart"><img class="alignnone size-full wp-image-295" style="margin:3px;" title="Lisa Marie Art" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_lisamarie.jpg?w=450" alt="Lisa Marie Art"   /></a><a href="http://www.zazzle.com/hobbytees"><img class="alignnone size-full wp-image-296" style="margin:3px;" title="The Hobby Shop" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_hobby_shop.jpg?w=450" alt="The Hobby Shop"   /></a><a href="http://www.zazzle.com/phetefirst"><img class="alignnone size-full wp-image-297" style="margin:3px;" title="Phete First" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_phete_first.jpg?w=450" alt="Phete First"   /></a><a href="http://www.zazzle.com/sugarvsspice"><img class="alignnone size-full wp-image-298" style="margin:3px;" title="Sugar vs Spice" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_sugar_spice.jpg?w=450" alt="Sugar vs Spice"   /></a><a href="http://www.zazzle.com/thebootique"><img class="alignnone size-full wp-image-299" style="margin:3px;" title="The Bootique" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_bootique.jpg?w=450" alt="The Bootique"   /></a><a href="http://www.zazzle.com/bartonleclaydesign"><img class="alignnone size-full wp-image-300" style="margin:3px;" title="Barton-Le-Clay Design" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_barton.jpg?w=450" alt="Barton-Le-Clay Design"   /></a><a href="http://www.zazzle.com/diygems"><img class="alignnone size-full wp-image-301" style="margin:3px;" title="DIY Gems" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_diy_gems.jpg?w=450" alt="DIY Gems"   /></a><a href="http://www.zazzle.com/loonyboutique"><img class="alignnone size-full wp-image-302" style="margin:3px;" title="Loony Boutique" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_loony_boutique.jpg?w=450" alt="Loony Boutique"   /></a><a href="http://www.zazzle.com/visualnewbie"><img class="alignnone size-full wp-image-303" style="margin:3px;" title="Visual Newbie" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_visual_newbie.jpg?w=450" alt="Visual Newbie"   /></a><a href="http://www.zazzle.com/shopaholicchick"><img class="alignnone size-full wp-image-304" style="margin:3px;" title="ShopaholicChick" src="http://zazzletechblog.files.wordpress.com/2009/06/asc_shopaholic.jpg?w=450" alt="Shopaholic Chick"   /></a></p>
<p>Keep up the amazing work&#8230;we honestly can&#8217;t wait to see what you guys do next!</p>
<p>For more tips, tricks, and advice on this feature, be sure to visit the <a title="Advanced Store Customization beta forum" href="http://forum.zazzle.com/advanced">Advanced Store Customization beta forum</a>. Many folks have already written detailed and very informative tutorials to help you get started.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/289/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/289/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/289/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=289&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2009/06/12/store-customization-showcase/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_ars_celtica.jpg" medium="image">
			<media:title type="html">Ars Celtica</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_blazoned.jpg" medium="image">
			<media:title type="html">Saundejm</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_lisamarie.jpg" medium="image">
			<media:title type="html">Lisa Marie Art</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_hobby_shop.jpg" medium="image">
			<media:title type="html">The Hobby Shop</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_phete_first.jpg" medium="image">
			<media:title type="html">Phete First</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_sugar_spice.jpg" medium="image">
			<media:title type="html">Sugar vs Spice</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_bootique.jpg" medium="image">
			<media:title type="html">The Bootique</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_barton.jpg" medium="image">
			<media:title type="html">Barton-Le-Clay Design</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_diy_gems.jpg" medium="image">
			<media:title type="html">DIY Gems</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_loony_boutique.jpg" medium="image">
			<media:title type="html">Loony Boutique</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_visual_newbie.jpg" medium="image">
			<media:title type="html">Visual Newbie</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/06/asc_shopaholic.jpg" medium="image">
			<media:title type="html">ShopaholicChick</media:title>
		</media:content>
	</item>
		<item>
		<title>Announcing Advanced Store Customization!</title>
		<link>http://zazzletechblog.wordpress.com/2009/05/07/announcing-advanced-store-customization/</link>
		<comments>http://zazzletechblog.wordpress.com/2009/05/07/announcing-advanced-store-customization/#comments</comments>
		<pubDate>Fri, 08 May 2009 01:45:02 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://techblog.zazzle.com/?p=199</guid>
		<description><![CDATA[You&#8217;re up on the stage, in front of millions, singing &#8220;Somewhere Over the Rainbow&#8221;, a song that&#8217;s been done to death. How do you stand out? How do you make it NOT sound like Karaoke? Easy. Change the tempo, add different inflections, improvise a vocal run&#8230;basically, you make it your own, dawg! (ahhhh, he said [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=199&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>You&#8217;re up on the stage, in front of millions, singing &#8220;Somewhere Over the Rainbow&#8221;, a song that&#8217;s been done to death. How do you stand out? How do you make it NOT sound like Karaoke? Easy. Change the tempo, add different inflections, improvise a vocal run&#8230;basically, you <strong>make it your own, dawg</strong>! (ahhhh, he said it!)</p>
<p>The same idea applies to your Zazzle store. Some store owners add pizzazz with header graphics, some add HTML in their description. But most stores have the same basic layout&#8230;until now!</p>
<h3><strong>Introducing&#8230;.</strong></h3>
<p><img class="alignnone size-full wp-image-274" title="asc" src="http://zazzletechblog.files.wordpress.com/2009/05/asc.png?w=450&#038;h=74" alt="asc" width="450" height="74" /></p>
<p>Yes, ladies and gentlemen, Zazzle has now opened up the ability to customize your own storefront however you see fit. Edit CSS and HTML directly, add your own pages, display what you want, where you want it.</p>
<h3><strong>Download Full Documentation (Recommended)<br />
</strong></h3>
<p>This blog post will get you started, but for more complete documentation, please download the <a href="http://asset.zcache.com/assets/graphics/z2/mk/sell/tools/ZazzleAdvancedGalleryCustomizationGuide_1.0beta.pdf" target="_blank">Advanced Store Customization Guide (1.9Mb, PDF)</a> .</p>
<h3><strong>You must be this tall to ride</strong></h3>
<p><strong></strong>Be forewarned&#8230;this is currently in open <strong>BETA</strong>, which basically means we are testing this feature and <strong>cannot provide official support</strong>. To use this feature successfully, it is highly recommended that you have a working knowledge of <strong>CSS</strong> and <strong>HTML, </strong>and some familiarity with <strong>XML</strong>. Keep in mind that by messing around with the direct code behind your store, you could very easily break it and render your store unusable, forcing you to revert to defaults and start over.</p>
<h3><strong>So, what can it do?</strong></h3>
<p><strong></strong>Well, you can pretty much do almost anything you want with this. I won&#8217;t go into detail on how to write CSS or HTML, but let me show you some examples of the power it provides you:</p>
<ul>
<li><a href="http://www.zazzle.com/retropolis_travel" target="_blank">Retropolis Travel Bureau</a> &#8211; Amazing use of CSS</li>
<li><a title="Clonewars" href="http://www.zazzle.com/clonewars" target="_blank">Clone Wars</a> &#8211; This is the official Clone Wars store on Zazzle. It was built using the same techniques that the Advanced Store Customization allows. Check out the header section and the background image. Nifty.</li>
<li><a href="http://www.zazzle.com/starwars" target="_blank">Star Wars</a> &#8211; Same as above&#8230;but looks so cool we had to show it!</li>
<li><a href="http://www.zazzle.com/hikingviking" target="_blank">Hikingviking</a> &#8211; Excellent use of a background image to make the site pop. Also check out the blog and store &#8220;tabs&#8221; at the top. The blog links out to this store owner&#8217;s blog, which happens to look just like his storefront!</li>
<li><a href="http://www.zazzle.com/lifeembellished" target="_blank">Life Embellished</a> &#8211; Nice use of an office theme with a paper background and manila folder content area.</li>
<li><a href="http://www.zazzle.com/nucleartees" target="_blank">Nuclear Tees</a> &#8211; Great example of a complete change in navigation and store home page</li>
</ul>
<h3><strong>Neat! I want that!</strong></h3>
<p><strong></strong>Since this is still in beta, the first thing you&#8217;ll have to do is enable the feature. Here&#8217;s how.</p>
<p>First, go to <a href="http://www.zazzle.com/my/gallery/appearance" target="_blank">http://www.zazzle.com/my/gallery/appearance</a></p>
<ol>
<li>Select &#8220;Create a custom look&#8221;</li>
<li>Enable the Advanced Store Customization checkbox</li>
<li>Save your settings</li>
</ol>
<p><img class="alignnone size-full wp-image-223" title="1_appearance" src="http://zazzletechblog.files.wordpress.com/2009/05/1_appearance.gif?w=450&#038;h=269" alt="1_appearance" width="450" height="269" /></p>
<p>After saving your changes, you will see this warning:</p>
<p><img class="alignnone size-full wp-image-224" title="2_warning" src="http://zazzletechblog.files.wordpress.com/2009/05/2_warning.gif?w=450" alt="2_warning"   /></p>
<p>Hit OK to enable Advanced Store Customization. Once enabled, a new tab labeled &#8220;Beta! Advanced&#8221; appears. Click on it to see and edit your Layout and Style code.</p>
<p><img class="alignnone size-full wp-image-226" title="3_advanced" src="http://zazzletechblog.files.wordpress.com/2009/05/3_advanced.gif?w=450" alt="3_advanced"   /></p>
<h3><strong>In the trenches</strong></h3>
<p><strong></strong>Advanced Store Customization opens up the guts of your storefront and allows you to change the code that builds it. It handles this by splitting up your store&#8217;s code into three editable parts: Layout (HTML), Style (CSS), and Content Definition (XML).</p>
<ol>
<li><strong>Layout</strong> &#8211; This is the HTML markup of all the pages in your store, mixed in with a bit of Zazzle goodness.</li>
<li><strong>Style</strong> &#8211; This is the CSS of your store. It defines the colors, fonts, backgrounds, and general look of your store.</li>
<li><strong>Content Definition</strong> &#8211; This is the XML markup that lists pages, modules, and other content areas of your store.</li>
</ol>
<p>Let&#8217;s try one of the easiest store customizations&#8230;adding a background image to your storefront. It&#8217;s pretty easy.</p>
<p><img class="alignnone size-full wp-image-230" title="4_edit_css" src="http://zazzletechblog.files.wordpress.com/2009/05/4_edit_css.gif?w=450" alt="4_edit_css"   /></p>
<p>In the Style text box (found under My Zazzle&#8211;&gt;Store&#8211;&gt;Appearance&#8211;&gt;Advanced tab), look for the <strong>#mainShell</strong> section of code and add the URL to an image in the <strong>background</strong> declaration:</p>
<blockquote><p>#mainShell {<br />
position:relative;<br />
width:100%;<br />
padding-bottom:40px;<br />
background:#bbccdd<strong> url(“http://www.yoursite.com/inc/yourImage-bkg.jpg”)</strong> top center no-repeat;<br />
}</p></blockquote>
<p>Then hit <strong>Validate and Save Changes</strong> (or select the Preview button to test first). That&#8217;s it! Now your store will have a background image! This is one of the easiest changes you can make, but can quickly add some personality to your store. Here are a couple of examples of stores with nothing more than a background image:</p>
<ol>
<li><a href="http://www.zazzle.com/pantera" target="_blank">Pantera&#8217;s Official Merch Store</a> &#8211; One large background image</li>
<li><a href="http://www.zazzle.com/mims" target="_blank">Mim&#8217;s Official Merch Store</a> &#8211; Repeating pattern background</li>
<li><a href="http://www.zazzle.com/ecaggiani" target="_blank">My own store</a> &#8211; Subtle repeating background</li>
<li><a href="http://www.zazzle.com/harryterry" target="_blank">Harryterry</a> &#8211; Fading stars background</li>
</ol>
<p>That&#8217;s about all I can cover in this blog post, but for more complete documentation, please download the <a title="Advanced Store Customization Guide" href="http://asset.zcache.com/assets/graphics/z2/mk/sell/tools/ZazzleAdvancedGalleryCustomizationGuide_1.0beta.pdf" target="_blank">Advanced Store Customization Guide (1.9Mb, PDF)</a> . Like I stated earlier, this feature is in open beta, so there will be no official support for it (don&#8217;t call customer support for this!), but we have setup a new <a href="http://forum.zazzle.com/advanced" target="_blank">discussion forum</a> so anyone experimenting with Advanced Store Customization can discuss their experiences, get help, and help others who are trying it out.</p>
<p>With the ability to completely change the look and feel of your store, we&#8217;re hoping to see some really creative designs and layouts! Dig in, folks&#8230;time to truly make it your own!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/199/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/199/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/199/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=199&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2009/05/07/announcing-advanced-store-customization/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/05/asc.png" medium="image">
			<media:title type="html">asc</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/05/1_appearance.gif" medium="image">
			<media:title type="html">1_appearance</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/05/2_warning.gif" medium="image">
			<media:title type="html">2_warning</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/05/3_advanced.gif" medium="image">
			<media:title type="html">3_advanced</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/05/4_edit_css.gif" medium="image">
			<media:title type="html">4_edit_css</media:title>
		</media:content>
	</item>
		<item>
		<title>Twittering new Zazzle products &#8211; automatically!</title>
		<link>http://zazzletechblog.wordpress.com/2009/04/29/twittering-new-zazzle-products-automatically/</link>
		<comments>http://zazzletechblog.wordpress.com/2009/04/29/twittering-new-zazzle-products-automatically/#comments</comments>
		<pubDate>Wed, 29 Apr 2009 17:14:42 +0000</pubDate>
		<dc:creator>Jan Borgersen, UI Engineer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://techblog.zazzle.com/?p=203</guid>
		<description><![CDATA[It&#8217;s easy to automatically add your new Zazzle products to a Twitter feed. I&#8217;ve done this over at twitter.com/hikingviking. Here&#8217;s how: 1. Get an account on TwitterFeed, a service that reads RSS feeds and will lob them over to your twitter account. There are probably lots of services like this, but TwitterFeed has been gaining [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=203&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s easy to automatically add your new Zazzle products to a Twitter feed.  I&#8217;ve done this over at <a href="http://twitter.com/hikingviking">twitter.com/hikingviking</a>.  Here&#8217;s how:</p>
<p>1. Get an account on <a href="http://www.twitterfeed.com">TwitterFeed</a>, a service that reads RSS feeds and will lob them over to your twitter account.  There are probably lots of services like this, but TwitterFeed has been gaining popularity in my circles, and it does the trick pretty well.</p>
<p>1(b). Note that to sign up for TwitterFeed, you will need an <a href="http://openid.net/">OpenId</a> identity.  You have one already if you have a Gmail or Yahoo account, or sign up with one of the other OpenId providers; TwitterFeed gives you a list.  (Personally, I like <a href="http://www.claimid.com">ClaimId</a> because <a href="http://claimid.com/people">I went to Carolina, too</a>.)</p>
<p>2. Once you&#8217;re in TwitterFeed, go to &#8220;My Feeds&#8221; and click &#8220;Create a new feed&#8221;, and hook up your Zazzle feed to your Twitter account:</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2009/04/newtwitterfeed2.png"><img class="alignnone size-medium wp-image-210" title="newtwitterfeed2" src="http://zazzletechblog.files.wordpress.com/2009/04/newtwitterfeed2.png?w=290&#038;h=300" alt="newtwitterfeed2" width="290" height="300" /></a></p>
<p>3. You need your feed url.  <a href="http://www.zazzle.com/sell/tools/feeds">Zazzle has lots of information about feeds here.</a> The url I&#8217;m using looks like this:</p>
<p><code>http://feed.zazzle.com/hikingviking/feed?ft=gb&amp;at=238898476793705621</code></p>
<p>Dissecting this url, we know that:</p>
<p><strong>/hikingviking</strong> means I&#8217;m pulling products from my &#8220;hikingviking&#8221; gallery on Zazzle.</p>
<p><strong>ft=gb</strong> means I&#8217;m pulling the &#8220;Google Base&#8221; formatted RSS feed, which gives me better access to the raw data about my product.  The &#8220;title&#8221; and &#8220;description&#8221; fields are the actual title and description I have entered on Zazzle, and not html markup that allows images and links to show up in RSS reader applications.</p>
<p><strong>at=238898476793705621</strong> is how I make sure I will <a href="http://www.zazzle.com/sell/incentive/associate">earn referral fees</a> if you click through and buy stuff. Feel free to use my associate ID in your TwitterFeed!  Or, you probably want to substitute your own. <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>The default sort type on feeds is &#8220;most recent&#8221;, so I am sure that I am picking up the products I have most recently published on Zazzle.  TwitterFeed is smart enough to know what&#8217;s new every time it checks, so it won&#8217;t post duplicate products to your Twitter account.</p>
<p>4. The other options on the TwitterFeed page are up to you.  You will have to trust TwitterFeed with your login information to your Twitter account, obviously.  Then, I chose to include &#8220;title &amp; description&#8221;, to shorten my link using TinyURL, and to prefix my post with &#8220;New @zazzle -&#8221;.  That&#8217;s it!  TwitterFeed runs every hour and will pick up anything new you have published to Zazzle.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/203/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/203/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=203&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2009/04/29/twittering-new-zazzle-products-automatically/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/477efa0bfd92bb3af1f19950872f8f4f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">janzazzle</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2009/04/newtwitterfeed2.png?w=290" medium="image">
			<media:title type="html">newtwitterfeed2</media:title>
		</media:content>
	</item>
		<item>
		<title>Zero to 100 in 30 seconds!</title>
		<link>http://zazzletechblog.wordpress.com/2008/12/18/zero-to-100-in-30-seconds/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/12/18/zero-to-100-in-30-seconds/#comments</comments>
		<pubDate>Fri, 19 Dec 2008 00:11:06 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://techblog.zazzle.com/?p=161</guid>
		<description><![CDATA[I drive a hybrid and pride myself on getting amazing mileage (52MPG lifetime, baby!). To accomplish this, I drive&#8230;well&#8230;slow. I go under the speed limit and stay in the right lane. Works for me&#8230;I&#8217;m a laid back guy who takes life slowly and casually. But there is one place where I welcome a little high [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=161&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-167" title="qpc_small" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_small.gif?w=450" alt="qpc_small"   />I drive a hybrid and pride myself on getting amazing mileage (52MPG lifetime, baby!). To accomplish this, I drive&#8230;well&#8230;slow. I go under the speed limit and stay in the right lane. Works for me&#8230;I&#8217;m a laid back guy who takes life slowly and casually.</p>
<p>But there is one place where I welcome a little high speed action. And that&#8217;s in creating products on Zazzle! Introducing <a title="Quick Product Create" href="http://www.zazzle.com/cr/quick/start" target="_blank"><strong>Quick Product Create</strong></a>!</p>
<p>Yes, now it&#8217;s easy to create up to 100 products instantly. Quick Product Create (or QPC) is a simple three step wizard that allows you to create multiple products using selections of related products (all products, dark apparel, paper products, etc.) from the Zazzle Default Products menu, or from one of your own Product Lines that contain matching product templates.</p>
<p><strong><br />
Design for success<br />
</strong></p>
<p>The first thing you need is a design you plan to put on many products. Typically, this is in the form of an image (a JPG, GIF, PNG, etc.) Since this one design will be blasted on several products, you should design it with that in mind. Here are some hints:</p>
<ul>
<li>Create the image at the highest resolution you can. Since this image will be placed on several products at differing sizes, it&#8217;s best to make sure it&#8217;s of sufficient size and quality so it will print properly on most products. Visit our <a href="http://www.zazzle.com/mk/custom/imageguidelines" target="_blank">image guidelines page</a> for more information on image resolution.</li>
<li>Think about colors. If your design only works on a dark background, you will have to make sure the products you put it on are dark. One trick I&#8217;ve seen many contributors do is to outline a design in either black or white. In other words, a design that only works on a white or light background can work on all backgrounds if a white or light outline is added around it.</li>
<li>Think about shape. A long rectangular design can look great on many products (full wrap mugs, ties, t-shirts), but may not work well on others (buttons, magnets, stamps). If your design is not suitable for some merchandise, be sure to remove those items from the set of products you publish.</li>
</ul>
<p>Ok, so I have my design. I&#8217;m going to use this &#8220;Get outta my grill&#8221; image I made a while back.</p>
<p><img class="size-full wp-image-171 alignnone" title="grill" src="http://zazzletechblog.files.wordpress.com/2008/12/grill.gif?w=450" alt="grill"   /></p>
<p>The original is a high resolution PNG file, so it should work fine for most products.</p>
<p><strong><br />
Place it!<br />
</strong></p>
<p>Ok, got my image. Now I need to start the Quick Product Create process by going to <a title="Start Quick Product Create (new window)" href="http://www.zazzle.com/cr/quick/start" target="_blank">http://www.zazzle.com/cr/quick/start</a>. When you start, you see this dialog pop up:<a title="Start Quick Product Create (new window)" href="http://www.zazzle.com/cr/quick/start" target="_blank"><br />
</a></p>
<p><img class="alignnone size-full wp-image-172" title="qpc_1" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_1.gif?w=450&#038;h=417" alt="qpc_1" width="450" height="417" /></p>
<p>Click the dropdown arrow in <strong>Step 1</strong> to see what options you have:</p>
<p><img class="alignnone size-full wp-image-173" title="qpc_2" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_2.gif?w=450&#038;h=417" alt="qpc_2" width="450" height="417" /></p>
<p>As you can see, there are some default Zazzle Product Lines you can choose from. These currently include:</p>
<ul>
<li><strong>All Products</strong></li>
<li><strong>All Non-apparel</strong></li>
<li><strong>Apparel only</strong></li>
<li><strong>Dark Apparel Only</strong></li>
<li><strong>Light Apparel Only</strong></li>
<li><strong>Paper Products</strong></li>
</ul>
<p>If you have previously created a Product Line in your gallery that contains template products, it will show up here as well under My Product Lines. This way you can pre-define a custom set of products that you create often. Rob has written a great post about how to create your own Product Lines for Quick Product Create. <strong>Advanced users, <a href="http://sellerblog.zazzle.com/2008/12/19/avoid-carpal-tunnel-use-templates-for-quick-product-create/">read all about it here</a>!</strong></p>
<p>I&#8217;ll choose All Products since it contains a nice mix of t-shirts, cards, stamps, mugs, and other products.</p>
<p><img class="alignnone size-full wp-image-174" title="qpc_3" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_3.gif?w=450&#038;h=417" alt="qpc_3" width="450" height="417" /></p>
<p>Once you select a Product Line, you will see that you can change the default image in <strong>Step 2</strong>. Click the link that says &#8220;Change&#8221;, and you will see all your Zazzle images, or you can upload a new one. Here, I&#8217;ve selected my &#8220;Get outta my grill&#8221; image.</p>
<p><img class="alignnone size-full wp-image-175" title="qpc_4" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_4.gif?w=450&#038;h=417" alt="qpc_4" width="450" height="417" /></p>
<p>In <strong>Step 3</strong> you will notice that you have the option to change the default fit/fill mode to one of three options:</p>
<ol>
<li><strong>Use template defaults</strong> (uses whatever the product template was designed with. Could be either fit or fill.)</li>
<li><strong>Fit </strong>(makes sure your entire image is visible in the product&#8217;s design area &#8211; no cropping)</li>
<li><strong>Fill </strong>(fills the entire product&#8217;s design area. Cropping may occur)</li>
</ol>
<p>For most cases, using the default should be fine.</p>
<p>Ok&#8230;click Create Products&#8230;<br />
<strong></strong></p>
<p><strong>Shazam!</strong></p>
<p>Now I have a grid of 33 products with my design!</p>
<p><img class="alignnone size-full wp-image-178" title="qpc_51" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_51.gif?w=450&#038;h=288" alt="qpc_51" width="450" height="288" /></p>
<p>Sweet! Now all I have to do is check to make sure all products look their best. If something needs to be tweaked, there are ways to do that on a per-product basis. For example, the first sticker in the grid looks a bit tight. Looks like my design is getting a little cut off. Luckily, we have controls you can use right above each product:</p>
<p><img class="alignnone size-full wp-image-179" title="qpc_6" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_6.gif?w=450" alt="qpc_6"   /></p>
<ul>
<li><strong>Edit options</strong> &#8211; This opens a dialog with product options (sizes, styles, product views)</li>
<li><strong>Customize </strong>- This brings up a mini design tool in a dialog where I can move things around, add images or text, change sizes, etc.</li>
<li><strong>Delete </strong>- Removes the product from the set of products you are creating with Quick Product Create.</li>
</ul>
<p>Since the image on the sticker is a bit too big and is getting cut off, I need to shrink it. To do so, I click the “customize” link above my sticker product and shrink the image with the “resize” tool in the mini design tool.</p>
<p><strong></strong></p>
<p><strong>Details, details, details</strong></p>
<p>Now all my products look good and I&#8217;m ready to continue, so I click Next. I&#8217;m presented with a screen that is very similar to our Post For Sale page. You need to fill out all the information for these products, including title, description, tags, royalty percentage, etc. Required fields have a red asterisk next to them.</p>
<p><img class="alignnone size-full wp-image-181" title="qpc_8" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_8.gif?w=450&#038;h=278" alt="qpc_8" width="450" height="278" /></p>
<p>Most of these options are pretty self explanatory. However, there is a dropdown labeled &#8220;Quick Create Product Options&#8221;. Let me explain the options.</p>
<p><img class="alignnone size-full wp-image-182" title="qpc_9" src="http://zazzletechblog.files.wordpress.com/2008/12/qpc_9.gif?w=450" alt="qpc_9"   /></p>
<p>Most of the time, you are simply going to select the default option &#8220;Products to sell&#8221; because that&#8217;s what you are doing&#8230;creating products to sell.</p>
<p>However, if you want to make products to sell that are templates (so buyers can easily change text or images), you would select the second option, &#8220;Templates for sale&#8221;. This ensures that all fields marked as a template will remain a template when posted for sale. For more on how to create templates, see my previous post, <a href="http://techblog.zazzle.com/2008/10/31/more-than-just-embroidery/" target="_blank">More than just embroidery&#8230;</a></p>
<p>The third option, &#8220;Templates for reuse for quick create&#8221; is an advanced option for people who want to create a new set of products to use the next time they use Quick Product Create. This new Product Line would show up in the Step 1 dropdown under My Product Lines. As I mentioned before, Rob&#8217;s post <a href="http://sellerblog.zazzle.com/2008/12/19/avoid-carpal-tunnel-use-templates-for-quick-product-create/">explains how to do this</a>.</p>
<p><strong>Tada!</strong></p>
<p>Click Post It and you&#8217;re done! All products are now queued up for creation. This takes anywhere from a few minutes to 24 hours. If you have postage or shoes in your Product Line, expect those products to appear in the Product Line closer to the 24 hour limit since those products need to be approved before they get posted.<br />
<strong></strong></p>
<p><strong>Helpful hints</strong></p>
<ul>
<li>You can have up to 100 products posted at once. If you want more products, repeat the process after you create your first grid of products by clicking on the Create More button at the top of the first page, or at the end of the process you can click the Do It Again button.</li>
<li>There are checkboxes next to each product created in the grid. Use these to select multiple products that you want to remove from the grid. At the top of the grid, click &#8220;Delete selected&#8221; to remove them. Use these to select individual products that you want to remove from your Product Line.  To select multiple products, it’s often faster to use the “Select all” link at the top of the page and de-select those products you’d like to keep.</li>
<li>Always be sure to check your design on all the products in your grid before moving to the next step. You don&#8217;t want to post a product where the image is cut off or not positioned properly.</li>
<li>Quick Product Create puts all products you create in one Product Line. Select an existing Product Line when posting for sale, or create an entirely new Product Line based on the design. For example, with the image I used above, I could create a Product Line called &#8220;Get outta my grill!&#8221; and post all these products there. Many successful contributors organize their galleries by design.</li>
</ul>
<p>That&#8217;s all I have for now&#8230;happy creating!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/161/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/161/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/161/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=161&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/12/18/zero-to-100-in-30-seconds/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_small.gif" medium="image">
			<media:title type="html">qpc_small</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/grill.gif" medium="image">
			<media:title type="html">grill</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_1.gif" medium="image">
			<media:title type="html">qpc_1</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_2.gif" medium="image">
			<media:title type="html">qpc_2</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_3.gif" medium="image">
			<media:title type="html">qpc_3</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_4.gif" medium="image">
			<media:title type="html">qpc_4</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_51.gif" medium="image">
			<media:title type="html">qpc_51</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_6.gif" medium="image">
			<media:title type="html">qpc_6</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_8.gif" medium="image">
			<media:title type="html">qpc_8</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/12/qpc_9.gif" medium="image">
			<media:title type="html">qpc_9</media:title>
		</media:content>
	</item>
		<item>
		<title>Colors..colors&#8230;colors</title>
		<link>http://zazzletechblog.wordpress.com/2008/11/26/colorscolorscolors/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/11/26/colorscolorscolors/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 22:30:57 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[dst]]></category>
		<category><![CDATA[embroidery]]></category>

		<guid isPermaLink="false">http://zazzletechblog.wordpress.com/?p=148</guid>
		<description><![CDATA[I actually had a hard time thinking about what new feature to write about. I was going to talk about the already wildly popular Quick Product Create, but Patrick beat me to it on our regular blog. And who knows, maybe I&#8217;ll delve deeper into that on a later post. So what I bring you [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=148&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>I actually had a hard time thinking about what new feature to write about. I was going to talk about the already wildly popular Quick Product Create, but Patrick <a href="http://blog.zazzle.com/2008/11/25/new-quick-product-create/">beat me to it on our regular blog</a>. And who knows, maybe I&#8217;ll delve deeper into that on a later post.</p>
<p>So what I bring you today is an improvement to our embroidery offering&#8230;DST uploads and a colorizing user interface!</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/11/recolor1.jpg"><img class="alignnone size-full wp-image-155" title="recolor1" src="http://zazzletechblog.files.wordpress.com/2008/11/recolor1.jpg?w=450&#038;h=285" alt="recolor1" width="450" height="285" /></a></p>
<p><strong>Ummm&#8230;what?</strong></p>
<p>Ok, back up. What is a DST and what&#8217;s this colorizing thingy? Let me explain&#8230;</p>
<p>Embroidery requires images called &#8220;stitch files&#8221; that contain information about when to change thread colors and how to physically stitch a design. Our embroidery machines take these files and know how to sew it onto a product.</p>
<p>Up until now, we&#8217;ve used stitch files that contain all that information as well as what color threads to use. To convert a JPG or bitmap image to one of these stitch files, you need a professional conversion done (commonly known as &#8220;digitization&#8221;).</p>
<p>DST files are stitch files, but they are lacking one key piece of information we need: color data. Without knowing what color thread to use during a thread change, it&#8217;s rather difficult to make it look right. The good thing about DST files, however, is that they are a very common embroidery format with a large supporting community of embroidery experts all over that there Interweb <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p><strong>Red and yellow and pink and green&#8230;</strong></p>
<p>We knew we wanted to support this common format, but we had to build a way for users to tell us what colors to use for each thread change in the file. Enter the colorizing UI (insert dramatic music here)!</p>
<p>When a user uploads a DST file, Zazzle chooses default colors for each thread change in the file&#8230;just so it contains something. The results are usually less than optimal. But by going to My Zazzle &#8211;&gt; My Images and clicking on the image, there is a link to re-color the file:</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/11/dst_0.jpg"><img class="alignnone size-full wp-image-149" title="Image details dialog" src="http://zazzletechblog.files.wordpress.com/2008/11/dst_0.jpg?w=450&#038;h=289" alt="Image details dialog" width="450" height="289" /></a></p>
<p>Clicking that link brings up the colorizing UI:</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/11/dst_1.jpg"><img class="alignnone size-full wp-image-150" title="Colorizing UI" src="http://zazzletechblog.files.wordpress.com/2008/11/dst_1.jpg?w=450&#038;h=289" alt="Colorizing UI" width="450" height="289" /></a></p>
<p>The colorizing dialog shows the original stitch file image with the default colors on the left, and a set of color swatches on the right. Each color swatch represents a thread change in the stitch file. It is not uncommon for a stitch file to have multiple thread changes using the same color as a previous thread change. In other words, it is possible to assign duplicate colors to different swatches.</p>
<p>Clicking on a swatch brings up a palette of possible colors. These colors represent the thread spools our machines have access to.</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/11/dst_2.jpg"><img class="alignnone size-full wp-image-151" title="dst_2" src="http://zazzletechblog.files.wordpress.com/2008/11/dst_2.jpg?w=450&#038;h=289" alt="dst_2" width="450" height="289" /></a></p>
<p>Keep in mind that each image can only have a total of 10 colors including black and white.</p>
<p>So at this point, all you have to do is click each swatch and choose the appropriate color. The image updates in real time. Here&#8217;s how this file looks after some tweaks&#8230;</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/11/dst_3.jpg"><img class="alignnone size-full wp-image-152" title="dst_3" src="http://zazzletechblog.files.wordpress.com/2008/11/dst_3.jpg?w=450&#038;h=289" alt="dst_3" width="450" height="289" /></a></p>
<p>Much better! When finished, just click &#8220;Create copy with these colors&#8221; to create a copy of this stitch file. Every time you modify the colors of a stitch file, a new file gets created in My Images. This way you can have multiple colorized versions of the same design!</p>
<p><strong>This process is not limited to newly uploaded DST files.</strong> If you&#8217;ve already had some of your existing designs converted for embroidery, you can also re-color those as well without having to pay for a second conversion!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/148/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/148/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/148/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=148&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/11/26/colorscolorscolors/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/11/recolor1.jpg" medium="image">
			<media:title type="html">recolor1</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/11/dst_0.jpg" medium="image">
			<media:title type="html">Image details dialog</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/11/dst_1.jpg" medium="image">
			<media:title type="html">Colorizing UI</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/11/dst_2.jpg" medium="image">
			<media:title type="html">dst_2</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/11/dst_3.jpg" medium="image">
			<media:title type="html">dst_3</media:title>
		</media:content>
	</item>
		<item>
		<title>More than just embroidery&#8230;</title>
		<link>http://zazzletechblog.wordpress.com/2008/10/31/more-than-just-embroidery/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/10/31/more-than-just-embroidery/#comments</comments>
		<pubDate>Fri, 31 Oct 2008 21:13:09 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[design tool]]></category>
		<category><![CDATA[embroidery]]></category>
		<category><![CDATA[templates]]></category>
		<category><![CDATA[Zazzle]]></category>

		<guid isPermaLink="false">http://zazzletechblog.wordpress.com/?p=109</guid>
		<description><![CDATA[Release O&#8217;Plenty Wow. What a release! If you haven&#8217;t noticed already, we&#8217;ve just pushed out one of the biggest releases in Zazzle history. Not only are we now doing real embroidery, but we&#8217;ve packed this release full of candy-coated goodness! Unfortunately, we’ve hit a couple performance snags, but we’re getting those resolved very quickly – [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=109&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><strong>Release O&#8217;Plenty</strong></p>
<p>Wow. What a release! If you haven&#8217;t noticed already, we&#8217;ve just pushed out one of the biggest releases in Zazzle history. Not only are we now doing real embroidery, but we&#8217;ve packed this release full of candy-coated goodness! Unfortunately, we’ve hit a couple performance snags, but we’re getting those resolved very quickly – keep your eye on the Zazzle Forums for updates on that front.  For a quick overview, read our main blog post entitled <a title="Embroidery AND New Features" href="http://blog.zazzle.com/2008/10/31/embroidery-and-new-features/">Embroidery AND New Features</a>. In this post, I&#8217;m going to get into some detail on some new features of the Zazzle Design Tool.</p>
<p><strong><br />
I&#8217;m such a tool(bar)</strong></p>
<p>One of the first things you might notice is the look of our toolbar. We&#8217;ve reorganized it to show more options in a familiar menu style.</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/10/toolbar.gif"><img class="alignnone size-full wp-image-110" title="New toolbar" src="http://zazzletechblog.files.wordpress.com/2008/10/toolbar.gif?w=450" alt=""   /></a></p>
<p>There are now Select, Edit, and Align options in the toolbar. These features help you select design elements, copy and paste them, and align them relative to each other. Next time you create something, check them out!</p>
<p>Also, if a product contains more than one design area (front and back of a t-shirt, multiple areas of a shoe, etc.) an Area selector appears on the left. This is a quick and easy way to select the different areas of a product to design on. And the best part is that now they contain easy to understand icons.</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/10/area_selector.gif"><img class="alignnone size-full wp-image-111" title="Area selector" src="http://zazzletechblog.files.wordpress.com/2008/10/area_selector.gif?w=450" alt=""   /></a></p>
<p><strong>Oops, I messed up again</strong></p>
<p>One thing a lot of people do is customize an existing design. You see a cool design and want to add your name, or you want to nudge the image a bit higher. If a contributor has allowed customization, anyone can do these things.</p>
<p>Of course, when you start messing around with a design, you may end up with something that doesn&#8217;t quite look like you pictured it. What to do?</p>
<p>REVERT! Yes, now there is an option to revert any design to its original state before you started changing things. Revert is located just under the Post for Sale button.</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/10/revert.gif"><img class="alignnone wp-image-112" title="Revert" src="http://zazzletechblog.files.wordpress.com/2008/10/revert.gif?w=457&#038;h=99" alt="" width="457" height="99" /></a></p>
<p><strong><br />
Templates made easy</strong></p>
<p>So here&#8217;s the big one. The top banana. The Big Kahuna. El Jefe. Yes, ladies and gentlecontributors, we now have an easy way to make templates! Zoinks!</p>
<p>&#8220;You mean we don&#8217;t have to double-click somewhere and add cryptic brackets anymore?&#8221;</p>
<p>Correct. There is now a template UI!</p>
<p>You can make a product become a template by simply defining which image(s) or text object(s) can be replaced by the buyer.</p>
<p><strong>Example:</strong><br />
Add an image to a product. You will notice an “Advanced options” link on the image object.<br />
<a href="http://zazzletechblog.files.wordpress.com/2008/10/templates1.gif"><img class="alignnone size-full wp-image-113" title="Advanced options" src="http://zazzletechblog.files.wordpress.com/2008/10/templates1.gif?w=450" alt=""   /></a><br />
Click the Advanced options link to show all advanced options.<br />
<a href="http://zazzletechblog.files.wordpress.com/2008/10/templates2.gif"><img class="alignnone size-full wp-image-114" title="Template options" src="http://zazzletechblog.files.wordpress.com/2008/10/templates2.gif?w=450" alt=""   /></a></p>
<p>One of the options is a checkbox labeled “Make this a template object”. Checking that box will display all the options available for defining this template image placeholder.<br />
<a href="http://zazzletechblog.files.wordpress.com/2008/10/templates3.gif"><img class="alignnone size-full wp-image-115" title="Template options" src="http://zazzletechblog.files.wordpress.com/2008/10/templates3.gif?w=450" alt=""   /></a></p>
<p>When you select “Make this a template object”, you have access to four options:</p>
<ol>
<li><strong>Product page label</strong> – This is the label that the customer will see on the product page. Use something descriptive here, like “Your picture” or “Your logo”.</li>
<li><strong>URL parameter name</strong> – If you are using the Zazzle API to pass data to this product from an external source, this is the parameter name the API will use. Avoid spaces or special characters. You can safely ignore this field if you are not working with the API (see the Zazzle API documentation for more information).</li>
<li><strong>Inner fit/fill mode</strong> – For images.If your template allows the buyer to replace your placeholder image with one of her own, this setting determines how the buyer’s  image replaces yours. The options are none, fit, or fill.<br />
<strong><br />
none</strong> – If you set Inner fit/fill mode to none, the buyer’s  image simply replaces your placeholder image, and may be larger or smaller than the placeholder.<strong>fit</strong> – Selecting fit will resize the buyer’s  image to fit inside of your placeholder image object’s dimensions. This will ensure that their image is not cropped.<br />
<strong><br />
fill</strong> – Selecting fill will resize their image to fill the entire dimensions of your placeholder image. If the buyer’s image is wider or taller than your placeholder, this may result in zooming and cropping of the customer’s image.</li>
<li>Allow editing on product page – Keep this checked if you want to enable EZ Templates on your product page. Unchecking this option is usually only done when working with the Zazzle API.</li>
</ol>
<p>Once you have filled out all the options, click Post for Sale. You are then presented with the normal Post it for Sale page. Notice the checkbox labeled “This product is a template”. This tells you that the product contains template objects, and that it will be posted for sale as a template. Only uncheck it if you decide at this point to not allow customer personalization of this product; otherwise keep it checked.<br />
Congratulations! You have just created a template product!</p>
<p><strong>Lock it up!</strong></p>
<p>Sometimes, you may want to create a template product but have items that are not changeable by a customer. Now you can simply check the box labeled &#8220;Lock this image&#8221; or &#8220;Lock this text object&#8221;. This will essentially lock the item and not allow any editing of it whatsoever (can&#8217;t delete it, move it, resize it, etc.)</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/10/lock.gif"><img class="alignnone size-full wp-image-124" title="Lock" src="http://zazzletechblog.files.wordpress.com/2008/10/lock.gif?w=450" alt=""   /></a></p>
<p>That&#8217;s all there is to it, folks!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/109/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/109/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=109&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/10/31/more-than-just-embroidery/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/toolbar.gif" medium="image">
			<media:title type="html">New toolbar</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/area_selector.gif" medium="image">
			<media:title type="html">Area selector</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/revert.gif" medium="image">
			<media:title type="html">Revert</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/templates1.gif" medium="image">
			<media:title type="html">Advanced options</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/templates2.gif" medium="image">
			<media:title type="html">Template options</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/templates3.gif" medium="image">
			<media:title type="html">Template options</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/10/lock.gif" medium="image">
			<media:title type="html">Lock</media:title>
		</media:content>
	</item>
		<item>
		<title>Zazzle Store Builder&#8230;Zazzle products on YOUR website</title>
		<link>http://zazzletechblog.wordpress.com/2008/09/05/zazzle-store-builderzazzle-products-on-your-website/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/09/05/zazzle-store-builderzazzle-products-on-your-website/#comments</comments>
		<pubDate>Sat, 06 Sep 2008 01:52:59 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[associate]]></category>
		<category><![CDATA[referral]]></category>
		<category><![CDATA[Zazzle]]></category>
		<category><![CDATA[Zazzle Store Builder]]></category>
		<category><![CDATA[zBar]]></category>

		<guid isPermaLink="false">http://zazzletechblog.wordpress.com/?p=59</guid>
		<description><![CDATA[&#160;&#160;On Monday, August 18th, we launched our redesigned Zazzle website. Guess what we snuck in there for ya&#8230;the Zazzle Store Builder! Yes, now it is possible to put Zazzle products on your website with just a couple of quick text edits! How easy is this? All you have to do is enter your gallery name [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=59&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><a title="Download the Zazzle Store Builder" href="http://www.zazzle.com/sell/tools/storebuilder" target="_blank"><img src="http://zazzletechblog.files.wordpress.com/2008/09/zsb_logo.gif?w=153&#038;h=156" alt="" width="153" height="156" align="left" /></a></p>
<p>&nbsp;<br />&nbsp;<br />On Monday, August 18th, we launched our redesigned Zazzle website. Guess what we snuck in there for ya&#8230;the <strong>Zazzle Store Builder</strong>! Yes, now it is possible to put Zazzle products on your website with just a couple of quick text edits!</p>
<p><a href="http://www.t0p10.com/" target="_blank"><img class="size-full wp-image-71 alignnone" title="Sample Zazzle Store Builder store" src="http://zazzletechblog.files.wordpress.com/2008/09/top10.jpg?w=450" alt=""   /></a><br />
<strong><br />
How easy is this?</strong><br />
All you have to do is enter your gallery name and your associate ID in a configuration file&#8230;and voilà! Instant store front! But it can go way deeper than that&#8230;over 20 different configurable parameters deeper. Here&#8217;s a taste:</p>
<ul>
<li>Google Analytics support</li>
<li>Product line filter</li>
<li>Product type filter</li>
<li>Keyword filter</li>
<li>Display product thumbnails in 5 different sizes</li>
<li>Sorting and pagination controls</li>
<li>Enable local caching</li>
<li>Display product titles, descriptions, prices and contributor link</li>
<li>Change the image background color</li>
</ul>
<p>All these parameters and more can be set in a simple configuration text file. No programming required. But if you know a little CSS and HTML, you can do so much more.<br />&nbsp;<br />
Oh, and did I mention we are releasing this as Open Source? Yup. If you are a PHP programmer, feel free to dissect this, make it better, add features, create services&#8230;the possibilities are as open as you are!<br />
<br />&nbsp;<br />
<strong>Why do we need this?</strong><br />
Some of you may be asking &#8220;But Ed, why do we need to have an external web site when I have a perfectly good gallery on Zazzle.com?&#8221; The answer is simple. By <strong>driving your own traffic to your gallery on Zazzle</strong>, you will <strong>make more money</strong>! A potential customer that visits your Zazzle Store Builder site and clicks on a product thumbnail will be taken to that product in your gallery&#8230;with your associate referral ID tagging along for the ride! That means that anything that user buys from Zazzle during that session funnels a percentage to you. And there&#8217;s a good chance they&#8217;ll buy YOUR product since that&#8217;s how they got to Zazzle in the first place. Which means double whammy! Referral AND royalty!<br />&nbsp;<br />
And another cool thing is that customers who click over to your gallery from your Store Builder site will be treated to the <a title="Read up on the Zazzle zBar" href="http://www.zazzle.com/sell/tools/zbar" target="_blank">zBar</a> (a much smaller Zazzle header), <strong>putting YOUR brand where it matters most&#8230;right in front of the customer that YOU brought to Zazzle</strong>.<br />
<br />&nbsp;<br />
<strong>What are the requirements to set this up?</strong><br />
All you need is a web host that supports PHP, and about 10 minutes! We provide <a title="Download the Zazzle Store Builder Guide" href="http://www.zazzle.com/assets/graphics/z2/mk/sell/tools/ZazzleStoreBuilder_Guide_1.0.pdf" target="_blank">documentation</a> (pdf: 3MB) to guide you during setup, and there is now a <a title="View the Zazzle Tools forum" href="http://forum.zazzle.com/tools" target="_blank">Tools Forum</a> where you can ask questions or help others if you are wise in the ways of geekdom <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /><br />
<br />&nbsp;<br />
<strong>How does it work?</strong><br />
So what&#8217;s the magic behind the Zazzle Store Builder? Simple. RSS feeds. <a title="Read up on Zazzle RSS feeds" href="http://www.zazzle.com/sell/tools/feeds" target="_blank">Zazzle&#8217;s new gallery RSS architecture</a> lent us the opportunity to build a pretty robust application that gives you, the store owner, the power to design your own store front just the way you want it.<br />
<br />&nbsp;<br />
<strong>Ok, where can I download this?</strong><br />
I can go on all night about the Zazzle Store Builder. But you should really just <a title="Download the Zazzle Store Builder" href="http://www.zazzle.com/sell/tools/storebuilder" target="_self">download it</a> and try it yourself. It&#8217;s <strong>FREE</strong>, so you have nothing to lose&#8230;and so much to gain!<br />&nbsp;</p>
<p>&nbsp;</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/zazzletechblog.wordpress.com/59/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/zazzletechblog.wordpress.com/59/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/59/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/59/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=59&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/09/05/zazzle-store-builderzazzle-products-on-your-website/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/09/zsb_logo.gif" medium="image" />

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/09/top10.jpg" medium="image">
			<media:title type="html">Sample Zazzle Store Builder store</media:title>
		</media:content>
	</item>
		<item>
		<title>Face the Typeface&#8230;or Meet FontZee!</title>
		<link>http://zazzletechblog.wordpress.com/2008/06/30/face-the-typefaceor-meet-fontzee/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/06/30/face-the-typefaceor-meet-fontzee/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 23:57:12 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[design tool]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[FontZee]]></category>

		<guid isPermaLink="false">http://zazzletechblog.wordpress.com/?p=52</guid>
		<description><![CDATA[I gotta tell you&#8230;playing around with Zazzle&#8217;s text tool is fun. There are so many cool fonts to choose from that I don&#8217;t think I&#8217;ve ever actually seen them all. I always end up finding one I like before I explore deeper. But therein lies a problem&#8230;with so many fonts to choose from, it takes [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=52&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>I gotta tell you&#8230;playing around with Zazzle&#8217;s text tool is fun. There are so many cool fonts to choose from that I don&#8217;t think I&#8217;ve ever actually seen them all. I always end up finding one I like before I explore deeper.</p>
<p>But therein lies a problem&#8230;with so many fonts to choose from, it takes a long time to test each one out to see if it works in your design. Add to that the fact that you would find a font, select it, the font chooser would go away, your design would get updated, and THEN you make the decision whether it works or not. If it doesn&#8217;t, you start all over and open the font chooser dialog again. Phew.</p>
<p>Well, be weary no longer, folks! There&#8217;s a new font selector in town, and he&#8217;s kicking picas and taking names! I call him FontZee. (Hey, why not? We have Maggie the magnifier!)</p>
<p>Bask in FontZee&#8217;s glory:</p>
<p><a href="http://zazzletechblog.files.wordpress.com/2008/06/font_dialog.gif"><img class="alignnone size-medium wp-image-53" src="http://zazzletechblog.files.wordpress.com/2008/06/font_dialog.gif?w=450" alt="Cool, beautiful, easy...it\'s Fontzee!" /></a></p>
<p>So what&#8217;s so great about it?</p>
<ul>
<li>Fonts are organized better&#8230;each font category now lists how many fonts it includes</li>
<li>Select a font and see it update on your design immediately! This is the big one for me. Now I can scroll through and select a font, immediately decide whether it works, choose another one, etc.</li>
<li>Recently used fonts are now saved in the dialog</li>
<li>The font dialog actually loads a bit faster <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </li>
</ul>
<p>See, people? It&#8217;s the little things that make me happy!</p>
<p><sup>The name FontZee is not official, nor does Zazzle promote the use of it. It is simply a product of this editor&#8217;s sick mind, and any similarity to any person, living or dead, is purely coincidental. The end.</sup></p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/zazzletechblog.wordpress.com/52/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/zazzletechblog.wordpress.com/52/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/52/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/52/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/52/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=52&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/06/30/face-the-typefaceor-meet-fontzee/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>

		<media:content url="http://zazzletechblog.files.wordpress.com/2008/06/font_dialog.gif" medium="image">
			<media:title type="html">Cool, beautiful, easy...it\&#039;s Fontzee!</media:title>
		</media:content>
	</item>
		<item>
		<title>New design tool features&#8230;</title>
		<link>http://zazzletechblog.wordpress.com/2008/03/03/new-design-tool-features/</link>
		<comments>http://zazzletechblog.wordpress.com/2008/03/03/new-design-tool-features/#comments</comments>
		<pubDate>Tue, 04 Mar 2008 06:10:31 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[align]]></category>
		<category><![CDATA[design tool]]></category>
		<category><![CDATA[dialog]]></category>

		<guid isPermaLink="false">http://zazzletechblog.wordpress.com/?p=51</guid>
		<description><![CDATA[These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately&#8230;check! Space things out evenly&#8230;check! Follow the link for details&#8230; Please form an evenly spaced single line To keep things on the tech topic, here&#8217;s a little CSS tip on how to center a block [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=51&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately&#8230;check! Space things out evenly&#8230;check! Follow the link for details&#8230;</p>
<p><a href="http://blog.zazzle.com/2008/03/03/please-form-an-evenly-spaced-single-line/"><strong>Please form an evenly spaced single line</strong></a></p>
<p>To keep things on the tech topic, here&#8217;s a little CSS tip on how to center a block element inside another block element. Here&#8217;s a CSS class:</p>
<p><code>.centerme {<br />
  margin-left: auto;<br />
  margin-right: auto;<br />
  width: 140px;<br />
}<br />
</code></p>
<p>And here&#8217;s the HTML:</p>
<p><code><br />
&lt;div style="width: 400px"&gt;<br />
&lt;div class="centerme"&gt;This is text inside a DIV tag.&lt;/div&gt;<br />
&lt;/div&gt;<br />
</code></p>
<p>The idea here is that we are setting the left and right margins of the parent DIV to be equal (auto), and the inner DIV, with a width of 140px, automatically gets centered. Neat.</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/zazzletechblog.wordpress.com/51/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/zazzletechblog.wordpress.com/51/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/51/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/51/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/51/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=51&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2008/03/03/new-design-tool-features/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>
	</item>
		<item>
		<title>The Zazzle Facelift</title>
		<link>http://zazzletechblog.wordpress.com/2007/09/13/the-zazzle-facelift/</link>
		<comments>http://zazzletechblog.wordpress.com/2007/09/13/the-zazzle-facelift/#comments</comments>
		<pubDate>Fri, 14 Sep 2007 05:59:30 +0000</pubDate>
		<dc:creator>Ed Caggiani, User Experience Designer</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://techblog.zazzle.com/2007/09/13/the-zazzle-facelift/</guid>
		<description><![CDATA[Trudging Across The Tundra Sometimes, you have to take a step back and look at where you are before you are able to move forward in any reasonable way. When you have your head down, trudging across the tundra, mile after mile, you forget to look up every so often to see if you are [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=43&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><font size="2" face="Arial"><span class="816451120-10092007"><strong>Trudging Across The Tundra</strong></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">Sometimes, you have to take a step back and look at where you are before you are able to move forward in any reasonable way. When you have your head down, trudging across the tundra, mile after mile, you forget to look up every so often to see if you are moving in the right direction. Well, we just looked up. And we noticed that there were many places we could optimize in our code&#8230;from CSS to HTML to JavaScript.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">In this latest incarnation of the Zazzle website, there are more behind the scenes changes than there are&#8230;well, things that there are a lot of. We took the time to essentially restructure our pages for performance and scalability, by doing a few simple things: organize page elements to load in a specific order, remove huge chunks of now redundant CSS, and implement a new design that allows us to use less images and HTML.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"><strong>If You Build It Right, It Will Come Faster</strong></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">Our first task was to take a look at the overall structure of our pages. This includes everything from what&#8217;s in the HEAD section, to where we load in our JavaScript. The important thing to note about this is that by structuring our pages in a consistent way throughout our site, we could now make better decisions about what external files need to be loaded, and where. This also allowed us to make the decision to load most, if not all, of our JavaScript at the very bottom of every document.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">So what, you ask? In our old site, we would load in a default CSS file for all pages, and if anything on that page needed special stylings, we would override them with styles from another file specific to that page. Ok, makes sense. And we still actually do that. </span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">But the big difference is that now that the pages are structured in a consistent manner, it&#8217;s a lot easier to NOT have to do an override of an override of an override to achieve a particular look since we are only loading in the CSS files that are needed. There were many cases before where we had many CSS files loaded for a page, each performing overrides.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">On top of that, the CSS itself has been optimized in many places, mostly due to the simplified HTML markup that makes up the page. Simpler markup means simpler CSS&#8230;which leads to much less code. How much less? We estimate that there is approximately <strong>50% LESS CSS</strong> than before, and with a much cleaner user interface. Win-win baby!</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">Loading JavaScript at the bottom of each page also serves two purposes. One, the page HTML loads and displays to the user while downloading instead of waiting for JavaScript to download. Second, it allows us to easily &#8220;wire up&#8221; scripted elements on the page once the page is complete. The advantage there is that at this point we are certain all elements exist and the JavaScript can run unfettered.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"><strong>Rounded Corners Are So 2003</strong></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">There are some things HTML/CSS just doesn&#8217;t do well. Rounded corners are one of those things. Our old design used many rounded corners all over the place, which caused us to create something we called a &#8220;zBox&#8221;. What is a zBox? It&#8217;s basically a bunch of HTML and CSS that would render a box container with rounded corners. We made it so easy for us to use that whenever we needed to add a new container to our page, we&#8217;d simply call our zBox component.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">The only problem was that a zBox contained a significant amount of HTML and CSS, not to mention images that needed to be loaded for the corners. It was not unheard of to have a page with half a dozen or more zBoxes.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">With our redesign, we decided to simplify&#8230;not only the code, but the entire look of the site. This meant getting rid of the ubiquitous zBox. By simply replacing zBoxes with single DIV containers, we were able to remove huge amounts of markup and images, making each page that much lighter to load.</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">Here&#8217;s an example piece of code for a zBox:</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="+0"><span class="816451120-10092007"><font color="#0000ff"><font size="2" face="Arial">&lt;</font></font><font face="Arial"><font size="2"><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBox&#8221;</font> <font color="#ff0000">id</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">=&#8221;<span class="816451120-10092007">d</span>ivId&#8221;&gt;<br />
</font><font color="#0000ff"><span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">=&#8221;zBoxTop&#8221;&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxTopDiv1&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxTopDiv2&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font size="2"><font face="Arial"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span></font></font><font face="Arial">&lt;/<font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">=&#8221;zBoxMiddle&#8221;&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font></font></font><font size="2"><font face="Arial"><font color="#0000ff">=&#8221;zBoxContentWrapper&#8221;&gt;<br />
<span class="816451120-10092007"></span>&lt;</font></font><font face="Arial"><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxContent clearfix&#8221;</font> <font color="#ff0000">id</font></font></font><font size="2" color="#0000ff" face="Arial">=&#8221;innerDivId&#8221;&gt;<br />
</font><font face="Arial"><font size="2"><span class="816451120-10092007"></span>##content##<br />
<font color="#0000ff"><span class="816451120-10092007"></span>&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxContentDiv1&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxContentDiv2&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">=&#8221;zBoxBottom&#8221;&gt;<br />
<span class="816451120-10092007"></span></font>&lt;<font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxBottomDiv1&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">=&#8221;zBoxBottomDiv2&#8243;&gt;&lt;/</font><font color="#800000">div</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
<span class="816451120-10092007"></span>&lt;/</font><font color="#800000">div</font></font></font><font color="#0000ff"><font size="2" face="Arial">&gt;<br />
</font><font size="2" face="Arial">&lt;/</font></font><font face="Arial"><font size="2"><font color="#800000">div</font><font color="#0000ff">&gt;</font></font></font></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">And here&#8217;s that same container without using zBox:</span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007">&lt;<font face="Arial"><font size="2"><font color="#800000">div class=&#8221;<font color="#0000ff">myClass</font>&#8220;</font> <font color="#ff0000">id</font></font></font><font face="Arial"><font size="2"><font color="#0000ff">=&#8221;<span class="816451120-10092007">d</span>ivId&#8221;&gt;<br />
<font color="#000000">##content##<br />
</font><font color="#0000ff">&lt;/</font><font color="#800000">div</font><font face="Arial"><font size="2"><font color="#0000ff">&gt;<br />
</font></font></font></font></font></font></span></font><font size="2" face="Arial"><span class="816451120-10092007"><font face="Arial"><font size="2"><font color="#0000ff"><br />
<font color="#000000">And that&#8217;s not even including the CSS and images that are needed! So needless to say, with our new simplified design, we were able to cut tons of unneeded code from the site. It&#8217;s like Zazzle went on a diet and looks great!</font></font></font></font></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"></span></font></p>
<p><font size="2" face="Arial"><span class="816451120-10092007"><font face="Arial"><font size="2"><font color="#0000ff"><strong><font color="#000000">Even The Skin is Low Fat</font></strong></font></font></font></span></font></p>
<p class="MsoNormal"><font size="2" color="#000000" face="Arial"><span style="font-size:10pt;color:black;font-family:Arial;">With our svelte new design and our consistent page structure, we are now able to provide room for future growth. And where do growths usually occur? Well, on the skin, of course! Yes, gross analogy aside, we will be able to offer the ability to skin parts of our site!</span></font></p>
<p class="MsoNormal"><font size="2" color="#000000" face="Arial"><span style="font-size:10pt;color:black;font-family:Arial;">We already provide themes for contributors to skin their entire galleries. This helps contributors create a brand and experience tied to their art and designs. The steps we&#8217;re taking with our website technology move towards deep level customizations. Imagine being able to skin the gallery with even more control (like custom CSS!) – just like we’ve started to on Zazzle. The possibilities will be endless!</span></font></p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/zazzletechblog.wordpress.com/43/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/zazzletechblog.wordpress.com/43/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/zazzletechblog.wordpress.com/43/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/zazzletechblog.wordpress.com/43/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/zazzletechblog.wordpress.com/43/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=zazzletechblog.wordpress.com&amp;blog=690679&amp;post=43&amp;subd=zazzletechblog&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://zazzletechblog.wordpress.com/2007/09/13/the-zazzle-facelift/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/c320c313d4cc0fb48c879db53a0d070f?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Ed Caggiani, User Experience Designer</media:title>
		</media:content>
	</item>
	</channel>
</rss>
