Мой пример адаптивного дизайна сайта для его просмотра на мобильных устройствах (mobile friendly)

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Наверное, сейчас ни для кого не секрет, что полноценное и успешное продвижение своего сайта можно обеспечить лишь при условии его адаптации под мобильные устройства.

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

Львиная доля актуальности сегодняшней статьи, конечно, канула в лету, так как еще с апреля сего года Google при ранжировании сайтов учитывает, насколько удобно осуществлять просмотр страниц посредством мобильных устройств (фактор mobile friendly). Однако, я решил вернуться к этой теме и предоставить свой взгляд на данный аспект по двум причинам.

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

Ну а во-вторых, пока еще Яндекс, который отстает обычно от Гугла на такт, не начал жестко действовать в этом отношении, самое время дать толчок тем, кто оставил адаптацию своего сайта под мобильники до лучших времен. Уверяю вас, требования «зеркала рунета» в отношении просмотра на малых экранах не заставят себя ждать.

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

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

Итак, пойдем по порядку. Перво-наперво хочу обратить ваше внимание на то, что все более важной составляющей в современном SEO продвижении является поведение пользователей (тут о поведенческих факторах подробный мануал) на страницах вебсайта.

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

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

Чтобы не быть голословным и подтвердить значение адаптации сайта под мобильные устройства, приведу вам диаграмму распределения доходов Адсенс по типу устройств для моего блога:

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

Теперь взгляните на статистику посещений Goldbusinessnet.com в Яндекс Metrika до того, как я поменял тему WordPress, которая, кстати, не была оптимизирована под мобильные мониторы:

А вот какая картина предстала в той же Метрике несколько месяцев спустя после того, как я установил новый адаптивный шаблон:

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

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

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

На скриншоте выше, представляющем результат проверки сервисом mobile friendly test, вы видите окончательный вердикт Google. Там же даны многочисленные ссылки на различные материалы, которые могут оказаться полезными, если вы решитесь самостоятельно «копать до руды» при осуществлении мобильной оптимизации своего вебсайта в случае отрицательного результата при тестировании.

Кстати, после того, как я предпринял действия, необходимые для адаптации сайта под малые мониторы, блог Goldbusinessnet.com с легкостью прошел проверку для просмотра на мобильниках:

Если Google mobile friendly просто дает оценку, причем общего характера (сайт либо оптимизирован, либо нет), то сервис PageSpeed Insights предоставляет детальную расшифровку, из которой можно уяснить, в каком направлении двигаться:

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

Замечу, что тестирование mobile friendly может показать негативный результат проверки и в том случае, если изначально используется адаптивный шаблон для исследуемого сайта. Это происходит, если робот Googlebot не смог корректно просканировать содержимое вебресурса. Тогда следует открыть доступ Гугл боту к CSS, JS и графическим файлам сайта, чтобы исправить ситуацию.

Что необходимо предпринять, чтобы на выходе получить полноценный адаптивный сайт

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

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

Кстати, последняя установленная тема WordPress, которую я использую в настоящий момент, скачана как раз оттуда, причем она уже оптимизирована для просмотра на малых мониторах. С тем, чтобы отсеять лишнее и получить темы, где есть готовый адаптивный веб дизайн, наберите в строке внутреннего поиска «responsive layout» и получите необходимые для выбора:

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

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

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

1. Применить «резиновый» шаблон для сайта, который обеспечивает автоматическое перераспределение контента (текста, изображений, видео) в области просмотра при уменьшении величины экрана устройства таким образом, что все содержимое умещается по ширине.

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

3. Если вы зарабатываете на контекстной рекламе, то нужно изменить отображаемые на страницах сайта рекламные блоки на адаптивные. Как это сделать в Гугл Адсенс, мы рассмотрим ниже в данной публикации.

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

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

Итак, делаете резервную копию всех файлов сайта, скачав их, скажем, с помощью моего любимого менеджера Файлзилла, а также создаете бэкап базы данных в pHpMyAdmin и экспортируете ее в OpenServer. После этого можете экспериментировать сколько вашей душе угодно.

Поскольку я установил уже готовую и оптимизированную под мобильники тему, то мне не пришлось предпринимать шаги для решения задачи в полном объеме. Однако, для понимания ситуации я постараюсь все равно объяснить все нюансы, которые могут помочь вам в самостоятельном редактировании.

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

Адаптивный шаблон сайта для мобильных юзеров

Итак, объясняю все на примере блога Goldbusinessnet.com, который работает на Вордпрессе. Кто еще не совсем вник в тонкости этого движка, полезным будет ознакомиться с тем, как устроена тема WordPress по приведенной ссылке.

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

Итак, поехали. Для подключения комплекса свойств CSS к сайту в современной верстке используются связанные стили, с целью активации которых прописывается специальный тег link c атрибутом media, определяющим тип устройства, для которого применяется данное стилевое оформление.

Технически link прописывается в шаблоне header.php между открывающим и закрывающим тегом HEAD (его содержанием является служебная информация для браузера). В моей теме использовано значение media=»all», которое означает, что документ CSS будет применен ко всем устройствам:

