• Website: www.tarmadesigns.com
• Features:
  • Ecommerce/Miva
  • clean urls
• Debut: May, 2007

Tarma Designs and manufactures a variety of unique, hand-crafted, earth-friendly and fair trade jewelry that celebrates the spirit of life and a love of the outdoors. From our Active line of sustainable, recycled 316L stainless steel jewelry to our fairly traded, hand-made Artisan collection, there are many styles including pendants, necklaces, earrings, bracelets, wristbands, and bottle openers to choose from.

We built Tarma Designs’ original website back in early 2006 on the Miva Merchant platform. This was when Miva Merchant v5 was relatively new, and it just didn’t have the modules and documentation to build it in the way we wanted to, so we put together a working solution with what we had at the time. The end result worked out well, but it wasn’t particularly easy to maintain the back-end. So after about a year of putting up with that, we decided to do a complete rewrite of the HTML, and the miva templates / modules (the way the store is put together). We set up a new directory structure, and a whole new layout (although from a user-perspective it looks the same).

An overview of the new features

Tableless layout

Since we had already satisfied the client with a nice layout the first time we built the website, not a lot needed to change as far as design details. The major difference is in how we layed out the HTML and CSS. The old layout relied on tables for layout, which is a hack that many developers use to get things to line up right. Tables are semantically incorrect for this purpose (you can read more about table-less layouts here), so the new layout uses tables very sparingly (on forms and tabular data only).

Wordpress blog for news section

We have themed a Wordpress installation to look just like their website. Before, it was necessary for the client to email us and wait for us to update their site every time they wanted to post a press release or an announcement. With the Wordpress blog, they can now easily do this all on their own.

Custom Miva Merchant module for multiple colors

In order to allow for seperate colors of certain products to appear in the store as individual products, we had to write a Miva Merchant module which allows the client (or ourselves) to simply put a product’s related colors in a custom field column. The nice thing about this, is that it allows for easy import / export of related colors via Merchant’s built-in import/export utility.

You may see a demonstration of this module here

Close-up images on product pages

We were given larger images of many of the products in the store by the client. If a product has a blow-up image available, the main product image becomes “clickable”. If you click the image, you will be presented with a close-up view of that product.

More products on category screen

The previous store displayed products on the category screen in a sort of “list view”. While this allowed more room for details about each product, it didn’t allow for very many products per page. On this new store, we have implemented a more compact view with images “floating” up next to eachother in columns. We find that this not only looks better, but it also allows for the customer to find what they are looking for more quickly.

Flash text replacement

We used a technique called Scalable Inman Flash Replacement to embed our own custom font right into the website. This eliminates the need to use images for headers and improves maintainability. It also allows for better search engine indexing since the html markup does not need to change at all. You simply tell the script what elements you want replaced with your font, and it replaces them. You may read more about sIFR on Mike Davidson’s (the author) blog.

Clean, keyword-rich urls

Instead of the standard urls used within Miva Merchant we implemented short, clean, and keyword-rich urls.

Before
http://www.tarmadesigns.com/merchant5/merchant.mvc?Screen=CTGY&Category_Code=active&Store_Code=TARMA

After
http://www.tarmadesigns.com/category/active/

Technical details

TarmaDesigns.com was layed out in tableless W3C-compliant HTML (4.01 Strict) and then styled with W3C-Compliant CSS. It was built on top of the Miva Merchant v5.06 platform.

This entry was posted on Friday, June 8th, 2007 at 9:47 am and is filed under Site Showcase. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.