Dota 2 Stats on Mobile
Easy access to all your stats on the go at STRATZ.com
From the very beginning, we’ve had our attention focused on the STRATZ desktop experience. We knew this would be where the majority of our users spend their time, and that continues to be true, with over 80% of our traffic this year coming from a laptop or desktop. However, during the same time period, our mobile user count has had the highest rate of growth of any medium. Also, it’s common for players to have their first STRATZ experience on their phone, especially when they use links they find on social media.
Today’s release is centered around the mobile experience. Every page on STRATZ.com has been impacted, from the app bar on the top of the site, the page and subpage navigation under that, and almost every single stats table. We’ve always been committed to making the entire STRATZ experience accessible regardless of how you choose to interact with it, and with our updates today, we think the mobile experience is simpler, more accessible, faster, and more inviting than ever before.
Up first on the list of changes is the appbar at the top of the mobile site, which now includes three simple parts. There’s a menu on the left side that contains search, navigation, and settings. In the middle you’ll find the STRATZ logo, which serves as a link to the homepage. And on the right side, there’s a user icon which prompts you to login, then transforms into your avatar that links to your player profile once you’ve done so. Let see it in action.
Next up are page and subpage navigations. Before today, we had a minimalist approach that showed only the name of the page [and subpage] you were on, which looked super clean, but hid the many navigational options that are often available. We found that this discouraged exploration, and so we’ve decided to provide as many visible options as possible, while adding a ... button to make it clear when there are additional pages to explore.
The most important and by far most challenging portion of today’s update involves how we handle table scrolling on mobile. In the past, we’ve kept things simple by making the desktop version of each table render out at full size on any screen, and allow the user to scroll vertically and horizontally. We like this approach because this retains perfect parity with the desktop experience that most users are familiar with, and reduces overhead from mobile-specific development.
That said, our execution left a lot to be desired. The first issue was the inability to see crucial objects in a row (usually players, heroes, guilds, etc) while scrolling horizontally. Tables of STRATZ.com are mostly 1200px wide, and used to remain so even on a screen that was only 360px wide.
The second issue was very similar to the first — vertical scrolling on a table would result in no longer being able to see the table header, thereby making column labels difficult to reference. We love being able to leverage infinite scrolling to give our users easy access to large amounts of information, but going just a few scrolls down a table could make it difficult to check on which stats you’re looking at.
In order to solve this, we’ve introduced sticky table headers that follow your vertical scrolling no matter how far you go. These sticky headers ensure you always know what you’re looking at, and allow quick access to sorting functions and other table controls. This improvement is available on desktop now as well 👍
The third issue was a UX concern. While some users find it intuitive to scroll horizontally on an overflowing table, many do not. Too often, this overflow can be misinterpreted as a UI bug, if there’s nothing indicating that it’s actually a scrollable window. We experimented with how to alleviate this confusion, and landed on a surprisingly simple solution — using a small gradient to make the side of the scrollable area fade off. This fade doesn’t interfere with data visibility, and disappears the moment horizontal scroll is initiated.
Lastly, we’ve heard a lot of feedback regarding STRATZ being “heavy” on mobile. We’ve worked hard this year to ensure that new pages are well optimized for mobile, but we’ve largely overlooked table optimizations. Things like text, graphics, meters, spacing, and other content was as large on mobile as it was on desktop. With today’s release, we’ve significantly reduced the weight on every new table, making it possible to view more data on your screen at a time.
We realize that the combination of our desktop-first approach to development and our uncompromising commitment to maintaining feature parity between desktop and mobile means there’s going to continue to be a lot to parse visually, but we hope you find that this update is successful in making your mobile experience easier and more pleasant.
We hope you love your new mobile experience, and we can’t wait to hear what you think on Discord and social!
Also this week, we’re thrilled to announce the release of the 5th language on STRATZ — 🇧🇷 Brazilian Portuguese!! Brazil has the 8th largest active STRATZ user base in the world this year, and the 6th most active this month! We now support the languages for users in all of the top 10 most active countries outside of Asia! With continued community contributions, it’s likely we’ll have this remaining gap filled very soon.
As with all of our language support outside of English, Brazilian Portuguese came from a devoted STRATZ user and contributor — Discord denizen Luka❣️ Luka first reached out to us in April to help translate STRATZ+, and has since acted as a one person army to tackle all the translations we’ve made available. Thank you Luka for making STRATZ more accessible to players in Brazil and across the world 💪 🗺
Think you’ve got what it takes to join the STRATZ team? We’re looking for a new Machine Learning Developer!
Enjoy keeping up with what’s happening at STRATZ? Follow us on Medium, Twitter, or Facebook to get a new Supdate every Friday! If you want to get more involved, join us on Discord!
Did you miss our last Supdate? Check out the distribution of ranked players in Dota, and explore the first big community-generated translations across the site!
See you next Friday!
