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

Дизайн моего сайта на Drupal 7 хоть и использовал готовую адаптивную тему, но был мягко говоря «гадкий». И вот, наконец, появилось время немного подправить ситуацию. В этой теме не дам ссылки полезные для меня уроки, т.к. главным моим инструментом для обучения стал уже имеющийся готовый бесплатный шаблон Mobile Responsive Theme 7.x-1.0, который я слегка адаптировала под имеющиеся у меня модули и блоки. Спасибо его создателям.

Как сделать мобильную тему?

Итак, адаптивный дизайн, или респонсив (responsive design), или мобильный дизайн предполагает, что, при просмотре на устройствах разного типа и расширения, все элементы будут читабельны и удобны для просмотра. Для его создания по большей части достаточно css, но можно добавить и пару фишек на JQuery (например, складывающееся меню).

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

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

Как сверстать адаптивный сайт из готовых модулей и тем?

Вариантов несколько, основные:

Готовый адаптивный темплейт может быть и бесплатный и платный. Платные обладают множеством функций, имеют продуманный шикарный дизайн, хороши для сайтов визиток, неподъемны для крупных проектов. Бесплатные попроще, полегче, меньше возможностей изменений из админки. Этот вариант – для тех сайтов, в которых нужно выводить одни и те же блоки для разных устройств, но по-разному.

Связка «мобильная тема + модуль определения устройства Mobile Detect + модуль переключения темы Mobile theme + блокирование ненужных для определенных устройств блоков (Browscap Block) + широкоформатная тема».

Также, здесь вам могут помочь некоторые модули, например Mobile sliding menu (чтобы сделать выезжающее при нажатии по кнопке меню), Mobile theme (чтобы сделать имеющуюся тему адаптивной), FlexSlider (резиновый слайдер, который может выводить и изображения, и тизеры, и поля), Adaptive Images Styles (ais) (чтобы изменять стили изображений для мобильных устройств), Responsive Tables (убирает заданные колонки при выводе таблиц на мобильных устройствах), Boost Mobile (кеширование страниц отдельно для мобильных и полноформатных устройств), Masonry (перестраивает блоки, чтобы они шли друг под другом), Views Load More  (подгружает страницы материалов с помощью AJAX, вместо стандартного пейджера).

Как создать или переделать тему сайта, сделать ее «респонсив»?

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

Четыре основных шага:

• Использовать значения ширины главных элементов в процентах (ширина страницы, заголовка, области контента, боковых колонок), вместо пикселей;
• В Header добавить Мета-тег viewport,
• Задать под каждое разрешение экрана в CSS media-запросы,
• JavaScript, который позволит главное меню в одну кнопку на малых экранах, при клике по которой меню будет выезжать.

1. Помимо указания значений ширины и высоты в % (процентах от ширины экрана или родительского элемента). В css  можно применять параметры max-width, min-width, max-height, min-height, width {auto;} (для изображений). Для указания размеров шрифта можно использовать не только px и %, но и em (размер относительно шрифта в родительском элемента). Все ненужные блоки можно скрывать с помощью {display: none;}. При этом надо помнить, что они все-равно подгружаются, просто не видны пользователю. Поэтому, если ненужных блоков много и они тяжелые, то лучше использовать модуль Browscap Block.
2. Между тэгами <head></head> в файле темы html.tpl.php, который лежит в папке templates темы, надо прописать код:

name="viewport" content="width=device-width, initial-scale=1.0">

<!--link rel="apple-touch-icon" href="/apple-touch-icon.png" /-->

Как вариант (на мой взгляд менее оптимальный) добавит хук в template.php, расположенный в корне темы,:

function имятемыобязательно_html_head_alter(&$head_elements) {

    $head_elements['viewport'] = Array

        (

            '#type' => 'html_tag',

            '#tag' => 'meta',

            '#attributes' => Array

                (

                    'name' => 'viewport',

                    'content' => 'width=device-width, initial-scale=1.0'

                ),

 

            '#weight' => -500

        );

}

Тэг vieport сообщает браузеру мобильного устройства, что содержимое сайта не нужно масштабировать, т.е. ширина содержимого сайта будет совпадать с шириной экрана. О тэге viewport и его параметрах можно подробнее почитать у Гугла.

3. Media-запросы предполагают, что разработчик напишет в css как именно выводить те или иные блоки в зависимости от ширины экрана. Медиа-запрос выглядит обычно так

@media (min-width: 500px) and (max-width: 600px) {}

И внутри фигурных скобочек расписываем значения для и для экранов из этого диапазона. Можно указывать не диапазон, а просто по порядку расписывать параметры для экранов с различной макс шириной. Очень важно понимать, что внутри тэгов надо прописывать только те параметры, которые действительно изменяются в зависимости от размера дисплея, чтобы не замедлять работу сайта огромными файлами. Что остается постоянным – прописывать надо вне @media. Обычно общие характеристики помещают в style.css, а медиа запросы в media.css.

Возможен вариант, когда для каждого @media используют отдельный файл . В любом случае, не забудьте импортировать новые файлы в тему, прописав в .info  файле темы:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">

<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">

<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

4. Собрать меню до кучи можно или с помощью готового модуля или добавив несложный скрипт (наподобие такого, о котором писала в предыдущем посте о работе с Drupal. В @media запросе нужного размера прописываем css для элементов складывающегося меню, а все ненужное скрываем с помощью {display: none;}.