---

Greased 1.17.2 - 'Nav Boxes' Example and Reference

November 30th, 2015

Hopefully all of you understood what I was talking about in the previous email; if not, that's ok. I was deliberately brief so that I wouldn't have to repeat myself and as an effort to keep as much of this information together as possible.

You may have noticed that some of our most reviewed series have their own special portion of the sidebar dedicated to them, for instance Mario Party, Castlevania, and Sonic the Hedgehog articles (most of them, anyway) have a unique box in the right sidebar with links to articles in the same series. As practical as this system looks, it does present a couple of problems. First of all, it doesn't really stand out. It ends up blending in with what would normally be in the sidebars, and attempts to distinguish them have made the boxes a little too distinct, to the point where they appear out of place. Secondly, as WordPress and all of our various plugins continue to update, it becomes more and more difficult to manage these menus in a meaningful and timely manner. I won't get into the specifics, but suffice to say we've known we needed a navigational alternative for similar articles for quite some time. Well, we believe that time is here...

...But we need your help!

---

So what do we want you to do? We want you to make meaningful, organized lists of big franchises, particularly those for which we have several reviews for. Don't worry, this is nothing technical, we just want to make sure we get it right, and what better way to do that than to draw on your expertise? Basically what we want is a detailed list of games in a franchise grouped in a meaningful way so that I can turn it into a "nav box" like what I've done here for Mario's sports games:

But like I said, you guys don't have to do anything nearly so complicated. Here's what I need from you and in what form so I can turn it into what you see above. Oh and by the way, Mario is covered, but if any of you out there are Mario experts, let me know and I'll run my finished product by you before taking it live.

---

Part 1: Pick a Franchise!

This part's pretty easy - pick a franchise that you're either a) knowledgeable about, or b) that Nerd Bacon already has lots and lots of reviews of. We'd like to work our way down from NB's most reviewed franchises, but you don't have to go count up articles or anything. Currently I am tackling Mario (including all sub-series and spinoffs) as well as the Castlevania series. If you're stuck, here are some suggestions (in no particular order):

• Assassin's Creed
• Donkey Kong
• Final Fantasy
• Kirby
• The Legend of Zelda
• Mega Man
• Mortal Kombat
• Pokemon
• Sonic the Hedgehog
• Star Wars
• Super Monkey Ball
• Teenage Mutant Ninja Turtles

This list is not exhaustive or exclusive. There are other large-ish series that aren't well-represented on the site just yet, but that we will need "lists" for at some point. Eventually we'd like to have "lists" of all major franchises "on standby," even if they aren't being immediately used on the site, though we also want to be practical when possible and go ahead and list ones that we already have articles for.

---

Part 2: List Every Game!

At this point we want you to list all games in said franchise. How inclusive is "all"? This does not include titles released outside North America; if someone ever reviews such a title within a series we will make adjustments as necessary. Digital-only titles can also be problematic. Obviously there are some series which are primarily released digitally, such as Angry Birds. Normally though, if we're talking about a franchise composed mostly of physical releases, digital releases can be excluded. This is probably something we'll need to revisit in the future, but for now you can leave them out of if you wish. If you do include them, make sure to let us know which ones are digital-only releases.

It also isn't necessary to list all releases for all platforms when it comes to an identical game. For example, if you were tackling the Mortal Kombat series, once you get to "MK2" there's no reason to list MK2 for each of the several platforms it was released for (which was a damn lot). Again, this is something we'll add and modify on an as-needed basis. However, in cases where a port saw significant changes - like Mortal Kombat: Tournament Edition for the GBA - we do want it listed.

Getting confusing yet? Use your best judgement and just remember that it's always better to list too many than too few. Most franchises won't be so complicated. In rare cases, like that of Mario, it be absolutely necessary to broadly divide the games into distinct sub-series, i.e. Mario Kart games, the Mario Party series, the loose grouping of "other" Mario sports titles, and so on. Hopefully this won't be a major problem and you won't have too much more to deal with than a couple of divisions or less.

---

Part 3: Group the Games Meaningfully

This won't always be necessary, especially with smaller or more straightforward franchises, but with those with all sorts of spinoffs and secondary series and crossovers it's going to be a little tougher. This process will mainly rest on your best judgement, common sense, and popular consensus. It's ok to have a "Misc." or "Other" category for those few games that just don't fit anywhere else.

Once you've grouped the games into meaningful subdivisions, list them chronologically within those divisions. Let's look at a simple case like Mario Party. The only real distinction is between those released on consoles and those released on handhelds. So if you were tackling Mario Party, here's the kind of list I'd hope to get from you:

Mario Party

• Main Series/Console Games
• Mario Party
• Mario Party 2
• Mario Party 3
• Mario Party 4
• Mario Party 5
• Mario Party 6
• Mario Party 7
• Mario Party 8
• Mario Party 9
• Mario Party 10
• Handheld Games
• Mario Party-e
• Mario Party Advance
• Mario Party DS
• Mario Party: Island Tour

First I grouped them into meaningful divisions, then listed the games chronologically within those divisions. Easy as that. If you need to further divide groups into other groups (like if I had to further break down the "Main Series" group into 3 divisions for some reason) that's cool too - remember, 1) best judgement, 2) common sense, and 3) general consensus.