<link rel='stylesheet' id='tinyforge-style-css'  href='/wp-content/themes/tiny-forge/style.css?ver=1.5.9' type='text/css' media='all' />

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

<meta name="viewport" content="width=device-width" />

Здесь значение width=device-width атрибута content означает, что ширина страницы равна ширине экрана устройства. Это стандартный вариант, используемый в большинстве случаев. Конечно, content может принимать различные параметры, включая числовые значения, но углубляться мы сейчас в эту тему не будем.

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

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

@-ms-viewport{width:device-width;}
@viewport{width:device-width;}
@media screen and (min-width: 770px) {
Свойства CSS для ширины экранов более 770px
}
@media screen and (min-width: 960px) {
Свойства CSS для ширины экранов более 960px
}
@media screen and (min-width:1250px){
Свойства CSS для ширины экранов более 1250px
}

Правила @-ms-viewport и @viewport позволяют дополнительно расширить возможности адаптации контента сайта к различным устройствам средствами каскадных таблиц стилей. Далее указывается стилевое оформление для мониторов более 770, 960 и 1250 пикселов. Это и есть точки излома в моем варианте адаптивного шаблона.

Контент сайта для самых малых экранов

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

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

Начнем с самых верхних элементов вебстраницы. Здесь совершенно очевидно, что то же навигационное меню гораздо выгоднее сделать выпадающим посредством тегов UL и Li, которые определяют HTML списки. Свойства меню в style.css представлены так:

.main-navigation {
    z-index: 1000;
    background: url(/wp-content/themes/tiny-forge/images/menu-background.png) repeat-x;
    width: 100%;
}

.main-navigation.toggled .menu-toggle {
    background: #474747;
}

.main-navigation .menu-toggle, .main-navigation.toggled .nav-menu {
    display: block;
}

.site-header .menu-toggle {
    background: #8f6e00;
    color: white;
    font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    padding: 10px 22px;
}

.main-navigation .menu-toggle {
    display: none;
    cursor: pointer;
}

.main-navigation.toggled li {
    float: none;
}

.main-navigation.toggled li a {
    display: block;
    float: none;
    background: #3a3a3a;
}

.main-navigation.toggled a {
    display: block;
    color: white;
    padding: 10px 40px;
    text-decoration: none;
}

.main-navigation.toggled ul {
    margin: 0;
    list-style: none;
    position: absolute;
    width: 100%;
}

Свойство z-index для класса main-navigation присутствует здесь по той простой причине, что я сделал меню еще и фиксированным c помощью соответствующего позиционирования position: fixed. Фиксация будет работать на всех устройствах.

Обратите внимание, что для раскрытого меню .main-navigation.toggled ul прописано правило position: absolute с тем, чтобы все пункты правильно позиционировались и перекрывали шапку сайта. Все это дело на мобильниках с самым узким экраном будет выглядеть так:

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

Поэтому я решил выводить просто фон, указав URL картинки, формирующей его, одним из значений свойства background для блока с классом site-header, который и определяет шапку сайта:

.site-header {
    background: url(/wp-content/themes/tiny-forge/images/header-background.png) repeat-x;
    margin: 2px auto;
    color: #8f6e00;
    height: 220px;
    box-shadow: 0 0 2px;
}

Далее я создал контейнер DIV, который по умолчанию является блочным элементом, включив его в состав хидера, куда в свою очередь определил блок с названием и описанием сайта. Туда же перенес форму поиска по сайту от Google и небольшой баннер. Свойства CSS для этих элементов таковы:

.site-branding {
    margin-left: 10px;
}

.site-header h1, .site-title {
    font-size: 19px;
    font-weight: normal;
    line-height: 1.285714286;
    margin-bottom: 5px;
}

.site-description {
    font-weight: normal;
    font-size: 13px;
    margin-bottom: 10px;
}

.search-box {
    margin-left: 10px;
    margin-bottom: 10px;
}

.refban {
    margin-left: 10px;
}

В итоге весь хидер для малых мониторов стал выглядеть следующим образом:

Идем дальше. Большинство страниц блогов и сайтов Вордпресс включает несколько частей: шапку, зону основного контента, сайдбар (их может быть несколько), футер (подвал). Классическое расположение этих областей для мобильников, смартфонов и планшетов неприемлемо. Точнее, это касается в основном сайдбара, который располагается слева или справа от основного содержания вебстраницы.

При стандартной верстке дизайна с несколькими колонками для ПК с целью образования сайдбара используется CSS свойство плавающих элементов float, значение которого должно быть left или right. Для узких же экранов флоат должен принимать параметр none или не должен быть прописан вовсе. В моей теме расположение правого сайдбара диктуется свойствами, приписываемыми классу widget-area:

.widget-area {
    float: none;
    margin: 24px 0 0;
}

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

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

Дизайн для пользователей устройств с первой точкой излома

Для устройств, минимальная ширина которых составляет 770 пикселей, в файле стилей изменен вид навигационного меню на горизонтальное посредством display, которому присвоено значение inline-block !important. Но еще необходимо скрыть выпадающую навигацию, которая актуальна для экранов меньшего размера, с помощью правила display: none. Нужные свойства для менюшки теперь выглядят так:

