One area where many adult webmasters focus on is the use of jQuery to enable and enhance cutting-edge user interface (UI) designs, such as a website’s navigation, tour and join pages. Let’s take a closer look:
For this exercise, I did not want to simply give you a list of “gee whiz” effects that might look spiffy on your website. Instead I want to take an existing adult website design and examine some of the UI components that could benefit from a quick dose of jQuery — as well as provide a link to the code or tutorial you will need to make it happen.
To make the example as generic as possible, we’ll consider a common site structure, which in this case is based on the default WordPress “2010” theme.
THE HEADER
The immediate visual impact of this theme surrounds a single, main header image — not unlike the design of many adult sites. But why is it a single image? Rather than a painting, what you need is a billboard — or better yet, a slideshow of billboards, all linked to your URL of choice: which could be a join page, content page (as part of your overall navigation scheme), or other destination.
One way of dealing with this is to simply assign a unique header image to each page; but through the use of jQuery, we can show all of the images on a single page — without the need for reloading, and provide the ability for viewers to interact with those images. Clever webmasters can extend this with custom JavaScript to specify the initial header image in response to unique search terms or referring URLs, enabling tighter marketing.
jCarousel Lite (www.gmarwaha.com/jquery/jcarousellite/index.php) is a simple tool for scrolling images and HTML content. It is both lightweight (around 2k) and feature-rich enough for many applications. jCarousel (www.sorgalla.com/projects/jcarousel) has a variety of enhanced features for more demanding applications.
THE FOOTER
Typically used to display a site’s “housekeeping” information, such as links to ‘2257 notices, privacy policies and terms of conditions, as well as text versions of navigational links and affiliation buttons, a website’s footer is often a cluttered mass of confusion that detracts from the overall visual cohesion that the designer strived for. This information is all required, however; and there is even more info that is useful to have such as a site map — which might be included if it didn’t look so damn bad taking up all that screen space.
But what if you could hide this extra information in a way it remained accessible?
The use of jQuery lets us do just that, offering animated, expandable DIVs displaying HTML content, inline or sometimes pulled from external files, in an attractive manner. This technique is also valuable elsewhere on your site, such adding a login link that pops a screen for entering your username and password; a ‘2257 link that pops your statement; or model bios attached to an image — the possibilities are endless.
jQuery Collapser (www.aakashweb.com/resources/pages/demos/jquery-collapser) is a robust toolset featuring a variety of accordion effects for hiding and displaying content.
Another interesting approach for adding extra content is via the use of Smart Tooltips (www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips) or Contextual Tips (www.tutorialzine.com/2010/04/slideout-contexttips-jquery-css3).
THE SIDEBAR
This content area is frequently underutilized on adult websites, which often treat it as an afterthought or just as a place to toss advertising, but it can be used for so much more — and as you might expect, jQuery is the key to unlocking its power.
For example, a thumbnail-based navigation pane could be included in your sidebar, allowing users to make category and picture-based sites, among other factors.
“The ‘F’ pattern style of viewing does not seem to hold true while browsing or searching a picture-based web page,” the report states. “Much of the participant’s gaze was on the categories of pictures that were above the fold.”
There are a number of companies, services and tools that can provide a variety of user interaction data for your specific site, allowing operators to maximize the effectiveness of their basic “F” layouts — or any other type of website design.
Eyetools
(www.eyetools.com), for example, the inventors of eyetracking heatmaps and experts in eyetracking analysis, offers optimization consulting services for some of the biggest brands, including Microsoft and American Express. The company boasts of guaranteed, dramatic increases in conversions and sales, based upon its experience in analyzing thousands of websites and utilizing advanced eyetracking studies of client sites.
Holding seven relevant patents, the Eyetools technology was developed more than a decade ago at Stanford University and has since proven its worth by increasing IBM’s email conversions by 60 percent and a content website’s paid sales by 64 percent, among other successes that illustrate the efficacy of tying content and presentation to human’s natural eye scanning movements.
While many adult operators lack the budget or (accept) ability to hire such a firm, a free solution that can provide some of the benefits of this advanced user behavior analysis is Google Analytics and its Site Overlay tool, which provides a clickmap detailing where users “hovered” and where they clicked. Sure, it’s “handtracking” not eyetracking, but it is much better than not analyzing and capitalizing on this valuable data at all.
