Опубликовано автор в категориях CMS, Drupal.

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

Responsive или Adaptive?

Лично я не совсем различаю эти понятия. Кстати для тех, кто хочет подискутировать на тему, есть пост на Хабре. Думаю, что не стоит сильно придерживаться какой-то определенной парадигмы и нужно использовать методы в совокупности для оптимального результата. Потому что если мы говорим о разметке, то безусловно лучше иметь отзывчивую (responsive) страницу вместо того чтобы делать несколько тем и прочее. Но если разность макетов, компонентов достаточно существенна, то нам не обойтись без отдельных макетов или тем. Однако, я за один макет для разметки. Но макет макетом, а главное на сайте его содержание. И вот здесь нам нужно соблюсти баланс между удобством пользователя и производительностью, и именно теперь мы говорим про адаптивные технологии, то есть показывать то, что надо там, где надо, таких как надо размеров и так далее. Конечно, это очень обобщенно сказано, но цель поста не дать определения или разграничить понятия, а просто определить, что использовать при создании нашего сайта.

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

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

Инструменты = модули

Mobile Tools

Этот модуль дает нам довольно большое количество возможностей по созданию условий в зависимости от пользовательского устройства. Самое хорошее в нем то, что он тесно интегрируется с множеством самых популярных модулей для Drupal, a в нашем случае и с Context и Chaos Tools, а так же с модулями ThemeKey и Browscap о которых мы еще поговорим ниже. Однако для Drupal 7 использовать этот модуль в связке с тем же Browsecap крайне проблематично, поскольку стабильной версии нет, а нестабильная не работает в связке с Browsecap.

Browscap

Модуль позволяет определять информацию о пользовательском агенте, используя и значительно улучшая возможности работы с PHP функцией get_browser()

WURFL

Помогает определить пользовательское устройство. Работает в связке с Mobile Tools помогая переопределить тему в зависимости от группы, к которой отнесено пользовательское устройство. По умолчанию WURFL создает простую группу «Mobile Device».

Context

Модуль который может быть использован в нескольких случаях:

  1. Context Mobile Detect этот плагин для Context производит интеграцию модуля с PHP Mobile Detect library Mobile_Detect.
  2. Изменить тему сайта согласно определенным условиям. Для этого нужно использовать расширение для модуля Context Reaction: Theme
  3. В частности одним из условий может быть тип пользовательского агента. В этом поможет Context Useragent
  4. Можно также добавлять различные CSS и JS файлы к теме с помощью плагина Context Add Assets

CTools HTTP Header Plugins

Этот плагин к модулю Chaos Tools позволяет определять контексты и правила доступа в зависимости от параметров заголовков ответа сервера, таких как Referrer, User Agent, Host, Accept, Accept Charset, Accept Encoding, Accept, Language, Connection.

Подумаем о картинках

Конечно, идеология responsive images великолепна по сути, и вполне прилично может работать на небольших сайтах, но для больших сайтов, с обилием графики и большим трафиком эта технология является крайне дорогим удовольствием. Поэтом в больших проектах нужно думать в сторону adaptive images.

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

  • Изображения созданные с помощью ImageField

    Если вы используете CCK Imagefield для изображений в различных типах контента и ImageCache для изменения размеров, то Mobile Tools поможет вам с созданием условий для использования нужных изображений на мобильных устройствах.

  • Другие модули для работы с картинками
    • Responsive images and styles — этот модуль предлагает создавать различные варианты стилей изображений для responsive тем, используя специальные суффиксы в названиях стилей изображений.
    • Adaptive image — этот модуль интегрирует в Drupal решение для адаптивных изображений от http://adaptive-images.com/
    • Adaptive Image Styles — по сути модуль предлагает такое же решение что и предыдущий, но при этом он тесно интегрирован с Media module, что может быть очень полезно для редакторов вашего сайта.
    • Client-side adaptive image — как по мне, очень удачный модуль, который позволяет использовать различные форматеры для вывода картинки в зависимости от ширины дисплея пользовательского устройства непосредственно через управление форматом отображения поля в стилях контента.
  • HTML5 решение
    • https://drupal.org/project/picture — модуль, который позволяет получить альтернативный путь источника для картинки в зависимости от размеров дисплея девайса. По сути, во многом это симбиоз модулей представленных выше, но с попыткой использовать HTML5, беда только в том, что пока элементе picture до конца не принят в спецификации HTML5, так как не решены все проблемные моменты. Однако данный модуль будет частью ядра Drupal 8, вернее не совсем он но этот модуль есть бэкпортом из 8 версии Drupal. И на данный момент в версии 7 он использует в качестве набора контейнеров для элемент div>span, хотя ситуация исправится когда решиться вопрос с тегом picture. а использовать или не использовать это на продакшн ресурсах — дело ваше.

Фронт-енд

Здесь все просто. Во главе всего тема. Конечно же, тема будет зависеть от выбранной идеологии и внешнего вида сайта, но в любом случае современный сайт, вернее его фронт-часть обязаны использовать прогрессивные методы в разметке с обратной совместимостью для устаревших устройств. Как правило, у вас есть два варианта действий: первый, когда вы используете одну тему для всех видов устройств и изменяете ее отображение с помощью передовых способов верстки, в частности используя media queries, и второй, когда вы используете две различные темы для мобильных устройств и для десктопов. Я думаю, если дизайн сайта и функциональные особенности позволяют использовать одну тему, то лучше так и поступить.

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

Я бы советовал рассмотреть в качестве базовой темы https://drupal.org/project/adaptivetheme. Помимо всех своих прочих достоинств эта тема изначально интегрирована с модулями, которые нужны для мобильной разработки на Drupal. В частности, тема связанна с модулем Browscap, который в связке с собственным механизмом Mobile Regions позволяет теме очень гибко подстраивать вывод блоков под различные девайсы.

Естественно это не единственная тема, которая поддерживает современные мобильные тенденции. Репозиторий Drupal дает довольно большой выбор, так что решать вам.

Подведем итоги

Итак, если вы решили, что хотите делать мобильный сайт на Drupal, то вам нужно придерживаться следующих основных шагов:

  1. Выбрать ключевую технологию для фронтенда responsive || mobile, а отсюда решить использовать или не использовать мобильный субдомен для сайта.
  2. Выбрать связку модулей, которые помогут реализовать вашу идею.
  3. Выбрать или создать базовую тему для вашего сайта.
  4. Делать сайт 🙂

Напомню, что этот пост ни в коем случае не носит характер мануала, это скорее взгляд на проблему и начертание механизмов ее решения. Поэтому комментарии, идеи, предложения конечно же приветствуются.

Да и в конце пару полезных ссылок:

5 комментариев к записи “Мобильный сайт на Drupal”

  1. Миша Серяк

    При разработке drupal сайтов , когда нужна адаптация под мобильные девайсы пользуюсь также
    https://drupal.org/project/adaptivetheme либо ее производной https://drupal.org/project/sky и мобайлтулс. Все это приправляется версткой с media queries . Как правило для проектов не рассчитанных на большую посещаемость , этого хватает.
    Для проектов «побольше» , начинается велосипедостроительство и «пытки» различных друпал модулей.

    Ответить
  2. Василий

    Здравствуйте! Какую тему посоветуете, нужна адаптивная тема, одинаково хорошая под мобильные и пк девайсы. Чтобы можно было загрузить логотип изменить фон, чтобы вы посоветовали?

    Ответить
  3. Алекс

    Лучи добра вам! Использовала Adaptive image — очень понравилось. Статью в избранное, может и другие методы понадобятся в будущем.

    Ответить

Оставить комментарий

  • (не будет показан)