The E Club, redefined

The E Club has evolved since its creation in 2009, but its design stayed more-or-less the same: a large banner (sometimes animated) at the top of the page, the menu and content below that, and the footer. That layout worked for the older versions of The E Club – the content didn’t take up the whole width of the page since the site was only optimized for bigger screens, and there was lots of space to display images in the background and at the top of the page.

When The E Club 3.0 went live, The E Club was rebuilt from the ground up to be faster, simpler, more secure, and most notably, more responsive. The design of The E Club 2.0 was mostly intact, but it clashed with The E Club’s new responsiveness in that the top bar banner wasn’t well-optimized for larger displays (there was a bunch of whitespace around it), and there was a disconnect between the desktop and smartphone versions (the top bar banner wasn’t shown on the smartphone version, and the content used the full width of smaller screens but not bigger ones). So over the last month, I’ve been working to create a brand-new experience that merges the best of mobile and desktop, utilizes the latest web technologies, and even adds some content-level improvements and refinements.

This is The E Club’s biggest redesign in its eight-year history.

A rethought design

The E Club’s new aesthetic is best represented by its redesigned homepage. The first thing you’ll notice is the complete lack of clutter and complexity; only the welcome message that’s been there since The E Club’s creation, along with the Mario and Star Trek GIFs, is initially visible. No large top bar banner pushing some of it below the fold, and everything else – the menu, the search bar, even additional content – has been reorganized and puts the content first. And did I mention that The E Club has an all-new typeface?

That’s right – after years of working to make Open Sans and Roboto the official fonts of The E Club Family, it’s time for a change. The E Club’s redesign incorporates a font called Lato, a unique contemporary of Open Sans and Roboto. With the new font also comes greater incorporation of its various font weights: bold for headings, regular for subheadings and body text, and light for contrast across the design. With one font instead of two, The E Club can become more expressive, more focused, and more intuitive than ever before.

Going back to the homepage, where did the rest of the content go? The intuitive next step after noticing the absence of content other than the welcome message is to scroll down, as you would on every previous version of The E Club. And that still works! The homepage utilizes a parallax effect to display the content in a whole new way, in the form of “cards”, that scroll “over” the welcome message as if you weren’t scrolling down the page at all. The oft-cluttered homepage of old has been dramatically simplified (and it looks cool), and yet the content is still essentially the same as before! This new design is also being utilized on the What’s New page as well as on the E’s Blog post permalinks (like this one’s).

A lot around the content has changed, too. As The E Club Family’s desktop and mobile versions have begun to merge into one, unified experience (The E Club+ being the prime example until now), the best of The E Club on mobile devices has come to the desktop as well: the content now takes up the full width of the page, the bulky top bar banner has been replaced with the mobile-style header bar, and the (redesigned) menu and search bar have been tucked away into the menu icon at the top left corner. But since there’s much more usable space on larger screens, NavLogo has been moved from a link in the footer to a prominent spot on the right side of the header, so you can navigate The E Club Family in one click.

Dark Mode

The E Club+’s Dark Mode launched about a year ago, and ever since then a darker color scheme was being planned for The E Club – and now it’s live. The E Club’s new Dark Mode, inspired by that of The E Club+, makes it easier for people to view the content at night or in dark environments, and its almost all-black background makes it look stunning on many modern devices. It also introduces a new version of The E Club’s logo designed for dark environments.

But The E Club’s Dark Mode goes one step further than The E Club+’s – while on The E Club+ the page would reload when going into Dark Mode (and back), The E Club’s doesn’t, so you can switch between the two instantaneously. Just click on the moon icon in the header bar and try it for yourself.

A redefined experience

The E Club’s redesign doesn’t only go skin-deep; many of its pages and content are being rethought for an even better experience. The most prominent of these (so far) is the Videos page. When The E Club 3.0 went live last year, it became the archive for The E Club’s monthly Mario music. Now, having been renamed Music, the page has been redesigned to better serve that purpose. The music (in the form of a video) now takes up the entire width of the screen, creating a sort of cover art display, and the list of months is now more compact and is at the bottom of the screen. It’s a fully immersive design visually and auditorily.

The Photo Album hasn’t seen much progress since The E Club 3.0 went live; it was a few thumbnails of photos from the original The E Club that couldn’t be enlarged, a far cry from the original The E Club’s Photo Album with full-size images and dedicated pages for each of them. Today, that all changes – the photos are larger now, and when you click on one, it shows up in its own overlay with a caption, sharing tools (each one technically has its own URL now), a fullscreen mode, and the ability to move/swipe between photos. Only four photos are online at the moment, but there are many more to come.


The E Club has always been rapidly changing, and that will continue for the foreseeable future. But today, The E Club takes another massive step closer towards a unified experience on all screens; modern first-party technologies (like how the Mario theme that plays when you click on the logo in the header bar now picks up where it left off when you go to another page); a professional and intuitive design; and all-new content. The reimagining of The E Club is just beginning.

Re-Introducing The E Club Secure!

