The Shmuplations "Re-Launch" is Live!

Greetings patrons! If you've checked out the new Masayasu Yamamoto translation, you've probably had a chance to see the re-design, but I wanted to formally introduce it here and give you a walkthrough of some of the new features and changes. But first, a small look back at how it all got started...

When I first created shmuplations.com in 2013, it had been 10 years since I last touched anything html related, so I enlisted a close friend to create the site for me (check out the comparatively tiny size of the archive back then!). In 2013 it was not advisable, but still possible to ignore mobile and responsive stylings, and in my quest for simplicity that's exactly what I did. Alas, as the years went by, I realized how poor of a choice this was, but because I had relied on someone else to create the site for me (for free, I'll add), I didn't know how to fix anything. What was worse, was that my friend's custom theme couldn't really be updated without breaking things, and this opened the site up to various security vulnerabilities that I've struggled with over the last 5 years. 

The straw that broke the camel's back occurred in October, when I was out hiking with my friend at Mt. Mitake. I checked my phone to find the site was down yet again, and after the now-familiar panic subsided, I declared to my friend that I'd had enough of this. I was going to start from scratch and re-build shmuplations entirely from zero myself...

And here we are! After a crash-course month spent acquainting myself with modern CSS and enough Javascript/PHP to work around Wordpress' peculiarities, I'd locked in a new design, and since mid-December I've been non-stop grinding on converting all the interviews over. Now let's take a closer look at some of the changes.

Readability

The basic design philosophy for shmuplations has always been non-commercial and archival in nature, and I hope the new site reflects that. I've chosen a larger text-size and an uncluttered, distraction-free display without the (imo annoying) visual noise and clutter of sidebar content/advertising. Also, now that we're using modern CSS for image alignment, there should be no (or very few) widows and orphans. The footnotes, as well, have improved visibility and are finally readable on mobile now.

Mobile and Multi-Format Responsive

The biggest and long-awaited change is mobile responsiveness. The previous site's mobile functionality can best be described as "non-existent", and if you'd previously persevered through the shortcomings to read the interviews on mobile devices, I commend your efforts. Now everything flows correctly and I personally prefer the mobile reading experience in some ways. I hope you'll now enjoy reading shmuplations on your train commute home, on the couch, or anywhere the fancy strikes.

I wanted to mention tablet functionality too: I tested the site extensively on an ipad Pro in both portrait and landscape mode, and made some fine-tunings for those formats as well. I didn't have access to very small/old tablets, though, so if you find anything weird there let me know. A good size tablet is my favorite way to read these interviews because it most closely approximates a book. 

The New Archive and Index

The other big change is the interview archive itself, and how you search through it. The previous site used tablepress to quickly and efficiently display all the meta info associated with an interview: developer names, companies, the games, and the date. The new method still relies on a search bar for quickly filtering interviews, but that meta info is now accessible by hovering or clicking on the header image.

The interview archive always had two somewhat-opposing goals: one, to be a convenient tool for researchers, academics, and anyone doing "serious" gaming history work. The other goal was to spark excitement in readers--especially new readers--to explore the massive library and all that lies within. Tablepress worked well for the first utilitarian goal, but failed pretty badly for the second. Moreover, it really only displayed well on full-width desktop resolutions, and was completely unusable on mobile. As I soon learned, this is a pretty fundamental design problem when using tables. So after much futile wrangling, I set out to design something new.

In fact, I'd say ~30-40% of my design time was spent iterating on a good archive layout; though a very modest website in most ways, shmuplations has some unique features that made it incompatible with out-of-the-box plugin solutions. Ultimately, the insight I had for this re-design was that most people doing actual research already have a somewhat targeted idea of what they're looking for. So I think the new method is a good compromise between research and recreational reading. An improvement I may add in the future would be the ability to sort by date, which is the one piece of functionality that was removed. 

By the way, the current archive is "linked" in a clever way to the tag system of wordpress; if you click on one of the tag names beneath the header intro (next to the social media icons), it will take you to the archive and automatically filter for interviews based on this term. It's simple, but believe it or not, making it all work together took some neat php/javascript/css hackery that my novitiate-designer self is rather proud of, haha.

Standardizing the Older Interviews

The basic template for most shmuplations interviews wasn't decided until mid-2015, so about 1/3 of the interviews were what I would call "non-conforming"--no header images, weird text layouts, outdated links, typos galore... well, for the re-launch I've revisited and brought all the old content up-to-date! For some interviews there's no major changes, but others have new images and extra content, so I hope you have fun re-visiting and seeing what's new!

Future Improvements, Feedback, Etc

I think that covers the big changes. On the backend, now that we're using a carefully tuned and customized WYSIWG editor (Gutenberg), the editing, proofreading, and formatting has become soooo much easier. For readers and patrons, this means I can spend more time on the translation itself, and frankly this invisible improvement is one of the hugest things for me personally. The old design had become so outdated that I was honestly spending half my time fussing with margins, padding etc, and it got to be a major drag on my desire to work.

On that note, I wasn't expecting this when I started, but despite how much effort it took, diving back into all these interviews and seeing the whole grand scope of what we've accomplished these last 10 years with shmuplations has re-kindled my commitment to continue this work (which now feels less like "work" and more like the fun it was always supposed to be!)

So I want to again thank all the patrons who have supported us over the years. When I said "what we've accomplished", I meant that to include you too: without your support shmuplations never would have grown into the unique resource that it's become today. I called the site a treasure trove when I first created it, but thanks to you, I think it's truly lived up to those words.

If you have any questions about the layout or suggestions for improvement let me know! I will be adjusting and improving things as we go (the date sorting, in particular, I plan to add), and now that I'm fully in control of site maintenance, such updates should take weeks instead of years. Thanks again and have fun re-discovering all the Japanese gaming history at shmuplations!