A bit of background before I dive in to the post… My team and I are responsible for developing and supporting the Brand web sites for Bristol-Myers Squibb.  The Brand Teams and external Marketing Agencies develop a concept for their site, and they deliver a fully functional version of the site in  HTML to us to implement.  We take that HTML, squeeze it into our custom content management system, and hook up all of our custom features.  This custom content platform that we call LaunchNet has built in registration management, site search, web analytics, SEO helpers, and a full suite of other tools. 

With an environment like this, managing expectations becomes essential.  Sites need to be streamlined for industrial-strength campaigns involving thousands of concurrent users and possibly millions of site users per month.  From this perspective, DHTML layers is one of the banes of development.  I have broken out why DHTML Layers make me lose my hair into 6 categories: Performance, Metrics and Analytics, Accessibility, Implementation, user Experience, and Search & SEO.

Performance

When using DHTML Layers, your users are now loading multiple pages combined into one, some of which they may not even view, wasting download time and bandwidth.  Pages are slower to download, and are slower to draw inside the browser.  Processing is now heavier on client side, and is heavily dependent on JavaScript, which is known to be a memory hog.

Metrics & Analytics

Layers are not pages.  This is a simple fact, but needs to be stated again for emphasis.  Layers are not pages.  This means that anything that is dependent on the construct of a page will break.  Google Analytics tags, which are designed to fire on page load, will need to be re-engineered to fire on layer loads instead of page loads. 

Accessibility

Mobile users on phones, PDAs, tablets, UMPCs, and other lightweight devices with web browsers will have difficulty.  These browsers are slimmed down versions of their bigger brothers, and do not have all the functionality needed to process JavaScript properly.  Cross Browser Compatibility is very difficult to implement and maintain with DHTML Layers.  You cannot bookmark a layer, either, so your users will not be able to come right back to where they were.  Popup blockers may block the use of DHTML layers, as this is a common delivery mechanism for advertising.  And, DHTML Layers could affect your site’s handicap accessibility.

Implementation

Layers on the site increase complexity, and make maintainability more difficult.  If JavaScript is turned off, any functionality to show or hide layers will not work, so your users will not see it.  Developers will need to spend lots of time to make DHTML JavaScript function with content management systems, particularly when custom functionality is delivered in this way.  And, if layers are big enough, scrolling can become an issue, as the layers may run off the page, hiding content from view. 

User Experience

User Experience is the biggest reason to implement DHTML Layers.  It adds slick new interface to the hum-drum of static pages.  But designers need to keep in mind that performance impacts user experience.  This is an “I want it an hour ago” generation, and waiting even 10 seconds for a page to load will mean your users have left and gone somewhere else.  Layers are a not a standard UI convention for web development, and some users may be intimidated by the change in interface.  And, some folks may perceive layers as “popups”, which is bad for perception.

Search & SEO

Implementing site search while using DHTML Layers is very difficult.  Most search products are page based, and as stated before, layers are not pages.  Your content might not get crawled, or may be crawled incorrectly.  Layers could also cause a problem with search engines.  Your page could end up not getting indexed, or not indexed properly.  Invisible content may also be viewed by search engine crawlers as “gaming the system” or a black hat SEO practice, and may negatively impact your page rank.

Conclusion

When implementing, DHTML Layers, think twice about the impact on other aspects of your site.  Ajax can do a lot of the same kinds of things that DHTML Layers can.  Adobe’s Flash and Microsoft’s new Silverlight products can also deliver great new user experiences.  All of these have benefits and drawbacks that need to be weighed before jumping in.  You may be providing a slick new experience to your users, but you may be creating more problems than it is worth.  There are lots of other alternatives to explore.