Back in 2010 when The E Club had just moved from Moogo to WebStarts, I touted a new security feature that I called The E Club Secure: right-clicks were disabled, so no one could copy information from the site. But due to the lack of necessity for the feature, The E Club Secure was quietly phased out upon The E Club 3.0’s rollout.

Today, The E Club Secure takes on a new form: The E Club now serves its visitors with cutting-edge TLS 1.2 encryption. In other words, The E Club 3.0 is now HTTPS by default on all modern browsers. Though some older browsers (such as IE8 and below on Windows XP and dated Android browsers) don’t support this new feature, visitors from those browsers will fall back to the original HTTP version of the site and can easily view the secure version from a modern browser. So now, visitors can enjoy The E Club more safely and securely than ever before. (Though we’re trying to bring encryption to the rest of The E Club Family, there is no guarantee that we can due to technical limitations.)

And The E Club 3.0 still isn’t standing still – make sure to stay tuned for new features!

The Next Chapter

Today, August 11, 2016, is not an ordinary day in the life of The E Club. While it may seem so on the surface, an incredibly important torch was just passed: The E Club 2.0, hosted by WebStarts, has closed down, leaving The E Club 3.0 (what you’re on right now) as the one true flagship of The E Club Family.

The E Club 2.0 was created with WebStarts on September 17, 2010 to replace its own predecessor, The E Club 1.0, hosted on Moogo. WebStarts caught my eye because of its unique drag-and-drop editor; at the time, I had little knowledge of HTML, CSS, or JavaScript, so I had to rely on such a website builder to maintain the site. For quite some time, WebStarts was a great opportunity for The E Club to grow – with its flexible editor, a domain name, more disk space, and a variety of built-in features, I was able to expand The E Club and begin to unify The E Club Family, starting with the websites’ subdomains of The E Club and new designs. But as my web design experience accumulated and time went on, I started to realize that WebStarts could not be the host of The E Club’s future: its HTML editor messed up other elements of the page when I edited the code, it didn’t exactly support new technologies I tried to implement, its blog tool was a glorified text editor, I had little control over the site’s structure, there was no way to make the site responsive (everything was absolutely positioned on the page), and modifying the design through CSS was incredibly tedious. And WebStarts’ problems were outside of the editor as well: prices rose for the same features, it charged $30/year for the domain that was formerly free, it wanted to charge for things as simple as submitting the site to Google, and when it promised a responsive design it didn’t deliver (I would’ve had to make a new site in order to access it). In short, it was time for a change. And because of seven years of working on The E Club, I had the capability to do what I could do with a drag-and-drop editor with just plain HTML, CSS, and JavaScript. So, on June 8, 2016, The E Club 3.0 on FastComet took the place of 2.0, and the rest is history.

Even though The E Club 3.0 replaced its predecessor at this domain (theeclub.info) on June 8, I kept The E Club 2.0 around for a little while on another URL to ensure the smoothest possible transition to the new version. Today, The E Club 2.0 has closed down, ending its era of stagnation on all fronts and firmly beginning The E Club 3.0’s era of advancement on all fronts. But make no mistake – these are not two separate sites; rather, they are versions of the same thing. And The E Club 3.0, the best version yet, ensures that The E Club Family will lead a successful future.

Welcome to The E Club 3.0!

I am E, founder and CEO of The E Club Family, and this is my personal blog on The E Club! For information pertaining to The E Club Family as a whole as well as more Mario, Star Trek, and science information, check out The E Club World.

You are here at a very special time in The E Club’s history; the site you are now on is the result of seven years of devotion to bringing the best Mario, Star Trek, and science information to the web in addition to incredible technological advancements. But before I get to that, here’s how we got to today.

The E Club was originally founded on June 8, 2009 with a now-defunct website creator called Moogo; though it looked far different than it does today, that version of The E Club and today’s version share the same purpose: being my personal site about Mario, Star Trek, and science. Over the next year or so, I continued to expand The E Club’s content, even creating two additional sites – The E Club Lite and The E Club World – in the process to host even more content. The E Club Lite was also created with Moogo (it is on Weebly right now), and The E Club World has always been on Blogger (though its design has evolved since its creation).

But in September 2010, the unthinkable occurred: Moogo was going to shut down all of its free sites, The E Club and The E Club Lite among them, a month later (in order to give priority to their expensive premium packages). So I set out to move the content of the two affected sites; I moved The E Club to WebStarts on September 17 and The E Club Lite to Weebly not long after. (Today, I often refer to The E Club hosted on WebStarts as The E Club 2.0 as it was the second major update to the site, the first being its creation in 2009.)

As the years went on, so did The E Club’s mission. New sites were being added to the growing chain now known as The E Club Family, bringing new innovations and content to the web such as Mario Flash games without annoying ads, revolutionary social networking, and more. But there was an underlying problem – as the rest of The E Club Family, led by The E Club+, began to sport new technological and aesthetic innovations, The E Club itself could not keep up. This was because WebStarts, The E Club 2.0’s host, has a drag-and-drop editor rather than a text-based one, and it often rendered the advanced technologies I tried to implement unusable. Plus, it made applying new styles a tedious process.

