Jump to content

Theme customization: showing different content for mobile phones


Tech Support

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...