• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

How the On-line Gaming Industry Delivers Mobile Web Sites Everyday

Published on Monday, December 1, 2014

How the On-line Gaming Industry Delivers Mobile Web Sites Everyday

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.

Typical Timeout Page
Typical Timeout Page Experienced on Black Friday

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.

Mobile Home PagePage WeightRequestsLoad Time at 750 kps
Kerching235kb493.31 seconds
Betsson412kb284.58 seconds
Key metrics for web site home page when accessed via a Google Nexus 4 on 2nd December 2014

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

Home PagePage WeightRequestsUn-throttled Load Time
Kerching1.1mb811.1 seconds
Betsson1.8mb8311.52 seconds
Key metrics for web site home page when accessed using Chrome on 2nd December 2014

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. Betsson Android Promotion at Top of Page
    Android App Download Promotion
  5. 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.
  6. 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.

PagePage WeightRequestsLoad Time at 750 kbps
Select Card 169kb165.29 seconds
Enter Card Details141kb114.64 seconds
Receipt81kb113.21 seconds
Key metrics for Betsson's payment process when accessed via a Google Nexus 4 on 2nd December 2014

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.

Betsson Credit Card Selection Page Betsson Payment Confirmation Page
Betssson Mobile Payment Pages

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.

Chrome Developer Tools for Mobile
Chrome 39 Developer Tools for Mobile

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.

Chrome Network Information for Betsson Mobile
Chrome 39 Network Activity Information for Betsson Mobile Home 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.

Start Free Evaluation Now Read 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.

Wikipedia Mobile Page Displayed in Opera
Opera 26 displaying mobile optimised wikipedia page

Read more about Black Friday

Comments (0)
James Rosewell
>

James Rosewell

Other posts by James Rosewell
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE