Posts Tagged ‘jQuery’

Oct

26

Shirtaday Redesigned

October 26th, 2009

For the last three weeks, I’ve been busy completing a total redesign of Shirtaday.com. The site was originally created in early 2006 and was extremely simple at the time.  During the next three years, it progressively grew new features and each of these features were bolted on without keeping a consistent object model or design.  It turned into a maintenance nightmare.  Also, the design had several cross-browser issues with Google Chrome and Internet Explorer 6.  It also looked poor at smaller screen resolutions.  These are just a few of the issues…I could go on forever about things that I hated about the site.

The goal of the new design was to resolve all of those issues mentioned and to really just make the site much easier to maintain.  Previously, if I changed something, I never really knew for sure just what that’d affect on the rest of the site.

A few of the things that the redesign accomplished:

  1. Better SEO. On the old site, the links to shirts and pages in the warehouse were built using query parameters such as “shirt.php?id=1″.  Most modern search engines completely ignore the query parameters, so our 700+ shirts were being treated as essentially one page.
  2. Paged Warehouse and Shirt Listing.  At one point, the warehouse contained over 120 shirts.  All of these were loaded on the single warehouse page when the user viewed it.  That was a lot of data to load and display, and if you were on a slow connection, it was painful to wait for it all to come down to your browser.  The new design incorporates paging of each list and allows the user to search through the lists using some new search functionality that we built into the site.  For instance, if you want to buy a black, large shirt for less than $10, you can narrow your search to this so that only shirts relevant to your criteria are displayed.
  3. Better design. The original design was table-based, and some tables had tables within them that went three to four layers deep.  Ouch.  What a nightmare that was to maintain.  The new design is completely css based and is much more straightforward to maintain and enhance.  New pages and sections can be plugged in or move around extremely simply.
  4. Better navigation. The main goal at shirtaday is to sell t-shirts and i think the new design helps shirtaday reach that goal better.  I believe it’s more intuitive for a user to come to the site and get through a checkout with a shirt they like.  Purchase options are emphasized with bold print and highlighted colors.
  5. Ajax and jQuery. The new site utilizes ajax and jQuery for many things like voting for your favorite shirt or adding an item to your cart.  This, in my opinion, really enhances the user experience at the site.

Tags: , , , , , ,
Posted in Clients | No Comments »

Sep

16

Simple Image Slideshow with jQuery and jQuery Cycle Plugin

September 16th, 2009

See The Demo

I recently completed a website design project for a local austin company that involved creating a simple image slideshow on the login page of their application. These types of slideshows have traditionally been done using an animation toolkit or framework such as Adobe’s Flash product. Starting around three years ago, I was introduced to script.aculo.us which provided the ability to use effects with DOM elements to provide cool animations.

Just within the last year, I’ve started working more with jQuery and have been introduced to the slew of extremely cool plugins.  The newest one I’ve come across is jQuery Cycle.  Using this plugin and 9 lines of javascript code, I was able to create an extremely simple but cool image slide-show for the website project for my client.

The first step in building the slideshow is to create the html element that will hold the images for your slideshow:

<div id=”slideshow”>
  <img src=”slides/slide-1.jpg” border=”0″/>
  <img src=”slides/slide-2.jpg” style=”display:none”/>
  <img src=”slides/slide-3.jpg” style=”display:none”/>
</div>

The above is a simple list of images within the div element that’s identified by the “slideshow” id.  This will enable jQuery to pick up the “slideshow” element and then iterate over the <img> elements within it when building the slideshow.

The second step is to write the actual javascript that will use the plugin to build and run the slideshow:

$(document).ready(function(){
  $(function(){
    $(“#slideshow”).cycle({
      fx: ‘fade’,
      speed:2500,
      timeout: 1000
    });
  });
});

A little explanation on what is happening here: The $(“#slideshow”) is grabbing the slideshow div element and feeding the images into jQuery Cycle Plugin’s initialization.  The plugin is applying the fade effect (see more information on the effects you can use here) at a speed of 2500 milliseconds and a timeout of 1000 milliseconds.  Speed controls how long the transition takes to complete and timeout controls the time between slide transitions.  You can find more information on the options for the plugin here.

All-in-all, this has turned out to be a ridiculously easy way to code up a simple slideshow.  You can enhance your slideshow in all sorts of ways such as loading your images through ajax after the page loads, randomizing ordering, and providing new transitions.  All without having to worry about motion tweens in Flash!

See the Demo

Tags: , , ,
Posted in Tutorials | No Comments »