Как эффективно верстать шаблоны под мобильные устройства на OkayCMS

На данный момент в OkayCMS используется пока две функции:

• is_mobile - функция для определения мобильного устройства клиента, при заходе на сайт;
• is_tablet - функция для определения планшетного устройства клиента, при заходе на сайт;

Эти функции доступны во всех tpl-файлах клиентского шаблона и представляются в последних в качестве булевой переменной и .

Все знают, что адаптивные шаблоны обладают таким недостатком как "скрывание" ненужных частей на мобильных устройствах за счет свойства display:none, но это  все равно не облегчает страницу при ее загрузке на мобильном устройстве.

Самый первый враг клиента это баннер. У вас могут быть классные баннера на главной странице сайта, в сумме мегабайт на 5, но на мобильных, их часто скрывают, что бы не занимали место. Но зачем их просто делать не видимыми и грузить если можно вообще исключить из шаблона?

Собственно этот вопрос мы и постарались решить, добавив функционал, который позволит верстальщикам грамотно управляться с шаблонами.

Например, что бы скрыть баннера с мобильных, теперь достаточно написать вот так:

{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="
                        {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}

Так как переменная is_mobile, при заходе с мобильного, вернет значение TRUE, то данное условие {if !$is_mobile} не пройдет и код с баннером не загрузится на нашей странице, что даст уже хороший прирост скорости при её загрузке.

Это лишь самый простой  пример того, как можно облегчить себе шаблон. В более глобальных масштабах можно делать отдельные удобные меню для мобильных или планшетов. Я часто в практике встречал ситуацию, когда на странице есть минимум 2 меню, только одно скрыто на устройствах от 480 px, а второе используется как десктопное. Что в принципе создает большее количество кода на странице.

Надеемся что данный функционал не пройдет мимо, и в разработке шаблонов люди будут его использовать, создавая тем самым, более облегченные и современные шаблоны, с технической точки зрения.