Countdown to Milestone 1

We're getting closer to the release of Milestone 1, so it's time to start showing you some of what we've been up to.

In this first blog post we have quite a few things to cover, but going forward I will try to write shorter and more frequent blog posts, focusing on smaller parts in each.

It's not just a new look

As you know, Milestone 1 is all about getting serious about implementing a responsive design.

However, responsive design is only one part of the overall project, so it's not just about the look. It's a comprehensive renovation of the whole game.

To explain what this means, I will have to show you a rough overview of which components are in play every time you load a page on the site.

If we were only updating the appearance, the work would only affect Styles and partly Views. What we are doing instead includes the following:

• Model: is changed sparingly
• Jobs: is changed sparingly
• Controllers: is changed to some extent
• Views: is scrapped 100% and rebuilt from scratch
• Styles: is scrapped 100% and rebuilt from scratch
• Scripts: is scrapped 100% and rebuilt from scratch

So we're not just sticking some new wallpaper on top of the old.

This is equivalent to tearing down the house, leaving only the foundation and load-bearing walls. Doors, windows, roof, floor, pipes, wires, and fixtures are being scrapped and replaced with brand new ones.

...some of the pictures on the walls (icons, graphics) are allowed to move back in, though, at least for now.

If you think that sounds like a huge job, you're right.

Is it worth the trouble?

I know very well that there are many who are impatient and will question whether it is worth spending this much time on a complete renovation, and feel that all we ever do is mess around with tech.

But I am 100% convinced that it is both necessary and worth it!

First of all, we experience time and time again how much the old code gets in the way, every time we want to do something new and exciting.

For instance, I've talked several times before about the fantastic new features it would give us, each time we've put in the effort to upgrade to newer versions of our framework, after which it has turned out that we weren't able to utilize them 100%, because the site has so much old code that trips us up.

Secondly, Virtual Manager is over 20 years old, and I intend for it to run for another 20 years (at least!). In that perspective, the time we spend on renovation now is not excessive.

When a game has been developed for over 20 years, with countless changes, in different programming languages ​​and frameworks, and many different ways of doing things, it's only natural that a lot of dust has collected in the corners, and that, for example, the design is a bit of a patchwork.

With this complete renovation, we will deal with that, once and for all, but it requires a lot of things to be scrapped and rebuilt.

But, the good news is that most of the "boring" technical work that is not visible to you should now be over. Recently, we have been working exclusively on responsive design.

What have we done since the last time?

• We have upgraded ALL the frameworks, libraries and server software we use to the latest versions.
• We have built a new technical skeleton from scratch, which is 100% free of old code in the components I mentioned earlier.
• We have put together a design system that is a dream to work with.
• We have a server ready for testing, which is set up and configured with all of the above.
• We have tackled several of the fundamental issues, in e.g. the overall layout, navigation, typography, colors, etc., which had to be in place before we could even start redesigning a single page.
• We have redesigned a number of pages already.

Layout, colors, fonts and icons

But now let's finally take a look at the elements of the new design.

It's important to point out that the focus is initially on functionality. It needs to first be usable, and the responsiveness to different screen sizes must work before we start spending too much time tinkering with the very small details of the design.

The first example shows the layout on large screens:

On large screens we have stuck close to the same overall structure as in the old one, even though everything has been rewritten from scratch.

Some of the key differences are:

• A new font stack that only uses fonts found on people's devices, and where possible uses the operating system's own default font. This means that the font you see in my screenshots, taken on a PC with Ubuntu, will not be the same as what you will see, for example, on a PC with Windows or a Mac.
• A new look for the page background and top bar without textures.
• Most sizes defined in rem instead of pixels. 1rem is equal to 1x your browser's default font size, which is mostly 16 pixels. When we use rem, this means that everything on the site automatically adjusts if you have, for example, set a larger or smaller default font size.
• A significantly wider content area. The maximum width of the area that includes the page navigation and the central content is now 80rem (equivalent to 1280 pixels at a font size of 16px). Additionally, the width of the area is now dynamic, so it adapts fluidly down to the smallest mobile screen sizes. In the old design, the content area is fixed at 960 pixels, no more, no less.
• On high pixel density screens, we use a vector version (SVG) of the Vman logo. On "normal" screens, the vector version doesn't look good when squeezed down to such a small size that it can fit in the top bar, but on high pixel density screens, such as mobile, we can use the SVG, which is ultra-sharp. My desktop screenshots are taken on a "normal" screen. Try to notice the difference in the logo when you see the mobile screenshots.

For now, we're reusing the old icons. It's possible that we'll try to get a new set of icons sometime in the future.

Navigation

Adapting the navigation to mobile turned out to be more complex than you might think. Let's look at the simple part first:

Looks pretty simple, right? On large screens we have the 7 links at the top (Clubhouse, Teams, Training, Market, Community, World, Help), which make up the main navigation.

Each of the 7 links leads to a main section, which is divided into sub-topics. For example, Market has the sub-topics Search, Buying, Selling and Miscellaneous.

So to create a mobile navigation, we put the main sections in a menu that can be opened with a click on the hamburger icon. The menu contains all 7 main sections, including their subtopics. You can then open and close each of the main sections, and quickly navigate to where you want. Of course, we make sure that the relevant main section is always expanded by default.

From now on, we will call the 7 main sections and their subtopics the global navigation.

The problem arises when you go to one of the pages that is not directly under the global navigation. These are the pages that are specific to a single entity, such as a player, a club, a league, a cup, etc. These pages also have page navigation on the site today, but logically it is completely different from the global navigation. We can call it the local navigation.

On mobile, it wouldn't work if we tried to cram, for example, a specific player's navigation links into the drop-down menu when you look at him. It simply doesn't do if we were to change the contents of a menu while it's closed. It would be confusing, and hard to discover what options you have when you look at a player. We had to find another solution, but I'll tell you about that in the next blog post.

On large screens, we've chosen to keep the current navigation structure as is, as it actually works just fine.

Login page

Here's the first redesigned page I'm going to reveal to you, and we're keeping it as simple as possible: the Login page.

There's not much to explain here, but it gives you a hint about the look we're going for.

Unfortunately, we don't have any gifted designers among us, so as programmers, we have to fumble around a bit. For the redesign, we are using TailwindCSS (of course the new version 4) as a basis, and on top of that daisyUI (version 5 beta), which contains a collection of ready-made components. This should ensure that there is a certain coherence and that the different parts of the pages fit together.

In the next blog post

From now on, I expect to write blog posts a bit more frequently up to the release of Milestone 1, and I will try to keep them fairly short. In the next post, you can look forward to these things:

• Focus on performance in the new version.
• How do we handle local navigation?
• Presentation of the pages "Clubhouse -> Overview" and "Club Profile".
• Dark Mode!
• Notification panel and account menu.