Your Path to Everywhere

Click less, get more

STRATZ
STRATZ
6 min readFeb 12, 2022

--

A before E, except after C

2.87 billion matches. 77.5 million players. 424 custom icons. 132 individual website pages with sometimes millions of variations. Only 1 Blukai.

There are many ways to measure STRATZ, but the size of our offerings will always be limited by their accessibility. If you never discover what we have, then we might as well have never had it. That’s why our team, time and again, invests in ensuring that the ever-growing content available on STRATZ.com is as easy to find, understand, analyze, and customize as possible.

We think today marks another huge advancement in that initiative. So without further ado…

Smaller. Lighter. Faster. 🎉

Wow, what a phenomenal introduction from our own Fantôme, the origin of all things pretty! Let’s take a closer look at some of the major improvements!

1. The background colour now fills the full space

80% < 100%

The STRATZ page headers have been a beacon of light, serving the content that lies beneath with their dynamic array of colours built from those pages’ avatars. Today, they shine even brighter!

The glass backgrounds and radiant graphic blurs that have been a trademark of our design for the last couple years is even more resplendent in these new page headers. Behold, the colour now spreads to the farthest reaches of the header-sphere. But in all seriousness, as the leading stats provider of one of the worlds most colourful esports, we respect and appreciate good use of colour.

Fun Fact: you can customize the appearance of your STRATZ profile by changing your avatar in Steam — it has a major impact on the look of your page!

2. Navigation has been simplified at the top

The distant past and the present as one

There are several layers of controls on STRATZ. While this is indicative of the power contained within your product, it can result in important content, like navigation, becoming less distinct than it should be.

As part of our continued efforts to improve ease of use and our organization of interactive content, we’ve moved all primary navigation to the top of page headers. With everything brought together, the power of the new navigation can shine through without competing for attention.

3. Subpages expand out when you need them, and collapse away when you don’t

da-na na-na na-na na-na, na-na na-na na-na na-na, SUB-PAGE!

Being able to see your navigation options is obviously really important. However, when you have deep layers of navigation, it becomes increasingly difficult to negotiate how to make the contents of each layer accessible without overwhelming the interface.

We’ve take several steps to improve our approach to this challenge, which includes our new nested subpages, as seen above and demonstrated in the video. Now, once you’ve navigated to a subpage (for example, Heroes / Meta / Trends), the navigation opens horizontally to reveal all associated subpages. This way, we are able to remove an entire row from the interface, saving space and decluttering your window into awesomeness.

4. Hovering over pages offers quick navigation.

With built-in GPS for your entire route!

When you were a kid, perhaps you thought that the hover navigation of the future would look a lot like a skateboard. Wrong!

However disappointing that reality might be, we’re happy for the opportunity to introduce you to your future of hover navigation at STRATZ. We’ve heard from several of you that one of the things that took some of the joy out of your daily rounds in the ol’ STRATZ resulted from how many clicks it required for you to get where you wanted to go, and you really just wanted to get to one place, but you couldn’t because you just kept having to go on and on through an endless labyrinth of maze-like passageways into the unknown and beyond. *takes breath*

Not anymore.

Beginning today, you can get to literally anywhere on STRATZ.com with a single chain of navigation! That’s because your new hover menus open up without a single click, and chain together seamlessly to expand your options to the farthest reaches! New subpage descriptions have been added to serve as little insights on the road to your destination, giving you a little bit better of an understanding of where each path will take you.

You can still click nav elements if you want, and they’ll work just like they used to.

If you want to go deeper still, we’ve embedded new quick-searches into many of the hover menus. These little magic-makers are context sensitive to the area of the site you’re exploring, giving you quick access to either heroes, players, matches, or leagues. Once you’ve completed a search, the hover menu updates to show you the new navigation options available to you.

But we didn’t stop there…

5. Navigate between similar pages quickly with subarea controls.

Gotta catch ’em all!

What do you call things that share a skeleton, but have different bodies? We call them subareas (‘cause interdimensional cross-sections was taken).

For your purposes, subareas (sub-areas) are a brand new way to move between areas of STRATZ (again like Heroes, Players, Matches, and Leagues), without having to change your position within that area.

So for example, imagine you’re checking out Zeus’s laning performance, and then you think to yourself, “Zeus bad, I want Omni” (we won’t judge your thought processes). But then you think to yourself “wait, is Omni actually a better laner than Zeus?” Well, now you can use your subarea dropdown to find out, by quickly switching to Omniknight’s laning page!

Subarea navigation even maintains your filters and selections!

This is a major QoL enhancement for comparing content across pages, and introduces an entirely new way to skip around the site. These subareas are context sensitive, just like the embedded quick searches in the new hover menus, and additionally contain easy access to quick links from your search history [for logged in users that turn on their search history].

There’s a ton more little details contained within this release, and as always, there’s more to do. Next week, we’ll be polishing the experience further, beginning with fixing some last-minute issues that emerged on mobile. We’ll then put the finishing touches on the last piece of the new page headers, which will add even more to this update! After that, we’ve got a massive list of all-new areas, pages, subpages, features, and whatsits knocking on the door that we can’t wait to reveal as we return to our regular release cycle!

Enjoy keeping up with what’s happening at STRATZ? Follow us on Medium, Twitter, or Facebook to get notifications of our latest Supdates! If you want to get more involved, join us on Discord!

Did you miss our last Supdate? Behold, the entirely new STRATZ typography system!

See you soon!

Eric Phy

--

--