For years, I was able to overlook this issue, since it was WebStarts that basically saved The E Club. But the list of issues with the service began to grow over time: prices went up while the features remained the same, and when they promised a “new editor” with new features such as a responsive design, I would have had to create a new website (rather than having the original upgraded) to access it. So in December 2015, I made the decision that would alter The E Club’s history forever – with the new techniques I learned from developing the rest of The E Club Family, I could easily replicate what a drag-and-drop editor could do while having full control of the source code at the same time. I could finally release the shackles that WebStarts, who wanted to charge money for submitting sites to be indexed by Google (which can be easily done for free), had placed on The E Club. Thus, The E Club 3.0 was born.

The E Club 3.0 is the culmination of the past, present, and future of The E Club Family; it continues The E Club’s mission that it had since June 8, 2009 with new, advanced technologies that only The E Club Family of the present could offer, and its framework (which implements new techniques such as PHP templating) allows it to be totally scalable for the future. So what’s new? Check out Founder’s Letter 2016 or the What’s New page. But there are some other aspects that have changed or been created that I didn’t cover in either, so here they are:

Incredible blog innovations

My blog here on The E Club has always been an integral part of the experience; I have written about updates on The E Club as well as various Mario and Star Trek news items not posted on The E Club World, which covers more The E Club Family-related information plus Mario and Star Trek things. When The E Club moved to WebStarts, I put the Moogo site’s blog posts on a separate page and used WebStarts’ blogging tool to continue E’s Blog. But the tool was lacking in many important features – I couldn’t insert links, videos, or really anything but basic text.

Now you can see that things are far different here on The E Club 3.0; instead of a glorified text editor like before, E’s Blog now runs on WordPress! That’s right: the most popular open-source platform on the web now powers what you’re looking at right now. And I was able to seamlessly integrate it into the site, from the design to the incredible features such as search and archiving built in. Plus, I added The E Club 2.0’s blog posts to More Blog and remastered them with functional links, images, and videos.

Backwards compatibility

You may not have noticed, but the URLs of The E Club’s pages have changed since the site left WebStarts – they are simpler, and the underscores and the “.html” suffixes have been removed. The most poignant example of this change is the Quick Polls page: its URL on 2.0 was http://theeclub.info/mailinglist_and_quick_polls.html, but on 3.0 it has been simplified to just http://theeclub.info/polls. Quite the difference, isn’t it?

But an issue quickly emerged with changing all of the page URLs: search engines and many pages across The E Club Family still link to the old pages. This would cause a huge accessibility problem, so I’m happy to announce that The E Club 3.0 is backwards-compatible with its predecessor. How? Try clicking on the old link to the Quick Polls page above.

Event Calendar, reimagined

The E Club’s Event Calendar hasn’t changed at all design-wise since I first put it on the Moogo site; due to technical reasons, I could not style it to match the rest of The E Club. Today, that has changed. The Calendar now features a custom design to match the look and feel of The E Club, so it looks better than ever.

Featured Mario Music Repository

The Mario music on The E Club’s homepage has been there since the original site, but there was an issue: the music changed every month, but due to technical limitations I was never able to publicly archive past selections (it would’ve required a lot of space). The E Club 3.0 not only introduces that long-awaited repository but also repurposes another great feature, the Videos page. Thanks to a bit of JavaScript, I was able to restructure the page so that it could host both the repository and the Super Mario Galaxy soundtracks from the 2.0 version while using as few resources and being as efficient as possible.

In honor of this, we’ll be featuring some old favorites from The E Club’s past along with new selections; this month, it’s Mario Kart DS’ Waluigi Pinball theme, and next month it’s Super Mario Galaxy’s Bowser Battle theme. There’s a lot more to come, so stay tuned!

Sleeker search

With the introduction of Smart Search, The E Club brought about a new dimension of searching – the menu automatically shows only the pages that match your search as you’re typing it. But what you would see upon hitting the Enter key wasn’t so cutting-edge; the search results page was a true page of The E Club 3.0 (like ClubIt! Designer), but the design of the results hadn’t been updated in years. Today, I’m pleased to say that the search results have finally been redesigned; they now accommodate all of the latest design techniques and sport an innovative edge-to-edge design. Search is now an innovation in its own right, before and after hitting Enter.

ClubIt! Designer 2.0

The ClubIt! Designer on The E Club 2.0 was a JavaScript-powered tool I created so that people could easily put ClubIt! Buttons on their sites. However, it had to be hosted separately from the rest of The E Club’s pages since WebStarts would otherwise make the code malfunction. Now that such a technological hurdle has been overcome, ClubIt! Designer is now a true page of The E Club – and it’s been streamlined to be even faster and more efficient than before. In addition, The E Club Share has been phased out so that ClubIt! is the primary sharing platform of The E Club.


It’s an exciting time for The E Club. With blazing-fast loading times, advanced new technologies, and all kinds of incredible new features, The E Club 3.0 really is the true flagship of The E Club Family. And you can expect even more great things to come in the near future – the possibilities are limitless. So click on the top bar banner, have a look around, and enjoy the greatest version of The E Club in its seven-year history.