---

Part 4: Cross-referencing with Existing Reviews

For this step, you'll need to do a little poking around the site using the "Search" bar. Even if you're covering a franchise with a special sidebar on the right, do not rely solely on these links! It's fine to use them, but make sure you search through the site for any further games in the franchise as well, because those sidebar menus may not accurately represent all of the reviews we have available. (In fact I'm certain that the current Zelda menu does not.)

If you want to make my life really easy, you can provide the URL (or URLs if there is more than one review of the same game) of each relevant article on your list. However, if you're crunched for time, just make sure to note next to each game how many reviews we have. In most cases this will be (1), but we do have quite a few games that multiple members have written about.

With this information, I'll be able to turn your list into a useful nav box that we can stick at the bottom of applicable articles. Now you may be asking yourself, "why do I need to list games that we don't have reviews for?" What we're hoping to achieve is a nav box with a complete listing of games that we can then go and fill in with links as they become available. This will make it easier to keep these boxes updated. In the case of Mario Party, I've personally reviewed all 14 games, so all 14 titles will be linked. If you sent me the list in the example above along with the URLs of the reviews (or at the very least, a count of how many reviews NB has for each game, I'd turn it into this:

Here's an example of what a box for Mario's various RPGs might look like, including several games we haven't yet reviewed. Including all games from the onset will make things easier as we maintain and update these nav boxes.

Your thoughtful lists will help me churn out boxes like these much quicker - you guys provide the expertise and research, and I churn out all the technical details to make it happen. As the project progresses, relevant articles will be inundated with noticeable nav boxes that'll easily take readers to similar articles. We should have some nav boxes up within the near future (I have an earlier version up on all Mario Party articles already) and during our January Clean-Up we should be able to implement even more. With the help of a plugin, what we're going to do is write and manage the "code" for each box in a singular location and then use a shortcode to insert it where it needs to go so that virtually anyone helping us will be able to contribute to the effort. But wait! There's one more cool trick to show off...

---

One Last Neat Trick

Realistically we probably won't have many (if any?) series reaching the complexity of Mario, but if we do - or if we wanted to include menus/nav boxes from a similar and/or crossover series, I developed a pretty nifty way to do this without crowding the bottom of the screen with menus. Using wildly de-styled lists and the collapsible lists content that you'll be seeing in Issue 17.1, I've made clickable-expandable versions of these menus.

Let's say a reader landed on a review of Super Mario RPG. Now there's really no reason to have an uber-complicated nav box at the bottom with links to every reviewed Mario game; a small nav box with the RPG titles should be sufficient. However, we can create small, expandable nav boxes for anyone interested in exploring other pieces of the Mario Universe. Take a look at the example below. You'll see the full version of the "Mario RPG" nav box and then single bars with titles. Click on 'em and watch the menus expand!

With enough time and assistance, we can drastically increase the interconnectivity of our articles - perhaps even create small hub pages for the franchises at some point (something we've discussed several times). So help us out and start banging out those lists of games! Again, you don't have to do anything technical, just make sure we have comprehensive and well-organized lists of game series. We want to try to keep the divisions into sub-groups as simple as possible, but complex structures are not outside of our grasp. Just as a quick example, here's how intricate we can make these nav boxes if need be.

Now that's a hell of a breakdown, but it is possible if the situation calls for it.

For those interested in tables like this from an HTML/CSS perspective, I should point out that complex structures like the one above are possible in one of 2 ways. Liberal use of colspan and rowspan will merge cells when needed, all you'll need to do is calculate the maximum number of rows and columns beforehand. The other method involves creating tables within tables. It's a little trickier and a more delicate coding process, but in some ways I found it more intuitive than constantly merging cells. As for the differences, with the way this is set up there was only one. I have the dark teal boxes set to a width of 15%. When using colspan and rowspan, these are always 15% of the total width (550px). When using tables within tables, it takes only 15% of the current table, so it's 15% of whatever the larger table's width is minus 15% for the first dark teal boxes. This trend continues as you move further "within" the table, giving the boxes a slightly more proportionate appearance.

However, there is a noteworthy reason why using colspan and rowspan can ultimately make the job easier. Due to the continual doubling of borders when using tables within tables, it's necessary to account for these by defining td classes with either no right border, no bottom border, or both, depending on where exactly you are in the table. The logic behind defining them is simple and easy to understand, but their application can get a little confusing as the tables nest further and further. Keeping track of the individual cells isn't too bad, but one must also account for the cell housing the inner table as well - and that's where things get tricky. It's easy to make oversights and difficult to trace back where the error started. I know I've been dropping a lot of HTML knowledge you guys' way lately, so if any of you are interested in this aspect, let me know and I'll provide you with the source HTML and CSS. Bear in mind that the actual CSS used on Nerd Bacon proper is slightly different since I have to "undo" some of our theme's presets.

---

Well I think that covers it - don't forget that you don't have to do any of the hard and complicated stuff! Just give me a list, divvy it up appropriately, and make sure the games are listed chronologically within each division. I'll take care of the rest and we'll slowly start putting these in place, even moreso as the January clean up begins!

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com