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

Михайленко
  • 677
  • 3

Добрый день. Начиная с версии 1.2.3 в OkayCMS была подключена библиотека Mobile Detect, которая используется во многих современных фреймворках и CMS.

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

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

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

Все знают, что адаптивные шаблоны обладают таким недостатком как "скрывание" ненужных частей на мобильных устройствах за счет свойства 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="{$bi->url}" target="_blank">
{/if}
{if $bi->image}
<img src="{$config->banners_images_dir}{$bi->image}" alt="{$bi->alt}" title="{$bi->title}"/>
{/if}
<span class="slick-name">
{$bi->title}
</span>
{if $bi->description}
<span class="slick-description">
{$bi->description}
</span>
{/if}
{if $bi->url}
</a>
{/if}
</div>
{/foreach}
</div>
</div>
{/if}
{/if}


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

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

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

Рассказать друзьям:


Написать комментарий

captcha

okay_user
Виталий
31.07.2017, 22:57
Возможность переключать шаблон - не самый главный плюс подхода с отдельным мобильным и десктопным шаблоном.
okay_user
Mavr
07.06.2017, 13:05
Виталий, извините, а зачем на мобильном устройстве нужна возможность принудительного включения шаблона для десктопа?
okay_user
Виталий
27.10.2016, 12:07
Лично мне больше нравится идея автосмены шаблона при заходе с разных устройств, который я выложил на форуме. Плюс этого метода в том, что есть возможность принудительно переключать шаблон. И второе, что код отдельных шаблонов более простой и понятный, лишенный всяких ограничений. Минус - что надо разрабатывать и вносить правки в два шаблона. Но несомненно, то что появилась функция определения устройства, это полезно. Это не исключает даже использования её при моем подходе.