Rasenball – World Cup Visualization
Rasenball
- Mobile Version: https://rasenball.com/mobile.html
- Desktop Version: https://rasenball.com/index_en.html
When accessing the index.html there will be a redirect depending on the kind of device you are accessing the site with.
This article describes the concepts behind the Rasenball World Cup Match Schedule Visualization. It sketches the technological background and describes the architecture. The specifics of the desktop version and the mobile version are described in more detail in the two follow up articles
Rasenball-Design
Depending on a viewers interest, different views on the results are presented by Rasenball. The desktop version of Rasenball is organized in five different views, each of which shows information from a particular angle:
- the Matches View shows all the Matches for a specific selection,
- the Teams View shows the participating teams on a world map depending on the selection,
- the Days View shows the days on which there are games for a selection,
- the Groups View shows the current table for the groups or the current results for the knockout phase and finally
- the Venues View shows the locations of the different stadiums.
The non-flat version
The original design as shown above was influenced by a flash-based visualization for the 2010 World Cup at marca.com. We started out with a more realistic non-flat version where we used beveled elements and shadows implemented with SVG-filters. It turned out, however, that these filters caused rendering to become very slow. Although this could have been avoided by prerendering the circle and using it as a background image, we decided to built a flat alternative instead. This made the application look more modern and simplyfied the development of a mobile version.
The flat version
In the flat version we removed all SVG-filters and introduced a background instead. The basic layout of the flat version can be seen below.
Once clicked, the stadium opens. This was a design decision we made to deal with more detailed information. The necessity is particularly obvious in the group view displayed below where the groups as well as the knockout phase and the group table are visible. The corresponding view can be seen below.
The mobile View
While desktop screens offer the space for such detailed representations, mobile devices lack the necessary screen resolution. Additionally touch devices have no mouse over effects and need larger buttons to meet the user behavior. Due to the limited space, the mobile version only consists of three views: the Teams View, the Days View and the Groups View as an overview. We decided to keep the circular view in the mobile version so that the relationship of both versions becomes obvious. The following figure shows the mobile view.
The Pool Game
With growing interest in the site, one of the main feedbacks was that a pool game would be a nice add-on. Although originally intended as a visualization show case we decided to augment Rasenball to make it a fully functional pool game where people can register, create groups and bet against one another. Especially for the mobile version, this meant that we had to fit additional information into the layout. We did this by abbreviating some of the longer names to gain space for additional columns. This allowed us to display for each game the date and time, the actual result, the result guess and the number of points each player got for her bet.
Additionally we created a dashboard view for the desktop version where people can see how they performed against the other team members.
The game itself is realized using PHP. This allows a convenient installation on most web servers. This decision was made, because some of our customers asked for a personalized version of the game to use within their own company.
Supported Devices and Browsers
Rasenball heavily uses HTML5 technology for animations and layout. So all browsers without HTML5 support are obviously not supported.
Internet Explorer (Windows and Windows Phone)
Lacking HTML5 support most prominently holds for IE in versions below 9 where Rasenball will not work at all. For version 9 gradients and transitions are not implemented, so Rasenball will not look as nicely as in other browsers. Windows Phone 7 uses IE in version 9 but without custom font support, so most of the symbols in the mobile version will not show up at all. Therefore the web site will hardly be usable on Windows Phone 7 devices. Windows Phone 8 uses Internet Explorer 10 mobile but has again no full support for custom fonts. The Desktop Version of Internet Explorer is fully supported starting with version 10.
Chrome (All devices) and Safari (Webkit Browsers)
On older mobile devices with Android Chrome has some performance issues. We use CSS transitions. These are not hardware accelerated on these devices. Apart from that, Chrome works very well.
The same holds for Safari. Older iOS Devices do not support transitions as smoothely as one would expect. Starting with the iPhone 4S, transitions are supported very well.
Firefox
Just as Chrome, Firefox is supported very well, too. On the tested desktop versions, everything worked very smoothly.
Outlook
Starting out as a visualization case study for the World Cup we ended up in a more feature rich implementation than originally intended. It turned out, however, that future applications we develop will benefit from unusual navigational concepts making them more fun to use. As the mobile version can also be packaged as a mobile application using Apache Cordova / PhoneGap we can deliver mobile websites, mobile apps and websites for desktop using a single source with only different skinning. So it seems, we might finally abandon native apps in favor of HTML5, reversing the claim Mark Zuckerberg made two years ago.
If your are interested in the technical details, don’t miss the follow up article Rasenball – The Implementation.