Three-Quarter-Year In Review
I finished my degree last November. Then I got an email reminding me that I was 3 units short due to a planning mishap, so I finished my degree last December.
I’ve only worked at my casual job a few days this year. I have spent the rest of my time at home or in cafes, working on a to-do list for the BCB site. It has been a flexible list, held in various note-taking programs, with new lines added and subtracted all the time. If something came to my mind, I’d jot it down on the iPhone. If I sat down to plan something, it’d come out as a list of tasks within a larger project.
A lot of the things I accomplished are alarmingly trivial to the user experience, and I’ve felt throughout the process that there’s a real danger that I’m just chasing after an obsessive-compulsive desire to get this list down to zero.
Oh well. It’s October, now. And it’s basically done. So I wanted to review the list, to reflect, to recompose. Let’s go through some major features and sections in order. These notes won’t cover “neat things I’ve done to the BCB site and ‘business’” generally, only those I’ve implemented in this recent push.
Be warned, this post is over 10,000 words long and is likely the most uninteresting thing I’ll ever publish. But hey, that’s for you to decide.
I spend a lot of time saying “I” did this or that in this post. In a lot of cases I called on the help of friends, asked people in IRC support channels, paid people I knew would do a good job or put up jobs on Freelancer.com to get the work done. As a control freak, I vetted and tweaked just about everything that was passed to me, but in many cases the substantial work — or the framework I built upon — was not my own.
So I give credit in advance to the following people: Popcorn, Sammybeany, Radial, Zoe, Segaholic, Tim, Graf and SpaceMouse. Without them, I’d be stuck puzzling things over a lot longer than I would have otherwise.
The maintenance of our page comments has always been a huge drain on time and resources. More than ever, I respect the desire of some authors to leave comments off their sites. But since it seems very conventional for webcomics, and because I think it breeds loyalty among readers, we’ve built our system up and up.
A persistent problem with page comments is that the last 5 or so for every page were invariably off-topic “I can’t wait for the update!” exclamations, or, in the worst cases, “I’m staying up for the new page, anyone else?” conversations that lead to the comments section being used like an impromptu chatroom. And if the page update was in any way later than expected, it was flooded with comments where people would demand updates, other would get angry at the people demanding updates, and so on.
This all sucked. But there was an obvious solution.
I made the comments box for the most recent page go into “lockdown” an hour before the update was normally due, and I made it stay in lockdown if a page was ever later than that regular update time. It has worked perfectly.
Almost perfectly. One problem remains: “FIRST!” posts. I have not worked out an automated means of stopping lame, short comments that clutter up the first 10-20 slots on each page. I first came up with an unsatisfying solution:
This just wasn’t the way to do it. (Perhaps I should have realised something when the Safari “Reader” button lit up.) After trying it for a while, I turned it off. It inconvenienced good posters, and the idiots just clicked through it.
For historical interest, the logic used to catch “possibly bad comments” was this:
$dumbthingstosay = array( # First "first", # Late naggers "you\'re late", "you’re late", "you’re late", "your late", "is late", "late page", "late update", # Censor complaints "block", "censor", "swear", "profan", "dumb comments", "filter", # Indications that someone is terrible "…", "...", "!!!", "???", "?!?", "!?!", "…", " im ", " thats ","grammer", "twokinds", "housepets", "epic", "ftw", "ban", " u ", "fursona", "lolz", "XD"
); if( # The post contained something dumb $dumbthingfound == "yes" # OR the post was in the first 20 minutes of the page being posted || $thedate < $twentyminsafterpagepubdate # OR the post was less than 12 words long || str_word_count($yourpost) < 12 ) { # Warn them. }
The eventual solution I decided upon was a system where humans would sort the wheat from the chaff. Soon after a page update (and again, a few hours after that) comment janitors would select the top 3 comments. Those 3 top comments would be marked with a star and the site would be modified to only show those 3 on first load.
The philosophy behind this was that we’d be able to forget the “FIRST!” comments, that we could ignore the quality of the conversations going on and to basically let the commenting community develop at its own pace. It’d be a horrible mess of good and bad hidden behind a simple “show all” button. And since the main reason we care about moderating comments is so the majority of readers won’t be offended, having a “top 3” you can easily glance at seems like a great way to do things.
On the technical side, I was able to tie this into the new BCI authentication system (information forthcoming!) so that there was no easy way for anyone other than my chosen janitors to start marking comments. I encountered a few problems getting the system to work in our special mobile view. I also took the opportunity to figure out a new method of loading in the full set of comments only when the user clicked. (Essentially, using AJAXy Javascript stuff to pull in the comments on-demand instead of just hiding them with CSS.)
I’m not sure how to judge this system so far. I think it has worked adequately. I don’t regret the decision to nominate moderators instead of letting the community up and downvote comments, but I have been disheartened that the majority of the archive’s old comments need to be “starred”. And after supervising the moderation of the comic’s first 10 chapters, I’ve become increasingly empathetic with the janitors’ plight of selecting 3 good comments when there may not actually be 3 good comments.
It’s a little inelegant, but I was able to put together this little system where people who respond to other people get special green highlights. It has trouble when somebody writes “@Guy With Spaces In His Username”, because only @Guy is highlighted, but it does make it a little easier to track what’s going on.
I could have improved this by searching back through the comments for a page and trying to match full usernames, or better yet, linking back to their anchor on the page automatically, but I figured that’d be a big drain on the server and a lot of effort for something that will probably make mistakes anyway.
After encountering spacing problems in popular crappy browsers, I also abandoned my effort of doing cute censor bars with the unicode block character (blocks) and I reverted back to **. I did, however, adjust the line-height so the stars sit in the middle of the line.
(I wish we didn’t have to censor our comments.)
Now, this isn’t a specific page on the site, but the super important script that you view the archive with is the result of “viewer.php” — our “archive reader”. It’s the main driver of traffic on the site, giving us 60% of our pageviews.
I made a decent number of tweaks to it to improve the experience for new readers.
First, I replaced all the old page navigation stuff with those new, flat play\fast-forward\rewind arrows. This might be my old Operafaggery showing, but I think the metaphor still works. For a long time, we kept this little graphic Veronica did of the pets holding signs, but I don’t think either of us ever really loved it and it sure was showing its age.
I think the balance of the arrows is great, and there’s a kind of logical sense to the arrows below the comic being solely for chapter navigation. I’m also proud of my intelligent “chapter start” button, which switches to a “previous chapter” button only on the first page of a given chapter. (The idea being that if you’re stuck in the middle of a chapter, you’d be much more likely to want to start from the beginning of it than to jump way back to the first page of the previous chapter.)
I do regret the previous page arrow’s placement on the side of the comic. I think it’s unnatural for it to be there and I’ve noticed Veronica getting frustrated at its placement as she uses the site. However. I couldn’t work out a better spot for it, and it does work within that previously mentioned structure of “page navigation beside the page, chapter navigation beneath”.
I did implement this to counter some of the problems:
For new visitors, the first ten pages they view will have the next page arrow highlighted in red so they know where to go. (Red is now the unofficial “look here!” colour used on the BCB site.) Of course, the page graphic itself is always clickable to turn the page.
Yeah, I know, it’s a band-aid. But what would you do?
No, not that kind of bookmark! The “We’ve kept your place” thing. Let me explain.
BCB is a long comic. It just flew past 1,000 pages. So I think it’s prudent to make the comic easy to catch up on. What I have tried to do here is build a feature that:
- Figures out when you’re doing a big archive binge and keeps your place after you leave.
- Presents a small, temporary nag link so you can easily return to where you left off.
It eliminates the “Hmm, I’ll go back and finish reading BCB.. how far through was I, again?” problem and hopefully endears readers to the comic.
It works with cookies in a complicated way that’s too mundane to explain here. It was also a pain to test. But here’s how it works for the user:
Read a few pages consecutively (about 10) and this appears:
Now the site remembers your place, and will continue as you keep reading. The bookmark will silently disappear if you read a few non-consecutive pages, but there’s a bit of tolerance inbuilt so that you won’t trash your bookmark simply because you wanted to jump back to page one of the chapter to remind yourself what X said to Y.
And so long as you have this bookmark, if you return to the site after a few hours but within 2 weeks, you’ll get Daisy greeting you on the homepage with this:
Or a similar reminder in the archive reader itself.
There is an additional reminder built in for people who are up to date on the comic, but don’t check the homepage for every update. So, for example, you read Monday’s page, but you forget about BCB for three weeks and return. It’ll know that the last page you viewed was 8 pages back, and will nag you to continue from there. Nice, right?
I’m a bit worried that the last reminder will be too aggressive and will annoy people who read on multiple platforms or computers. With four computing devices, I’m a good test case for that. We’ll see!
Overall I am quite satisfied with this feature. I hope people like it.
Cute sprite overlays on the archive viewer
This was another idea to make the archive binge experience more pleasant. We pop up cute little sprites when the reader meets certain requirements (they are reading a certain page, they have read X number of pages total, they have never posted a comment.)
Yes, I have just discovered cookies and want to do all I can with them. Tim made the sprites as part of a commission, and I decided on the old-school anti-aliased Chicago. Not as video gamey as I would like, but it’s actually really hard to find pixel fonts that aren’t only in multiples of 8pt.
I moved the leaderboard ad below the comic. This might actually increase its value to advertisers, but it also achieves the whole point of the alternate design I made for the comic viewer (something I planned from the start.) Absolutely minimal header, comic as high up on the page as possible, everything perfectly arranged for an archive binge with minimal fuss.
This page is actually a ridiculous mess as far as ads go: there are so many! But I feel like it’s remarkably balanced, now. Ads are a horrible pain to shoehorn into a design, but they don’t bug me in this design. I’m pretty pleased with it.
I wrote this down in my todo but never acted on it: “Change site colours for moody chapters?” It seems like a nice idea, but it’s really hard to implement. There are a lot of graphics to change and I don’t know where I’d want to use it. I feel that I should pull this one out when the comic nears its end and we need to go all super dramatic.
I also had the thought that I should make Safari’s “Reader” functionality work with the site for iOS users. You could hit “Reader” and it’d load full-size pages with the auto-pagination functionality taking you further and further in the comic without having to actually load new pages. I did some Googling and gave up. It’s not very simple to work with Readability’s code, and I found few resources about coding graphic-based pages to work nicely in it.
For some reason at one point I had “Develop a new comic reader based around AJAX, which also keeps in mind the new curated comments and the new intro chapter\old archive division” on the list. I don’t really understand what I was going for. I think AJAX is an interesting thing to consider and when it comes to Vero’s next project I want the website to be far more inventive and involving and conducive to long-form storytelling, but at this stage I think the way it’s set up is mostly okay.
And so that does it for the archive reader. Now:
Bittersweet Club International
I decided to revamp the whole program. For the unfamiliar, BCI is a paid membership program for readers of the comic. You pay $39 a year for a few site features (a little emblem next to your name, access to a bunch of exclusive comics), three deliveries of small gifts (charms, lapel pins, etc) and that’s mostly it.
Taking stuff away and putting stuff in
We initially promised sneak peeks at the comic, but unfortunately BCB has never had a consistently big buffer and so this became a huge pain to maintain. This benefit was phased out.
We also promised free shipping for store orders at the time of a gift delivery, but this was a nightmare to organise and not a single person asked for it. This was also phased out.
The one thing that was “phased in”, sort of unwillingly, was the expectation that Veronica would put out special “BCI comics”. I was very resistant to this idea, insisting that it made BCI a much bigger burden on her than it was supposed to be—that BCI should really only have scraps that we don’t want to put out publicly for whatever reason. But Veronica’s low self-esteem and member misconception (“When’s the next BCI comic coming out?”) has resulted in her creating all these side stories for the BCI members to read. I’m not totally sure if it’s worth it, but she recently cranked out two of these comics in two days, and so I’ve adopted the concept that this is one of the main benefits of membership into the marketing.
These changes were announced in an email newsletter and in a redesign of the BCI subscription page. There wasn’t really any reaction to it.
This function is so boring and technical, but it had to be done. It was actually one of the first things I wanted to change with BCI.
Because I was going for a serious, financial institution aesthetic, BCI members were originally issued randomly generated PINs with their welcome letters. The old way people posted with their username was by typing something like “Fred!1325”. Their username, a ! and their PIN. But there were problems with this. People always forgot their PINs, and the PINs were publicised in the auto-remembering name box, and it was just weird and insecure and a hack on top of the comments system. So I decided to figure out how to do proper encrypted passwords with hashes and salts and all this horrible stuff that took about a month of boring coding to implement and test.
The effective difference can be seen in the new Sign In link, pictured here:
Where once you typed ! and your PIN, now you have to sign in and it changes to this:
A hardcoded username and a log out link. Just like a real website!
The other nice thing about Sign In is that it reminds everybody that BCI exists. I made sure to add a new blurb to the BCI Sign In page that explains how to get a BCI account.
I regret that this system only lets you log in on one browser at any given time. It sucks for the mobile BCI users, but I don’t see an easy way to resolve it and it’s kind of a low priority.
When I first coded up the system to create and manage BCI members, I left in fields for expiry date but never actually coded in an expiry mechanism. While I let the lapsed monthly users go for a very long time, the anniversary of the program forced me to implement a few checks.
This all took months longer than I’d have liked, but BCI now locks you out of the Members section and stops marking your name in gold on the site if your membership expires.
I had to manually go through the monthly members and cull the ones who stopped paying. I had plans for an automatic script that would interface with PayPal to do this work automatically, but I think the way forward now is to stop selling monthly memberships (they’re a pain!) and just expire everyone manually every few months. Eventually we might have so few monthly members I could just ask them to all transition to the annual program. We’ll see.
Another awful problem was the forum account — I used to manually set every member as part of the “BCI” user group, which meant that expired members would retain their status long after the other BCI facilities knew enough to lock them out. Now I have a script that runs on the first of the month that locks out those that have expired. As a bonus, I was able to nearly-completely automate the BCI promotion feature for forum accounts in the member centre! It’ll save me hundreds of tedious setup tasks.
I put together a naggy email that goes out to all annual subscribers two weeks before their membership expires, encouraging them to renew. It’s a cron job that runs once a month and hopefully it’ll generate a few dollars at some point.
Abandoned plans for a free membership
My todo list at various points had these ideas noted down in it:
- Have some globally visible line at the top or something that says “logged in: gold \ normal account”
- Maybe create a basic membership to protect your name and view some introductory incentive comic.
- Create a basic membership to protect name, view comic (prereq. will be letting us email you). Line at the top or something that says Logged in as a Gold member, here’s the new content as of a few days ago, grey out stuff they can’t access? Maybe a good way to drive BCI memberships?
I don’t mind this idea, but right now the system is much more conventional. No free memberships, but samplers of the private comics on the store.
I should probably come up with more ways to advertise BCI around the site, even if it’s not through an omnipresent bar at the top of the screen. I put a little note in our Graveyard section, for instance. Not sure of tasteful ways to do more.
Ha. The forum. I still have a lot listed for this one:
But I did get a few things done. The issue with the forum is that it’s used by a small segment of the readership and that it’s already pretty good. Most of these todos are feature tweaks that fight the software itself, and might not bother people as much as they bother me.
Here’s what I did get sorted:
- The Javascript thing that resizes oversized images was improved to run before the pages finish loading. It improves the experience of reading a page with a lot of images in it a whole lot!
- The mobile version, which runs on a custom template I had to pay for (the inbuilt one is super Javascripty awful shit that feels like it’s someone’s first attempt to make a webpage for the iPhone) was hacked further into looking nice. There’s now a heading, I fixed the New Posts button to look consistent and pretty, and I did some work to the navigation bar to stay in keeping with the rest of the site.
The forum issues are really something I need to hand off to somebody else on Freelancer.com or something. I don’t have the time or inclination to work on it when I have other things to worry about, but it surely matters to the forum’s heaviest users. I dunno. If it was just a matter of money, I’d consider asking for a donation pool, but it really is more to do with me setting aside time to orchestrate a change.
Candybooru is based on Shimmie. I didn’t design it from the ground up, and so it suffers from the same problems as the forum. I heap patches onto it until it looks nice, but I can’t vouch for the underlying code it’s generating.
But! Candybooru gets more traffic than the forum, and I think it’s more fun for casual users to browse. And I’ve always been able to message Shish (its author) on IRC and get useful answers. So I’ve tried to hammer down every last change I’ve wanted to make.
Remember how we needed these for our wonderful global footer’s thumbnail bar? The excellent tag needed to be populated, first, so I got a few people to trawl Candybooru and pick out favourites. Once that was done, I made it so that only admins could add or remove excellent tags (not a native Shimmie function!)
Finally, I added some visual elements:
Plus a little “Top Picks” button that allows you to view only the excellent images:
This doesn’t really solve the problem of crappy art flooding the front page and making Candybooru look bad, but it does provide a redeeming link to the sceptical. (I think about this stuff, you know! I’m constantly second guessing how people will react to BCB just by clicking around the website.)
For a long time we’ve been marking admin comments in green, but it was suggested to me that another great feature would be to highlight the artist comment in some way or another. So I was able to take the code that parses the tag list for whoever has _(Artist) appended to their name and use it to set a special CSS class for every “author comment”:
As you can see, it overrides the admin colour. I hope this is useful to people.
I did a LOT of boring things that aren’t worth talking about in detail.
- “_(Artist)” automatically gets capitalised, so no more work correcting ugly tags.
- I spent a lot of time making sure the search input box was properly placed in dozens of browsers.
- I added a next image thumbnail. Kind of silly, but it works, right?
- I enabled the tag history plugin to protect against vandalism. It seems to work well enough, but other admins like Radial do most of this policework, it seems.
- I added a “forgot your password?” function because so many people did exactly that.
- I disabled anonymous comments to avoid spam. And I added a cute “No comments” image because it looked so bare when the post comment box was missing and nobody made comments.
- I added the emoticon popup from the page comments.
- I added special admin-only functions: “Replace Image” and “Resize Image”. These are tremendously useful, because so often people upload something that needs to be cropped or resized down. I originally thought of implementing some Javascript graphics editor, but it was too much work. I can just edit images locally and use “Replace Image” if someone uploads something that needs levels tweaking or cropping or whatever.
- I tweaked the auto-resize Javascript to work more effectively than the one that comes with Shimmie. It properly handles resized windows, toggling in strange use cases and doesn’t jump around as it loads.
- I asked Shish for some help fixing some leftover PDO bugs that caused fatal errors when doing stuff like adding new aliases. (Our copy of Shimmie is a non-release version from the tail end of the MySQL -> PDO transition, and a lot of database-modifying code fails to make use of the newer stuff.)
- I disabled an annoying feature that logs you out if you use multiple IPs.
These things, and I went through the old archive imported from the original fanart gallery and made sure it was all tagged properly.
A lot of work. Ugh. But Candybooru is pretty great now!
Now some designy stuff. For a long time we had this:
And I was upset by it. It was so simple and wonky and clearly handmade by somebody who didn’t really know how to use the pen tool in Fireworks.
And it didn’t even match up to the concept from the first mockup of the 2009 BCB “relaunch” design:
There were supposed to be little particles of candy. A candy rainbow. Like an ad for Skittles, but more pastel. You know?
I knew that I didn’t have the skill to make this kind of graphic, so I looked for people with Photoshop experience. And I didn’t find all that much success doing so.
First, I tried a thread in the Something Awful forums. They’re always doing Photoshoppy logos for small companies, so I thought why not offer $50? Nobody replied. So then I tried Freelancer.com, and I got a zillion enquiries all from absolutely terrible candidates who basically all just wanted to just do a Web 2.0 reflection on a stock photo and call it a day.
Finally, I tried deviantART, where I found a girl who specialised in cutesy artwork. I paid her to work on a bunch of different designs but never really understood what I wanted and didn’t have much web design sense. (She kept doing insane things with the links and logo and header size and so on.) And then I found out she didn’t even make it in a vector format, she was shaping the rainbow by smudging it in Photoshop.
So in the end, all I got from her work was inspiration for the colours—a nice soft gradient look. But I had to make the rainbow myself.
I think it came out pretty nicely!
I had to learn how to use meshes in Illustrator. I was able to change the font to Freight Sans Pro, the “official” BCB web font. And I totally abandoned the candy idea.
But it looks alright to me. Compared to the old one, it’s lightyears ahead. One of those things you don’t realise is so much better until you actually compare the two.
Veronica painted four portraits for the Kickstarter project (another massive design and copywriting and video-editing endeavour I haven’t really mentioned!) so I had to make room for them. I figured I could also change up the secondary characters to use newer, watercolour paintings.
It was very difficult, seeing as there have only been two proper chapters in that style, but I was able to extract a lot of faces out of Ask Roseville High answers with the help of content-aware fill and artful cropping. There are a decent amount of images that still look pretty bad, though (Blur! Tess!), and so next time Veronica does a batch of new answers she’s going to carefully pick questions that will allow for paintings that will do double-duty in this section.
The BCB Store has been redesigned at least three different times in two years. It has been my first experience making a web store, and somewhere I’ve been able to try out all sorts of ideas about how I think a web store should work.
I first drafted up the design while on jury duty. (Awful, right? It was a sexual assault trial, too.) It remains somewhat similar today, following a simple design where every item is on one big page. No categories, no jumble of “item pages” auto-generated by some clunky ecommerce script, nothing like that.
This simple, graspable “here it is, just scroll down and that’s all of it” design appeals to me, but now I keep wondering if it’s alienating to potential customers who are used to more complicated store systems. I took solace in the fact XKCD does the same thing, but I dunno. If I could go back in time, I’d just use Shopify.
But hey. Like a lot of things on the BCB site, I get so close to my ideal that I just keep hammering on things until they’re perfect. No point in resigning to someone else’s script now!
So we started with a store design that just used the basic PayPal buttons for “add to cart”, where adding an item would be this clunky back-and-forth affair where you had to keep viewing a PayPal checkout page and clicking “keep shopping” to add your next thing. Around October last year I was able to migrate to a more fluid experience using Jcart, a floating, dynamically-updating table-based system which I ambitiously styled after Daisy holding a stack of boxes. It worked! And I was mostly okay with it, except for a ballooning number of unfinished pieces I tackled this year:
The old store had no real intro text and no FAQ. But I found (through survey responses) that a lot of people had terrible misconceptions! Some people thought shipping would be expensive out of Australia, some thought that we only accepted PayPal, some thought that we only took credit cards, all sorts of stuff. So I tried to make it super clear with three points:
And we follow up in a new bottom-of-the-page FAQ to drive the point home.
I can’t easily tell if this has cleared things up for people, but I sure hope it does!
I also ditched a few things from before. No more shipping estimates on the main page, no more shirts (they were more visual clutter than serious source of revenue!)
I fixed up the “Daisy cart” in a few neat ways. First of all, I implemented an animation where adding an item to cart would trigger an item box to appear to arc up and land onto the stack, a cute little effect that hopefully draws attention to the right part of the page. (Yeah, look! I’m just like OS X 12 years ago!) This required me to figure out how to use jquery and jquery’s animation features, especially in getting the little things right—timing, an apparent “gravity” to the box, etc.
After that, I added a box which previewed your shipping and subtotal, which I figured would be a useful thing to show people just how little adding more items would be in terms of extra shipping cost. I also modified Daisy to show sweatdrops when carrying more than two items, basically just for the hell of it.
I took new photos. For pretty much everything. I took a photo of the poster to replace the cold-looking digital version that preceded it. I took photos of new items.
I also added a bunch of new items which required redesigns and tweaks: BCI, the Lucy figurine, the Sue necklace, the new charms. These are mostly unremarkable things that just took up time, but you can see the most interesting thing I did in the Lucy figurine:
I highlighted some of the videos I took for her special item page and put them in animated GIFs. I first tried borrowing the code from the figurine mini-site for Projekktor (a fancy thing that allows you to use proper HTML5 video while also serving Flash to old browsers), but found it impossible to get it working right. I settled on this remarkable little Mac App Store app called GifBrewery, and it did a nice job converting the movies I wanted.
Oh! And I made all sorts of sample comics and interesting things to add excitement to the BCI item box. So far, it seems to be encouraging more signups than the old, bland one.
Oh, I mentioned the figurine mini-site, right? I remade it.
I think it’s pretty, don’t you? It’s more or less like the old one but more visual (so as to show off the packaging I worked so hard on!) and with functional purchase buttons at the bottom of the page.
I also spent half a day making a special easter egg you get if you refresh it a lot. CREEPY!
This was the most unfinished thing about the store when I updated it. I didn’t end up changing too much, but I think I got the wording right. I also implemented something I’ve always wanted to do:
A brillant application of print CSS, right? You get to click “print order form” or “checkout with PayPal”, and if you do the former you get this reformatted version of the cart already on your screen, with item names, quantities and prices all ready to go. I was pretty proud of this one, and it was easy to implement!
I also came up with the idea of a tipping feature, after having seen (and used!) one on Angela Melick’s shop. It has only just gone into effect, so I don’t know if it’ll generate anything meaningful for us. But it has, effectively, replaced donations:
Oh god. This has been a long time coming.
I bought a label printer:
And then I paid a guy $300 to work on this IPN (Instant Payment Notification) system that would automate the store.
8 months later and we’re in the final bugtesting phase. AUTOMATING THE STORE IS A BIG DEAL.
What am I talking about, you might ask? Well, let me quote from the Freelancer job I put up:
We have a store at http://www.bittersweetcandybowl.com/store/ using the software “jcart”. Essentially it allows a user to create a PayPal shopping cart and pay for their items. Right now, I just receive “payment received” emails of these orders and deal with them manually.
This IPN script is supposed to automate an increasingly complex task — processing the orders we receive in our web store. I want the script to create new rows in a table for each new paid membership, I want the script to generate labels for merchandise orders, I want the script to email digital items like ebooks. In other words, this script would have to, upon being notified of an new purchase, figure out which item types have just been bought, and deal with them all in the prescribed ways.
“Increasingly complex task” was a euphemistic phrase for 4-8 hour sessions of editing databases, sending out emails and amateurishly writing labels by hand. And since this is my domain (Veronica has never done orders) I was very interested in making it a more efficient process.
I was lucky to find a guy that was extremely helpful and patient as we tested and tested this thing. Here are some of the services it (“The IPN Script”) offers:
- Emails users “thanks for your order!” with a customised set of messages depending on whether their item is shipping within Australia, includes an Amazon-supplied item or is a mixed order
- Prints labels on the label printer with icons to represent what was ordered
- Generates tab-separated data files for submission to Amazon’s Seller Central portal (for order fulfilment)
- Matches existing BCI members to the database for renewals
- Creates new members in that database and emails login details (including a randomly generated password) while printing a welcome letter with address label
- Delivers eBooks via email (where necessary)
There are dozens of test cases and so many things that went wrong. Think: dealing with linebreaks in delivery addresses when forming the tab-separated Amazon file, writing server-generated PostScript which can be converted to PDF, merged with a membership letter and automatically printed in duplex mode with CUPS, implementing plaintext alternatives with correct MIME types so auto-generated messages aren’t filtered out as spam, dealing with eCheque payments and temporary holds placed by PayPal, compiling libps for Solaris…
It’s weird how I don’t really want to go into it beyond spitting out a few issues at you, but just imagine this long process of testing, breaking, reporting, waiting, implementing fixes etc going on for 8 months and then you have an idea of the work that went into the IPN script. And I didn’t even really do the “work” work! (Well. I did some of it — the printing stuff is mostly OS X Automator and shell scripting.)
But don’t worry. I have pretty pictures to show you.
First, consider the amount of icons that have to go onto our labels! They have to be monochrome, memorable (for me), inscrutable (to the customer) but also interesting and pretty enough to go with our custom packaging.
Once again I asked Tim to make them up for me and he did a terrific job:
Which is which? An exercise for the bored.
The labels come out like this.
I made one just for you! Just to be clear, this is what happens when you order two buttons and a Sue necklace from our store:
- Once checked out of PayPal, you get a thank you email with a shipping estimate.
- The script generates a 90x29mm PDF with the address and item icons on it.
- This PDF is transferred to my home computer over to a folder which triggers an Automator workflow that passes it to the label printer.
- The printer prints it.
- When I’m ready, I pick up the pool of labels, some pre-stamped padded mailers and I fill them with whatever is shown on the labels.
- Then I dump them in a mailbox.
Tada! Nice system, right? And now, before sealing each one up, I throw in one of these:
It’s a real letterpress thing, made in America!
But that’s not even the biggest time-saver. It’s the BCI stuff. Member signups used to be a nightmarish mess of manually searching to see if they had an account already, typing up SQL commands and faking “random” passwords, manually curating 5 stacked “Your member details” emails, doing a mail merge on a temporary spreadsheet and all this crap. Now I get this wonderful welcome letter already printed out for me, and all I have to do is glue the right card to it, seal it up with a Jasmine keychain charm and put a stamp on it.
Our amazing new global footer
For a long time, I wrestled with information like Twitter links, ads pointing people to the IRC channel and other stuff that seemed important but was impossible to place properly on the site. Should it just be on the homepage? Should I jam it next to a news post? What if people start recognising such a sidebar as “that noisy thing they have to scroll past to get to the comments”?
I must have tried 3 different ways of doing this. It started out with three character pictures beneath the page navigation linking to Veronica’s deviantART page, the mobile site and the RSS feeds. Of course, back in those days, deviantART was the main source of links to the site! I don’t have the next few iterations, but I can assure you they were only ever “okay”. Nothing was beautiful or looked right.
But one day I was looking at a blog, and I remembered that in like 2006 or something it was a web design trend to put a big mass of information at the bottom of the page. Was it the Wordpress theme “Hemingway” that kicked it off? Who knows.
It became the big project for March.
But I struggled. I tried idea after idea and it all felt so cramped.
I started to figure out what I needed. Twitter accounts, right? Tumblr accounts too. Convention notifications! A link to Not Enough Rings. RSS links! (Two of them.) Privacy policy! Author credits and email links. Copyright. Formspring? Store ads. A link to the forum? Popular forum topics. Links back to interesting pages in the archive. The IRC!
That’s a lot. I was kind of overwhelmed. I did have one idea, though. There would be a main area with persistent information—the critical author details, Twitter links, copyright—but the “hopefully you’ll read this” stuff could be folded into a little thumbnail bar. You know, like Cracked! Or Scribol! And… the one I once made fun of The Oatmeal for. :(
But it was an effective idea. I’d put together little 120×120 images and pair them with short text that would catch a reader’s eye after they scrolled to the bottom of a page. I could build a giant database of crap and just pull a few random results for thumbs.
And this is how it looks in real code:
It took a lot to get to that point. Like with the rainbow,I decided to see if anyone in SA-Mart had the kind of information design skills to manage something as complicated as this. I got a few awful mockups and one reasonable one (that was pretty close to what I was already doing) and I ended up shelling out $50 for basically nothing. I had to figure out how to implement the new Twitter follow buttons (easy) and a means of pooling together all the information for the thumbs (not easy).
Here’s some of the work that thumbnail bar required:
- Figuring out a list of special links to store items and stuff that should be included in the jumble
- A nightly Tumblr-scraping script that checks for new posts with the Tumblr API as well as the images associated with each post
- Surprisingly dramatic revision of the Not Enough Rings code to support pulling random published comics from the archive
- Several modifications to Shimmie (the script underlying Candybooru) that allow admins to set “excellent” tags (we only want to show wonderful art, after all!)
- Relatively sophisticated thumbnail generation code which tries to crop out the top of Ask Roseville High answers (the questions)
- Hours of work writing click-friendly headlines (i.e. “Watch where you’re going!” instead of “Not Enough Rings Zone 1 Act 3”)
- Hours of work checking all the machine-generated thumbs and improving the bad ones
It was immense! I got a lot of help, though, and commissioned Tim to do a lot of the creative writing stuff. He’s great with silly taglines.
Otherwise it was just methodical, working to get each category of information operational before moving onto the next.
There were a few other things I had to change to support it. I’d long wanted a better privacy policy page, and now it looks reasonably presentable. I also had to figure out a new way to present the news on the front page. I eventually came up with the mathematically-proportioned boxes you see here:
Which is sort of okay. I don’t think I was that satisfied with it and it might change, but for now it stays. (The main issue was the ad, for what it’s worth. For a largely symmetrical page, it’s fucking hard to shoehorn in a lopsided ad.)
The footer itself remains pretty good! I have received some compliments, which is nice. I haven’t tracked how well the thumbnail works to keep people on the site, but I’ve heard some good anecdotal feedback. In terms of the design… well, it looks balanced, right? I was always a bit bothered by the fact the middle column is huge and empty (even when there’re a few entries in it!) but it does give the necessary white space to offset the clutter on either side and above. While it’s semantically weird, RSS in the footer is a web standard and looks pretty enough.
The main oversight I think I made relates to the placement of the thumbnail bar. Most sites like Cracked put it right under the main page content, yet mine’s all at the bottom of the page. In the end, I don’t think the links in my thumbnail bar are relevant enough to put under a comic, especially as they compete with Veronica’s page comments.
WHATEVER! It’s much nicer than it was, and I can certainly tweak it as time goes on. But I regard this as a pretty big success.
I leaned on my friend Popcorn to read through and revise just about every bit of text on the site. The combination of his suggestions and my pre-emptive fear of his reaction to my work has lead to some dramatically shorter, simpler and more readable text all over the site. (The strength of his BCB work was, in fact, the primary reason he got a job offer from a prestigious software firm. I think it worked out wonderfully for everyone involved.)
- Intro paragraphs explaining the purpose of each page
- The old “essay” Veronica wrote about BCB’s history
- Overlong, over-descriptive meta descriptions (so now we look pretty on Google!)
- The redundant “story summary” that dated from when the About page was named Story & Characters
And all sorts of blurbs and blocks of text were reduced to their essential components. Great!
While we got all the important bits done, he got busy in the end and so I’ve been working with Segaholic to finish the job. It is nearly as good as done.
Oh god. These are boring. I’ll just list them (out of order) to show you the kind of stuff I resolved:
- Strange font size differences across browsers
- PHP recording notices in logs, filling them up quick
- CSS bugs in Android, Android Chrome, Windows Phone 7, webOS
- Broken links (I ran a spider on the site and read my logs to find these and I think I nailed them all)
- Typekit-inspired slow loading in Firefox, sometimes
- Various bad IE7 CSS bugs
- Speech bubble tail on “Post A Comment!” was terribly positioned in certain cases
- Even pages showing up in the mobile viewer by mistake for mobile users who opted out of the mobile view
- Ugly whitespace on the side of certain pages because of one of our headings having a weird size
- /lol.html/ and /lol/ load a pages where they shouldn’t
This isn’t everything, believe me. But these are just a few miscellaneous bugs I retrieved from my old todos. I deal with these almost every day as I stumbled onto new things.
The code underlying the BCB site is held together with glue and sticky tape. I’m a really bad coder and have terrible habits and I’ve kind of resigned myself to the idea that the BCB site will forever reflect my inability. I think I’m quite good at markup and have strong opinions about CSS, but when it comes to the PHP and MySQL groundwork that generates my lovely HTML, I’m a complete amateur.
But I was able to do a few things to improve the experience on the site. Some hacky, some not. A few highlights:
- I installed Crashplan on the server, which automatically backs up every file to the “cloud”. (This has saved my ass a few times as I’m now able to pull historical versions of files from the backup, as well as basic “undelete” stuff.)
- I set up daily MySQL database backups.
- I installed nginx and set it up to serve most of our static files. (This is a fast little HTTP server that basically intercepts every user request to big slow Apache. If the file the user wants is in /img/, nginx hands it off super quick. If not, it passes the request to Apache, which does the complicated work.)
- I fixed a zillion problems that cropped up because of nginx (IP address pass through, Apache performance settings, UGH WHATEVER INCREDIBLY BORING STUFF)
- I revised the log rotation and deletion policies (The disk used to fill up with these!)
- Chapter autoupdate (we already had an automatic facility for updating the comic three times a week, but if it was rolling over to a new chapter it used to be manual. NO LONGER.)
A special mention for a special bug
The one thing that deserves special mention here is the horrible segfault bug that was NEVER RESOLVED.
I don’t have all the details here, except to say that Apache used to occasionally stutter and die, logging something about a “segfault” over and over again with every request until you manually restarted it. This lead to some really stupid downtime, especially when it happened right after I fell asleep for 8 hours (this happened quite a few times.)
I asked our host about it and did some Googling and it turned out to be some kind of Apache bug on Solaris. I tried to learn how to use Sun’s Dtrace (a kernel debugger thing that later made it into OS X!) to figure out what was breaking and why, and I tried to time it to see how long we went between failures, but honestly it was anything from 2 minutes to 7 days and it just became too much.
I developed a shitty interim solution, which was to code this crappy shell script that checks if the log has “segfault” in its last few lines. If it does, it restarts Apache, and if it doesn’t, it just moves on. I set this up to run every 5 minutes and it kept the server going for a long time.
Our host said that it was a problem that was fixed with the newer version of their software, and that I’d have to migrate to a new VPS to get the benefit of that. I put this off for months, as I had final exams going on, but eventually I set aside the two or three days required to move all the crap across to the new server.
And then the problem came back! And then I put my script back into action. And.. that’s the current state of affairs.
Hardly a satisfying story, just a jumble of annoying boring nerd crap. But that’s what this bug has been. Stupid and pointless and seemingly unavoidable. I think I’ll leave the hacky little reboot script running forevermore.
This was a project where an existing feature was completely remade. For a long time we had this, a kind of dopey little intro page that was first drafted up on paper by Veronica.
I’m sure it doesn’t seem like much, but the process of writing this page took something like a full month. I did a few neat things that required a bit of time—I used some of the typographic stylings I had developed for the figurine packaging, I recomposed the comics from their original scans, I even reorganised the panels of this page—but mostly it was a process of cutting everything down to the bare minimum so it could appeal to those coming in from banner ads.
Has it worked? I dunno. I haven’t done enough testing! But I sure was happy with how it came out. I think it’s very readable and does a good job of getting you interested in BCB—that is, if you’re the type of person who would get interested in BCB.
The reason the new reader page took a month had a lot to do with the time I spent on work that never made the page.
There were lots of extra words, of course, which I mentioned were cut out. But the biggest thing that caused me consternation was my desire to include something shooting down the idea that BCB was a furry comic. You see, as I anticipated this page to be the first stop of a sceptical ad clicker, I thought it necessary to say “but don’t worry, this isn’t a weird fetishy comic for furries” in some less confronting way.
I had the idea of doing it iconographically, with two lines:
[Mike and Lucy] = [Bugs Bunny, Mickey]
[Daisy] ≠ [the “Bawwwww” furry]
Which I think is a good use of pop-and-internet culture but ultimately I gave up on it or anything like it. Same as my stillborn idea of getting Veronica to draw a BCB character in the Robin Hood “yiff in hell furfags” pose for use on the homepage.
I think it’s just too hard to deny being something without being offensive and coming off as looking super defensive. In retrospect, it totally would have been embarrassing.
So there’s nothing about furries anymore. Except for this, largely a Popcorn invention:
I think that’s the best way to put it. And even this answer might be toned down in a year or two.
At this point we’re getting out of the technobabble woods. This section is for the grab bag of things I did to make the site generally appealing to new readers.
For a long time we used the short URL bcb.im, but I was always desperate for bcb.cat (for obvious reasons.) After reading and reading and deciding that we really aren’t supposed to use bcb.cat for a non-Catalan site, I went ahead and bought it anyway.
It’s.. still working! But I suppose it might stop working one day. For now it’s very cute.
With the help of Sammybeany I now have custom Apple Mail stationery and Mailchimp templates for both Bittersweet Club International and site mail generally. The automated systems of the site use these as well.
These designs have hopefully projected a more professional image to our customers!
I did some work sprucing up our Amazon page and learning how to do the special things. I uploaded images of the book (which, sadly, show as “customer images” with my name attached… kinda weird, but oh well!) and wrestled for a long time with the “Search Inside The Book” program.
Now it’s all working, and combined with some lovely reader reviews I think the page looks great.
BY THE WAY: One frustration with being a Fulfilment by Amazon seller is the way they automatically send out a “review this seller” form. A lot of customers see that they bought the book from Bittersweet Candy Bowl and write a lovely review… but hte review only goes to our Amazon seller account and not the product itself! I wish some of the 40 or 50 reviews we’ve got as a seller could go to the book, but hey. We’re not doing too bad.
Since leaderboards pay badly, I figured after the first 50 pages a reader looks at, I’d serve them this static “ad” instead of it:
An ad which will eventually change to this after 100 pages:
I dunno if it works, but hey. If you’re loving the comic at that point, maybe you’d spend money. Or maybe it plants a seed in your mind that you’ll go to the store afterwards… I dunno.
I hope it’s not too annoying.
We had this ancient Quizilla quiz that Veronica made back when she had time to do such things. But Quizilla is kinda old (and Teen Nick bought it? Wow) and quizzes are for Facebook now so I made this forum thread asking for a Facebook-enabled fanmade update and a whole bunch of people made quizzes, some good and some bad…
What I wanted was something that would slowly spread around newsfeeds for years in that kind of insidious way things spread on Facebook. But after the quizzes I saw in the thread, I don’t think a quiz will achieve that. Maybe if I was a Facebook fan page maven who was constantly feeding stuff to a huge group that constantly feeds me likes, but eh. That’s not me.
I stopped being an ass and purchased the fonts we use on the site. Among others, VAG Rounded and Freight Sans Pro Semibold (for headings and the rainbow navbar). I’m now in the habit of paying foundries for their hard work and am building a lovely little collection on MyFonts. I think what I lack in visual design ability is offset by my passion (and good eye?) for pretty typefaces.
I would like to have unified the login systems behind BCI, Candybooru and the forum but it’s an INSANE amount of work. I feel bad for it, but this is just not going to happen. Ever.
I considered a home-made auction script for the site as a means of selling off collectible, one-off stuff, but it seems like a lot of work. Besides, we can just do future Kickstarters or something to get rid of our prototypes and other crap!
I thought about using Amazon affiliate links after reading about how a lot of people—even webcomic artists—make money using them, but I eventually gave up on the idea. Veronica doesn’t write blog posts recommending coffee machines and DVDs and neither do I!
I think I’ll draw the line here. There’s more to do but it's all relatively mundane — retina display support, a place for a newsletter signup form, some tweaks to our new “CAPTCHA” mechanism. I feel secure… at least until I start work on Not Enough Rings again.
P.S. For those interested, this post was created after I spent some time combing through archives of my todo lists, turning it into plaintext and using unix tools to combine files and erase duplicates. The full list is here for your perusal, but it’s more interesting for its length than its content.
