The Zazzle Facelift

by

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!

15 Responses to “The Zazzle Facelift”

  1. fpe Says:

    Nice work!
    Finally the Poster creation API works again, after having difficulties with Javascript errors!

  2. fpe Says:

    No. I still get an error when changing the print size.:

    Error: c_w[c_z].getValueObject() has no properties
    http://www.zazzle.com/bld/include/js/Zazzle.DesignTool.library.js?r=42.36924
    on line: 477

  3. Stan Says:

    Sounds great Ed! Thanks for all the hard work that you and the team are doing!! It is appreciated!!
    Stan
    WKS Images

  4. Cherie Says:

    Wow, quite a difference on the codes there! Great work!

  5. abadu44 Says:

    Change is good, but when you do not leave some of the old reference points, even just for a short time it can cause some confusion. Point in case the contributor gallery? I now have no way to look up specific contributors. The contributor area was a community area where ideas and such could be exchanged and fans could go direct to who they were looking for. The changes seam to have been made with out consulting your supporters, did you? ebay is a great company but only because it listens to its users. if you have moved it to a new location please let me know?
    thank you

  6. Fay Says:

    hi, I was able to make things on Zazzle up until about a month or so ago. Now, I cannot load any images or text, nothing. It says Javascript\\ on the search bar on bottom. I have made sure I have all current downloads and my java is updated. Please H E L P

  7. Dave Sweeet Says:

    nice tech write up! so many tech issues today: with myspace not doing paypal links, oscommerce limitations, and creating a design that will get cash in the door quick via paypal, rather than waiting. just found your site today. working on a troops support project site http://www.protectionticket.org. I will add my designs here if I get good exposure. MeltN.org is a new one for global warming.

    Dave

  8. teddy Says:

    nice work! how many man-hours was used to do the whole web site revision?

  9. ag_zerothreat Says:

    Very good. The site looks great.

  10. ag_zerothreat Says:

    Looks great! Keep up the good work.

  11. Moira Ashleigh Says:

    Amazing turn around on my latest order. Zazzle you outdid yourself. Thank you!!!
    Moira

  12. Carissa Says:

    I LOVE THE NEW LOOK!! My shop front is sleeker than it had been before! But!…

    What about being able to use our own background image instead of just a single color? Or how about having the option to display the graphic on an item instead of the model/product? That’s something I’d like to see.

  13. Ron Says:

    Hi All: I wish I could be more supportive of the new look, but quite frankly, I don’t like the lower right “cutouts” for the “inside” previews. They make the gallery pages look way to complicated and unpleasant, actually. Also, they don’t work or load well. Today (11/04/08) tons of images are not loading properly in the galleries and on purchase pages. Tons. No one can order a couple of my calendars for 2009 because of it.

    I think the first rule of graphic presentation is “keep it simple.” Keep it uncluttered…. If you are going to add such a component to gallery pages, maybe we should be able to shut it off? I think you are trying to hard on the “bells and whistles.” Take care, Ron

  14. Haiboss Says:

    I just stopped by your blog and thought I would say hello. I like your site design. Looking forward to reading more down the road.

  15. francisco jose Says:

    i had been designing a lot of products but somehow only the ked’s shoes are aproved and on my store, i want to know what hapend with the other stuff i made,
    i really want to keep designing and get my zazzle store progresing, please send me notifications,answers or info about it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 669 other followers

%d bloggers like this: