Home > Features > jQuery: Cutting-Edge User Interface Techniques • Bookmark   • Newsletters   • Register Search Options


jQuery: Cutting-Edge User Interface Techniques

jQuery: Cutting-Edge User Interface Techniques

January 7, 2011
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" The ‘F’ pattern style of viewing does not seem to hold true while browsing or searching a picture-based web page. "

As jQuery becomes more widespread across a growing range of applications, adult webmasters are increasingly using it to power their websites in new and innovative ways. Although fully customized websites still require the assistance of professional coders to get the most out of what jQuery has to offer, an enormous variety of code snippets and online tutorials make it easy for webmasters to spice up their sites — even without fully grasping the intricacies of the technology.

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 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.


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).


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.


(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.


How Advertisers Use Your Devices to Sell You Stuff

The paranoia has reached an all-time high. Now some people actually believe that their microwave ovens are spying on them — despite the fact they don’t have any listening devices or cameras.... More »

As Mobile Grows, So Does Need to Push Sales

The number of consumers browsing and buying online will reach 270 million by 2020, driven largely by activity on mobile devices, according to Forrester. Business is booming and the fact that most purchases... More »

With AI, Routine Tasks Start Fading Away

I just turned 42. The list of things I may never do again is growing fast. I no longer dream that I will become an Olympian in any sport except archery or horseback riding. The oldest Olympians in those... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.


XBIZ.net Paysite Meetup

May 04 - May 04
Prague, Czech Republic

Eurowebtainment 2017

May 17 - May 20
Majorca, Spain

XBIZ Retreat

May 30 - Jun 03
Miami, Florida

XBIZ Miami 2017

May 30 - Jun 02
Miami, Florida
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!