Как построить адаптивный сайт на UMI CMS

В этой статье я постараюсь отразить не только аспекты адаптивного сайта, но и общий принцип работы UMI CMS с представлением на мобильных устройствах.

Итак, как мы разобрали в предыдущей статье «Важна ли адаптивность для сайта?«, при построении ресурса, удобного для отображения как на мобильных, так и на стационарных устройствах, можно воспользоваться двумя концептами:

1. отдельный сайт для мобильного представления

2. единый, адаптивный сайт

При построении отдельного сайта для мобильного представления вам потребуется папочка mobile внутри вашего шаблона XSLT.

Для примера, пусть наш шаблон называется «education». Тогда полный путь к вашей папке с мобильным шаблоном будет выглядеть так:

/templates/education/xslt/mobile/

Внутри этой папки вы можете полностью повторить структуру файлов и директорий папки /templates/education/xslt/ , придерживаясь при этом единого способа формирования контента для любой из версий сайта.

Все остальное UMI CMS сделает за вас сама. Если пользователь зайдет на сайт с мобильного устройства — UMI сама отобразит версию из папки mobile.

С адаптивной версией все немного сложнее.

Дело в том, что адаптивность нельзя просто включить или подключить на сайте. Фактически, адаптивность — это свойство, заложенное именно в верстку. А она появляется задолго до того, как сайт становится похожим на конечный результат.

В связи с этим, в большинстве случаев, говоря об адаптивности подразумевается, что будет построен новый информационный ресурс с более продвинутым принципом отображения. И именно поэтому об адаптивности речь обычно заходит в момент «осовременивания» сайта или его создания с нуля, если мы говорим о новом проекте.

Проверить, адаптивная ли у вас верстка или нет очень легко: попробуйте сжать и расширить браузер.

Если при этом у вас ничего не ускакало за экран, вся важная информация по-прежнему видна, доступна и читаема — ваш сайт адаптивен. Эта проверка одинаково хорошо работает как с конечным сайтом, так и с версткой, полученной от верстальщика.

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

Сервис проверки доступен по адресу: https://search.google.com/test/mobile-friendly

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

Я думаю, что в пользовании данным сервисом у вас не возникнет особых проблем.

Июл26

Блог программиста UMI CMS