@media screen and (min-width: 770px) {
@media screen and (min-width: 770px) {
.main-navigation .menu-toggle, .main-navigation.toggled .nav-menu {
    display: none;
}
 
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: inline-block !important;
    text-align: left;
    width: 100%;
}
 
.main-navigation ul {
    margin: 0;
    text-indent: 0;
}
 
.main-navigation li:nth-child(2n+1) {
    background-color: #a98127;
    height: 30px;
}
 
.main-navigation li a, .main-navigation li {
    display: inline-block;
    text-decoration: none;
}
 
.main-navigation li {
    font-size: 12px;
    line-height: 1.42857143;
}

.main-navigation li a {
    margin: -6px 2px 0 2px;
    position: relative;
}

.main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    font-weight: bold;
}

.main-navigation li a, .main-navigation li {
    display: inline-block;
    text-decoration: none;
}
}

Здесь в первой точке излома пункты горизонтального меню близко располагаются друг к другу, посему я решил выделить их с помощью очередности цветового фона. Этого можно достичь посредством CSS правила .main-navigation li:nth-child(2n+1). Кроме этого, начиная с ширины экрана 770px реализовано расположение сайдбара справа указанием float right (при этом прописана относительная ширина этой области контента):

@media screen and (min-width: 770px) {
.widget-area {
    float: right;
    width: 28.5%;
}

Свойства CSS для второй точки излома

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

@media screen and (min-width: 960px) {
.main-navigation li a {
    margin: -6px 15px 0 15px;
}

.site-branding {
    float: left;
    width: 400px;
}

.site-header h1, .site-title {
    margin-bottom: 25px;
    font-size: 25px;
}

.search-box {
    float: left;
    margin-top: 25px;
    margin-left: 70px;
}

.refban {
    float: left;
    margin-top: 20px;
    margin-left: 70px;
}
}

Постараюсь объяснить поподробнее. Во-первых, я изменил отступы margin для пунктов меню, чтобы оно покрасивее смотрелось при данной ширине просмотровой области (.main-navigation li a). То же самое проделал для формы поиска и баннера (классы .search-box и .refban), только посредством margin-top и margin-left.

Во-вторых, увеличил шрифт в названии (правило font-size для классов site-header h1, site-title). В-третьих, задал конечную ширину (width: 400px) для контейнера, включающего в себя блоки с названием и описанием сайта (site-branding).

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

Третья точка излома для больших мониторов

Немного подумав, я решил добавить еще один комплект свойств стилей для мониторов, ширина которых превышает 1250px:

@media screen and (min-width:1250px) {
 .site-header {
       width:1110px;
       position:relative;
}
.main-navigation {
       width:1110px;
}
.main-navigation li a {
       margin:-6px 27px 0 27px;
}
.search-box {
      float:left;
      margin-top:55px;
      margin-left:70px;}
.refban {float:left;
     margin-top:51px;
     margin-left:70px;}
}

Тут я еще больше раздвинул пространство между пунктами меню, задал конечную ширину (width:1110px) всей шапке (class site-header) и навигационной менюшке (main-navigation). Кроме того, увеличил отступы для каждого из блоков, находящихся внутри хидера. В общем, постарался выполнить все, что может улучшить вид вебстраницы.

Как установить адаптивные блоки от Google Adsense на сайт

Объявления контекстной рекламы Гугла (в этом материале о регистрации и добавлении сайта в Адсенс подробности), которые размещаются практически всеми вебмастерами, очень важные составляющие страницы.

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

Поэтому, если у вас уже имеются настроенные рекламные блоки от контекста Гугл, то самое время их поменять на адаптивные, если, конечно, вы этого еще не сделали. Чтобы реализовать задумку, в своем аккаунте Adsense во вкладке «Мои объявления» нажмите кнопку «Новый рекламный блок»:

На следующей странице вам как раз и предложат сразу установить адаптивный блок. Вы можете по своему разумению создать стиль объявления (будет вполне разумно скопировать настройки из старого варианта):

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

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

У меня полученный код адаптивных объявлений сразу корректно заработал в первозданном виде. Однако, по моим сведениям, не на всех ресурсах это так. Поэтому, если у вас возникли проблемы с правильным отображением рекламы Adsense на всех мониторах, то вам стоит попробовать внести разрешенные Гуглом изменения в первоначальный код.

Теперь я хотел бы остановиться на кнопках социальных сетей, которые также являются важным элементом. Я, к примеру, сейчас использую блок соцкнопок от сервиса UpToLike, на котором в настоящее время есть возможность автоматически адаптировать расположение кнопочек под мобильные устройства, что очень удобно:

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

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

Ежели вы работаете в Хроме, то открываете нужную страницу и вызываете замечательный инструмент «Средства разработчика», в который теперь включена опция эмуляции просмотра заданной вебстраницы на мобильных устройствах (активируется данный функционал нажатием кнопки F12 на клавиатуре). Далее щелкаете по значку мобильника в нижней панели:

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

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