The Tommy Bahama brand represents the experience of traveling to exotic vacation spots, soaking up the sun, sipping cocktails, and generally being relaxed. To communicate this brand in its online store, the company uses an unusual combination of blank, .GIF images circa 1992, image maps, text-inclusive backgrounds, and dynamically generated markup.
For me, the Tommy Bahama site is something of a paradox. On the one hand, it is very nice looking. The graphics are rich and well designed. The image selection is on brand and product enhancing. I wish all of my projects looked this good.
But on the other hand, the decision to code the site's home page, as an example, with transparent spacer gifs, image maps, and almost no text in the markup seems less than optimal, to say the least. I also suspect that these development choices make it difficult for shoppers using screen readers and for search bots to access the page.
In this article, I am going to dissect the Tommy Bahama home page, examining just how its developers assembled it—or at least aspects of it. My hope is that while exploring their work, I can find inspiration for future projects.
The Tommy Bahama HTML Markup
The HTML markup for the Tommy Bahama home page was approximately 667 lines in length when I accessed it on June 22, 2010. It included a significant amount of white space, excellent comments, and was very easy to read.
The markup called ten external JavaScript files and five or six external cascading style sheets (CSS), depending on whether or not the client was Microsoft Internet Explorer (IE). The doctype was HTML 4.01 transitional, loose. YSlow gave the page a "D" for performance.
Background Images
The page included four relatively large background images that rotated (via JavaScript) with each reload. All four of the background images were carefully designed to serve as a backdrop for the page's image maps.
You'll notice that the backgrounds included nearly all of the page's text.
Tommy's Image Maps
HTML maps, which are commonly called image maps, are a client-side navigation technique that describes specific, clickable geometric sections of an image, object, or input. Effectively, these image maps allowed Tommy Bahama's developers to add active rectangles over the text sections of the background images.
The actual map markup was located at line 409 of the home page's source files.
<map name="map_home1"> <area shape="rect" alt="" coords="404,0,918,447" href="/TBG/Women/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP2+Her+Fiesta+Isle+Halter-_-Image+-+Women+New+Arrivals"> <area shape="rect" alt="Home Decor" coords="271,248,383,269" href="/TBG/Home/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP2+Her+Fiesta+Isle+Halter-_-CTA+-+Home+D%C3%A9cor+New+Arrivals"> <area shape="rect" alt="Swim" coords="208,248,271,269" href="/TBG/Swimwear.jsp?cm_sp=Home+Page+06-21-2010-_-HP2+Her+Fiesta+Isle+Halter-_-CTA+-+Swim+Landing+Page"> <area shape="rect" alt="Women" coords="129,248,208,269" href="/TBG/Women/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP2+Her+Fiesta+Isle+Halter-_-CTA+-+Women+New+Arrivals"> <area shape="rect" alt="Men" coords="69,248,129,269" href="/TBG/Men/Mens_New_Products.jsp?cm_sp=Home+Page+06-21-2010-_-HP2+Her+Fiesta+Isle+Halter-_-CTA+-+Men+New+Arrivals"> </map> <map name="map_home2"> <area shape="rect" alt="" coords="404,0,918,447" href="/TBG/Men/Mens_New_Products.jsp?cm_sp=Home+Page+06-21-2010-_-HP3+Him+Empire+Stripes+Back+Camp+Shirt-_-Image+-+Men+New+Arrivals"> <area shape="rect" alt="Home Decor" coords="271,248,383,269" href="/TBG/Home/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP3+Him+Empire+Stripes+Back+Camp+Shirt-_-CTA+-+Home+D%C3%A9cor+New+Arrivals"> <area shape="rect" alt="Swim" coords="208,248,271,269" href="/TBG/Swimwear.jsp?cm_sp=Home+Page+06-21-2010-_-HP3+Him+Empire+Stripes+Back+Camp+Shirt-_-CTA+-+Swim+Landing+Page"> <area shape="rect" alt="Women" coords="129,248,208,269" href="/TBG/Women/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP3+Him+Empire+Stripes+Back+Camp+Shirt-_-CTA+-+Women+New+Arrivals"> <area shape="rect" alt="Men" coords="69,248,129,269" href="/TBG/Men/Mens_New_Products.jsp?cm_sp=Home+Page+06-21-2010-_-HP3+Him+Empire+Stripes+Back+Camp+Shirt-_-CTA+-+Men+New+Arrivals"> </map> <map name="map_home3"> <area shape="rect" alt="" coords="404,0,918,447" href="/TBG/Women/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP1+Her+Reef+Isle+Linen+Sweater-_-Image+-+Women+New+Arrivals"> <area shape="rect" alt="Home Decor" coords="271,248,383,269" href="/TBG/Home/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP1+Her+Reef+Isle+Linen+Sweater-_-CTA+-+Home+D%C3%A9cor+New+Arrivals"> <area shape="rect" alt="Swim" coords="208,248,271,269" href="/TBG/Swimwear.jsp?cm_sp=Home+Page+06-21-2010-_-HP1+Her+Reef+Isle+Linen+Sweater-_-CTA+-+Swim+Landing+Page"> <area shape="rect" alt="Women" coords="129,248,208,269" href="/TBG/Women/New_Product_Arrivals.jsp?cm_sp=Home+Page+06-21-2010-_-HP1+Her+Reef+Isle+Linen+Sweater-_-CTA+-+Women+New+Arrivals"> <area shape="rect" alt="Men" coords="69,248,129,269" href="/TBG/Men/Mens_New_Products.jsp?cm_sp=Home+Page+06-21-2010-_-HP1+Her+Reef+Isle+Linen+Sweater-_-CTA+-+Men+New+Arrivals"> </map>
While image maps like these are not terribly common anymore, they are valid HTML, included in every HTML standard and draft for more than a decade. Often they are used in conjunction with images that cannot be otherwise navigated. In fact, the "classic" use case is a page describing a work of art, wherein the developer wanted to make certain sections of the image of that work of art active.
Often, image maps are implemented by adding an image to the markup and including a usemap attribute, which associates the image with the appropriate map shapes and coordinates. But Tommy Bahama's developers opted to use blank spacer GIFs—a deprecated technique— and JavaScript to implement their maps.
<li class="nav_Womens" >
<a href="http://www.tommybahama.com/TBG/Women.jsp" title="Women" >
<img src="/media/TB001/images/static/spacer.gif" alt="Women" width="53" height="20" id="nav_image_Womens" />
</a>
</li>
<li class="nav_Swim" >
<a href="http://www.tommybahama.com/TBG/Swimwear.jsp" title="Swim" >
<img src="/media/TB001/images/static/spacer.gif" alt="Swim" width="38" height="20" id="nav_image_Swim" />
</a>
</li>
<li class="nav_Home" >
<a href="http://www.tommybahama.com/TBG/Home.jsp" title="Home Decor" >
<img src="/media/TB001/images/static/spacer.gif" alt="Home Decor" width="87" height="20" id="nav_image_Home" />
</a>
</li>
Several sections of the map are generated dynamically via JavaScript, which means that if JavaScript is turned off there could be performance issues. From the functionality standpoint, this is actually not a big problem, since nearly all ecommerce sites require JavaScript, but in terms of accessibility it may cause challenges.
This development choice may also affect mobile site viewing, since the page could degrade poorly, depending on the client.
try {
var strURLPrefix = 'http://' + window.location.host.toString();
var strTopNav = '<div id="divShippingMessage">' + getShippingMessage() + '</div><div id="divContactUsLink"><a href="'+strURLPrefix+'/TBG/GeneralContent/ContactUs.jsp"><img src="/media/TB001/images/static/spacer.gif" width="134" height="25" border="0" alt="Contact Us" /></a></div><div id="divTopNavEmailSignup"><a href="'+strURLPrefix+'/TBG/EmailSignup.jsp"><img src="/media/TB001/images/static/spacer.gif" width="126" height="25" border="0" alt="Get Island Email" /></a></div><div id="divTopNavAccount"><img src="/media/TB001/images/static/spacer.gif" width="166" height="44" border="0" usemap="#map_topnavaccount" /></div><div id="divShoppingBagLink"><a href="'+strURLPrefix+'/store/checkout/cart.jsp"><img src="/media/TB001/images/static/spacer.gif" width="76" height="25" border="0" alt="Shopping Bag" /></a></div>';
strTopNav += '<map name="map_topnavaccount"><area shape="rect" coords="0,0,105,27" href="'+strURLPrefix+'/store/account/login_or_register.jsp" alt="Your Account" /><area shape="rect" coords="106,0,166,27" href="'+strURLPrefix+'/store/account/login_or_register.jsp" alt="Sign Up" /><area shape="rect" coords="0,28,45,44" href="'+strURLPrefix+'/store/account/order_history_summary.jsp" alt="Status" /><area shape="rect" coords="46,28,105,44" href="'+strURLPrefix+'/store/myaccount/returns_login_start.jsp" alt="Returns" /><area shape="rect" coords="106,28,166,48" href="javascript:showModal(\'/TBG/GeneralContent/Shipping.jsp\',\'525\',\'560\')" alt="Shipping" /></map>';
objTopNav.innerHTML = (strTopNav + objTopNav.innerHTML);
var objCheckoutBox = $$('.checkout_box')[0];
var objShoppingBag1 = objCheckoutBox.getElementsByTagName('img')[2];
var objShoppingBag2 = objCheckoutBox.getElementsByTagName('img')[3];
objShoppingBag1.src = '/media/TB001/images/static/spacer.gif';
objShoppingBag1.style.display='none';
objShoppingBag2.src = '/media/TB001/images/static/spacer.gif';
objShoppingBag2.style.display='none';
}
This method of implementing image maps also required very careful style sheet descriptions.
#divContactUsLink {position:relative;left:488px;width:134px;top:0px;}
#divContactUsLink a {color:#84716b;font-family:Georgia;font-size:10px;font-weight:bold;letter-spacing:2px;}
#divShoppingBagLink {position:relative;top:6px;width:78px;left:900px;z-index:20;}
#divTopNavAccount {position:relative;width:166px;left:822px;top:-18px;z-index:20;}
#divTopNavEmailSignup {position:relative;left:624px;width:126px;top:-28px;}
#divTopNavEmailSignup a {color:#0069D6;font-family:Georgia;font-size:10px;font-weight:bold;}
#divShippingMessage {position:relative;left:52px;width:380px;top:8px;height:0px;z-index:20;}
#divShippingMessage a {color:#cc0000;font-family:Georgia;font-size:10px;font-weight:bold;}
#divCrestBottom {position:relative;top:14px;left:-531px;}
Unfortunately, whenever positioning must be this precise there is the potential for cross-browser rendering issues. For example, the Tommy Bahama site did not render properly in Opera. Opera users may represent a very small percentage of the site's traffic, so it may have been a business decision not to fully support that browser.
Summing Up
Visually, the Tommy Bahama site is very attractive, but I would not have used image maps, blank GIFs, and dynamically generated content as implemented here.
The home page did, however, inspire to me to think about how I might use image maps in my projects and encouraged me to try and build sites as attractive as this one with code that may degrade better and be more accessible to all users.
