Over the past few months, we’ve been busy with some changes to our website that we are excited to share. The new experience will be better designed, more efficient, and useful for anyone browsing our games.
Working on the website is always fun for us, but we are just as happy to reach a state where we can set it down for awhile and focus on other projects. To commemorate this hopeful event, as something else to do always pops up, we are making this post to discuss our changes.
A Brief History of Previous Websites
The fallingninja.com website has been around since at least 2013, maybe longer. Initially, we were hosted in cPanel and went through a few stylistic iterations. The first several iterations were simple HTML landing pages. We displayed banners for all of our games, linking to a subpage for each. We began experimenting with JavaScript to render filtered views and navigation menus. We also had a blog powered by Blogger hosted in our subdomain. Later, after the development of Lair, our cloud backend, we decided to leverage more power from our server by implementing a PHP template based site. The site had all the same features as the old site and we expanded into a brief foray of making a storytelling and web comic engine, and, some rather odd and terrible comics called “Poet Memes” to fill them.
The site was a huge step forward technologically, but came tied to the overhead of renting a cPanel server.
The Transition to Jekyll
We learned about the technology called Jekyll during a job interview. As of 2023, it is perhaps better known by some as being related to the tech behind GitHub Pages than a standalone system. Jekyll is a static site generator and blog platform written in Ruby. It uses Liquid markup and YAML configs, combined with HTML templates and other common web languages like markdown, CSS, and JavaScript. The source code is then built into a static site (i.e. collection of HTML pages and resources) that can be hosted on any web server with minimal configuration. Due to its architecture in Ruby and open-source plugins, Jekyll is widely supported by many automatic pipelines and is a favorite for open-source and programming documentation. It also has built-in support for blog posts if a certain format is adhered to.
Implementing Jekyll in FallingNinja.com
Intrigued by the power of the technology, and the interest in learning a new skill, we set about to upgrade the website in 2020. As the purpose of this article is to discuss the recent changes, we will be brief in summary, but after some effort were able to have similar functionality to the old site, with a landing page, blog section, company information, and a page for each game in our library. For our purposes, it felt very good, and mainly had allowed us to move on from the old cPanel server. The following years were less active for development by Falling Ninja, with only the Xbox release for Croquet Pro 2 and a major update on Steam taking place. As a consequence, the website was also largely untouched except for some small posts to announce these pages.
Not quite a year ago, preceding the release of Ruler of the Waves 1916, and when we began working on its updates, we started taking a renewed interest in marketing, and by extension, the website. We wanted to implement a catchy, mobile-first design that highlighted the quirkiness and style of our brand while still appearing as a real and reputable game seller. We started by revisiting the color schemes – upgrading from CSS to SCSS along the way – and making a lot of improvements to responsive design and styles throughout the site. Some examples of these changes were adding mouse-over effects and having the main navigation menu auto-hide when scrolling. Central to this first phase in the redesign was the new landing page. We wanted to implement a scroll-friendly gallery of full-page screenshots of some of our games, and executed this along with some animated “pop-ins” from text and a new procedural way of generating links to app stores. Furthermore, we implemented these links onto all individual game pages as well, increasing the usefulness of our website for browsers. The Jekyll technology, particularly the combination of Liquid markup and YAML data, was instrumental in easily propagating these changes throughout the site in a procedural way.
The Second Phase
Since base Jekyll seems to be primarily favored for no-frills markdown-oriented documentation, it lacks the immediate benefits from a fully-managed site designer. While Jekyll is very extensible, and can be made to support anything feasible, the usefulness of various tools and templates available online, or the services of a web designer, cannot be understated. Many best practices, both for UI/UX, SEO, and engineering, need careful attention and it becomes quite a task that many, reasonably, may prefer to offload for better results.
Nonetheless, this author made the choice to proceed and improve the skeleton of what currently existed. The primary purpose of the site was to have some presence online, and to do so with the least overhead possible, but also in a way that was maintainable and used best practices. We felt like all of these could be achieved here, so we began a concerted effort to update the site in the midsummer of 2023.
The impetus for these changes came from renewed interest in our marketing efforts. While we are a tiny studio, and hardly have delusions of grandeur, we wanted to take whatever small, practical steps we could to be more visible in the online world. One such way was to increase organic search traffic by having a more content-full site.
In order to display in search results, the site must be known to the search engines. Thus, we set out to make our site more crawlable. The first step was to generate a sitemap – easily handled by a Jekyll plugin. We submitted this to the major search engines for indexing. We also deployed various scanners to implement better SEO-oriented practices in our website, such as proper layout of header tags and verified line items like that each image has an alt tag, all a tags are crawlable, and implementing aria-labels where required.
We reduced the loading time and impact to our page by making several updates. First, we specified width and height tags for images to improve loading CLS (cumulative layout shifts) and made other changes to the navigation bar to reduce jittering for text. These shifts may only occur for a fraction of a second, but we wanted the display to be perfectly smooth. Furthermore, we re-encoded a variety of images, fonts, screenshots, and replaced some raster graphics with vectors in order to reduce overall payload by over 90% (100 MB).
Throughout this process, we took the opportunity to add new and improved visual elements. For example, we displayed a wider variety of promotional images, more detailed backgrounds, and screenshots. We revised the palette and increased the implementation of SASS. Finally, we used CSS display attributes like flexbox and sticky to improve layout and increase responsiveness. Meanwhile, we dialed in various visual aspects like sizes of elements, scaling responsive layouts, and made lots of random touchups.
Following this initiative, we achieved baseline scores of 100 in each category - Performance, Accessibility, Best Practices, and SEO - in Google Search Console. Of course, marketing a good website is less about engineering optimizations than it is about the content and making it available, but it’s still important. Therefore, the next set of improvements would focus on super-charging the existing content with better templates.
Since our system was template based, and populated by data files, we realized that we could make some powerful changes to make the site even more efficient and modular. The main proof for this plan was achieved when we combined the game platform support system with the gallery selectors to implement a filter in the gallery section, allowing the user to sort by platform or application type.
Making Connections
Links may be dressed up a variety of ways, and used differently by human users or spiders, but in each aspect they are still the primary way the internet is traversed. Our next steps were to improve the usage of links both internally and externally.
Our navigation menu was present on each page to allow basic traversal, but we also wanted to implement meaningful context links. We had two main areas where this was done – the game pages and blog posts. A new system was implemented to associate a blog post with a particular game, and any blog posts associated as such could be accessed as well from the game page. The end result was having a featured banner for the game, with hyperlink, displaying in the sidebar on the blog posts page. This provides an option to navigate directly to the product details page for the game that is being discussed in a blog post. The second result was to have a link to some historical blog posts related to the game displaying on the game page. This improves the experience on the site by delivering more content related to the page currently being viewed, and making it available to the user.
Links on external platforms were also important to our new marketing strategy. We personally are not very active on social media, but realized this is a major way people surf the web and a way to generate backlinks. Therefore, we coded a small Twitter bot to automatically syndicate our RSS feed into the Twitterverse. Visitors to our Twitter feed will see a new tweet posted each time we update our blog. Furthermore, we updated our store listings in various app stores to link to a specific game page instead of our root homepage so there is a higher variety of external backlinks, hopefully increasing the SEO authority of our pages.
As mentioned earlier, links can be displayed in a variety of contexts, and some important ones are social media shares and search engine results. Special metadata can be used to fine tune how these results will be displayed in these contexts. We did a pass on our pages to make sure the titles and descriptions of our pages displayed unique and informative text. We also began adding images used specifically for sharing, which have a different aspect ratio. The earlier streamlining of data files came in handy when we added JSON-LD keys to the game pages, which include some specific structured data that is processed into rich data results within a search engine listing.
Content is King
There is a saying in the media business, that content is king. While the purpose of this site is only to be a simple landing page, we wanted to make some effort to increase the amount of content. Therefore, we added additional text by expanding the Contact and About pages to 150-200 words, adding more flavor text throughout the site, and making new, longer blog posts.
Along with the re-release of some of our older games, which we dubbed the Retro Remaster Extravaganza, we added new catalog entries so that they will display in our gallery and game pages. The earlier changes to the templates, displaying more promotional images, and better layouts compounded to make each of these pages better.
We also released our first web-based application that is part of the site – Deadness Board Online. This scoring utility for croquet is written as an experiment in the AngularJS framework. It demonstrates that the JavaScript generated by webpack in the AngularJS framework can be added to the Jekyll site. While the rest of the site is not running on any framework, only custom code, it is an interesting window into the possibility of what adding a framework might accomplish.
Future Goals
Although we expect to focus on other priorities for the foreseeable future, we still have some goals remaining for this website. The main goal is to provide new content. This will happen naturally, to some extent, as we keep releasing updates for our games and announcing them, and perhaps through more long-winded posts like this one. We also want to evaluate our marketing goals to go along with new content, such as identifying new keyword strategies.
Ultimately, our main goal is to make games and this website is just a poster on the gigantic wall of the internet, but it is still something we are proud of and want to make to the best of our abilities.