Author Archive

Best line from an LAX security guard…

April 8, 2009

Just a fun little Zazzle shirt story from my vacation…

So I’m wearing my “+5 Shirt of Invisibility” t-shirt and going through security at LAX.

Security guard: +5 shirt of invisibility, huh?

Me: Yeah. You can’t see me, can you?

Security guard: Yes I can. I’m wearing my +10 Goggles of True Seeing.

Dang. Foiled by a true professional!

Here is the shirt:

(Permalink)

Zero to 100 in 30 seconds!

December 18, 2008

qpc_smallI drive a hybrid and pride myself on getting amazing mileage (52MPG lifetime, baby!). To accomplish this, I drive…well…slow. I go under the speed limit and stay in the right lane. Works for me…I’m a laid back guy who takes life slowly and casually.

But there is one place where I welcome a little high speed action. And that’s in creating products on Zazzle! Introducing Quick Product Create!

Yes, now it’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.


Design for success

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:

  • Create the image at the highest resolution you can. Since this image will be placed on several products at differing sizes, it’s best to make sure it’s of sufficient size and quality so it will print properly on most products. Visit our image guidelines page for more information on image resolution.
  • 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’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.
  • 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.

Ok, so I have my design. I’m going to use this “Get outta my grill” image I made a while back.

grill

The original is a high resolution PNG file, so it should work fine for most products.


Place it!

Ok, got my image. Now I need to start the Quick Product Create process by going to http://www.zazzle.com/cr/quick/start. When you start, you see this dialog pop up:

qpc_1

Click the dropdown arrow in Step 1 to see what options you have:

qpc_2

As you can see, there are some default Zazzle Product Lines you can choose from. These currently include:

  • All Products
  • All Non-apparel
  • Apparel only
  • Dark Apparel Only
  • Light Apparel Only
  • Paper Products

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. Advanced users, read all about it here!

I’ll choose All Products since it contains a nice mix of t-shirts, cards, stamps, mugs, and other products.

qpc_3

Once you select a Product Line, you will see that you can change the default image in Step 2. Click the link that says “Change”, and you will see all your Zazzle images, or you can upload a new one. Here, I’ve selected my “Get outta my grill” image.

qpc_4

In Step 3 you will notice that you have the option to change the default fit/fill mode to one of three options:

  1. Use template defaults (uses whatever the product template was designed with. Could be either fit or fill.)
  2. Fit (makes sure your entire image is visible in the product’s design area – no cropping)
  3. Fill (fills the entire product’s design area. Cropping may occur)

For most cases, using the default should be fine.

Ok…click Create Products…

Shazam!

Now I have a grid of 33 products with my design!

qpc_51

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:

qpc_6

  • Edit options – This opens a dialog with product options (sizes, styles, product views)
  • Customize - This brings up a mini design tool in a dialog where I can move things around, add images or text, change sizes, etc.
  • Delete - Removes the product from the set of products you are creating with Quick Product Create.

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.

Details, details, details

Now all my products look good and I’m ready to continue, so I click Next. I’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.

qpc_8

Most of these options are pretty self explanatory. However, there is a dropdown labeled “Quick Create Product Options”. Let me explain the options.

qpc_9

Most of the time, you are simply going to select the default option “Products to sell” because that’s what you are doing…creating products to sell.

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, “Templates for sale”. 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, More than just embroidery…

The third option, “Templates for reuse for quick create” 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’s post explains how to do this.

Tada!

Click Post It and you’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.

Helpful hints

  • 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.
  • 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 “Delete selected” 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.
  • Always be sure to check your design on all the products in your grid before moving to the next step. You don’t want to post a product where the image is cut off or not positioned properly.
  • 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 “Get outta my grill!” and post all these products there. Many successful contributors organize their galleries by design.

That’s all I have for now…happy creating!

Colors..colors…colors

November 26, 2008

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’ll delve deeper into that on a later post.

So what I bring you today is an improvement to our embroidery offering…DST uploads and a colorizing user interface!

recolor1

Ummm…what?

Ok, back up. What is a DST and what’s this colorizing thingy? Let me explain…

Embroidery requires images called “stitch files” 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.

Up until now, we’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 “digitization”).

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’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 :-)

Red and yellow and pink and green…

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)!

When a user uploads a DST file, Zazzle chooses default colors for each thread change in the file…just so it contains something. The results are usually less than optimal. But by going to My Zazzle –> My Images and clicking on the image, there is a link to re-color the file:

