Hello, Popfan here!
As you may or may not be aware, I’d been working on redesigning the website for the second time. Today, I was finally able to get everything wrapped up and publish the update, and I couldn’t be happier with the end result.
To commemorate this milestone, and in order for me to properly convey everything that went into making, maintaining and upgrading the website, I’d like to take a trip down memory lane and showcase said website’s transformation over the years.
The Prototype (2014)
This initial version was never actually anywhere close to being completed, and it would be a good bit over a year until anything actually went online. There’s not much I can say about it, either. My inexperience with web design was readily apparent as it was all purely HTML and a little bit of CSS, really shoddily made, and full of pretentious flavor text.
You’re hardly missing much.
Original Release, “Version 1.0” (2015)
On the 17th of July 2015, this is more or less the way we (there were more than just me at the time) graced the internet with our presence.
Much of the actual page content itself was inspired by ZUN’s website. The language buttons were huge, garish icons that weren’t even the same size (to say nothing of the odd design choice of diagonally splitting the English icon to show both Union Jack and Star-Spangled Banner), the navigation menu was pretty much a case of recycling old EB assets, and the page background image was a last-minute creation just to have some kind of patterned background.
For the longest time, there was hardly anything worth having a website for, either, as evidenced by the games counter at the top of the page (we really thought we’d be churning out one Touhou fangame after the other). All we really did have at the time was a playable demo of MajiKana.
If I gotta be honest, probably the biggest thing the site had going for it at the time was its bilinguality. I was really proud of myself for having figured out how to do it with some PHP, without needing separate pages for each language. This version lasted about two years, until it was replaced by…
“Version 2.0” (2017)
Starting from the 2nd of June 2017, this is what the website looked like. Say goodbye to the games counter and hello to an overall more streamlined, clean design. The overall layout hasn’t changed, though I did move the Twitter widget to the Contact page. A link to the Index page and a clickable icon were added to the navigation bar, too, as previously the only way to return to the Index page was via a link at the bottom of each of the other pages.
Wanting to get rid of the ugly background pattern somehow but still not knowing what other kind of pattern would work nicely, I ended up settling on a gradient instead. This is also kind of where the “TGA color palette” started becoming more of a thing, giving the website (and anything else TGA-related, really) a more coherent look.
Padding around the various page elements was also increased in order to make the design less claustrophobic, and of course the language buttons were redone, too (I opted for the American flag in the end).
Backend-wise, this was also the beginning of me becoming more competent with PHP and CSS, with feats including storing the ever-growing list of events in an array and dynamically building a table with as many rows as there were entries (or only the latest six). At one point I also tried creating a mobile version, but it was buggy as hell and a pain to maintain alongside the main site, so I removed it again about 10 months later.
Over time, as creative output diversified, I also ended up adding extra pages and making other small design changes here and there, bringing us to…
“Version 2.5” (2020)
With the extra pages added, the navigation menu grew, too, of course. Since I didn’t want the increased size to make it taller than most displays’ height, however, I recreated all the images at about 80% their original size.
The other change was me wanting to spice up the subheaders (like the “Latest News” one in the above screenshot), slowly moving away from using images for text. It was really tedious having to make new ones or edit existing ones; I don’t know what I was thinking.
All in all, though, version 2.x lasted by far the longest out of all versions up until this point, at just over four years and two months.
Intermission: Remember this thing?
Up until today, if you typed gensakudan.com into your browser’s address bar, this was where you would end up. Obviously the idea for such a landing page was stolen blatantly from ZUN’s own website (but then again, so was the team name). It really is one of the most Web-1.0-y things you could imagine. I loved it at the time, though; thought it was unique and a nice homage.
I suppose you could also take this blog post as a retrospective of how my tastes have changed over the years.
Anyway, it’s gone as of today, and typing the URL into your address bar now will instead bring you to…
“Version 3.0” (2021)
Oh my god everything’s different what the hell—
So yeah, uhhh… Turns out that four years is quite a lot of time to be thinking about what you really want out of your website. For starters, I didn’t want it to look like total crap if viewed on a mobile device, so I studied up on what web designers do nowadays and came across the term “Responsive Web Design”, or RWD for short. Basically, design your website in such a way that elements dynamically shift and resize in order to look nice no matter what size your window or display may be.
While we were at it, though, I also wanted a complete do-over, not just a glow-up of something that was fundamentally flawed since day one. To wit: during the planning phase, I spent several days agonizing over whether to keep the vertical navigation menu or swap it out for a horizontal bar. A lot of my design choices in the past essentially boiled down to me trying to go against the flow no matter what and bring back whatever I could of the past, regardless of how flawed or archaic it was for present-day sensibilities.
Because I’ve come to think more about why things work the way they do now, I eventually decided that a horizontal menu was the way to go, also largely because a vertical menu would have required a lot more effort and a lot more Javascript coding to set up, and I unfortunately put all my skill points into PHP…
’course, in thinking about what does and doesn’t work, what is and isn’t necessary, I also ended up trimming away a lot of fat. The Links page was pretty useless, as it was dedicated to literally three 200×40 banners with short (and ultimately pointless) descriptions for each. It got cut down and incorporated into the side column (which, in true RWD fashion, disappears if the display width is too narrow). The Gallery page was useless, too, as I literally only used it for a few YouTube videos, so it also got the axe.
The Goods page, meanwhile, technically still exists, but was repurposed into the new Music page, showcasing my released albums as well as other TGA- or me-related music. I was gonna make a custom audio player for these, but… again… effort. Reviving my Soundcloud account and using the embeds from that ended up being the more attractive solution.
The astute among you may also notice that the URLs look a lot cleaner now. No more gensakudan.com/index.php?lang=0&cookiecheck=1&otherpointlessvariable=why. In fact, “URL beautification” is another thing I looked into. Normally the variables wouldn’t have bothered me much, but I found that people kept copying them along with the rest of the address (including the cookiecheck one, ugh), so that was the impetus for that. Now everything’s neat and orderly at all times, and the website doesn’t even need to store cookies anymore because the site language is right there in the URL, naturally incorporated.
And don’t worry, I did make sure that pre-3.0 links don’t break. In fact, a lot of the final touches were to ensure support for legacy links.
Regarding new graphics, I updated the language buttons again, of course (and something compelled me to just go with the Union Jack instead), but the banners for other people to link back to this website were also looking like a right mess, so I ended up making all-new ones. Admittedly, though, the old ones did have kind of a particular charm to them, so I may or may not bring them back as an alternative… and the new ones haven’t entirely grown on me yet, either.
What’s in store for the future? Well, one thing I’d been wanting to add was Dark Mode. I’ve briefly looked into it, but have been kinda put off by the difficulty of it. Lightbox galleries for the game screenshots would also be neat. And of course there’s always the option of adding more languages for the website. I could do a German translation no problem, I just don’t know if I see the point in it. Maybe Chinese…?
That’s where we currently stand, though. Special thanks to Maribel Hearn for giving me tips and emotional support during the coding process, as well as Masataka Touji for his willingness to proofread my Japanese translations. And of course thanks to you, too, if you’ve read through the whole post up to this point.
Now that I’ve got this squared away, I can recommence work on the v1.20 update for COL. No ETA on when that’ll be ready yet, unfortunately.
Gensakudan Blog ― 懐古世紀日誌 