theme Theme customization: showing different content for mobile phones

[Tech Support]

In modern tube site designs you sometimes need to show separate content for phones in comparison to other devices with bigger screen. There are 2 ways you can achieve that: by configuring mobile subdomain (m.domain.com) and showing a separate mobile version of your site; and by using the same domain with adaptive design and by displaying separate template code for different types of devices.

This article will describe both approaches.

 

Configuring mobile subdomain

This was a popular approach in the past, but now Google doesn't recommend using it:

Quote

Google doesn't recommend Separate URLs as a site setup because it's difficult to implement and maintain. Consider Responsive Web Design instead.

We don't see any reason why someone would like to use this approach. We can imagine that there is a necessity to show different content for mobile devices (e.g. show only 1 video list with 12 items for mobile, and show several video lists with 24-36 items for desktop), however this can be perfectly implemented with the 2nd approach, when you customize template to show different blocks for different devices. And this is the recommended and easier way of handling such task.

However some customers still want to use mobile subdomain for whatever reason, so we briefly describe this configuration.

In order to configure mobile subdomain you should configure it to the same directory on filesystem, where KVS is installed and configure it to use separate .htaccess file, if you want to show different KVS pages for the same URLs on mobile and desktop. Here is example Apache configuration that highlights these aspects:

DocumentRoot /var/www/domain.com/public_html
ServerName m.domain.com
ServerAlias m.domain.com
AccessFileName .htaccess_mobile

So mobile subdomain would be using .htaccess_mobile file, while desktop subdomain would be using standard .htaccess file for URL rewrites. This gives you ability to rewrite the same URLs to separate pages in KVS, for example you can have Index and Mobile Index pages and in .htaccess_mobile you can add this rewrite to route all index traffic to Mobile Index page:

RewriteRule ^$ mobile_index.php [L,QSA]

Same for other pages if needed.

 

In order to annotate desktop and mobile URLs for Google, you should find this line in header template (Website UI -> Page Components -> include_header_general.tpl):

<link href="{{$page_canonical}}" rel="canonical"/>

and replace it like this:

<link href="{{$page_canonical|replace:"m.":""}}" rel="canonical"/>
<link rel="alternate" media="only screen and (max-width: 640px)" href="{{$page_canonical|replace:"m.":""|replace:"//www.":"//"|replace:"//`$config.project_licence_name`":"//m.`$config.project_licence_name`"}}">

 

If you want to add a redirect of phone devices to mobile, you can add the following code into /admin/include/pre_initialize_page_code.php:

// mobile subdomain redirect
include_once("$config[project_path]/admin/include/mobiledetect/Mobile_Detect.php");
if (class_exists('Mobile_Detect'))
{
   $mobiledetect = new Mobile_Detect();
   if ($mobiledetect->isMobile())
   {
       if ($_SERVER['HTTP_HOST'] == $config['project_licence_domain'])
       {
           header("Location: //m.{$config['project_licence_domain']}{$_SERVER['REQUEST_URI']}");
           die;
       }
   } else
   {
       if ($_SERVER['HTTP_HOST'] == "m.{$config['project_licence_domain']}")
       {
          header("Location: //{$config['project_licence_domain']}{$_SERVER['REQUEST_URI']}");
          die;
       }
   }
}

 

Showing separate template code for different devices under the same domain

Another way is to show some parts of page separated for phones and other devices. This is not about advertising: you don't need any template customization described here for advertising, as advertising supports mobile VS desktop options directly in their settings.

This approach is typically used in the following cases:

• Including different CSS styles for mobile VS desktop.
• Showing different blocks for mobile VS desktop, mobile block is typically configured to render less items than desktop.
• Hiding certain blocks for mobile devices, e.g. sidebar, additional content blocks that only make sense for desktop.

Step1. In /admin/include/pre_initialize_page_code.php add the following block:

include_once("$config[project_path]/admin/include/mobiledetect/Mobile_Detect.php");
if (class_exists('Mobile_Detect'))
{
   $mobiledetect = new Mobile_Detect();
   if ($mobiledetect->isMobile() && !$mobiledetect->isTablet())
   {
       $config['device'] = 'phone';
   }
}

If you need to have separation between all mobiles (phones + tablets) and PCs, then you use this:

include_once("$config[project_path]/admin/include/mobiledetect/Mobile_Detect.php");
if (class_exists('Mobile_Detect'))
{
   $mobiledetect = new Mobile_Detect();
   if ($mobiledetect->isMobile())
   {
       $config['device'] = 'mobile';
   }
}

 

Step 2. Then in templates anywhere you need you can use this approach:

{{if $config.device=='phone'}}
   mobile phone
{{else}}
   pc / tablet
{{/if}}

For the 2nd variant of PHP code you should use this template code:

{{if $config.device=='mobile'}}
   mobile phone + tablet
{{else}}
   pc
{{/if}}

 

Example to show different list_videos blocks with different settings for phones:

{{if $config.device=='phone'}}
   {{insert name="getBlock" block_id="list_videos" block_name="Mobile Videos Watched Right Now"}}
{{else}}
   {{insert name="getBlock" block_id="list_videos" block_name="Videos Watched Right Now"}}
{{/if}}

 

Example to hide sidebar for phones:

{{if $config.device!='phone'}}
	<div class="sidebar">
      	... sidebar contents that is hidden for phones
	</div>
{{/if}}

 

Performance implications

Separating content for mobile and desktop devices will affect your server's performance because caching % will be reduced up to x2 times. This will mean higher load on your database.

[Warburton]

What a smart way of doing this. As you said, it's a huge undertaking creating the whole separate pages for phone users. I'm going to play around with this a bit and see what this is actually capable of!

[jungleland]

I noticed that Mobile_Detect.php avaliable in

admin/include/mobiledetect/

 is version  @version 2.8.41 that is deprecated according to https://mobiledetect.net/ 

Maybe could be overwrite it with https://github.com/serbanghita/Mobile-Detect/blob/4.8.x/src/MobileDetect.php ???

 

Thanks

[Tech Support]

The problem is that they indicated their 4.8 version requires minimum PHP 8.0. KVS still supports PHP 7.x, so we don't want to update to a new mobile detect version for now until the next update. We checked the current version works fine with PHP 7.

Most likely KVS 6.3.0 will have PHP 8.1 as a minimum requirement, then we will update this library also.