Vivid.com : Goal, Completed.

Posted by Rev. Mitcz

April 29, 2005

I reached a landmark today. Just now actually. I wrote this entry ahead of time, so I could post it when the event happened because I knew I’d be too busy/excited (and later, too drunk) to write it all out. What’s the big event?

*ahem*

Vivid.com

Now, most of you know I work for Vivid. Or, more specifically, that I make their websites. So, why is it such a big deal that I just linked Vivid.com? Because, sirs and madams, that is the default page. Meaning that when you hear Howard Stern talk to the Vivid Girls, when you see a 50ft Vivid billboard in NYC’s Times Square, when you drive down Hollywood Blvd and see all the Vivid ads - the link they’re pimping will bring millions of people to my original work. That’s ALL me, baby. Conceived, Designed, Poured Over, Worked On, and Implemented by moi. I didn’t do every little piece of the back-end code (though I did do most of it), or the script that makes the header image randomly swap out - but the rest of it? All me baby.

This is a huge deal to me. Back when I worked at FetishCash, I remember reading an article in AVN Online (the magazine for adult webmasters) about Vivid.com’s launch. This was 2001. I said “goddamn.. what I’d give to work on a site like Vivid.com. They must have a team of.. 5.. 10.. designers, all huddled around mocking up interfaces and mulling over complimentary colors and what-not. Ahh.. what a thing”.

Here I am now, some 4+ years later, and I find myself as the Senior (and, sole, for that matter) Web Designer for Vivid. That’s the team that went into Vivid.com’s “guest” area. Me. In fact, I worked on it from home for about a month or two before I even brought it into work, because it’s such a radical departure from the “normal” Adult Website that I feared I’d never get past the drawing board unless my idea was fully understood. Making sure that idea was fully understood meant doing a shitload of work from home just to bring the concept across.

Because this is a big deal to me, and I’d like some place marked where I’ve written down all the shit I did to get this site where it is - I’m gonna ramble on about it. In the words of Ethan Marcotte, I’m going to “pimp my koolaid”.

I realize this is a lot of self-love and self-appraisal, so don’t read it if you don’t care. But, if you give a shit about the “inner workings” of things like design mockups, user-centric web design, and well… pornsites.. then it may interest you.

The Problems

For reference purposes, you can see the previous default Vivid.com tour by clicking here (don’t worry, I turned off pop-ups in that link so you won’t be getting slammed with shit).

Notice how long that post-warning page takes to load up. For bonus points, check out the “girls” page. Painful, no? That page is a hefty 300k or so. When we had two designers, which would make it myself and my friend Jim, he went through the trouble of optimizing the living shit out of that site. Unfortunately, it didn’t help a great deal. There’s only so much optimizing of images and code that one can do before the images start to look like complete shit. Not a good thing for a tour that’s supposed to speak volumes for our company and more specifically - our website.

Beyond that, you’ll notice little mention of things like the online Vivid Store, Vivid Personals, Vivid E-Cards, Vivid Screensavers, Vivid Live (our XXX chat site) and many other Vivid Ventures. There’s even Vivid Cigars and Vivid Condoms. Where would you find out about that, if not on Vivid’s one and only homepage? Nowhere, at the time.

Take into account, as well, that there’s very little mention of the sheer amount of video and images - even just of our own content - that one will get when joining Vivid.com. Few people realize that almost every Vivid film released on DVD is also released in its full, uncut length, on our website. So, you can stream and watch the full feature at any time of the day in just a few clicks. Ditto for damn near every image ever captured of a Vivid Girl. That can be attributed in part to a lack of clever marketing text - but I saw it more as a problem of not showing the user what they were getting into. Ya know, giving them examples, for fuck’s sake.

Even if you discount all of that - Vivid.com’s default page has stayed relatively unchanged for some 2 years now. That’s a long fuckin’ time for the same tour to be kickin’ around. They needed a new one. But, every outsourced design we got ahold of.. it just didn’t have that “feel” that Vivid.com needed. You can chalk that up to my being a relentless asshole, mostly. I knew I could do better, so I went on long tangents about every little thing I didn’t like about any design that crossed my path. This isn’t to say I was unfair - because none were altogether that good, and not a single one said “wow” to me. Vivid.com, I felt, should say “wow”. Err.. should make you, the surfer, say “wow!”.

My Proposal

You have to understand - I don’t follow porn trends. I rarely follow any trends, to be clear, but I’m more willing to work within a “popular” style that’s outside of what I’m doing, because I know there’s little competition there. While most of the porn industry consists of stealing one another’s work, and following like cattle the “next big thing”, I don’t pay much attention to all of that. I think about my work in a mainstream fashion, and I try to appeal to the mainstream. Why? Cause no one else will.

Starting out then, I knew whatever I was going to come up with was going to really fuck w/the people higher up than me. I knew they were going to initially point to figures and facts and say “no, no… we can’t do things this way” and I’d be fighting them tooth and nail if they even let me do it at all. I was prepared for that. And, I did get a lot of that, at first. I had the benefit, however, of being not only the only chance they had (being the sole designer and all) - but also because for having made almost every site they currently own, maintain and promote - I have inadvertantly been made solely responsilbe for what will be the “Vivid look” on the web.

Keeping that in mind, I had to tackle the issues I had with not only Vivid.com - but pornsites in general.

The first issue I decided to tackle was loading times, and filesizes. Vivid.com has so much shit to offer, so many girls on their roster, that trying to display all of it - or even to give a sampling of it, would kill the chances of anyone on less than the highest-speed connection seeing it to its full extent.

My solution? iframes.

Load the whole page up, keep the center dynamic, load everything into iframes. This way, you load the “interface” once, and you’re then just loading content into that interface. I knew how the porn industry felt about iframes. Not just my boss, though.. everyone seems to hate them in the industry. It’s hard to link to a specific page w/an iframe. Down-right impossible, unless you know the “trick”. Moreover, porn people love to make these gigantic pages that take up your whole screen and are impossible to ignore. If they had it their way - your browser would always be in “fullscreen” mode, and every click of the “back” button on your browser would pop a javascript prompt asking “are you sure you want to leave our lovely pornsite?”. Don’t think I’m doing schtick, I had a former boss ask about that before. Because I didn’t want to be responsible for such ridiculous manuevers, I used words he’d never understand to explain that such a thing would be technically impossible to pull off. He left it alone, thank fuck.

Beyond just using iframes - I decided I’d make the site “flashy”. Not just literally flashy (as in using Flash), but.. exciting. Fun. Whatever you wanna call it. I wanted people to look at this as a site, not a “porn site”, per se. Pigeon-holing gets you nowhere fast in any industry. Keeping with the theme of loading interfaces once, and content changing dynamically, a few of the more content-rich pages have iframes with linked lists that pop new Flash movies into a separate iframe. Those flash movies are only about 20-30k each, at most, and only load more content into them when requested by the surfer.

A common problem (at least, back in the day) with Flash is that no one really knew how to load a dynamic link into the Flash movie itself. Basically - when a webmaster sends us traffic, we need to grab a special code they send along with the link that says “hey, this is joebob - I’m sending you a surfer. If he joins - that’s my sale” and we pay him accordingly. Unfortunately, Flash doesn’t let you just say “hey, make this button a link that I can define in the HTML, outside of Flash”. Thankfully, my friend Jim clued me in that you can just link to a Javascript, and tell the javascript where to go from there. Since the javascript is embedded in the page, we can grab dynamic PHP variables into the page and insert them into the javascript, thereby making Flash link dynamically. Sweet.

Now, onto the problem of the “Vivid World” as we’re now calling it. The outside stuff - ShopVivid.com, VividPersonals, VividLive, etc. - where do you plug those things without just putting big, cheesy, ugly text links along the bottom, or bugging the surfer with seemingly endless pop-up windows (for those unfortunate enough to not have a pop-up blocker or realize that FireFox exists)?

My solution? little advertisements in image boxes.

I figured… give ‘em a little “light” above, so it’s like products featured on a shelf. If this is the virtual “front” for Vivid.com and kinda.. Vivid as a company - why not?

While we can swap those images in and out (even dynamically, within a link’s code), I also intend to make that whole area into a div with overflow : auto, so it can scroll left to right and show other random Vivid features/products - like the aforementioned E-cards, screensavers, cigars, condoms.. ad naseum really. It’s expandable to whatever we need. That’s the key with everything in the site - expandability. And, customization. We need to be able to use this tour for awhile, since if that last one stuck around for so long - lord only knows how long this one will. But it should never be stagnant and boring, and it should always be easily editable, without having to kick open Flash and Photoshop just make a quick change.

And, how do I make sure things can be updated more-or-less on-the-fly? External files.

Every image loaded into the “girls” page is done so externally, from images residing in a folder. Same w/the thumbnails for those images. Ditto all the text in the girls’ bios, and the videoclips on the Movies page (both the large and small ones), and.. well, all the text is pulled in through little text files. Change any of those, and it’s instantly changed on the tour. Even on the “Photos” page, we’re loading in text from within the members area, so you’re seeing the actual updates that took place that week. Granted, it’s just text cause we can’t actually show what’s in the members area - but you can see what’s going on inside, so you know we’re not just slacking.

Since Flash can be, at times, quite bulky, and loading in external files each with its own preloader is a hefty requirement for any Flash programmer - I went the slightly-cheesy route of just showing an indeterminate progress bar, and the images load over that animation. This way, as soon as it loads - it shows. Also, the big images have a transitional effect that at least gives you a little “show” while you’re waiting for the image to appear. On faster connections, it’s a lot more seemless, but on the slower connections - you’re not waiting too long (each full-size image is roughly 10k - which equals about 2.5 seconds on a 56k modem, that’s barely longer than the transitional animation I overlay while the image is loading).

The big issue was yet to come, however..

How do you show the surfer what’s in the members area, the sheer amount of content and goodies a site has - without actually showing them?

Give ‘em shitloads of previews and samples, push the envelope on what can be shown in a “guest” area, and take out just that which the lawyers will have issues with.

That brings us to the next point.

Content is king

That’s the number one thing I’ve heard more than anything else about making websites. Content is king. Unfortunately for us porn people - our content has to sit behind protected areas so kids can’t access it. But, we want to show you something, so we can at the very least entice you to join. We want you to think “if it’s this good out here - imagine what it’s like on the inside”. Not unlike what you’re probably thinking about the Vivid Girls themselves, no? ;)

My original solution, of which I utiilized when making all of the Vivid Girl sites I made, was to find 20-30 second videoclips that showed a Vivid Girl amidst a sexual act, but at a point where you couldn’t actually see anything. I’ve got one clip of Cassidey Rae getting fucked doggystyle while she’s lying face-down on a table. You see nothing of her tits, as their pressed against the table. You don’t see pink parts, because they’re off-screen. It’s a “perfect” clip. But, it’s only 30 seconds long, and.. it was a very small clip. In pixel size, I mean. It’s not enough for the tour.

To be honest, I would’ve left it at showing all the clips I made for the Vivid Girl tours - which is by itself at least 10 minutes of video, and showed that we had a fuckload of content. My manager, however, liked sites like Ten.com, where they pop a window and give you a full minute of 320×240 video.

Thing is - we couldn’t do that. We couldn’t show 1 minute of video without showing something we weren’t allowed to show. Ten.com gets around it because they have a video editing guy who puts a huge black bar across the bottom and fades in video that will leave the interesting shit in the video to reside behind the black bar. Moreover, they’re allowed to show nipples. We’re not. If you’re wondering why - realize Ten.com advertises in porn mags. Vivid advertises in Times Square. Little Johnny might not be reading porno mags - but anyone can see Times Square. If you’re gonna pull up a website that’s advertised 50 feet tall on the side of a building, that website shouldn’t expose you to anything “lewd”. So, we can’t show anything.

I suggested that we find a good 2-3 minutes of video on maybe 5 different DVDs, send the clips off to an outsourced company and have them use motion tracking to put modesty (which is what we call those “stars” that obscure nipples and what-not) on the areas of the videoclip that needed it.

Sounded like a fine solution, no? It was, except for one problem : no one would do it. We outsourced it and waited some 3-4 months. Nothing happened. No one came through.

Finally, I said “fuck it - get me Final Cut Pro and some DVDs and I’ll make the fuckin’ things” and I did just that.

For the combined period of over 70+ hours, I sat through 3 minutes of each of 12 videoclips that I personally pulled from the DVD library and made sure that wherever there was a female nipple - a Vivid “V” Star logo would appear over it, and a “Join Now!” badge over every cock and pussy. I didn’t find clips that would be “easy” to edit - I found clips that would look hot as fuck, regardless of nudity. That was probably the stupidest way to do it, but it was also the best - those clips will fuckin’ get you hard, goddamnit.

Do the math. The clips were running at 15 FPS (frames per second), averaging around 3 minutes each. That’s 2700 frames. 2700 frames of hardcore sex scenes. Meaning at least 3/4 of that time - something we weren’t supposed to show was showing. I tracked the Vivid Star logo and the “Join Now” badge on every single frame of video for a combined 36+ minutes of video. It was by no means easy, nor was it quick and painless. But it was a labor of love - because this tour now gives you, the surfer, over 45 minutes of video for the taking. Find me another tour that does that, legally, and has as much content as Vivid.com and I’ll find you Santa Claus.

