Мобильная оптимизация интернет-магазинов: советы по адаптации и полезные сервисы

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

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

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

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

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

Мобильное приложение в общем случае само по себе не генерирует трафик и новых пользователей.

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

Адаптивная модернизация

Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.адаптивная модернизация

Преимущества

• Относительно быстро.
  Способов сделать адаптивную модернизацию довольно много, эта стратегия может заключаться в добавлении файла small-screens.css на сайт. Несмотря на этот довольно грубый пример, адаптивная модернизация — привлекательный вариант для большого числа организаций, так как не требует перестройки всего с нуля.
• Знакомо. Не сбивает с толку пользователей. Люди годами привыкают к интерфейсу и делая модернизацию существующего, организации сохраняют знакомый подход, при этом улучшая жизнь людям с мобильными устройствами.
• Организационно быстрее.
  Говоря политическим языком, модернизировать интерфейс более безопасно, чем начинать всё с нуля. Меньше споров о том, какой оттенок зеленого выбрать, какие банальные стоковые фотографии использовать, а управлению не придётся выворачивать руки. Это позволяет командам быстрее запускать адаптивные сайты.

Недостатки

• Затрагивает только малую часть.
  Опять же, есть множество вариантов выполнения модернизации, но цель большинства из них — «сделать симпатично». Фокусируясь на переделке макета, модернизация часто упускает огромное количество других факторов, которые нужно учитывать при создании успешного проекта для различных устройств.
• 10 литров воды в трёхлитровой банке.
  Так как сайты для настольных компьютеров рассчитаны только для них (и, часто, существуют на протяжении длительного времени), они могут содержать много хлама. А так как модернизация, в основном, заключается в переплавке макета, большинство проблем с контентом, не учитываются полностью.
• Производительность.
  Есть что-то странное в написании кода для лучшей поддержки небольших устройств. Удаление лишнего может зайти слишком далеко, но без концентрации на производительности она сама по себе не вырастет.
• Худшая поддержка.
  Медиа-запросы, изначально разработанные для настольных компьютеров, плохо поддерживаются большинством мобильных устройств.
• Временные исправления.
  Мне хочется умереть, когда я слышу от людей просьбу «сделать адаптивным» что-либо, как будто это просто чекбокс в плане проекта (который иногда на самом деле существует). Такой тип ограниченного мышления упускает реальные возможности, которые предлагает адаптивный дизайн.

Делаем сайт адаптивным

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

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

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

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

@media (max-width: 420px){ /*Ширина экрана 420 пикселей и менее*/
}

Теперь надо определить какой из блоков на странице дает отступы, это оказался блок <body> с классом site, у которого значение padding было 20 пикселей. Пишем новое значение свойства и вставляем его в наш файл стилей:

@media (max-width: 420px){ /*При такой ширине*/
 body.site {padding: 20px;} /*убираем отступы в теле сайта*/
}

Сохраняем файл стилей и смотрим на результат:

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

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

@media (max-width: 408px){
 ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}

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

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

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

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

Для редактирования футера чтобы придать ему адаптивность придется писать множество медиа-запросов для различного значения ширины экрана. Что делать, надо так надо, у меня получилось 8 медиа-запросов для экранов со значением ширины от 685 до 300 пикселей:

@media (max-width: 685px){/*Для футера*/
 .foot-left {width: 25%;}
}

@media (max-width: 550px){/*Для футера*/
 .foot-left {width: 27%;}
}

@media (max-width: 510px){/*Для футера*/
 .foot-left {width: 30%;}
}

@media (max-width: 465px){/*Для футера*/
 .foot-left {width: 35%;}
}

@media (max-width: 420px){ /*При такой ширине*/
 .foot-left {width: 80%;margin-left: 5px;}
 .foot-right {float: right;margin-top: 10px;}
}

@media (max-width: 408px){
 ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}

@media (max-width: 360px){/*Для футера*/
 .foot-left {width: 79%;}
}

@media (max-width: 300px){/*Для футера*/
 .foot-left {width: 75%;}
}

В результате мы получили отличный футер, адаптированный под различные устройства:

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

Как и обещал, выкладываю мои файлы index.php и mycss.css, которые можно скачать, возможно, они Вам пригодятся.

Применяйте микроразметку для того, что засветиться в выдаче

Вы наверное знаете, что мобильные результаты отображаются в виде карточек. Или нет?

И эти карточки делают структурированные данные суперэффективными.

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

Все это может значительно увеличить органический CTR.

Например, посмотрите, какой результаты в мобильной выдаче для сайта Downshiftology отличаются от ToddyCafe.com. Но этот контраст не так силен на десктопе.

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

