Updates and feeback for Gamer Corner Guides

If you’ve played Final Fantasy All The Bravest, you are probably aware it does not need a guide.  The entire strategy of the game can be summed up as “rub the screen a lot.”  That said, I still find the game strangely fun, and I managed to unlock everything in the game*.  Since half the fun is looking at the sprites and flavor text, I figured a guide was in order.  It is actually useful to locate rare enemies and their drops, but I can hardly justify a guide just for that.  Really, the guide exists because it was very easy to make.

*At present, the guide only covers the things included with the $3.99 price of the game, and none of the DLC.  There is really no justification for $47 worth of FFATB DLC.  I mean, it has no gameplay!  That said, I am an idiot and a sucker and if (when?) I give in and hand Square Enix my money, I will put up the premium information as well.  So you don’t have to!

As a web developer with really large monitors, the fact that most websites are limited to 1000px wide has always bothered me.  I understand why this is, and my websites are no exceptions, but it does seem like a waste.  I wanted to do something useful with that extra space, but since a lot of people (read: people with iPads) don’t have it, it had to be something nonessential.  To that end, I borrowed the concept from the card comparison tool to create the reference column.

If you have enough space (you’ll need about 1350px across, so most notebooks should qualify), a new column will automatically be created on the right side of every page.  This column starts off blank, but is quickly populated with cards for everything linked to on that page.  So far this is really just an alternate form of the existing card hover feature, although it is possible to leave a card up for general viewing.  The fun really starts when you look at the card you wants in the reference column, though.  Every time you do, all the cards it references are added to the list, and so on down the line.  Any time you click a link on a card in the column, it will scroll right to that card, allowing you to make cross-references quickly that once required several page views.  Sure, it’s not great for my ad revenue, but it certainly is convenient.

The biggest problem with this feature was determining how it should be used.  Initially, I had the idea that every link on a page should scroll the reference column.  If you actually wanted to visit the page, you could either click the card in the column, or click the link a second time.  At times when you don’t want to leave the page, this was fine, but on guide menu pages, it was a user interface nightmare.  Worst of all, some pages – like standard tables – could really go either way.

To solve all these issues, I added a checkbox that toggles the column’s behavior.  It is located at the bottom of the column, next to the convenient help link.  The checkbox that causes all links to affect the reference column is usually off.  The only pages where it is on by default are card pages and walkthrough pages (which so far are only found in the FF1 and Golvellius guides).  These are the pages where you are most likely going to be cross-referencing many different cards.  You can also turn it on if you want to use it on table pages.  Maybe you want to compare a particular item or monster with others from the table – now that’s easier than ever.  It’s like the card comparison tool is built into every page.

I suspect I will be tweaking this functionality a lot in the near future, so any feedback would be appreciated.  I think this is a very cool feature, but only if people bother to use it.  I want to do anything I can to encourage that.

The page controls of guide tables never had the best design.  On a desktop with a mouse wheel, they worked just fine, but on basically any other interface, they were a hassle.  Well, no more!  Instead of having pages, all tables now load all data.  This is done sequentially, so as to prevent pages from taking any longer to load.  In most cases, the loading shouldn’t even be visible.

I’ve also removed the now-outdates iOS scrolling alternative, so native scrolling can be used on all mobile devices.  In essence, all of these changes should improve the site UI immensely for anyone using an Apple product.

There is still one outstanding issue I’d like to solve: I want the table headers to be fixed, so they are visible regardless of how far you scroll.  This change is likely to be made in the near future, and should make tables as convenient as I can think to make them.

On Friday, I downloaded Windows 8.  Not long after starting to mess with it, I realized that its simplified display theme could potentially work really well for my guides.  I experimented with some visual changes, and immediately decided, for better or for worse, to dive in and revise the theme.  It’s pretty much all I’ve done all weekend, and I’m very proud of the result.  Of course, I have no ability to remain objective, so hopefully it doesn’t actually suck.

The visual change isn’t really the most significant improvement to the site.  I’ve simplified a few features that were overly complicated and interfering with site development – such as the static table columns and the FFXIII chapter select.  The biggest revision, however, was with cards.

I liked the original card style, but it really just seemed too busy.  Two different textures and colors, plus an arbitrary type icon, will do that.  The new style removes a lot of the unnecessarily complicated distractions.  The card header is now a solid color, which represents the type of the card – weapons are a dark red across all guides, armor is dark blue, and so on.  The actual card color is a standard grey in most cases, though I’ve added colors to the FF (NES) and Golvellius guides, and will be adding more.  These colors should be fairly obvious – for instance, in FF1 they generally call out elemental affinities.  The idea is to give an immediate visual cue to important information.

There’s still plenty more to do, but I wanted to get this up before the hurricane hit.  It’s a cool change, and I just needed to show it off before the world comes to a screeching halt or whatever.