I could also point out that I did all of that editing while in my personal life I was dealing w/my recent crisis of having my ex (who looked a bit like a few of the Vivid Girls) hide her life from me, and run off to marry her now-husband, leaving me heartbroken, single, and needless to say - completely unsexed. I’m not here to dwell on my losses, but to celebrate my victories - but I just had to point that out cause it was a pretty sore thing to have on one’s mind while applying frame-by-frame modesty to hardcore XXX videoclips for 8 hours a day.

As for the images on the “girls” page.. that was pretty easy, admittedly. Pick 4 hot images of each of the 30+ girls featured in the tour, and make sure to never leave any female nipples or pink parts uncovered. It still took many hours - but it wasn’t shit next to all that video editing.

But wait.. there’s more..

Customization and Deep Linking

Deep Linking is what we call it when you can send your special “code” through to a specific page or part of a given tour. A tour, by the way, is what we call that “guest area” you see - when you hit “free tour” on a porn site.. you’re “on the tour”. Now you know.

I mentioned earlier - porno people (from here on out, I’ll call them what we call them in the biz - “webmasters”) hate iframes. Why? Because you can’t “deep link” to them. If you have content loading into an iframe, and you do what most people do and just grab all that stuff written in the URL bar of your browser - you’re not sending a link to the iframe content, you’re sending a link to its container. In other words - they’re seeing the full page that was pulled up, and most likely whatever was loaded into that iframe … ain’t gonna be there, the surfer will have to click around to find it.

That’s a problem.

Webmasters like the ability to send people to the 2nd or 3rd page. Past the “warning” page, as it were. This is especially true for webmasters who are sending traffic from sites beyond their own warning page. They also like the ability, in the case of Vivid, to send people to a tour that’s centered around a Vivid Girl that is most popular w/their traffic.

So, how did I solve both problems at once?

PHP and variables.

For each iframe, there’s certain extra code I can tack on to each link that says “when this page loads - show Vivid Girl X first..”. Also, the header image is random by default - but if I give someone the code to make the tour centered around, say.. Jenna - then Jenna will be in the header image.

Some examples.. (don’t worry, you won’t get pop-ups through these links, and they’ll open in a new window so you can close them when you’re done and you’ll be right back here again)

Feature Jenna - This will go straight to the “girls” page, show Jenna Jameson first, put her image in the header, and play her movie first when hitting the “movies” page.

Feature Briana - This will go straight to the “movies” page, and play a clip of Briana Banks getting fucked. Also, swap out the header to feature Briana Banks, and if they click to the “girls” page, show her profile first.

You get the idea. If a girl is set - then any page that has content for that girl, it will show said content first before the user clicks past. Also, making the header image feature that girl will make the surfer feel like their fave Vivid Girl is also a “big star” in the Vivid World. And, of course, we can skip over that warning page with just one simple link.

Beyond just customizing for which page/girl to show - we also wanted webmasters to choose which (if any) of the extra Vivid World products they wanted to promote. Those 4 boxes at the bottom? They can be customized. Even if a webmaster decides they want to promote, for instance, ShopVivid.com and Vivid Live - they can opt to replace one of the other boxes with one that just points out a feature in the Vivid tour, instead. An Example follows :

Feature + Ads - The first box builds on the feature of “movies” and clicking the first box will take the tour to the movies page (again, no refresh cause.. we’re using iframes). The 2nd box advertises VividLive.com, and the 3rd and 4th plug products we sell through ShopVivid.com.

All of those links can generate more money for a webmaster, so it does them well to plug outside of Vivid.com. Since the links to outside sites open in new, blank windows - the surfer never leaves Vivid.com, and so will return to Vivid.com when they’re done shopping, or chatting or.. whatever it is they’re doing.

Remember now - ideally, the surfer should never leave. Giving them 120+ images and over 45 minutes of video means we’ve got a pretty high likelihood of keeping them around for awhile.

Last minute details

Near the end of the design of the tour, my boss expressed her distaste with the “warning” page (also called “the splash screen” in web design terms). It originally had a picture of Vivid Girl Tawny Roberts, plus the 3 buttons (enter, join now, members) and the warning text. She wanted.. video. Talk about bucking trends. Who puts a video on a splash screen?? But, try as I might to fight it - I couldn’t and Steven Hirsch himself (president of Vivid) was ecstatic about it. Vivid’s own video editor made a special clip for the warning page, even.