Зачем нужно оптимизировать сайт под мобильные устройства?

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

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

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

Адаптация платформы под мобильные устройства

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

Сайт с мобильной версией корректно отображается на любом устройстве.

Возможности адаптированной платформы

Адаптация требуется по следующим причинам:

1. Большинство пользователей посещает сайты с мобильных устройств.
2. Удобство применения на смартфонах делает площадку привлекательной. Количество отказов уменьшается.
3. Адаптированная форма помогает увеличить количество клиентов, повысить продажи.
4. Использование на мобильных гаджетах — важный фактор ранжирования в поисковых системах.

Какой должна быть мобильная версия сайта

Качественному адаптированному варианту свойственны такие качества:

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

Стоимость работы у специалиста

Сравнить цены на такие услуги в веб-студиях и у фрилансеров можно с помощью таблицы.

Название работы	Стоимость в студиях	Расценки у фрилансеров
Создание сайта «под ключ»	10-15 тыс. руб.	5 тыс. руб.
Верстка лендинга	от 10 тыс. руб.	от 3 тыс. руб.
Внесение правок в готовый сайт	—	от 300 руб.

Полезные инструменты для оптимизации видео и изображений

Для работы с мультимедийным контентом используются такие сервисы и программы:

• Sencha (динамически меняет размер картинок);
• Adaptive Images (подстраивает изображения под параметры экрана);
• Responsive Widgets (плагин работает с виджетами ВордПресс, доступными на устройствах PlayStation Vita, iPad, Nook);
• Resizeable Images (руководство по изменению параметров картинок с учетом объема текста;
• FitVidJS (плагин для работы с видео);
• FitText (надстройка для изменения размеров шрифтов);
• Photo Swipe (адаптивная галерея для сенсорных устройств).

О чём не стоит забывать адаптируя сайт под мобильные устройства.

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

Адаптация меню требует особого внимания. Горизонтальное меню, скорее всего, расползётся на два или три неровных ряда, а если сделать его вертикальным то займёт большую часть первого экрана. Лучше сделать вертикальное меню изначально скрытым, оставив только кнопку, при клике на которую будет появляться меню. Также не плох вариант с меню в выпадающем списке. В обоих случаях меню не занимает много места на экране. Ещё один простой вариант — запихнуть меню в подвал и оставить кнопку-ссылку в верхней части сайта.

Ещё одна особенность мобильных посетителей — у них нет возможности навести палец на какой-нибудь элемент, следовательно :hover не сработает как нам нужно.

В заключении совет. Старайтесь как можно меньше использовать абсолютных значений. Задав значения в % или em вёрстка сама будет подстраиваться под размер окна браузера.

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

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

Адаптивная верстка

Существует два подхода к созданию мобильного сайта. Первый – создать отдельную версию сайта с упрощённым макетом, такие версии как правило размещаются на поддоменах вида m.example.com. Второй – использовать адаптивную вёрстку, «резиновый макет», при котором элементы на странице автоматически меняют свой размер и местоположение в зависимости от разрешения или ориентации экрана. У второго подхода есть преимущества перед отдельной версией, а именно:

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

При самостоятельной вёрстке, можно использовать средства CSS и JavaScript для создания резинового макета, например:

• CSS: max-width в процентах для заполнения окна браузера по ширине.
• HTML-тег meta viewport с атрибутом initial-scale=1.0, тогда ширина картинок станет равной ширине экрана.
• Использование дочерних файлов CSS для мобильной версии, чтобы «вытянуть» макет по вертикали для узких экранов и упростить его.
• Медиазапросы в CSS3 могут использоваться для выборочного исполнения селекторов. К примеру, медиа-запрос с min-width: 480px может быть использован для применения стиля только если ширина окна больше 480px. Max-device-width позволяет определить ширину экрана устройства (полезно, если браузер открывается в оконном режиме). Медиазапрос по свойству orientation может помочь для выяснения ориентации устройства, и т.п.
• Подгрузка нужной таблицы стилей в зависимости от разрешения может быть выполнена на jQuery (если media queries не поддерживаются).

Создание адаптированных кнопок

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

Вот пара плагинов для WordPress, которые помогут создать на вашем ресурсе удобную навигацию:

Адаптация форм под мобильный трафик

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

• Упрощайте: оставьте поля только для имени и e-mail, а все данные по регистрации высылайте автоматом на почту.
• При заполнении форма не должна вынуждать пользователя что-либо масштабировать и вызывать сомнения, что именно надо вводить в то или иное поле.
• Подписи к полям ввода следует размещать над ними, а не слева, где они вызовут необходимость использовать горизонтальный скролл.
• Используйте возможности мобильного устройства, например, определение местоположения по GPS, вместо того, чтобы заставлять пользователя вводить его вручную.
• Где уместно, проставьте значения по умолчанию, чтобы сэкономить время посетителя сайта.

Удобные конструкторы мобильных версий

Онлайн-сервисы помогают создавать сайты при отсутствии навыков. Стоит рассмотреть 3 самые популярные площадки.

Wix

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

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

Бесплатный конструктор с большим количеством профессиональных шаблонов.

Недостатками платформы считаются:

Ukit

Для сайтов с небольшим количеством страниц.

• умеренные расценки;
• автоматическая подстройка сайта под разные гаджеты;
• встроенные средства продвижения;
• безлимитное хранилище;
• простой интерфейс редактора.

Бесплатные тарифы отсутствуют, что считается главным недостатком. За премиум-шаблоны приходится платить отдельно.

Tilda

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

На Tildа разрабатывают лендинги и сайты-визитки.

Недостатками считаются:

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

Как проверить мобилопригодность: бесплатные инструменты

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

Инструмент от Google, проверяющий оптимизацию сайта для мобильных устройств.

Фрагмент результатов проверки

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Проверка в SERP

Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

Фрагмент результатов проверки

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

Фрагмент результатов проверки

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

Сделайте страницу еще быстрее с помощью этих 3 советов

Во-первых, выполните тест скорости мобильной загрузки на сайте ThinkWithGoogle.com.

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

Он даже загружает сайт с 3G.

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

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

Вот еще несколько советов.

1. Посжимайте изображенияЕсли вы используете WordPress, можете установить оптимизатор для изображений, например Smush Image Compression. Эти ЗНАЧИТЕЛЬНО уменьшит размер графических файлов, что поможет увеличить скорость загрузки.
2. Используйте кеширование браузераGoogle рекомендует это делать, чтобы сделать ваш сайт еще быстрее.
3. Запустите CDNЭто позволит загружать элементы страницы в 2-3 раза быстрее.

Оптимизируйте title и description для мобильной выдачи

Вот как.

Верите или нет, но Google на самом деле дает вам БОЛЬШЕ символов для тега title на мобильных устройствах. Но при этом description немного короче.

Вот точная разбивка.

Desktop

Title: Примерно 70 символовDescription: Примерно 300 символов

Mobile

Title: Примерно 78 символовDescription: Примерно 300 символов

Поэтому расширяйте title.

Адаптируем под интернет.

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

Возьмём обычный сайт. По центру основной контент, по бокам блоки с рекламой, меню, подпиской на рассылку и прочими нужными вещами. В мобильной версии все эти блоки уйдут под основной контент. Открыв такой сайт на смартфоне мы получим страницу таких размеров, что прокручивать её вниз до конца пальцы устанут, а если там ещё и комменты есть, то первым и последним человеком кто увидит футер страницы будет верстальщик. Люди заходят почитать статьи а не размять пальцы. Убрав часть блоков мы без потерь для себя сможем уменьшить вес страницы и получить плюс в карму.

Если собираетесь решить эту проблему старым добрым display: none; должен вас разочаровать. Ничего не выйдет. Блоки конечно выводиться не будут, но вес страницы это не уменьшит.

Следующими в очереди на адаптацию идут картинки. Есть старый способ как подогнать картинку под ширину блока. img { width: 100%; height: auto; } Браузер отресайзит картинку с сохранением пропорций. Всё будет выглядеть отлично но мы снова заставляем пользователей качать не нужные им данные. Для того чтобы отресайзить картинку браузер будет загружать её полноразмерный вариант. Получается что и для дэсктопов и для смартфонов будет грузиться одна и таже «большая» картинка. Согласитесь, было бы лучше если браузер в смартфоне качал картинку меньшего размера и соответственно меньшего веса. К сожалению на чистом html css мы это сделать не можем. Отчасти эту проблему решает тег picture. Проблема в том что он не включён в спецификацию и поддерживается не всеми браузерами. Подробнее про адаптацию картинок

Не все понимают, зачем им использовать адаптивный дизайн

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

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

Как провести оптимизацию мобильной версии сайта для ранжирования в Google?

Выполнить эти 3 способа.

1 способ — Настроить мобильные URL-адреса для разных устройств

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

Но Брайан не рекомендует делать отдельную мобильную версию сайта. Хотя бы потому, что нужно будет использовать атрибуты rel=»alternate» и rel=»canonical» для связи одинаковых страниц на разных устройствах.

Он говорит, что это самый худший способ оптимизировать ваш сайт для мобильного SEO.

Плюсы и минусы мобильной версии сайта

Плюсы	Минусы
Простота интерфейса	Информацию необходимо актуализировать отдельно от основного сайта
Высокая скорость загрузки
Наличие альтернативы для пользователя

Prowebagents рекомендует сделать (проверить), выполнены ли эти задачи, если у Вас есть отдельная мобильная версия сайта.

1. Контент на десктопной версии должен быть доступен и на мобильной.Если часть контента находится во вкладка, то он должен загружаться вместе со страницей. Иначе он не будет индексироваться Google.
2. Микроразметку для мобильной версии.Вот первый и второй конструкторы микроразметки.Перед внедрением на сайт проверяем ее валидность через валидаторы  и Яндекс.
3. Атрибуты rel=»canonical» и rel=»alternate».Ознакомтесь с 5 распространенными ошибками при применении каноникал и не допускайте их.Как правильно использовать атрибут читаем тут, а — здесь.
4. Добавьте мобильную версию сайта в панели веб-мастеров Google, Яндекс и Bing.
5. Мета-теги и контент должен быть идентичен на десктопе и мобилке.
6. Следите за бесперебойной работой сервера, т.к. он может не справиться с загрузкой на desctop и mobile.Еще мы рекомендуем посмотреть  про ускорение мобильных сайтов, из которого вы за 30 минут узнаете, как можно ускорить производительность сайта на мобильных устройствах.

2 способ — Динамический показ

Когда вы динамически показываете контент, все ваше содержимое находится на одном URL-адресе.

Но вы показываете каждому пользователю с разным кодом HTML/CSS в зависимости от используемого устройства.

Например, если вы заходите на страницу https://backlinko.com/seo-tools с десктопного устройства, вы переходите на десктопную версию страницы.

Но если вы заходите на страницу с iPhone 8, вы все равно будете на этой же странице, но получите версию для iPhone 8.

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

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

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

Поэтому, Брайан также не рекомендует делать динамический показ. Но вместо этого он рекомендует…

3 способ — Используйте адаптивный дизайн

С адаптивным дизайном макет и контент страницы отвечают каждому отдельному пользователю.

Адаптивный дизайн исключает возможность создания отдельных URL-адресов или разных кодов HTML/CSS для каждого устройства.

С точки зрения SEO-friendly, такой дизайн является победителем над другими вариантами.

Почему? Если говорить коротко, то потому что:

• Весь ваш контент находится на одном URL-адресе, что хорошо для обмена и получения внешних ссылок.
• Минимальные головные боли для SEO, т.к. нет атрибутов, проблем с дублированием.
• Удобный (UX много значит для SEO благодаря алгоритму RankBrain).
• Нет редиректов, которые вызывают технические проблемы для SEO и могут замедлить работу сайта.
• Не нужно ставить внешние ссылки на мобильную версию.

И если вы все еще не уверены, Google рекомендует адаптивный дизайн. Вот так.

Плюсы и минусы адаптивной версии сайта

Плюсы	Минусы
Информация в рамках одного	Долго и дорого
	Нет возможности выбора для пользователя
	Время загрузки немного дольше

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google — на удобство просмотра сайта с мобильного устройства, они не проходят! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов… По этому смысла их использовать нету…

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

— Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

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

• MobilePress;
• WordPress Mobile Pack;
• Duda Mobile Website Builder;
• WordPress Mobile Pack;
• WordPress PDA & iPhone;
• WPmob Lite;
• WPtap News Press;
• WP Mobile Detector;
• WiziApp.

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

Короче меня это не устроило и я продолжил искать лучшее решение!

Затем, решил поручить эту работу специалисту какому-нибудь на бирже фрилансеров, но после долгих раздумий решил научиться адаптивной верстке и сделать все сам! В конце концов я же разработчик сайтов и пришла пора повышать квалификацию…

Ладно, поехали дальше…

В общем начал я изучать эту тему, сначала теория, затем практика на своем блоге! Ну и в принципе научился, оказалось ничего сложного в этом нет, теперь мой блог адаптивный и подстраивается под любой экран и я рад как слон… Зайдите с любого смартфона ко мне на блог и Вы сами все увидите Найдете косяк — дайте знать…

Теперь поделюсь полученными знаниями с Вами и расскажу о наиболее важных моментах…

Риски блокировки сайта и мобильного приложения

Ваше приложение сильно зависит от политики руководства двух американских компаний — Apple и Google. Допустим, могут ввести на запрет на определенные отрасли (например, онлайн-ставки или что-то подобное). Или в целом по каким-то политическим причинам отключат РФ от своей инфраструктуры. Это маловероятно, но риск потерять все свои наработки и площадку все же есть.

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

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

В случае платформенных приложений — вы полностью в цепких лапах корпорации-владельца платформы.