Update 26 Jan 2013, 8:58 PM EST: Brian King of InkOUTBREAK responds (included at end of article).
I want to tell you a story. A story about a webcomic service called Inkoutbreak.com.
What is Inkoutbreak.com, you ask? Well, if you were on the web during the late 90’s you might remember something called a “web ring.” A web ring was essentially a series of web sites chained together with a common navigation interface, either at the top or (more commonly) at the bottom of the page. Inkoutbreak.com reminds me of a web ring, only updated with some tools that strike me as rather innovative.
Let’s take a look at the example Inkoutbreak.com provides to give you an idea of what it does:
You have your community branding in the top left, the name of the site you’re visiting. So far it’s your standard stuff. It also provides a subscription service, which is interesting, as well as the option to block comics you don’t like. Social media widgets follow (allowing you to like/uprate comics that amuse you any given day, as well as—I assume—bumping up Inkoutbreak.com’s visibility and improving its SEO). Finally, at the far right you get the name of the next comic in the list, and by clicking on it you can travel from comic to comic on the site.
This is, all things considered, a pretty neat idea. You can browse through all the comics that take part in Inkoutbreak.com’s services, and over time you’ll have a customized subset of those comics. The ones you don’t like you can block and never see again. The ones you like you can subscribe to, and get the advantages of a customized RSS feed in a web format without actually having to manage feeds.
Not bad.
You’ll note that on this graphic, Inkoutbreak.com makes it clear that artists retain full control of their site:
Artists keep your webpage EXACTLY how you want it. Show ads, sell merch. readers [sic] have full access to access [sic] to discover your site!
Again, this is classy. Other than the web/ring community branding tool at the top, the artist controls his or her own site and makes his or her own decisions about advertisements.
What about advertisements? Well, once again we take our information from the Inkoutbreak.com website, as you can see from the screenshot below:
As far as Advertising on the site our main goal would be to cover the cost of the server. There will never be popups. There will never be ads on the ink bar across other sites. We will always try and keep advertising to a very classy level. I do not want a banner farm, I want users to feel welcome into the world of comics.
What are the ads? Well, we can see for ourselves. Here’s a screenshot of an Inkbreakout.com ad running on Beeserker.
The ad on the left with the “ink” header is the Inkbreakout.com ad—it’s a lot like the old Keenspot Newsbox, if you remember that: it displays ads for other comics using Inkoutbreak.com. One notable difference is that the Keenspot Newsbox would show a single comic for an entire day, while the Inkoutbreak.com ad box shows a new comic ad every time you refresh the page.
Update, 26 Jan 2013, 6:13PM EST:
I’m inserting this update into the original article because I believe it’s important to note that running the ad box is optional only. Artists are not required to display it. End update.
If that’s the only thing they require you to run (as well as the ribbon at the top) then that does seem pretty classy.
If you look at the URL displayed in the browser window in the screenshot, you’ll see the browser is displaying an Inkoutbreak.com URL—I suspect that’s how it allows the reader to browse through multiple sites. If you click on a link in the site itself, you go directly to the site, and all that’s left is the ink ad:
Above, you see that it’s showing the beeserker.com domain, and that there’s no Inkoutbreak.com branding bar at the top. In the screenshot below, you can see that Inkoutbreak.com ad is still there.
Which makes perfect sense, of course. The unique part here isn’t that the Inkoutbreak.com ad is still there, it’s that the branding bar goes away if you access the site directly. Neat feature. In the same article that discusses advertising, the Inkoutbreak.com creator explains he did this so that it was possible to view the artist’s site design as the artist intended. That’s also pretty classy.
Also, for the record, I’m not opposed to ads. I used to run Project Wonderful ads on Eviscerati.Org, and the only reason I pulled them was I wasn’t making enough money to justify keeping them. In other words, if my ads were paying for the server costs involved in running this site, I would still be running ads. I don’t mind ads. I do, however, prefer when people keep their advertising “to a very classy level.” So it’d be a reasonably safe bet to assume that I was 100% behind the Inkoutbreak.com advertising plan.
And you’d be right, if that really was the plan. But is that the plan?
Let’s take a look at the code behind the ink box.
The thing I like the most about the Firebug plugin for Firefox and Chrome is that if you right-click on an object, you’re taken directly to the code surrounding that object, and when you hover over code it highlights the area on the display where the code exists. Take a look:
I’ve selected the image tag in the code that displays the Inkoutbreak.com ad, and in the display the image is highlighted in blue. But that’s not where the html for the Inkoutbreak.com ad box starts. The html actually starts here:
Inkoutbreak.com uses an iframe to display the ad. A lot of people hate iframes (initially because not all browsers supported them—also, to be honest, because it was originally a Microsoft invention), but they can be useful when you want to host content remotely. One of the tricky parts of iframes, though, is getting the size of the frame right. If site A is displaying content from site B through an iframe, and the content on site B is larger than the size of the iframe defined on site A, the iframe defaults to creating scrollbars so you can scroll side to side, or up and down, to see the whole content. Because of this, a lot of people disable the scrollbars, especially if you’re creating an iframe to display a single ad. Browsers tend to add different kinds of default padding and margins to images, so if you have a 160×211 image and you create a 160×211 iframe, they won’t necessarily line up, and the specific ways they don’t line up will vary depending on what browser you’re running.
In the example above, scrolling is set to “no” and also has the “overflow: hidden” attribute. This means that if the content being loaded in the iframe is larger than the frame, it won’t have scroll bars and it won’t shift around if your mouse accidentally drags inside it. None of this is strange. It’s actually a good idea to design an iframe that way.
It’s the rest of the code that’s kind of weird.
Firefox (at least, Firefox v18, I can’t speak for earlier versions because I’ve never used this feature before) allows you to display only the contents of the iframe. You do this by right-clicking on (in this example) the Inkoutbreak.com ad, clicking the This Frame menu option, and then clicking Show Only This Frame.
When I do that, this is what I get:
You’ll notice the Inkoutbreak.com ad has changed again—viewing only the contents of the frame refreshes the ad. What you should also notice is the scrollbar on my browser window. It’s a good thing the iframe turned off the scrollbars and hid the overflow… there is a LOT of extra space in this ad.
Let’s look at the code (right click on page, click View Page Source):
Well, that looks like the ad code. Except that there are a few empty lines at the end…
Scroll down and you’ll find more:
Keep going and you suddenly find break tags:
For those of you who are unaware, the <br /> tag sort of acts as a carriage return for a browser display. It forces everything that comes after it down one line.
And it keeps going…
What’s at the end of it? This:
What does that look like? This:
This is a zoomed out view of the page. At the veeeeeery bottom of the page is a link named “inkoutbreak.com” followed by the number 0. Clicking on the link takes you to the inkoutbreak.com home page.
Well. That seems weird. Why put in all that whitespace to obscure a link to the Inkoutbreak.com home page? Let’s look at that last bit of code again:
Line 129 is a link to inkoutbreak.com. After that, the close body tag, and after that the close html tag. That should be the end of the page, but it isn’t. There’s JavaScript, and a bit of Google Analytics code.
Is that it? If so, it’s a very strange coding choice. I kept refreshing the page and viewing the code every time a new Inkoutbreak.com ad displayed. I got a different ad every time, but most of the time the code was the same.
And then I got this ad:
The ad is for the webcomic Multiplex, and it had the same strange formatting with the same JavaScript code… with one very significant addition. Let me walk you through it.
Above you see the part of the ad that can be viewed from within the iframe. Let’s scroll down to the end.
Look at line 124. It’s an ad from Technorati Media. It’s an ad that will be displayed outside the viewable area of the iframe.
This hidden ad doesn’t show up all the time. I had to refresh the page a few times, going through a number of different Inkoutbreak.com ads before I would once again run into code with the hidden ad. But it happens regularly, and—this is important—it doesn’t show up on the artist’s page. The artist’s page loads it, but because it falls out of the iframe window it doesn’t display it.
Why would an Inkoutbreak.com ad do this? The ad you see isn’t specifically selling you anything—it’s advertising other websites. The ad you don’t see is still sitting there collecting impressions. If the ad network is paying per impression instead of per click, then Inkoutbreak.com is collecting money for that ad.
Does the artist know the ad is being displayed? I think there’s a fair chance that a lot of them don’t. It’s not immediately obvious the ad is there. But maybe they do—I don’t know Inkoutbreak.com’s terms of service, so I can’t make any assumptions about the relationship between them and the artists who are members of their network.
However, I very strongly suspect that these ads were intentionally hidden. I find it very difficult to believe that all that white space, and then row upon row upon row upon row of break tags, were placed there for any reason other than to make damned sure that ad stayed out of the viewable dimensions of the iframe, as well as obscure it from a casual glance.
Well, when Inkoutbreak.com promised there would never be popups, they were right. This is the mother of all pop-unders. Also, I suspect that Technorati Media—and any other ad network they might be pulling this with (I only saw Technorati Media ads when I actually saw the JavaScript for the ad)—would be pissed to discover that they were paying Inkoutbreak.com for serving up ads that people never, ever see. Ad companies tend to have rules that explicitly define where an ad can be displayed, and “obscured by a hundred break tags so nobody ever knows that it’s actually there” is probably not one of the options they provide.
But there’s another problem here. If Inkoutbreak.com were to strike a deal with an advertiser who was less than ethical, and the advertiser in question were to serve up an ad that contained browser exploits or other malicious code… well, from the reader perspective it will be the artist’s site that’s responsible for infecting their machine. The artist won’t have a clue what’s going on, because they won’t realize they’re serving the ad. The ad is hidden deep inside an iframe in a JavaScript tag that’s not even part of the ad they think they’re showing on the site.
That is many things. What it is not is “classy.” Inkoutbreak.com is piggy-backing their own personal ad onto an ad that the artist willingly agreed to display. Inkoutbreak.com is also putting Google analytics code onto each page, probably to be able to use the artist’s page traffic as part of the page view traffic they report to advertisers in order qualify for the higher paying ads (more traffic=higher paying ads).
And the artist, I have to assume, just doesn’t know.
UPDATE: In the original version of this article, Brian King of Inkoutbreak.com responded to this article in the comments section. After the migration I felt it was only right to make sure his comment was still available, so I have included it here:
The technorati ad that you see was from developing an “ad rotation” to help raise money for ink, this WOULD HAVE be an opt in “help ink out” kinda thing. I started work on this a few months back when I really needed money when slackstack was no longer splitting the server bill. The bill is extrodinarilly [sic.] high due to the traffic / bandwidth of the exchange ( 368$ / month ). The code has been removed and anything ad based will likely never be needed because another company covers the expenses. This code made its way in from an ealier [sic.] build that was rushed out.
Brian King, Inkoutbreak.com
