I QUIT

I have now completed a markover of the invert “dating” site that has enjoyed the fastest memetic spread of any invert “dating” site, BigMuscle.com. Don’t bother looking at any of the links if you’re offended by naked, exhibitionistic Uranians.

Our goal here is to explore how BigMuscle can be improved to a standards-compliant, accessible site that looks and behaves like something built in 2004.

Everyone reads BigMuscle, and its related sites, BigMuscleBears and NormalGay (sic). Today, the site claims 124,187,033 page views. And a lot of people post profiles – so many that such profiles emerge in gossip columns!

And an interesting note off the bat: Bigmuscle has achieved Google obscurity. You can search for the site, but not for the contents of any profile.

Contents

Anne van Kesteren was enlisted to help with some of my deliberations. That does indeed mean a high-school student (male with a “female” name!) was induced to read BigMuscle. (Like so very many others!)

What a trouper.

For this project, we’ll use as example the G-rated profile from an apparently attractive redhead, plug·in·device (male connectors, shurely?!). I won’t necessarily cover every line of code, especially when we hit the more systemic issues like navigation, frames, and, of course, taste.

I will enumerate some annoyances later, but I’ll mention one annoyance at the outset – the innumerable sycophantic blandishments of “Thanks, Bill and Andy, for creating a site overflowing with hunky, juicy men!”

I’ll thank Bill (Anderson) and Andy (Wysocki) when they give me a 21st-century site. And they have little or no control over the hunkiness and juiciness of the men on their sites; by their own admission, you control what you post.

Basics and head

CSS

The good news: The main stylesheet validates. It oughta – there’s practically nothing to it. The auxiliary stylesheet also validates. So does another stylesheet linked from a table cell!

HTML

The expected bad news: Nothing comes within the same universe as valid code.

The number of errors on our sample page varies from minute to minute. At the moment it’s 116.

By any definition, we’re drowning in tag soup. The code is like FrontPage 97. I don’t know which exact Web they’ve coded this site for, but it isn’t the Web the rest of us use. Let’s not do the Time Warp again.

head

The first place to fix things is the head element, which is actually not so horribly awry.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Liars. In any event, the correct DOCTYPE is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.

<head>
<title>BM Profile plug.in.device – # 59422</title>

