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

Drupal: 

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

Адаптивный дизайн - это тенденция, которая становится правилом.

 

Адаптивный дизайн: базовые понятия

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

Когда нужен адаптивный дизайн? Это становится тенденцией, но если для вас это трудная задача, то можно пояснить необходимость адаптивной вёрстки такими причинами:

  1. Поисковые системы проверяют удобство для мобильных устройств и выше ранжируют те сайты, которые соблюдают правила
  2. Посетители вашего сайта будут постоянными посетителями, если вы позволите им просматривать информацию с телефона, планшета так же удобно, как на экране компьютера
  3. Продажи магазина, особенно магазинов для женщин, будут выше, если позволить покупателям заходить с планшетов и делать покупки
  4. Соц. сети используют люди на всех устройствах, если ваш ресурс тоже полезен, почему бы не сделать его таким же доступным?

 

Инструменты разработчиков адаптивных сайтов

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

Онлайн-сервисы для тестирования вёрстки для малых экранов и устройств

http://mobiletest.me/ - просмотр сайта с возможностью навигации, сайт открывается с вашего компьютера (то есть куки не теряются) и отображается как на выбранном гаджете
http://www.mobilephoneemulator.com/ - мощный сервис бесплатной проверки адаптивного дизайна, сайт открывается через удалённый сервер, поэтому куки не сохраняются, возможна навигация по тестируемому сайту
https://www.browserstack.com/responsive - создание скриншотов сайтов с прокруткой страницы без навигации по сайту, скриншоты создаются для всех устройств сразу

 

Тестирование сайта для мобильных в браузере Google Chrome

В браузер Google Chrome эта функция встроена. Чтобы в Хром просмотреть сайт в режиме эмуляции устройств, нужно открыть Firebug (Фаербаг) по кнопке f12 (или правой кнопкой мыши по любому элементу страницы - Просмотр кода элемента), а затем нажать кнопку с рисунком мобильного телефона (в левом верхнем углу Фаербага). Тогда сайт будет выглядеть так:

google chrome tlito ru tes adaptive

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

В Google Developers есть рекомендации как делать адаптивный дизайн на Друпал: https://developers.google.com/webmasters/mobile-sites/website-software/d...
Также базовые понятия по адаптивным сайтам: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configu...

 

Что даёт адаптивность и как её настроить?

Адаптивность - это резиновая вёрстка (ширина в процентах, а не в пикселях) + media-запросы в CSS (это CSS-код, который задаёт альтернативные стили для разных размеров окна) + JavaScript, изменяющий блок меню (сжимающий до одной кнопки) и, возможно, меняющий другие блоки и их расположение.

Чтобы сайт был адаптивным, или как говорят в GOOGLE, отзывчивым, нужно:

Тонкая настройка внешнего вида окна вашего сайта производится опытным путём.
Небольшое видео на английском с тегом viewport и media-запросами в CSS: https://www.youtube.com/watch?v=fA1NW-T1QXc
В результате вы получаете сайт, который умеет менять размеры и внешний вид для различных устройств. И его удобно просматривать с телефона.

 

Примеры адаптивных сайтов

http://www.mtv.co.uk/ - сделан на друпал, адаптивный
http://www.drexel.edu/ - не друпал, начальная страница сайта университета ничем не осложнена, содержит не много компонентов, фиксированное главное меню внизу и справа вспомогательное.
http://tlito.ru/ - друпал, наш сайт очень простой, текстовый, поэтому адаптивность легко настроить.
http://www.bates.edu/ - не друпал, многоцветная главная страница при сжатии страницы становится элементарной, но удобной.
http://www.regent-college.edu/ - не друпал, разноцветное дизайнерское главное меню при сжатии страницы превращается в разноцветные прямоугольники (упрощается).

Неадаптивные сайты: http://euroset.ru казалось бы, хороший сайт, но смотреть его неудобно на малых экранах. http://www.eldorado.ru - без заботы о покупателях на устройствах. http://www.220-volt.ru - как отмечалось, Интернет-магазин нелегко сделать адаптивным, но это стоит не более двух цен дизайна сайта (для сайтов средней сложности). Раскрутка магазина без адаптивного дизайна существенно теряет результативность!
Как оценивает Google PageSpeed один из таких неадаптивных сайтов:
https://developers.google.com/speed/pagespeed/insights/?url=euroset.ru
57 для мобильных и 82 для компьютеров (на данный момент). Цифра ниже 70 для мобильных недопустима.

pagespeed euroset

Для неадаптивного сайта PageSpeed Insights пишет: Используйте удобочитаемые размеры шрифтов, Адаптируйте размер контента для области просмотра, Настройте область просмотра.
Нужно обязательно для сайта euroset.ru: перегруппировать блоки, сделать невидимым блок слайдера, лишние блоки в заголовке, перегруппировать сетку товаров: сделать один за другим. Это позволит делать покупки через телефон.
Вопрос очень актуален, потому что больше 10% Интернет-пользователей пользуются смартфонами.

 

Преимущества адаптивного дизайна

  • вы не теряете пользователей, зашедших в первый раз с телефона или планшета
  • вы позволяете пользователям планировать свою работу с сайтом, исследуя его вначале с телефона в свободное время (когда с компьютера посмотреть нет возможности)
  • даёт пользователям повод стать постоянными, быть на связи и регулярно изучать интересные новости вашего сайта, когда хочется что-нибудь посмотреть на телефоне
  • адаптивный сайт удобнее, чем самый красивый но не адаптивный сайт

Как адаптивность влияет на удобство пользователя? В целом, ваш сайт на экране компьютера - это основа, это самый часто используемый способ представления информации, способ доступа к сервисам. Адаптированный макет будет представлять эту информацию в усечённом виде - либо не так удобно, либо не полностью.
Пользователи мобильных устройств имеют ограничения, что заставляет их терять информацию или удобство. Поэтому задача разработчика для малых экранов:

  • уменьшить количество элементов сайта, исключив неважные (например, не обязательно показывать блок сопутствующие товары на мобильном - лучше показывать плавающий блок корзины для быстрого оформления заказа, или сделать кнопку Заказать большего размера, для блогов тогда не нужно показывать теги и последние комментарии, достаточно сделать меню рубрик (и их тоже можно сжать до кнопки "раскрыть рубрики"))
  • перегруппировать колонки (обычно это означает опустить боковые колонки вниз, а показывать только 1 главную колонку)
  • скрыть главное меню, сделать его выпадающим при клике по кнопке ☰ - это символ, можно так: ☰ Меню
  • изменить размеры важных элементов навигации и информативных блоков (сделать фото товара на отдельной строке, под ним цену, большую кнопку заказать, и далее описание - то есть одно под другим, без колонок)

Как в друпал реализована адаптивность? В адаптивных шаблонах есть файл media.css (иногда он называется иначе), в котором уже настроены изменения в макете сайта на малых экранах. В некоторых темах есть простой скрипт, который сжимает главное меню до одной кнопки, что удобно, но и этому есть замена в готовых модулях, если в вашем шаблоне такой функции не оказалось.
С адаптивностью в друпал легко разобраться, если вы пользуетесь Фаербаг, то он показывает применяемый в настоящий момент стиль и строку, на котором он прописан - то есть меняя ширину окна, вы можете увидеть из каких строк файла media.css применён стиль для этого размера экрана. Если вы это изучите, то сможете менять макет по вашему усмотрению. При настройке адаптивного шаблона не обязательно и даже вовсе не нужно писать или редактировать JavaScript, достаточно использовать два файла: media.css, styles.css - и также уметь при необходимости править файлы шаблонов, например, page.tpl.php.

 

Адаптивные шаблоны Друпал 7

Полное руководство на английском и неполный список адаптивных шаблонов видны тут: https://www.drupal.org/node/1388492#responsive-themes
Предлагаю обзор шаблонов, которые я использую.

Professional Responsive Theme - простая для освоения, небогатая админка с отключением/включением лого, названия, ссылок соц сетей, главного меню, и очень простой для освоения файл стилей и файл media.css Мне нравится этот шаблон, тлито.ру использует на данный момент этот шаблон. Автор Zymphonies. Главное меню уже настроено выпадающим, уже умеет само сворачиваться в 1 кнопку, что для меня было открытием и очень удобной функцией.
AdaptiveTheme - мощная, но удобная тема, имеет богатую админку, в которой можно настраивать колонки, их величину, расположение друг относительно друга, их смещение для разных экранов. Обычно настраивать позиции и величины колонок для экранов разных размеров нужно копаясь в media.css, но тут это можно делать прямо из админки. Изначально шаблон голый, просто белый сайт. Для создания темы желательно скопировать at_subtheme в папку тем и назвать её по-своему, а также изменить имя файла info и содержимое двух файлов, читайте readme-файл. Важно: адаптивность в AdaptiveTheme имеет обратное направление, то есть, стили из файла global.styles.css - включаются, когда размер экрана меньше всех обозначенных в респонсивных файлах, например, responsive.custom.css или responsive.desktop.css. Получается, что в файле global.styles.css нужно учитывать размеры малых устройств, а для других, мелких и крупных экранов добавлять стили в файлах респонсивности с метками @media only screen and... Этой теме будут посвящены следующие обзоры, также есть в Интернет самая подробная документация на английском и видео.
Media Responsive Theme - хороша для освоения. Автор тоже Zymphonies, тут тоже главное меню умеет сворачиваться и само уже настроено выпадающим и адаптивным.
Arctica - притягивает внимание богатой админкой, как у AdaptiveTheme и красивыми цветами. Возможно, исследую и напишу пару слов.
Bootstrap - слишком большая и тяжёлая, я не смог осилить из-за ошибок темы. Изначально сайт белый

 

Модули Drupal 7 для адаптивных сайтов

Responsive CSS Menu - делает отличное сжатие до одной кнопки любого меню, мощный со множеством стилей меню. Настраивается в админке, можно задавать размер экрана, при котором меню сворачивается, например, в кнопку ☰ или ☰ Навигация.
Responsive Menus - с выбором стилей меню. Сжимает 1 блок меню с заданным идентификатором (#id или .class), в админке можно настроить ширину, при которой сжимается меню до кнопки, текст кнопки, идентификатор целевого блока меню для сжатия, стили, библиотеку для выпадающего меню.

Mobile theme - позволяет использовать вторую тему оформления для мобильных устройств.
Mobile Detect - применяет для Drupal библиотеку Mobile Detect (главное, суметь правильно разместить файлы библиотеки), умеет определять мобильное устройство или планшет до загрузки сайта и изменять html, добавлять файлы css, js или изменять расположение блоков и прочие функции, имеет api для использования в модулях и темах
Mobile sliding menu - выезжающее меню по нажатию кнопки, очень удобно для больших меню.

Browscap Block - позволяет не выводить блоки для мобильных устройств (не выводить html-код), если, допустим, в блоке грузятся картинки, которые недостаточно скрыть свойством display:none;, а нужно удалить html-код, чтобы не тормозить загрузку для устройств.

FlexSlider - резиновый слайдер, который никогда не помешает просмотру сайта, надёжный и легковесный. Рекомендован для повсеместного использования. Прокручивает не только картинки, но и тизеры, поля.
Adaptive Images Styles (ais) - модуль оптимизирует картинки с помощью подмены формата отображения изображений для различных разрешений экранов. С этим модулем ваш сайт пройдёт проверку Google PageSpeed Insights по критерию оптимизация изображений. Для картинок в полях типа Изображение и внутри текста модуль создаёт копии с различными разрешениями и с помощью .htacess подменяет на нужный для данного экрана пользователя.
Adaptive Image - оптимизирует изображения, подменяет на нужный формат для данного размера экрана. Выясняет размер экрана с помощью JavaScript на стороне клиента.
Client-side adaptive image - динамическая подмена изображения в оптимальном формате для данного разрешения экрана. С помощью JavaScript на стороне клиента подгружает требуемый формат, настроенный в Менеджере Дисплея для поля типа Изображение.

Responsive Tables - помогает сделать таблицы Представлений адаптивными: добавляет настройку колонок в таблицах обязательными или с возможностью скрытия для малых экранов, в итоге широкие таблицы могут помещаться в экран, удаляя лишние колонки.
FooTable - применяет функции библиотеки footable для Представлений, что позволяет создавать адаптивные таблицы, скрывая лишние колонки таблиц на малых экранах.

Boost Mobile - расширение функций модуля Boost для адаптивных сайтов. Boost Mobile кеширует и показывает сайт для десктопов и мобильных отдельно.

Navbar - меню администратора для мобильных устройств. Чтобы на мобильных подгружать Navbar-меню вместо Aministration menu, воспользуйтесь mobile detect и этой инструкцией
Masonry - умеет перестраивать позиции блоков так, чтобы они следовали сразу дуг под другом, без промежутков, если на строке два блока имеют различную высоту (промежуток заполняется).
Views Load More - удобная функция AJAX-подгрузки материалов без перелистывания страницы, то есть вместо строки навигации кнопка "Загрузить следующие записи". Работает только для Views, если включена опция Use Ajax - yes. Чтобы состыковать с Masonry нужно патчить.

Эти модули нужны не только для адаптивной вёрстки, но и для оживления сайта, улучшения комфорта пользователя.

https://www.drupal.org/node/1214890 - подробно как настроить кеширование сайта с модулем Boost для обильных

 

Адаптивное видео Drupal

Сделать видео адаптивным оптимально - используя приведённый в уроке CSS. Также для удобства работы рекомендуется модуль Video Embed Field, который не имеет проблем при отображении картинок-тизеров, также имеет настройки стилей плеера. В отличие от модуля YouTube Field, этот не вызывает ошибок.

 

Оптимизация изображений для адаптивной вёрстки

В приведённых выше модулях есть три модуля, которые меняют формат отображения картинок как в полях Изображение, так и внутри текста (поля Текст). Так пользователь всегда будет загружать файлы картинок оптимального размера, а не одного размера для разных экранов. С этими модулями Adaptive Images Styles, Client-side adaptive image, Adaptive Image - проверка PageSpeed даст хороший результат, и скорость загрузки на устройствах увеличится.
Оптимизация картинок будет очень затратной, и не может использоваться, если картинок много, а дисковое место дорогое.

 

Как выравнять колонки по высоте, div одинаковой высоты с CSS

Если ваш сайт адаптивный, то он сделан не на таблицах, а на блоках div. Высота блоков зависит от их содержания, не так просто сделать два разных блока одинаковой высоты. Эта задача не является простой задачей, так как в CSS она просто не предполагает стандартного решения. Поэтому нужно использовать методы и ухищрения.
Проверенный метод, который я применил для своего макета на Professional Responsive Theme, описан тут: http://www.master-web.info/equal-height-columns-cross-browser-css/

Для темы Professional Responsive Theme сделать #sidebar-first и #content одинаковой высоты так (для двухколоночного сайта):
надо добавить в самое начало кода файла page.tpl.php два новых блока, первый должен иметь фон, какой нужен для контента, второй - фон сайдбара, и закрыть эти блоки до открытия #footer:

  1. <div id="col1">
  2. <div id="col2">
  3.  
  4. <div id="container">
  5. <div id="content">Content</div>
  6. <aside id="sidebar-first" role="complementary">sidebar</aside>
  7. </div>
  8.  
  9. </div><!--//col2-->
  10. </div><!--//col1-->

Если макет имеет три колонки, каждая со своим фоном, то надо добавить три блока col1, col2, col3.
CSS для этого двухколоночного варианта выглядит так:

  1. /*fon goluboi sidebar-first 14% */
  2. #col1,#col2{float:left;width:100%;}
  3. #col1{background:#fff;}
  4. #col2{background:#E4F6EC;position:relative;right:85%;}
  5. #sidebar-first {position:relative;left:85%;}
  6. #content {position:relative;left:85%;}
  7. /* //fon goluboi */

Соответственно #sidebar-first у меня имеет ширину 14% (и плюс 1 для запаса, чтобы точно было на линии и не съезжало), поэтому тут фигурирует число 85%, что равно 100-15.
В конце темы можно скачать шаблон сайта тлито.ру, в котором это реализовано.

t shadow

 

 

Меню, которое выезжает по клику по логотипу. Смотрите Mobile sliding menu в графе модули.

**Как сделать тени*. Если вам надо сделать тень и просто получить картинку, то в фаербаге можете заменить слово на своё и пробовать для своего названия. Цвет тени зависит от цвета фона, то есть кодируется для каждого фона свой.

Title of your Site Ваш текст и БУКВЫ

Колонки. Зачем нужна шапка, если люди приходят на ваш сайт читать? - Контент должен быть доступен сразу и виден в самом верху. Для шаблона Professional Responsive Theme на сайте тлито.ру область header_wrapper перемещена внутрь блока #sidebar-first, и этот регион #sidebar-first отображается всегда (удалена проверка не пуст ли регион). Также из шаблона page.tpl.php убрано Главное меню, если нужно, можно добавить Главное меню в блоках. Если вам нужно выпадающее меню, то возможно Responsive CSS Menu вам поможет. Если нужен плавающий блок, то используйте модуль Floating block.

quick view node teaser

Кнопка быстрого просмотра. Скорость работы сайта и удобство пользователя значительно возрастают, когда материалы можно просматривать во всплывающем окне (так называемом, модальном окне). Это можно реализовать с кодом модуля, который добавляет к тизерам ссылку с классом .colorbox-node: http://tlito.ru/node/8

Обсуждения. Встроенная в ядро Drupal функция комментариев изначально не защищена от спам-ботов. Для защиты предлагается модуль Simple Anti-Spam.
А если вы хотите более надёжную систему комментариев, тогда попробуйте популярную в русском и зарубежном Интернет систему комментариев для сайтов: disqus.com - и одноимённый модуль для Drupal Disqus. Модуль Disqus, также как и встроенный в Друпал модуль Comment, создаёт блок "Последние комментарии", а также умеет отображать количество комментариев в анонсах или в переменной для программирования.

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

 

Шаблон Professional Repsonsive Theme как на тлито.ру - Tlito Theme

В template.php отключен вывод некоторых css, также в файле style.css содержится стили полей нод, которые вам будут не нужны, боковая колонка 14% шириной.
Логотип текстовый, тень с помощью css. Также убраны свои шрифты в стилях и удалена папка шрифтов, используются стандартные: Arial, serif.
В админке темы можно отключить графический логотип, оставив только текстовый, и другие элементы.
Скачать Tlito Theme

Скрин Tlito Theme
tlito theme screen