Урок 157. Оптимизация сайта под мобильные устройства

Урок 157. Оптимизация сайта под мобильные устройства

Всем-всем привет!

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

Объясняется данный факт тем, что именно два года назад (на момент написания статьи — 2017 год) поисковая система Google начала учитывать адаптивность сайтов под моб. устройства. Если же веб-ресурс некорректно отображается на смартфоне, то он понижается в выдаче. А терять в среднем 17% трафика мало кому хочется. Позже к этому подключился и Яндекс.

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

Погнали!

Для чего нужна оптимизация сайта для мобильных устройств?

Многие рекламодатели и владельцы сайтов задаются вопросом — зачем мне оптимизировать сайт под мобильные устройства? Как я уже сказал, с 2015 года поисковые системы начали обращать на данный момент особое внимание. И если игнорировать его, то можно с легкостью получить пессимизацию со стороны ПС, в результате чего теряется часть трафика. Особенно так любит делать Google.

Однако стоит отметить тот факт, что влияние алгоритмов Google и Яндекс, направленных на работу с оптимизированными и не оптимизированными под мобильные устройства сайтами, маленькое. То есть, такого тотального контроля за данным фактором не ведется, поэтому в «мобильной» выдаче мы можем частенько наблюдать не адаптивные сайты. Тут играет роль немного другое.

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

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

Как проверить сайт на оптимизацию под моб. устройства?

Google конкретно запарился проблемой мобильный сайтов и создал очень удобный сервис, показывающий насколько оптимизирована страница под моб. устройства и оптимизирована ли вообще. Называется он Mobile Friendly, вот ссылка на него.

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

В противном случае:

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

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

Итак, условно способы реализации адаптивной верстки можно разделить на два вида:

  1. С использованием специальных плагинов;
  2. Работа с кодом сайта.

Каждый имеет свои плюсы и минусы, о которым мы поговорим прямо сейчас.

Адаптивная верстка с использованием специальных плагинов

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

Умные люди, разработчики решили максимально упростить процесс создания мобильной версии сайта для незнающих путем создания специальных плагинов — дополнений к «движку». Одним из таких является плагин WpTouch, который позволяет создать «мобильный» сайт за день (грубо говоря), при этом с кодом Вам дело иметь не придется.

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

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

Самым оптимальным вариантом будет использование уже готовых адаптивных решений из базы шаблонов (тем) WordPress. Поступив таким образом, Вы не только облегчите себе жизнь, но и сэкономите на услугах программистов-верстальщиков.

Адаптивная верстка сайта посредством работы с кодом

Работа с кодом сайта — это дело сложное, а создание адаптивной версии веб-ресурса еще сложнее. В своей практике пытался создать два мобильных сайта, но полностью реализовать их не получилось. В первом случае была попытка создать мобильный сайт на поддомене типа m.site.ru: у меня получилось сделать более-менее нормальную верстку, расставить все блоки по нужным местам, сделать текст читабельным. Короче говоря, мобильный сайт я создал, но проблема крылась в другом.

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

Во втором случае, я создавал сайт для интереса (мне очень интересно писать код), который я пытался сделать адаптивным при помощи каскадных стилей CSS. У меня получилось, но дальше разработки сайт дело не ушло.

Хочу отметить, что создание адаптивной верстки при помощи CSS является отличным вариантом, ведь: не нужно создавать отдельный сайт и заливать его на отдельный поддомен и не нужно возиться с редиректами. Достаточно просто использовать директивы @media. Их еще называют Media Queries:

@media screen and (max-width: 1025px) {

Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана
меньше 1025px

}

@media screen and (max-width: 760px) {

Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана
меньше 760px

}

Очень удобный способ, так как не требует создания каких-то левых файлов. Работа ведется исключительно с файлом style.css, где у Вас прописаны все стили сайта.

Вот пример из моих стилей для конкретных элементов:

@media screen and (max-width: 991px) {
/*Все стили используются для баннера в шапке сайта на страницах статей и заголовка на главной*/
 #banner-head {
 margin-top:80px;
 }
 .box-wrapper h1{
 margin-top:150px !important;
 }
}
@media screen and (max-width: 840px) {
 #banner-head {
 margin-left:60px;
 }
}
@media screen and (max-width: 801px) {
 #banner-head {
 margin-left:40px;
 }
}
@media screen and (max-width: 786px) {
 #banner-head {
 margin-left:20px;
 }
}
@media screen and (max-width: 765px) {
 #banner-head {
 margin-left:5px;
 }
}
@media screen and (max-width: 757px) {
 .box-wrapper h1{
 font-size:32px !important;
 }
}
@media screen and (max-width: 750px) {
 #banner-head {
 display:none;
 }
}
@media screen and (max-width: 539px) {
 .box-wrapper h1{
 font-size:28px !important;
 }
}
@media screen and (max-width: 480px) {
 #banner-head {
 visibility: hidden;
 display:none;
 }
}
@media screen and (max-width: 471px) {
 .box-wrapper h1{
 font-size:24px !important;
 }
}
@media screen and (max-width: 407px) {
 .box-wrapper h1{
 font-size:22px !important;
 }
}
@media screen and (max-width: 375px) {
 #banner img{
 width: 100% !important;
 }
}
@media screen and (max-width: 370px) {
 .box-wrapper {
 width: 380px !important;
 }
 .box-wrapper h1{
 margin-left:-15px !important;
 }
}
@media screen and (max-width: 357px) {
 .box-wrapper h1{
 font-size:20px !important;
 }
}
@media screen and (max-width: 345px) {
 .box-wrapper h1{
 margin-left:-25px !important;
 }
}
@media screen and (max-width: 338px) {
 .box-wrapper{
 margin-top:-50px;
 }
 .box-wrapper h1{
 margin-left:-35px !important;
 }
 .sep{
 margin-left:-20px !important;
 }
}

Мета-тег Viewport

Если же Вы не хотите создавать отдельную мобильную версию или прописывать директивы @media в CSS-стилях, то есть еще один способ, при котором Ваш сайт будет более менее отображаться на «мобилках» — использование мета-тега Viewport.

Однако рекомендуется использовать данный мета-тег совместно с адапативной версткой. Но допускается и при фиксированной или «гибкой» верстке.

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

Устанавливается данный мета-тег в пределах тегов <head></head> и имеет следующий вид:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Более подробно можете почитать тут.

Таким образом у нас получилось четыре способа оптимизации сайта под мобильные устройства:

  1. Использование специальных плагинов для Вашей CMS;
  2. Использование поддомена типа m.site.ru с мобильной версией сайта;
  3. Использование Media Queries в CSS;
  4. Использование мета-тега Viewport.

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

Ну а на этом все, дорогие друзья!

До скорых встреч!


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *