How On-line Gaming Industry Delivers Mobile Web Sites

What can web professionals learn from Black Friday and on-line gaming?

Black Friday 2014, followed by Cyber Monday were two of the busiest high street and on-line consumer retail events of the year. Reports of customers left disappointed by high profile web site failures filled the media. Such events highlight how customer's expectations have changed. Consumers expect the digital services which are now an essential part of life to be as uninterrupted and continuously available as the physical world irrespective of other activity. Nowhere are such failures more apparent on a daily basis than when the web is accessed from a mobile phone. Pages take too long to appear, or functionality simply doesn't work and businesses ultimately lose revenue.

Such expectations present two complex challenges to the designers and technologists tasked with delivering web sites.

1. Multi-Screen - Over 150 to 250 new web enabled devices appear on the internet every week. The variance in screen size, hardware capability and network connections presents a design and technology challenge. How do we optimally support such variety?
2. Cost of Change - the more complex a system is the harder it is to change. If complex solutions are used to address the multi-screen problem then the resulting effort to maintain and change web sites increases. What technology choices can be made to make long term maintenance both risk free, and technically simple?

Using two on-line gaming web sites I explore some of the techniques used and results achieved.

Lessons from On-Line Gaming

On-line gaming companies providing sports betting services to slots, roulette and blackjack exist entirely in the digital world. Every second they're offline, or delaying engaging with a customer costs money. By continuously delivering new games, and enhanced experiences they drive customer retention. It is for this easy to understand business goals I've highlighted the techniques they use in this article.

A quick analysis of just two leading providers, Betsson and Kerching's home pages using Google Chrome emulating a Google Nexus 4 on a 750kps network connection produced the following results.

By contrast the same web page accessed without emulation or network constraints produced the following results.

These sites, like almost every other gaming web site, offer a variety of page layouts differentiated by domain name, the so called m dot approach. In most cases the user is free to select a layout. However a default layout is selected during the first request based on information obtained server side about the device. The difference in the mobile phone layout and the desktop layout is vast. Not only is the user interface design very different, the technologies used to deliver the page vary.

Five Design Choices

Here are just a few of the differences between the two different device layouts used by each web site.

1. Responsive Web Design (RWD) is not used exclusively. The performance benefit associated with multiple layouts trumps the design mantra of “One web”, where a single web page must be delivered to all devices irrespective of its capabilities and the web server is treated as a simple file server. Different layouts targeted at different devices reduces complexity associated with change management and regression testing. More on this later.
2. Reduced requests - Reducing the number of requests for individual assets needed to construct a web page is as important as reducing the overall page weight. In general a mobile web browser will not be able to process as many simultaneous requests as its big screen counterpart increasing the time taken to complete assembling the page as fewer activities can occur at the same time.
3. Simple technology - The mobile device layouts do not use a popular library called jQuery. They do however make frugal use of highly optimised Javascript targeting very specific functionality. This approach may require more thought by the designer, but reduces overall complexity improving performance.



4. Promoting the right app - For on-line gaming the web site is just one portal into their digital universes. For frequent customers, at the moment a more engaging experience can be delivered via a native app. Rather than promoting all the available apps for iPhone, Windows Phone, and Android, Betsson promote the App specific to the current platform. This simple but effective approach maximises the use of screen space without irritating the user.
5. No frills - Smooth scrolling accordion menus have been sacrificed for performance. The main menu appears instantly. Clearly a design choice has been made to enable customers to get to what they want quickly without tinsel animation effects getting in the way.

Beyond the Home Page

Web site's performance should be measured beyond the initial experience of the home page. Further analysis using Chrome emulation of Betsson's deposit process, probably the most important in revenue terms, highlights just how lightweight a 3 step payment process can be made on the small screen of a mobile phone.

The total amount of data consumed by the entire process is 391kb! That's less than the entire home page on mobile. The majority of the data comes from the images of credit cards.

Tools

Using a Wi-Fi router joined to a fast broadband internet connection is never going to replicate real world usage conditions. But these are the precise conditions used by many web site creators when testing their creations. Fortunately Google Chrome version 39 provides all the tools needed for anyone to test a web site on many different devices and network conditions.

In version 39 Google moved Developer Tools for mobile to the front and centre of the developer experience. Right clicking on a web page and selecting “Inspect element” instantly loads the developer tools. The top right hand corner of the browser window provides the controls needed to quickly emulate both a range of different devices and network conditions. As a result it's now easier than ever for non-technical people to understand how a web site will perform on different devices.

A dashboard of relevant information is also displayed to the right or at the bottom of the web page. Selecting the Network tab displays information about the assets used to construct the most recently displayed web page.

Other browsers provide similar features, but Google are leading the way in making the tools simple to use and access. In fact they're so easy to use every web site owner reading this on a desktop/laptop computer should stop reading, fire up their site, right click and select “Inspect element” to play with these tools. Once done return!

Google recognise that making web sites more mobile friendly benefits the entire web and helping those making web sites achieve this goal simply is to their, and everyone else's benefit.

Continuous Improvement

Any serious web site will use an analytics product to understand how users navigate the web site. By far the most popular product is Google Analytics (GA). GA uses device detection to work out if a device is considered a mobile, tablet or desktop. It's now easier than ever to enhance this information with specific screen size information and more detailed information about the device and environment. I've recently written a how-to article for smashing magazine on this very subject.

Making use of such analytics tools to understand where improvements can be made and then measure the results of changes, particular by device type and screen size, is now an essential aspect of continuously improving a web site.

Rapid Change

Once a change has been identified the ability to make the change quickly and cost effectively becomes the next objective. Where uptime and performance is critical such changes need to be made with minimal risk. Segmenting the web site into different layouts targeting different device categories reduces the complexity of regression testing when compared to an entirely RWD approach. Consider a change which is required to better support smartphone screen sizes. In the RWD world such a change would need to be regression tested against all other common platforms to ensure there were no unforeseen consequences. As the number of permutations continues to increase such regression testing will either need to be skipped increasing the risk of a poor customer experience, or undertaken reducing time to market.

Summary – Benefits of the Server Side Approach

Businesses that want to see the sort of performance improvements and results seen by on-line gaming sites need to use different layouts for different device types in addition to responsive web design. The advantages are reduced time to make changes, a better and faster user experience on mobile devices, greater understanding of user flow and ultimately greater return on investment. The on-line gaming industry hasn't ignored this, and if you run a serious web site neither should you.

Why 51Degrees?

I founded 51Degrees to provide THE world's fastest and most accurate tools to optimise web sites on mobile following the formation of a digital marketing business. 51Degrees delivers for over 1.5 million web sites. Our clients continuously tell us that the man months effort saved by using our tools more than make up for their modest cost. After all most businesses will spend more on coffee for their web people than on our tools. This is even before the benefits of improved user experience and performance are considered.

Now that you're considering using the techniques shown request an evaluation and read our device detection selection criteria guide to learn why we're the best solution for your business.

Read device detection selection criteria

Opera Update - 9th December 2014

I've also checked for tools in other browsers and see that Opera version 26 has a similar feature. To activate the UI controls which select devices and network conditions the little smartphone icon to the left of Elements needs to be selected after Developer Tools -> Web Inspector is selected from the main menu.

Read more about Black Friday