Image details dialog

Clicking that link brings up the colorizing UI:

Colorizing UI

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.

Clicking on a swatch brings up a palette of possible colors. These colors represent the thread spools our machines have access to.

dst_2

Keep in mind that each image can only have a total of 10 colors including black and white.

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’s how this file looks after some tweaks…

dst_3

Much better! When finished, just click “Create copy with these colors” 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!

This process is not limited to newly uploaded DST files. If you’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!

Behind the seams…

November 4, 2008

How to create embroidery on Zazzle
Yes, folks, embroidery will keep you in stitches. Sew I wanted to get right into it and show you just how seamless an experience it can be. I will show you the ups and downs and the ins and outs of the process.

These embroidery puns doin’ anything for ya?


Guide Us
First, I want to point you to an important document, the Embroidery Design Guide (PDF). This guide explains a lot of the details about creating successful embroidery products on Zazzle. Read it. Know it. Love it.

Also have a look at our embroidery information page. It contains important information regarding our process as well as links to pricing information.


Walkthrough
In this section, I will guide you through the process of creating an embroidered product from a standard JPG, GIF, or PNG image. It’s very similar to the normal print process, with a few key differences.


Step 1: Choose a product
The first step is simply to select what kind of product you would like to design: shirt, hat, or bag. Go to http://www.zazzle.com/custom/embroidery and choose one of the options:

Choose an embroidery product

Once you select a product, you will be taken to that product’s design tool. For this example, I chose Hooded Sweatshirt.


Step 2: Add an image
Once you are in the design tool a “Get Started” dialog appears where you can add an image or text. This is just like our print-on-demand design tool:

Let’s add an image. Click the Select Image link and you will see your image collection. Select an image, click Add Image, then click Make it now.

Now here’s one of those “key differences” I mentioned above. At this point, a new dialog will appear explaining to you that this particular image needs to be converted for embroidery.

This is an informational dialog only. It explains why we need to convert your image, how to choose an image that will convert well, and talks about the fee and time it takes to convert. In traditional embroidery, this conversion process is called “digitization”.

The conversion process is done by skilled technicians who know how best to interpret designs into stitches. It’s not an automated hit or miss process. It’s looked at by actual people using actual human eyeballs.

Once you finish reading the dialog, click Ok, add this image.

At this point, I’d like to mention that if you already own a stitch file in .OFM format, you can upload it and bypass all conversion costs. If you’ve had images digitized in the past for embroidery by a traditional embroidery company, you might have an .OFM file.


Step 3: Size your image
Now that the image is placed on the product, we can calculate the conversion fee. You will see that there is now a big yellow box under your image that tells you the cost of conversion at the current size.

In this example, the image is sized to 1.7″ x 2.1″ and it’s telling me that will cost $30 to convert. If I wanted to reduce that price, I could do a couple of things:

  1. Reduce the size of the image
  2. Simplify the image by removing fills and keeping outlines

The conversion fee is calculated by how many stitches it takes to create the image out of thread. The rate is $5 per 1000 stitches. The smaller the image, the less stitches it takes to create. Also, fewer blocks of solid color means less stitches required.

Keep in mind that once you convert an image at a particular size, you cannot change its size as an embroidery file.  You must convert it again if you want a different size embroidery design.  A handy tip is to convert images at the smallest size you can.  You can convert a smaller image once and use it on a greater number of products.  If you convert an image in a larger size, it will only fit on some products.  Hats, for example, have very small design areas and can only accept smaller images.


Step 4: Buy or post
Once you’re satisfied with the size and placement, you have the option to Add to cart or Post for sale. If you choose to add this product to your cart, you will see two line items in your cart…the product itself, and the conversion fee.

If you choose to post this for sale rather than purchase the product yourself, you will be presented with the normal Post for sale page first. Fill it out normally with the description, tags, title, etc. Click Continue when finished.

Now you will get a page reminding you about the conversion that is required.

This page gives details about the conversion fee as well as how long it takes to convert. You must click Continue to cart to add the conversion fee to your shopping cart.

Once it’s in your cart, simply checkout normally, and your image is sent off to be converted.


Step 5: Enjoy!
That’s it! Once the conversion is complete, you will receive an email with a link to your stitch file so you can see how it will stitch out. If you purchased the product, this is when the product begins its normal manufacturing process.

