©2001 by Jefferis Kent Peterson
www.PetersonSales.net

Capturing the beauty of jewelry on the web is probably one of the most difficult tasks imaginable. There is something about the shimmer and sparkle of diamonds and gems in the proper light that makes them dance in your eyes. Gemstones have been considered valuable throughout the ages because of this unique beauty. A well cut stone radiates life when the light reflects off its facets. It is the challenge of capturing this beauty on the web that guided me as I developed a jewelry museum site for Joden World Resources <www.Joden.com>.

For the Love of Design

When my parents were building their retirement home, they hired an architect to design a creative, modern home in a wooded retreat. I asked the contractors and carpenters if they resented the fact that they were building an expensive home for someone else. "No!" was the reply. They were glad. I asked them why, and they told me because "finally" they were not just "slapping something together." They were being given the freedom to be creative. They got to use all their skills to express themselves artistically and do things they had never done before. The plasterers had to invent new techniques to carry out my mother's vision. The carpenters got to work with the finest woods and build paneling into stone walls according to a vision instead of a blueprint. For once they weren't just working on the clock, trying to get a job done in the shortest time possible. They were being paid to do quality work and to the very best they could do, and they loved it. After designing this jewelry site, I finally begin to understand their delight.

The Owner's Vision

Joseph Murawski, the owner of Joden's, is a man who appreciates quality and his vision matches it. Imagine being given some of the finest jewelry photography ever, and then being told to build a site. So many clients want the cheapest, functional site you can give them, and their bottom line is the price. The pictures I'm given are snap shots from a cheap camera that are over exposed or under exposed. I'm then told to scan these photos in for the web. Even with my best skills, I can't turn a lousy photograph into a professional portrait. With Joden's I was given hi-resolution images of brilliant quality with transparent backgrounds. I had finally had a client and the raw materials that would allow me to fully express my creative abilities!

Joe's challenge to me was to produce something that would make him proud of his store. His one requirement was to present the images in actual size, which he does for all his brochures. When I told him that it would be impossible to do on the internet because everyone's screen size and resolution is different, he requested instead that I make all the images proportional in size to each other as they are in real life.

The Images Challenge

I can't claim that the web images at Joden's are as good as I'd like them to be. You still can't capture the active sparkle of a diamond online, and you can't view images on screen with glossy inks. I thought about trying to do a QuickTime movie version of a few jewels, with live motion sparkles, but until the majority of users on the web have broadband, this realism isn't an option. As it is, even with static images, the challenge of producing a web ready version of manageable size is daunting. Most surveys recommend a maximum page file size of 30k to 80k. If the pages are larger than that, most viewers will click off the page in frustration before the page completely loads. With a web catalog, you may have 20 images on a page, which means your thumbnails should average about 4k apiece! That can work, except my client wanted the images close to actual size and in proportion to each other. The 4k limit would be very hard to achieve indeed.

Images Sources and Creating the Catalog

The original images came to me in PhotoShop format with transparent backgrounds. I primarily use the Dreamweaver/Fireworks Suite to create web sites, so, I opened the PhotoShop images in Fireworks and added a black canvas color and saved the images as 300 dot per inch (dpi) PNG images. I also cropped out any extra blank space around the images to reduce their file size.

I then used Dreamweaver's "Create Web Catalog" feature to export the images at 50 percent of their original size and create the index pages of thumbnails for the catalogs. I kept the 50 percent images for the "enlarged" image views linked to the index, but I dumped the thumbnails because DW's catalog feature creates thumbnails of a uniform pixel size (72 x 72, e.g.). So, I went back to the original images and exported them again at 25 percent, which kept them in relative size to each other but made them small enough for the index page of thumbnails. I then made sure all the links were correct.