Give us an en dash and either Nº or even № (&#x2116; ), the actual Unicode glyph.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Superseded by actual usage. UTF-8 is necessary because foreign-language speakers just type away on their foreign-language keyboards, causing errors in character encoding. (I’ll see if I can dig one of those up.)

<meta name="Keywords" content="Adult, xxx, Adult Content, Big Muscle, BigMuscle Gay, Gym, Dating, Gay Male, Adult Site, Adult only, Muscle ">

Delete. For the love of God, delete.

<meta name="Author" content="AB Software - bigmuscle@bigmuscle.com">

ABSoftware.com is merely a placeholder site all of whose links 404 (or 401 – it appears to be a front end for principals to read Web mail). You should be using link rel="author" and provide a viable About page for yourselves.

<meta http-equiv="imagetoolbar" content="no">

This apparently turns off the toolbar of image options in IE/Win (Cf. Müllenweg).

<link rel="STYLESHEET" type="text/css" href="./style.css">

<link rel="STYLESHEET" type="text/css" href="./site.css">

A media declaration would help, as would alternate and print stylesheets.

<style></style>

Forgetting something?

Navigation at BigMuscle is a mess. It’s so impossibly awful that the entire site and its two analogues belong in the Bad Sites “Classic” category.

I’m only gonna say this once: Even an invert “dating” site requires information architecture. In fact, with over 19,000 profiles that can only be found by navigating maze upon maze, a “dating” site requires professional information architecture. Maybe we can get Greenfield to work on it. (He’s got tattoos. He’s Jewish. That makes him “queer,” right?)

Blowing the homepage

You can readily and permanently bypass the splash page that asks if you’re of age. After that, hit the homepage and you’re immediately confused. BigMuscle gives you some Featured and Random profiles. That’s fine. Left-hand nav, though, goes as follows:

  • Big Muscle (isn’t that Home? Isn’t that where you already are?)
  • Profile List, which secretly expands into a submenu using noncompliant methods:
    • Photo List (what else are we looking at here – master’s theses?)
    • Random List
    • New Members
    • Events (how is that a List?)
    • Other Lists [and I quote: “Other FUN lists… Daily Top Counts… Top I LIKE profiles… Set Options [apparently some novel kind of List]… Height Stats (Drill down)”]
  • Search (but there’s also a field labeled Enter Username or ID # [sic] below the whole navbar)
  • About
  • My BigMuscle (which means what?)
  • Features (Become the Daily Featured Profile, Certify My Profile, Pals, inter alia)
  • What’s New
  • Donate
  • Shop
  • In Print (press clippings)

Then we get the tiny search box aforementioned, followed by links for Contact Us, Privacy Policy, Your Health (inconsequential and superfluous), Get BM Wired, and Terms, all of them rendered in lower case for some reason.

What a disaster. And we haven’t even begun to look at the markup, which is as follows for most entries:

<tr height="18">

<td>

<p>

<a href="./added_functions.phtml">
<span style="font-size: 10pt;">
Features</span>
</a>

</p>

</td>

</tr>

<tr height="18">

<td>

<p>

<a href="./whats_new.phtml">
<span style="font-size: 10pt;">
What’s New</span>
</a>

</p>

</td>

</tr>

<tr height="18">

<td>

<p>

<a href="./donate.phtml">
<span style="font-size: 10pt;">
Donate</span>
</a>

</p>

</td>

</tr>

Let’s just fix it for them

I’ll be generous and simply offer an improved IA.

Compliant search field with “More Options” link
The entire search page is something I don’t want to have to deal with. It’s a perfect candidate for standard markup, though. The free-text-search field (Comments) is limited to one word (“You can only search one word at a time in the comments field! This isn’t YAHOO <G>”) – further flat-out bullshit.
Styled unordered list
  • Photo lists
    • New members
    • Random photos
    • All photos
  • My BigMuscle
    • Join (or Donate)
    • Settings
    • My Account
    • My Favourites
  • About
    • Contact Us
    • Press Clips
    • Terms
These lists could simply show all options (there aren’t that many) or expand and contract. There are so many standards-compliant methods available now that you could simply pick one off the shelf. It’s simplicity itself.
The About sections could run at page bottom. There’s no reason whatsoever to repeat links (as Back to List and Back to Profile) within the left navbar.
I quite like the tables used for profile lists, though – not the markup, but the fact that they’re sortable by any of the available headings. (I have a link somewhere of another compliant site that offers the same thing. Hard to certify against WCAG 1.0, though, if anybody cares.) Superb candidates for compliant markup, which, incidentally, makes the cells easier to style.

Handheld version

As for Get BM Wired: I’ll just let Bill and Andy incriminate themselves. I even had to fix their markup just to render their own text correctly. I left in most of their copy errors.

On the road and no laptop or internet connection? But you want to check your BM short messages and see that guy[’]s profile photos again. Point your cellphone or pda [sic] browser to: http://www.bigmuscle.com/wired.html […]

We suggest:

  • You have a color screen capable cellphone or pda
  • You use a web browser on your cellphone or pda (pages are not WAP enabled)
  • Check your cellphone/pda wireless data billing plan. Not all plans cover web access. Extra fee’s and bandwidth charges could apply, while your cellphone/pda surfing the Bigmuscle web site
  • As always use your cellphone/pda when it is safe to do so

We do caution you that with hundreds of cellphone/pda units available and all having different web browsers and web access services. We can’t guarantee your cellphone/pda will work. We have only tested the wireless pages on a new Nokia 6600 cellphone. Your results will vary. The newer your cellphone/pda and browser software on the device, the better your results will be.

Well, this too is bullshit. Although it is not a simple case of write-once/read-anywhere, if BigMuscle were serving standards-compliant pages, PDAs could simply read the pages. It would be nice to find a mobile browser with media="handheld" support, but the place to start is valid code, not half-arsed tag soup that they only bother to test on one phone. (I’m digging up some links, which are quite hard to find, on how well compliant pages really work on actual cellphones.)

Oh, and by the way, doesn’t the provision of a BM Wired variant demonstrate that the use of frames is unnecessary?

Other gripes

  • Hit someone’s buddy link and you go to that photo with no way whatsoever to view that person’s full profile. Some other links let you infer a userID and look that up – laboriously – but buddy links do not. There’s another method, buried deep on the Search page, to backtrack from photo to profile. Eliminate the problem instead of giving us half-baked methods to solve it.
  • Hit someone’s pal link and you go to the profile. Hit the adjacent photo by mistake and you again find yourself trapped in a single photo view.
  • There’s a nice link to the old search entitled – get this! – HERE IS THE OLD SEARCH. Why do we need two different vintages? What is this, wine or something?
  • Links to other sites (as members’ other profiles, for example) list the entire hideous new URL and open in new windows. I have literally taught blind kids who can make better hyperlinks than that.
  • It gets confusing to move from URL to URL because BigMuscle appends enormous streams of unnecessary arguments. The base URL is of the form www.bigmuscle.com/profile.phtml?uid=#####, but a lot of the time you get something twice as long as that. It’s simply too complicated. (To their credit, the site works without the www. hostname. Why not get rid of it sitewide?)

About all I could handle at one go

I’m gonna stop here. Talking about the problems takes twice as long as fixing them, which is more than I am willing to do.

It’s not fair to say that BigMuscle is an unplanned site. They obviously put some thought into it. The problem is they didn’t put enough thought into it, and no matter how much they give you, it won’t be any good, since the developers are provably unable to create a usable site.

They make enough money to branch out through the two sibling sites (a fact we’ll return to later). It’s time our overpraised colleagues Bill and Andy shelled out for proper information architecture. Quit being amateurs at your own medium – or at least hire some pros.

The frames problem

Once you get past the inept, outdated, bloated, unsemantic, browser-confusing markup, BigMuscle’s single biggest problem is its framed interface. One again holds his nose at the effluvious stench of FrontPage 97.

On any given profile page, a navbar and search field (plus miscellaneous links that have no business being there) all sit on the left side in graphical browsers. Main body is taken up by profile name, a row of thumbnails, one enlarged thumbnail (not always the full size of the real photo), a table full of stats, and whatever body copy the poster bothers to type in.

If you select any of the thumbnails (even the larger one), you’re sent to a frames-based page with thumbnails rather clumsily arranged in a left frame. Click on one of them and the enlargement, and any title text that BigMuscle errantly replicates as plain text, will appear in a right-hand frame, along with disclaimers.

I see four possible markover techniques here, in order of preference:

Use a Textism– or PhotoStack-like system to automatically swap out a single fixed-position full-sized photo whenever you click on a thumbnail

Clearly the preferred option. It’s hot, it’s sexy, it works, and, if you use correct alt texts, it’s fully compliant. May require modification to deal with unpredictable mixes of image aspect ratios.

Use an iframe for the navigation

Left-hand navigation tends to scroll for profiles with many thumbnails. I don’t see the need for the complexity of multiple frames: Just use one document with a single iframe. Some attribute combinations in iframe render the iframe invisible to IE5/Win; simply avoid those.

As Windows users tend not to understand, whatever you list inside <iframe> and </iframe> becomes the iframe’s alternate content, should anyone be using a cœlecanth of a browser.

This will be just the tiniest bit simpler. Maybe it’s the sort of thing developers who really don’t know what they’re doing might go for, since it amounts to a small concession to improvement but doesn’t really address the problem. (Addressing the problem would undermine the whole process. I doubt developers are in a rush to admit they’re doing nearly every single thing wrong, even though they are.)

Continue using frames, but correctly

It’s just barely possible that BigMuscle is a reasonable application of frames. It’s still an overcomplex method, with multiple page loads just to produce a windowful of pictures.

The photo page for our subject flunks the validator with 41 errors, starting with an incorrect DOCTYPE. Apart from those mistakes, they’re nesting frames within frames. While this is not as grave a sin as the site’s nested tables (a total of 22 table elements on our subject page!), nonetheless, it’s total bullshit.

We’ll need meaningful titles on the frames. Exactly what to do with noframes content is as big a problem here as elsewhere. Every browser in tarnation can read frames (even Lynx, with difficulty). In theory you need noframes content to comply with WCAG Checkpoint 6.2. Perhaps that entire issue has been superannuated.

License someone else’s photo-management software, as, for example, Flickr’s

Flickr is noncompliant, and, though MC May Techno Dance Remix and I have been on Sylloge’s case to fix that, it is unlikely to change. Still, it’s not unbelievably noncompliant. BigMuscle could license Flickr, or Flickr could simply wake up and buy BigMuscle.

Semantics

By the way, I’ll mention that all the navigation systems should be unordered lists, as should the thumbnails. Scarifying thought, huh?

The image problem

You will be wondering how the hell I’m going to deal with the entire purpose of BigMuscle: Looking at amateur nudie pics.

But this really isn’t a conundrum. As with type and design sites and any site selling visual artworks, you’re using a structured document medium that has its own rules.

Sorry, lads, but you need alt text. I really quite insist. Now, how do you do it?

  • You’ve got over 10,000 people (not 19,000, since many posters have profiles on two or three of the BigMuscle sites), of whom only one is a known standardista. (And which one? It ain’t me. I don’t have a profile.) Essentially everyone else doesn’t know what they’re doing. In that case, the software has to help them.
  • Checkpoint 3.1 of the Authoring Tools Accessibility Guidelines requires software to prompt for alt text. BigMuscle does not – though through some mechanism I haven’t quite found yet, you can add the equivalent of title text that is given in (what else?) a table.

What should really be happening

  1. Prompt for an alt text and a title. These are not difficult to differentiate by example (“Me posing at poolside” vs. “Yeah, I gotta work on my calves”).
  2. In the interim, use the table-text bullshit as title.
  3. When users don’t provide an alt text, use alt="Photo N" and consecutively enumerate the photos. As pictures are added or deleted, renumber them so you’ve always got a consecutive sequence among photos without a custom-written alt.

You simply can’t argue this is too much work. The Edit Profile screen already lists 24 fields. Two more fields per photo aren’t gonna hurt.

Semantics

What kind of markup have we got now?

<td>

<p>

<center>

<a>
<img>
<img>

</a>

<br>

[All other images]
</center>

<br>

&nbsp;
</p>

</td>

</tr>

How stupid is that?

Lists of thumbnails are just that: Lists. Mark them up as unordered lists or definition lists.

Resizing and scrolling

Yet another disadvantage of frames is focus: Where is the cursor located? If you click on a photo and the enlargement in the right frame is too tall for your window, you have to scroll. Try hitting PgDn or downarrow and you’ll probably scroll the list of thumbnails.

Also, somehow this defeats Moz’s ability to size images to fit a window. But in any event, why make it so hard to scroll? Why use such a complex page design?

Thumbnails are kind of unpleasant. Wider or taller aspect ratios should simply be cropped to a preset ratio and then shrunk – otherwise these guys, half of whom are anabolic, end up looking anamorphic. (Additional redhead example.)

Would it be too much to ask for BigMuscle to become the first site to implement relevance-enhanced thumbnails? Who am I kidding, right?

Clumsy anti-theft provisions

BigMuscle’s creators act like bucktoothed hillbillies when it comes to copyright. They run a JavaScript that impotently aims to stop you from saving an image off the site. In fact, if you click on any image in a picture-viewing page, even accidentally, you get a message entitled “Dont Copy” (sic) that tries to tell you what to do if your photos isn’t on the server and advises “Please E-Mail the owner of the profile if you want copies of the photos.”

If you right-click, you are told (via JavaScript windoid) “Please do not copy images from BigMuscle.com,” after which Mozilla goes right ahead and shows its contextual menu. Safari, Opera, and IE just show the contextual menu right away.

Apparently our dear friends don’t know the whole thing is a failed enterprise. There is no way to prevent someone from saving an image online. (Let me count the ways: Right-click, and possibly wait for menu; View Source and load image directly; print to PDF; take screenshot. Really, the only method that doesn’t work is dragging to the desktop.)

And I just love the copyright warning (sic):

All photos on the site are Copyrighted and can not be copied or distributed without proper authorization of the rightful owner. It does not matter that this is a FREE site, the copyrights still hold true.

In fact, I have a host of rights under copyright law that BigMuscle and the photo owners can do nothing about. And by loading the profile you copy the photos. Get a grip, people.

The forms problem

You’ve got 19,000 members, and while you can certainly “browse,” which can be fun now and again, much of the time you’re going to want to track down fresh meat in your own burg. Plus you’ve got to sign up in the first place. Accordingly, you’ve got forms all over the place at BigMuscle. And they’re way too complicated.

  • We’re dealing not merely with form elements, but with form elements in tables – and some table cells carry inline style declarations. Great for FrontPage 97, but we’ve grown up since then.
  • There are too many fields. I’m just not convinced that the Search page has to be that complicated. It ought to be possible to simplify the form to City/Town, Height, and Weight. Put everything else on an Advanced Search page. (And for the love of God, get rid of the OLD SEARCH. Just give us search that works.)
  • The Height fields are arse-backwards – we write numbers first, not units.
  • You’ve got a problem with metric vs. Imperial measures (and that’s what they’re called, not “US Customary or Metric”). The system needs to do sanity checks (nobody is 9′10″ tall) and automatic conversion; I should be able to use Imperial or metric units to search either kind.
  • Further, the system needs to regularize place names. NewYorkCity needs to be repaired to New York. I don’t have a solution for suburbs (as often used in Australia) or free-standing cities that are associated with larger cities (as Brooklyn → New York or Mississauga → Toronto).
  • As I’ve explained elsewhere, forms online really want to be vertical. Forms on paper really want to be tabular or multicolumn because we wish to use as much of the paper as possible. (That instinct conflicts with usability, as we’ve found.) Mixing tables with forms is too difficult for screen readers. You can use CSS to lay out tables:
  • Self-evidently I will be wanting perfect form code, with label, fieldset, optgroup, and helpful titles.
  • And finally, you need to rethink absolutely everything, since the information architecture is a disaster.

The taste problem

BigMuscle is an analogue of Obscene Interiors, the Web site and book that reprints nudie self-pics taken in embarrassingly-decorated rooms. There, author Justin Jorgensen masks out the guys. The only ugliness you were left with was the décor.

With BigMuscle, the ads may or may not be tacky. These are real people; some are hot, some are not. We know that. The ugliness you can’t get away from is the site itself. The ads are one thing; the container is something else entirely. The container is reliably worse than the ads.

I had this abortive program last year: The KEEP YOUR DIRTY SITES CLEAN Challenge. There weren’t really any takers besides young Noel D. Jackson, who nuked his site later (though it was valid XHTML 1.1 all the way!), and Drubskin, who claimed to “comply” but was probably unaware just how noncompliant he was. (Mildly.)

It isn’t a difficult concept: You can make an erotic or even a flat-out porn site look nice and use perfectly-up-to-date, universally-usable, standards-compliant, accessible code.

What you need is the good taste to do it; the humility to accept that your old methods are simply old; and the smarts to recognize that there’s loads of information available to help you out.

It seems that the overappreciated Bill and Andy wrote their own content-management system. Time for a rewrite. And if they’ve got enough money to branch out to a third site – the one with the self-parodying name, NormalGay – then they have the money to do things right.

Epilogue

At about Day 3, this project manifestly entered the category of the ridiculous. I stuck it out, though I gave somewhat fewer tips than I would have liked. Given that I did it for free, I’m not in much of a mood to brook complaints.

The foregoing posting appeared on Joe Clark’s personal Weblog on 2004.08.23 20:35. This presentation was designed for printing and omits components that make sense only onscreen. (If you are seeing this on a screen, then the page stylesheet was not loaded or not loaded properly.) The permanent link is:
https://blog.fawny.org/2004/08/23/bigmusclemarkover/

(Values you enter are stored and may be published)

  

Information

None. I quit.

Copyright © 2004–2024