If you posted for sale, your product will appear in the marketplace when conversion is complete.


Free Text
What if you want to create an embroidered product, but don’t want to pay to convert an image? Use one of our over 100 embroidery fonts and create a text only product! No conversion required!

We have specialized monogram fonts, cool fonts, and traditional block and script fonts.

Bend it like Beckham
Another cool thing about using our built-in embroidery fonts is that you can automatically arch your text up or down, or re-orient to vertical or horizontal text, using a simple drop-down menu.

Templatizing the stitchy way
Did you know you can create templates from embroidery products? Any text object in an embroidered product can be made into a template placeholder. This is great for sports teams, family reunion shirts, etc.

For more information on how to create templates, see the post titled More than just embroidery…

More than just embroidery…

October 31, 2008

Release O’Plenty

Wow. What a release! If you haven’t noticed already, we’ve just pushed out one of the biggest releases in Zazzle history. Not only are we now doing real embroidery, but we’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 Embroidery AND New Features. In this post, I’m going to get into some detail on some new features of the Zazzle Design Tool.


I’m such a tool(bar)

One of the first things you might notice is the look of our toolbar. We’ve reorganized it to show more options in a familiar menu style.

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!

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.

Oops, I messed up again

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.

Of course, when you start messing around with a design, you may end up with something that doesn’t quite look like you pictured it. What to do?

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.


Templates made easy

So here’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!

“You mean we don’t have to double-click somewhere and add cryptic brackets anymore?”

Correct. There is now a template UI!

You can make a product become a template by simply defining which image(s) or text object(s) can be replaced by the buyer.

Example:
Add an image to a product. You will notice an “Advanced options” link on the image object.

Click the Advanced options link to show all advanced options.

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.

When you select “Make this a template object”, you have access to four options:

  1. Product page label – This is the label that the customer will see on the product page. Use something descriptive here, like “Your picture” or “Your logo”.
  2. URL parameter name – 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).
  3. Inner fit/fill mode – 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.

    none
    – 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.fit – 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.

    fill
    – 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.
  4. 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.

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.
Congratulations! You have just created a template product!

Lock it up!

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 “Lock this image” or “Lock this text object”. This will essentially lock the item and not allow any editing of it whatsoever (can’t delete it, move it, resize it, etc.)

That’s all there is to it, folks!

Zazzle Store Builder…Zazzle products on YOUR website

September 5, 2008

 
 
On Monday, August 18th, we launched our redesigned Zazzle website. Guess what we snuck in there for ya…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 and your associate ID in a configuration file…and voilà! Instant store front! But it can go way deeper than that…over 20 different configurable parameters deeper. Here’s a taste:

  • Google Analytics support
  • Product line filter
  • Product type filter
  • Keyword filter
  • Display product thumbnails in 5 different sizes
  • Sorting and pagination controls
  • Enable local caching
  • Display product titles, descriptions, prices and contributor link
  • Change the image background color

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.
 
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…the possibilities are as open as you are!

 
Why do we need this?
Some of you may be asking “But Ed, why do we need to have an external web site when I have a perfectly good gallery on Zazzle.com?” The answer is simple. By driving your own traffic to your gallery on Zazzle, you will make more money! 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…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’s a good chance they’ll buy YOUR product since that’s how they got to Zazzle in the first place. Which means double whammy! Referral AND royalty!
 
And another cool thing is that customers who click over to your gallery from your Store Builder site will be treated to the zBar (a much smaller Zazzle header), putting YOUR brand where it matters most…right in front of the customer that YOU brought to Zazzle.

 
What are the requirements to set this up?
All you need is a web host that supports PHP, and about 10 minutes! We provide documentation (pdf: 3MB) to guide you during setup, and there is now a Tools Forum where you can ask questions or help others if you are wise in the ways of geekdom :-)

 
How does it work?
So what’s the magic behind the Zazzle Store Builder? Simple. RSS feeds. Zazzle’s new gallery RSS architecture 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.

 
Ok, where can I download this?
I can go on all night about the Zazzle Store Builder. But you should really just download it and try it yourself. It’s FREE, so you have nothing to lose…and so much to gain!
 

 

Face the Typeface…or Meet FontZee!

June 30, 2008

I gotta tell you…playing around with Zazzle’s text tool is fun. There are so many cool fonts to choose from that I don’t think I’ve ever actually seen them all. I always end up finding one I like before I explore deeper.

But therein lies a problem…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’t, you start all over and open the font chooser dialog again. Phew.

Well, be weary no longer, folks! There’s a new font selector in town, and he’s kicking picas and taking names! I call him FontZee. (Hey, why not? We have Maggie the magnifier!)

Bask in FontZee’s glory:

Cool, beautiful, easy...it\'s Fontzee!

So what’s so great about it?

  • Fonts are organized better…each font category now lists how many fonts it includes
  • 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.
  • Recently used fonts are now saved in the dialog
  • The font dialog actually loads a bit faster :-)

See, people? It’s the little things that make me happy!

The name FontZee is not official, nor does Zazzle promote the use of it. It is simply a product of this editor’s sick mind, and any similarity to any person, living or dead, is purely coincidental. The end.

New design tool features…

March 3, 2008

These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately…check! Space things out evenly…check! Follow the link for details…

Please form an evenly spaced single line

To keep things on the tech topic, here’s a little CSS tip on how to center a block element inside another block element. Here’s a CSS class:

.centerme {
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}

And here’s the HTML:


<div style="width: 400px">
<div class="centerme">This is text inside a DIV tag.</div>
</div>

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.

Please form an evenly spaced single line…

March 3, 2008

One thing that has always frustrated me when designing a product on Zazzle has been the inability to place text and images precisely and accurately. For example, when adding two or more text objects, I usually want them to line up with each other. Until now, that was a manual trial and error process that usually ended up with a comment like, “Close enough!”

Well, we can now say goodbye to the eye strain, goodbye to slightly irregular designs, and goodbye to micro-mouse attempts at non-attainable perfection. Introducing the align dialog!

Align Dialog

Now, when you have multiple items selected in the design tool, you can bring up this dialog from the Edit menu and select what type of alignment you need! YAY! It is finally possible to accurately line up all your text or images!

Align left

How cool is that? What? You want more? Wow, you guys are picky. Fine. Hmmm, let’s see. What else do we have in our little bag of tricks?

How about Vertical & Horizontal Spacing!

What is that, you ask? Well, in very simple terms, it’s an algorithmic construct designed to eschew random or unequal voids in the midst of visually rendered binary objects. (duh!)

Ok, maybe it’s easier to show you an example:

Space evenly
Yes, from the Edit menu in the design tool, you can space selected objects evenly either horizontally, or vertically! Combined with the Align dialog, this gives you a great set of tools to start you on your way to precision-greatness, and save you from prematurely going bald by pulling out all of your hair. Word to your mother.

The Zazzle Facelift

September 13, 2007

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 moving in the right direction. Well, we just looked up. And we noticed that there were many places we could optimize in our code…from CSS to HTML to JavaScript.

In this latest incarnation of the Zazzle website, there are more behind the scenes changes than there are…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.

If You Build It Right, It Will Come Faster

Our first task was to take a look at the overall structure of our pages. This includes everything from what’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.

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.

But the big difference is that now that the pages are structured in a consistent manner, it’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.

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…which leads to much less code. How much less? We estimate that there is approximately 50% LESS CSS than before, and with a much cleaner user interface. Win-win baby!

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 “wire up” 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.

Rounded Corners Are So 2003

There are some things HTML/CSS just doesn’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 “zBox”. What is a zBox? It’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’d simply call our zBox component.

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.

With our redesign, we decided to simplify…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.

Here’s an example piece of code for a zBox:

<div class=”zBox” id=”divId”>
<div class
=”zBoxTop”>
<
div class=”zBoxTopDiv1″></div
>
<
div class=”zBoxTopDiv2″></div
>
</div
>
<
div class
=”zBoxMiddle”>
<
div class
=”zBoxContentWrapper”>
<
div class=”zBoxContent clearfix” id
=”innerDivId”>
##content##
</div
>
</
div
>
<
div class=”zBoxContentDiv1″></div
>
<
div class=”zBoxContentDiv2″></div
>
</
div
>
<
div class
=”zBoxBottom”>
<div class=”zBoxBottomDiv1″></div
>
<
div class=”zBoxBottomDiv2″></div
>
</
div
>
</
div>

And here’s that same container without using zBox:

<div class=”myClass id=”divId”>
##content##
</div>

And that’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’s like Zazzle went on a diet and looks great!

Even The Skin is Low Fat

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!

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’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!


Follow

Get every new post delivered to your Inbox.

Join 630 other followers

%d bloggers like this: