Адаптивный дизайн сайта – как адаптировать шаблон WordPress

Здравствуйте, уважаемые друзья. Вот уже через несколько дней Google вводит ещё один фактор ранжирования — мобильность (адаптивность) сайта. То есть те сайты, которые не адаптированы под мобильные устройства будут понижаться в поисковой выдаче мобильных запросов. Вот поэтому нужно торопиться и сделать свой сайт адаптивным.

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

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

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

Все ли шаблоны можно адаптировать

Да, адаптировать можно практически все шаблоны. Только вот на какие-то нужно потратить меньше усилий, а на другие гораздо больше.

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

Но, вот если вы всё же хотите адаптировать свой действующий шаблон, то нужно внимательно оценить трудности, с которыми вы столкнётесь. Определить целесообразность.

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

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

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

На чём основан адаптивный шаблон сайта

Создание адаптивного шаблона основано на пяти основных составляющих:

1. Резиновый (адаптируемый) макет (каркас) – если основной шаблон имеет фиксированные размеры шапки, сайтбара, блока под контент, футера, то его резиновая копия вычисляется на основе процентной доли от родительского контейнера.

Так, например, если родительский контейнер имеет размер 760рх, а в нём содержится блок контента — 495рх и сайтбар — 190рх. Определение процентной доли каждого из блоков будет вычисляться по формуле:

Искомый контейнер (рх) / Родительский контейнер (рх) * 100% = Результат (%)

Пример расчёта:

Блок контента: 495/760*100= 65.1315789%

Сайтбар: 190/760*100=25%

Примечание: если бы в блоке с контентом был бы ещё один блок, то для него, родителем был бы блок контента.

2. Резиновые (адаптируемые) изображения – здесь принцип работы таков, что изображение подстраивается под размеры блока в котором расположено (родителя). Для создания таких резиновых изображений достаточно в стилях css, для мобильных устройств прописать вот такие стили:

img {max-width:100%;height: auto;}

3. Резиновые (адаптируемые) встроенные видео – принцип тот же, что и у изображений. Видео подстраиваются под размер контейнера в котором расположены. CSS стили для этого используются следующие:

embed, object, iframe {width: 100%; height: auto;}

4. Резиновые (адаптируемые) шрифты – как правило, шрифты в шаблонах указываются в пикселях (рх), а их нужно перевести в относительную величину высоты шрифта (em).

Перевод шрифта из pxв em осуществляется по формуле:

Текущий размер шрифта (рх) / Стандартный размер шрифта (16рх) = Размер шрифта в (em)

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

5. Медиазапросы (Mediaqueries) – именно благодаря медиазапросам и происходит показ того или иного дизайна в зависимости от размеров экран устройства с которого ведётся просмотр. Более подробно о том, как применять медиазапросы я писал здесь. Сейчас лишь напомню, что без этих запросов не будет и адаптивного дизайна в принципе.

Как адаптировать шаблон WordPress

Шаг 1. Анализ и изучение шаблона

Первым делом, что нужно сделать – это провести анализ и изучить шаблон. При проведении анализа нужно определить ширину основного блока (родителя), ширину блоков сайтбара, контента и так далее. Сделать это лучше всего через панель разработчика в браузере Firefox или Chrome.

Также нужно выписать идентификаторы и классы этих блоков, в дальнейшем они пригодятся для присвоения css стилей.

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

В качестве примера рассмотрим пример шаблона, который ещё не адаптирован. Определим блоки, их классы и идентификаторы и размеры.

Контейнер – оболочка, в котором содержатся все остальные блоки, имеет идентификатор (#page) и ширина контейнера 760рх.

Следующий блок – это блок шапки (заголовка), он имеет идентификатор (#header) и ширину 758рх.

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

Идём дальше, следующий блок – блок с контентом. С этим блоком совсем всё плохо, так как стили заданы не рационально. Делая на совесть, такие косяки нужно переделывать. Но сейчас не об этом. Самое главное — это узнать идентификатор и ширину. Идентификатор этого блока имеет имя (#content) и в нём есть ещё и класс (.narrowcolumn). Ширина блока (#content) не задана, но на скриншоте можно видеть, что она составляет 495рх. А получается это за счёт заданной ширины для этого же блока с классом (.narrowcolumn) плюс внутренний отступ слева 45рх.

Всё это можно сделать гораздо проще, впоследствии при адаптации из-за такого рода мелочей возникают определённые трудности.

Следующий блок – это сайтбар. Имеет идентификатор (#sidebar) и ширина его составляет 190рх.

С этим блоком на первый взгляд всё нормально, но если посмотреть внимательно на скриншот, то возникает вопрос, а что за внешний отступ (margin-left: 545рх;)? А это так сделано выравнивание сайтбара по правому краю. Хотя это можно было сделать с помощью свойства float. Также фоновый цвет выполнен при помощи изображения, что можно легко заменить на цвет в css.

На такие моменты обязательно нужно обращать внимания. Так как из таких мелочей складывается вся большая работа по адаптации шаблона.

И завершающий блок в этом шаблоне – это подвал. Он имеет идентификатор (#footer) и ширину 760 рх.

А очередной косяк в шаблоне, фон создан при помощи изображения. Что тоже замедляет загрузку страницы и легко может быть заменено стилями css. Или css спрайтами.

С анализом структуры мы разобрались, надеюсь, вы поняли, на что обращать внимание. Если не совсем, то видео урок вам поможет.

И теперь можно переходить к созданию медиазапросов и стилей css для мобильных устройств.

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

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

@media only screen and (max-width: 760px) {
img {max-width: 100%; height: auto;} /*делаем изображения эластичными*/
#page, #header {width: 100%; height: auto;} /*заголовок и тело эластичными*/
#header {background: linear-gradient(to top, #4182B8, #68ADE6);
border-radius: 6px;} /*фоновое изображение для заголовка*/
#content {width: 65%; float: left;} /*адаптивная ширина для контента и позиционируем по левому краю*/
.narrowcolumn {padding:0 5px 0 5px;} /*внутренние отступы для контента*/
#sidebar {width: 25%; margin-left: 71.71%; background:#F9F9F9;} /*адаптируем сайтбар*/
#sidebar #searchform #s {width: 96%;} /*ширина для поля поиска*/
#footer {width: 100%;} /*футер на всю ширину*/
}

Примечание: в этом примере, добавление мобильных стилей не так много. Поэтому эти стили вы добавляете в конце файла style.css. Если же у вас стилей будет много, то целесообразней создать отдельный файл и подключить его отдельно.

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

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

@media only screen and (max-width: 480px) {
h1 {font-size: 3em;} /*изменяем размер заголовка*/
#page {background: #FFF;} /*белый фон для страницы*/
#content {width: 96%; float: none;} /*контент на всю ширину*/
#sidebar {width: 96%;   margin-left: 1%; background:#F9F9F9;} /*сайтбар на всю ширину*/
}

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

Вот и всё адаптация данного шаблона закончена. Конечно, я бы ещё многое передела, заменил бы изображения, участвующие в дизайне на стили css, переписал некоторые основные стили и так далее. Но это уже не относится к адаптации шаблона.

А теперь давайте посмотрим, что Гугл говорит нам по поводу нашего шаблона. Проверим до и после наших работ.

Проверка адаптации шаблона в PageSpeed Insights

Итак, открываем сервис PageSpeed Insights, вводим url сайта и проверяем.

Шаблон до адаптации:

Результат налицо. Думаю, комментировать не стоит. Удобство пользователя 67 их 100.

Шаблон после адаптации:

Как видите, показатель удобства для пользователей поднялся с 67 до 94. А если ещё адаптировать меню, то этот показатель вырастет до 99-100.

Вот так вот друзья можно адаптировать шаблон WordPress. Разумеется, со своими шаблонами вам придётся потрудиться, но дело того стоит.

Также посмотрите видеоурок, в нём я кое, какие моменты разбираю более подробно.

А у меня на этом всё. Желаю вам успешной адаптации ваших шаблонов и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.