I had the unique challenge of figuring out how to present the video and not fuck up the “wow” and the spiff of the site. So.. I put the fuckin’ thing inside of a TV. I grabbed an image of a 2005 Platinum-Series widescreen Mitsubishi TV. It had a large bottom half for speakers - which is what I need because I needed to fill all kinds of space on the left-hand side.

They didn’t like it. Most said “that TV looks too old”. Okay. Damn. Some even suggested putting it inside of a fake Windows Media Player interface. I fuckin’ hate it when websites do that. You see an interface that looks familiar, you want it to work that way. When it doesn’t - you get pissed. So, no.. fuck that. I said “I’m going with a TV”.

I found a nice Samsung DLP widescreen TV that sat atop a nice chrome column on a triangular base. Perfect. Problem is, I wanted that angled 3/4 view and no one had a high-res photo of the TV at a 3/4 view. Best I could find was barely 200 pixels tall. That’s about half of what I needed it to be.

So, I just traced the shitty quality image in Photoshop using the pen tool, and put each piece on its own layer. Then, I used some layer styles that I had, to make it look kinda “chrome”, added a Vivid Star where the power button of the TV would’ve gone, and then added some gloss and sheen highlights around the edges to give the screen a “glass” look.

We also fought about the video, its quality, its length, bla bla bla. You don’t wanna hear about that. When all was said and done, I knew I didn’t want dial-up fuckers to deal with a 1MB videoclip on the load of the page, so I helped them out.

When you load up the page, you see (for hopefully only a split second) a TV that says “PLEASE WAIT WHILE WE OPTIMIZE VIVID.COM FOR YOUR SYSTEM”. What you don’t see is the invisible Flash movie just off the edge of the screen. It’s trying to load a 15k jpeg. As soon as that Flash movie finishes loading, it kicks you off to the 1MB video (it’s actually only 650k now that I’ve optimized it a bit more). Now, what if you’re on dial-up? You can’t load 15k very quickly. A high speed connection can do 15k in mere fractions of a second. So, I tell the page itself to refresh and go to the low-quality (about 150k) video, after 1 second. If you can load the 15k jpeg in under a second - you get the high-quality video, if not, you get redirected to the low-quality video.

Now you can make your own speed test, aren’t you happy?

Wrapping it up

So, that’s a feature tour of the feature tour. A behind the scenes look at my day-to-day work. An enormous self-love fest, to be sure. But, c’mon.. surely some of that might have been interesting to you, no?

I’d like to give some thanks, as if this were an acceptance speech.

To Leslie Sharp, my manager, for accepting my ridiculous idea for a tour as a good idea - and speaking out on my behalf against those higher up than both of us who didn’t like what she and/or I liked. Obviously, this tour wouldn’t have gone up without you, and I appreciate immensely that you respected my vision and let me see it through. Even if I do make a lot of off-color remarks ;)

To Donnie White, our lead programmer, for helping me out of a bind when I was pulling my little designer mohawk hair out trying to code this bitch, for coding some of the advanced webmaster features of the tour, for helping me troubleshoot all the shit that was going wrong with it in the beginning, for consistently thinking outside the box, and.. for putting up with all my constant gay jokes. You know I kid. Good luck with your wedding and don’t let her catch you choking on cock, buddy! (sorry.. I couldn’t resist).

To Eric Cha, our troubleshooting expert, who took the time to actually go through everything in the tour with a fine-toothed comb so we could launch this fucker with pride and without worry. You da man, sir.

To James Caldito, our website update/maintence/troubleshooting lead, for making that initial test video for the splash screen. It was an awkward size, to be sure, but you didn’t seem to mind so I thank you for not slapping me upside the head when I requested it.

To Jim Kunz, formerly our other Web Designer, for teaching me the dynamic javascript-flash link trick, and for finding that one frame of video that showed a partial nipple in one of the clips. I think I nailed it this time, though. I know you’re gonna say I’m a total fag (pronounced FEE-AGH) for posting all of this so.. you can suck my left one, sir ;)

…and of course, the rest of the team. I’m not discounting your work by not mentioning you here - you’re all damn good and if this weren’t the best fuckin’ team I’ve ever worked with, I’d have left or killed us all by now :)

Anyway. It was a goal in my life to design a site that gets up to 1 million hits a week - and I’ve done that. Being near-solely responsible for the default homepage of the highest-selling porn company in the world is a nice feeling. I’m gonna go celebrate now, and get thoroughly shit-faced.

Thank you for reading. Now go get yourself some porn.

Share and Enjoy: