Use screen size to your advantage
Introduction
The way we pay for software and services has evolved over the past decade. One-off payments are becoming less common and slowly but surely are giving way to subscriptions, in-app purchases and advertising. This change is accompanied by a shift from desktop and laptop computers to mobile devices of various sizes from wrist watch gadgets to smartphones and tablets that can be utilised as desktop devices.
In-App purchases and subscriptions are usually regulated by the platform vendor or service provider. Ads on the other hand are platform-independent and are often not thought through by developers or advertising agencies. The same ad can look very different on various devices and could potentially influence visitor's decision to stay on the web page or to leave.
In this article we will look at how the presentation of ads can be improved across various platforms and how 51Degrees device detection can be instrumental in increasing user engagement and increase click-through rate.
Why bother?
Mobile devices are physically smaller and screen space is a scarce resource. Even screens of larger size require a special layout with as few blocks of unrelated content as possible, in order to ensure best user experience and customer retention rate. With inappropriate positioning and size that is likely to annoy visitors the same goes for advertising. Banners and Blocks of Links. Ultimately this will force them off your website for good. On the opposite end we have advertising links that could potentially be hard to click as user would have to zoom in to click the right one.
Benefits of persistant ads for SmartPhones
One persistent ad on any page designed for a SmartPhone works better than multiple ads that can be scrolled past. This way, only a small fraction of the valuable screen space is used for an ad and the ad is always in sight as it can not be scrolled past.
| Without persistent Ad | With persistent Ad |
|---|---|
 |
 |
What about other devices?
SmartPhones are the smallest devices actively used for Web access. There are of course devices with a larger physical screens such as Tablets. While they have more space, these devices are still mobile. Some tablets are only marginally larger than the largest SmartPhones on the market which makes it desireable to serve ads of different formats for speciffic screen sizes.
Tablets are generally broken down in to 3 categories: Small (7 - 8.3 inches), Medium (8.9 to 10.1) and Large (Over 10.1 inches). Serving ads of the right size and positioned correctly is key to maximizing customer engagement.
Knowing the diagonal screen size in inches is equally important to the designer and an ad network company. Designers would be able to incorporate ads of the correct size and location for each size range. Ad network companies need to know the screen size to supply ads of the right size.
Example
Following is an example in PHP that changes content presentation based on the ScreenInchesDiagonalRounded property, detected by 51Degrees device detection. For the purpose of this demo we assume that we have 3 ranges of devices: 0 - 6 inches are considered to be SmartPhones; 6 - 10 are considered to be Tablets; 10 and above are considered to be desktops and laptops.
- For SmartPhones a persistent ad is displayed. It is always at the top of the page while the content can easily be scrolled through.
- For Tablets a large ad is displayed between navigation menu and logo with extra ads inserted in to content.
- For other devices, such as desktop computers or laptops a regular, conventional design is displayed.
First, we need to identify the diagonal size of the device in inches:
<?php
include '../core/51Degrees.php';
$screenInchesRounded = $_51d['ScreenInchesDiagonalRounded'];
if ($screenInchesRounded > 0 && $screenInchesRounded <= 6)
{
//Screen size of 6 inches or less. But more than 0;
$cssFile = 'SmartPhone.css';
}
else if ($screenInchesRounded > 6 && $screenInchesRounded <= 10)
{
//Screen size between 6 inches and 10 inches.
$cssFile = 'Tablet.css';
}
else
{
//Everything else. Larger than 10 inches.
$cssFile = 'LargeScreen.css';
}
?>
Now we insert the relevant CSS file as follows:
<link rel="stylesheet" type="text/css" href="<?=$cssFile;?>">
Now print the relevant layout based on the CSS file
<?php
//Print page layout based on screen inches diagonal size.
switch($cssFile)
{
case "SmartPhone.css": print_for_smart_phone();
break;
case "Tablet.css": print_for_tablet();
break;
case "LargeScreen.css": print_for_large_screen();
break;
default: print_for_large_screen;
}
?>
The result is displayed below. I have used a SmartPhone to access the website and clearly it is easier to view the content when a persistent ad is displayed at the top of the page. Naturally in the real world the composition and content will be much more complicated and significantly more screen sizes need to be considered along with device orientation and other parameters. However; this demo shows how the correct design can benefit the relevant device type and how ads can be encorporated without damage to usability. What's more, this website is live (see link below) and you can see it for yourself. Try accessing it from your phone or tablet and then switch between Desktop, Tablet and SmartPhone views.
| SmartPhone | Tablet | Desktop |
|---|---|---|
|
|
|