How to effectively make up templates for mobile devices on OkayCMS

At the moment, OkayCMS uses two functions so far:

• is_mobile - a function to determine the client's mobile device when entering the site;
• is_tablet - a function to determine the client's tablet device when entering the site;

These functions are available in all tpl files of the client template and are represented in the latter as a boolean variable and .

Everyone knows that responsive templates have the disadvantage of "hiding" unnecessary parts on mobile devices with the display: none property, but that still doesn't make the page easier to load on mobile.

The very first enemy of the client is a banner. You can have cool banners on the main page of the site, in the amount of 5 megabytes, but on mobile, they are often hidden so that they do not take up space. But why just make them invisible and load them if you can exclude them from the template altogether?

Actually, we tried to solve this issue by adding functionality that will allow layout designers to competently manage templates.

For example, to hide a banner from mobile, now it is enough to write like this:

 {if! $ is_mobile}
 {get_banner var = banner_group1 group = 'group1'}
 {if $ banner_group1-> items}
 <div class = "container hidden-md-down">
 <div class = "fn-slick-banner_group1 okaycms slick-banner">
 {foreach $ banner_group1-> items as $ bi}
 <div>
 {if $ bi-> url}
 <a href="""$bi-> url} "target =" _blank ">
 {/ if}
 {if $ bi-> image}
 <img src = " " alt = "" title = "
 <span class = "slick-name">
 
 </span>
 {if $ bi-> description}
 <span class = "slick-description">
 
 {if $ bi-> url}
 </a>
 {/ if}
 </div>
 {/ foreach}
 </div>
 </div>
 {/ if}
 {/ if}

Since the variable is_mobile, when entering from a mobile, will return TRUE, this condition {if! $ Is_mobile} will not work and the code with the banner will not load on our page, which will already give a good increase in speed when it loads.

This is just the simplest example of how you can simplify your template. On a more global scale, you can make separate convenient menus for mobile or tablets. In practice, I often met a situation when there are at least 2 menus on a page, only one is hidden on devices from 480 px, and the second is used as a desktop one. Which basically creates more code on the page.

We hope that this functionality will not pass by, and in the development of templates, people will use it, thereby creating more lightweight and modern templates, from a technical point of view.