Finally, some of the images needed to be tweaked to make them as sharp as possible. Normally I found that the default settings of the web catalog in DW/FW produced better images than I did with manual tweaking, but some images just weren't up to par. On selected images, I made copies of the originals and reduced them to the actual export size [25 percent or 50 percent] before applying any compressions. I would then create optimized graphics within FW by hand. For these pieces I found 256 color Adaptive GIFS to produce the best results. Jpegs tended to blur the sharp edges and definition of the photos.

The Layout

Joden World Resources' latest brochure is gold text on a black background. I used the theme of his latest brochure to create the web site. His brochure uses Copperplate font for his large text headings, and he expressed his preference for that font. Knowing that the fonts seen online depend upon the fonts the viewer has installed on his or her computer, I used GIF images of Copperplate for major headings on the pages rather than text elements. I used Eye Candy's "Chrome" filter in FW to create a gold overlay to the texts before exporting the image. After designing the front page, I then laid out a common header for site navigation, and that's when the problems began.

Keeping it Small and the Search Engine Challenge

In order to keep file sizes down, I initially designed Joden's site with frames. I put the navigation header in the top frame and the catalog elements in the main frame. My purpose was to reduce page-loading time by keeping one navigation image as a frame header. However, this arrangement created some problems:

• While the header looked fine on any Mac, it was too large on most Windows screens, so that many of the full size images in the main frame could not be viewed in their entirety.
• I couldn't make the header smaller because the jewelry graphic I'd chosen was too long and it looked perfect for the site. BUT
• If I added the header navigation to each individual page, it would add an additional 20k to each page, increasing wait time.

The solution I came up with was to eliminate the frames and make the header a server side include (SSI). In this way, the header only had to be loaded once to a viewer's browser and would then be loaded very quickly from the browser's cache in all subsequent page views.

Yet this solution created one more problem: search engines can't always follow the links on SSI's and so my client's pages might not be cataloged for the web, and he might lose listings, ranking, and potential customers. In order to prevent that, I inserted a set of links at the bottom of each page. Now, I had one page header for all pages; the pages scrolled to allow full views of the cataloged images; and I cut the loading time for each page.

The Font Imperative

The first draft of the web site posed some problems for my selection of text. I originally used size 12 point fonts, but found they were huge on some machines, and especially large with older AOL browsers. The second draft used Cascading Style Sheets (CSS) and 10 pixel fonts, which I'd heard were large enough on Windows machines and looked fine on a Mac. However, after requesting site checks from others in the industry, I received lots of complaints about the text size from people on Windows machines. While the fonts were fine on my client's WIN machine, designers with large monitors and 1024 x 768 screen resolutions were complaining that the text was too small and hard on the eyes. I needed to enlarge the fonts, but if the fonts were too large, it would throw off the catalog's image placement. So I decided on 11px for catalog item descriptions and 12px for larger text areas. Those sizes seemed to satisfy most viewers.

Conclusion

The basic site is complete, but I still want to add to the historical descriptions, which I will in coming weeks. Joden World Resources is, I believe, a rather unique site and is unlike traditional jewelry stores on the web. It is a jewelry museum featuring educational information on various periods of jewelry from the 1700's on, with examples and descriptions from Joden's inventory. He has a beautiful collection of Victorian, Edwardian, Art Deco, Art Nouveau and more on the site already, and he has many more pieces that we haven't yet even touched. I hope you enjoy viewing the site as much as I've had fun working on it. I invite you to take a look. I'll also be glad to hear any feedback, though if you have specific questions about any period or piece, I'll have to direct you to the owner himself.

Jeff Peterson is a Macintosh pioneer, acquiring his first 128k Mac in 1984. In 1993, he started work on the Internet, producing an early e-magazine, O Theophilus, and educational courses for the web. He started his own web design company in 1999, www.PetersonSales.net and is still acquiring new clients. Jeff is also a part-time theologian, The Scholar's Corner, and he loves to play Flight Sims when he gets a chance, being part of the notorious Shadow Riders, call sign Padre =<SR>=.

©2001 by Jefferis Kent Peterson
www.PetersonSales.net
www.FlashTips.org