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.

The E Club’s New Look

The E Club was long overdue for a new look. Now, it’s got one. I have redesigned everything on The E Club (except for the main menu) so that the site looks seamless and even more awesome than before.

In this redesign, The E Club Ad Creator (a page with a form to create ads, not The E Club Advertising), PrintMedia, the ENews subscription box on what is now the Quick Polls page, The E Shop (not the two sites, just the page on The E Club), and more were phased out to simplify and beautify the experience.

I hope you enjoy the new look.

A new way to search at The E Club

Throughout almost all of The E Club’s history, The E Club itself almost always had a search functionality that allowed users to search The E Club and later The E Club Family. It started out as FreeFind, and The E Club later switched to Google Custom Search, which The E Club Family still uses today.

When The E Club moved to WebStarts, the Custom Search engine was still there, but there was one problem that the original The E Club didn’t have: The Custom Search boxes were in different places on each page. This probably caused much confusion.

Today, I am pleased to say there’s a new way to search at The E Club – on most of the pages (except the home page and this page), there are Custom Search boxes above the main menu of The E Club, just below the banner at the top of the page. We are also still tweaking the search engine so that it can reach its full potential as the official search engine of The E Club Family.

Make sure to look around The E Club and see the new search boxes!

The E Club’s Project

The E Club Family Websites are changing. A while ago, The E Club became more unified, with every page having the same background image, and all of its content on the background of The E Club Green, as I like to call it. Plus, as a remembrance of theeclub.moogo.com, I inverted the text and background color, making the text as close to the dark blue of the old The E Club as I could, and made the background image a shade of green, similar to the color the old The E Club used for its regular text, or body. Also, back in September 2011, I redid The E Club Social Beta and made it The E Club+, eventually making the URL of The E Club+ a subdomain of The E Club, plus.theeclub.info, strangely exactly 6 months after it was created.

I’ve also done many other redesigns to The E Club Family Websites in the distant past and recently. These redesigns, as The E Club World states, are part of a big project to improve The E Club Family technologically, and to enhance their designs and make them united.

I started this project with a couple minor redesigns and changes, including shaving a minute off The E Club’s loading time and using CSS to enhance The E Club’s design. I moved on to The E Club Lite and The E Club Ad Server, making both of them subdomains of The E Club and making them look alike. I then went to The E Club World and The E Club Arcade, where I simplified and debugged The E Club World and its design, while adding new games to and redesigning The E Club Arcade. I did some work improving The E Club Wiki. Next, I did a lot of work on the other websites, such as MeTube and The E Shop. Recently, I worked on The E Club Forums. Now, I am working on The E Club+. Thanks to some strange twist of luck, The E Club+’s partner, Wall.fm, allowed it to have a custom subdomain of The E Club, plus.theeclub.info. Thanks to Google, I managed to pull off some cool effects with hovering over and clicking on text input areas, making the border dark blue when clicked on. I also modified the current buttons (thanks for that too, Google), and added new ones that used enhanced CSS3 to look professional. The E Club is also optimized to work on mobile devices and tablets, especially the iPad.

The point of this project, which I’m now calling Project Redesign, is to provide visitors and members of The E Club Family Websites a simple and united experience. Instead of grabbing any technology I could lay my hands on (like I used to), I take what I need for The E Club’s success. Uniting almost all of The E Club Family Websites under the domain of theeclub.info can allow visitors and members to think of The E Club Family Websites as one “The E Club” instead of “The E Club Family Websites under about 10 different subdomains.” We also think that simplicity is one of the keys to great websites, so I am discontinuing some of The E Club’s projects and products (such as Search-O-Matic and the Mario Arcade on this site) to create a non-complex and unified experience for everyone.

I am still working on the redesigns on The E Club Family Websites (mostly on The E Club+), and I hope you enjoy them!