адаптивный дизайн

Обзор модулей мобильных меню

Drupal: 
Уровень сложности: 

Под названием - ссылка на страницу модуля, через тире - доступность для версий Drupal.

Responsive CSS Menu - доступно для Drupa 7, Drupal 8 - делает отличное сжатие до одной кнопки любого меню, мощный со множеством стилей меню. Настраивается в админке, можно задавать размер экрана, при котором меню сворачивается, например, в кнопку ☰ или ☰ Навигация.

Настройки Colorbox для адаптивных сайтов

Drupal: 
Уровень сложности: 

После вопроса https://toster.ru/q/264189 предлагаю точную инструкцию как сделать Колорбокс респонсивным. Если ваш сайт респонсивный, тогда и всплывающие окна Colorbox тоже должны адаптироваться под размер окна/экрана.

Это делается на странице настроек Колорбокс, то есть: Конфигурация - Медиа-файлы - Colorbox, тут: /admin/config/media/colorbox

FitVids

С помощью javascript делает адаптивными все видео-фреймы на сайте: как в полях типа Видео, так и внутри текстовых полей.

Зависимости

Установите модуль Libraries и скачайте библиотеку FitVids в папку libraries/fitvids вашего сайта https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js

Респонсивный видеоплеер. CSS адаптивных видео

Адаптивный дизайн на Drupal - это ещё и адаптивный видеоплеер. Предложенные здесь css-коды для Drupal 7 и Drupal 8 делают респонсивным плеер с именами классов Video Embed. Вы можете переписать эти примеры css для видео внутри текстовых полей и любых других имён классов (не только друпал).

Все модули вставки видео на Drupal

Вставлять видео из YouTube и Vimeo очень удобно с модулем Video Embed Field. Этот модуль позволяет выбирать стиль отображения поля типа Video Embed, создавать и управлять этими стилями. В настройках каждого стиля можно задать:

Красивые адаптивные сайты на Drupal 7 на русском языке

Следующие сайты на данный момент работают на Друпал.

https://www.samsungknox.com/ru - мультиязычный сайт с продуманной адаптивностью

http://www.sheksna.ru/ru - двуязычный сайт отеля, красочный и адаптивный, главная выглядит как лендинг

http://hr-portal.ru/ - не адаптивный, но респонсивный. Главное меню не сжимается до кнопки, заголовок остаётся не адаптированным, хотя страница читается нормально на устройствах

Адаптивное меню администратора для мобильных устройств: Administration Menu + Navbar

Drupal: 
Уровень сложности: 

Инструкция на странице https://www.darrylnorris.com/blog/improving-drupal-administration-menu-b... рассказывает о том, как сделать меню администратора удобным при просмотре с устройств.

Адаптивный дизайн сайта на Drupal 7

Подробная статья о преимуществах адаптивных сайтов, использовании инструментов разработчиков. Предлагаем обзор инструментов разработчиков: сервисов тестирования сайтов на устройствах, также рекомендации Google, ссылки на адаптивные шаблоны Drupal 7, модули Друпал, которые делают сайт адаптивным, удобным, как редактировать шаблон и верстать свой макет.

Подписаться на Front page feed