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


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

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

Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!

Как проверить сайт?

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

Начнём с сервиса, и воспользуемся инструментом от Google — developers.google.com. Вот какую печальную картину имеет мой сайт:

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

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

Как решить проблему?

Тут есть несколько вариантов.

1. Оптимизировать данный шаблон, устранить ошибки и так далее

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

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

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

2. Поставить адаптивный шаблон

Но для меня это тоже не выход, так как полностью менять шаблон сайта я не хочу, с этим я провозился слишком долго и он мне ОЧЕНЬ нравится. Может есть плагины, которые могут внести изменения в шаблон? Поискал, ничего не нашёл, предлагается только много адаптивных дизайнов. Как вариант, можно купить ПРЕМИУМ ШАБЛОН, такие шаблоны имеют много дополнительных функций и ОБЯЗАТЕЛЬНО такой шаблон будет адаптивным.

Вывод тут можно сделать такой: когда вы только начинаете делать свой сайт, то СРАЗУ выбирайте адаптивную тему. Как ещё можно решить мою проблему?



Если вам нравится ваш шаблон, но у вас не адаптивная верстка, то ОЧЕНЬ ХОРОШИМ ВАРИАНТОМ будет сделать его адаптивным. Чтобы сделать это своими силами нужно быть программистом, поэтому самым целесообразным решением будет заказать эту услугу у профессионалов.

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

3. Мобильная версия сайта

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

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

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

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

Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!

Вроде всё хорошо, и проблема решена, но….

1. Не отображается реклама, плагин её режет.

2. В подвале две внешние ссылки.

Если вторую проблему можно легко решить, то первую решить будет сложно. А как сами понимаете, если сайт живёт рекламой, то такой минус критичен.

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

Ну что же, попробую поискать что нибудь получше.

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

Неужели нет чего то получше? Поищем…

И вот я на я нашёл САМЫЙ лучший плагин для мобильной версии сайта WPSmart Mobile. Из всех недостатков — это только ссылки в подвале, но мы их ведь можем убрать? Правда реклама осталась только в самой статье, но это мелочи, её можно встроить в сам мобильный шаблон, вечером займусь.

Что ещё прекрасно, что даже на планшете сайт выглядит отлично, как и на моём маленьком смартфоне. Не поленился и запустил Android на виртуальной машине, чтобы вам показать (о том, как установить андроид на виртуальную машину, можно прочитать ЗДЕСЬ.:

Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь — удалить ссылки в подвале, так, на всякий случай.

Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php — путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php

<div>
 Site optimized for mobile devices by <a href="http://www.wpsmart.com/mobile">WPSmart Mobile</a>
 <a href="http://wordpress.org/">Proudly powered by WordPress</a> | <a href="#">View Full Site</a>
 </div>

Удаляем этот кусок кода и все, ссылок в футере нет. Можно не удалять, а поставить свои ссылки. Но учтите, что при обновлении плагина всё, скорее всего, вернётся на круги своя. Или не обновляйте плагин, или всегда удаляйте.

ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:

Allow: /wp-content/plugins/wpsmart-mobile/themes

Только после этого тест на мобильность будет успешен:


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

Дальнейшая доработка плагина WPSmart Mobile

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

ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!

Центровка картинок. Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:

body img {
 display: block;
 margin: 0 auto;
 }

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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

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

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

Тогда в мире было 7,2 миллиарда гаджетов, которые росли в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм в пользу мобильных сайтов .

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

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

Итак, приступим.

Что такое веб-сайт, удобный для мобильных устройств?

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

Веб-сайт

BiQ Cloud является хорошим примером веб-сайта, который разработан с учетом потребностей мобильных пользователей.

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

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

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

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

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

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

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

Оптимизирован ли мой веб-сайт для мобильных устройств?

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

Все, что вам нужно сделать, это вставить URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.

Google Test проанализирует ваш веб-сайт и покажет результат.

Анализ вашей веб-страницы может занять некоторое время…

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

В случае успеха вы сможете просматривать мобильную версию своего веб-сайта так, как ее видит робот Googlebot:

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

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

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

.

Как просмотреть мобильную версию сайтов WordPress с рабочего стола

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

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

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

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

Почему стоит предварительно просмотреть макет мобильного устройства

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшеты.

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

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

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

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

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

Видеоурок

Подписаться на WPBeginner

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

1. Использование настройщика тем WordPress

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

Просто войдите в свою панель управления WordPress и перейдите на экран Внешний вид »Настроить .

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, в левом меню вы можете увидеть немного разные параметры:

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

Примечание: Синие символы редактирования присутствуют только в средстве предварительного просмотра. Вы не увидите их на своем действующем сайте.

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

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

2. Использование режима устройства Google Chrome DevTools
В браузере

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

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

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

Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

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

Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы перейти к мобильному представлению.

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

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

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

Этот круг можно перемещать с помощью мыши, чтобы имитировать сенсорный экран мобильного устройства.

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

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

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

Как создать контент для мобильных устройств в WordPress

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

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

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

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

Отличный способ создавать мобильные всплывающие окна и формы для привлечения потенциальных клиентов - использовать OptinMonster. Это самый мощный плагин для всплывающих окон WordPress и инструмент лидогенерации на рынке.

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

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

Бонус: Ознакомьтесь с нашим выбором лучших телефонных сервисов для бизнеса, чтобы вы могли добавить кнопку «Щелкнуть для вызова» для мобильных пользователей.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как сделать ваш сайт мобильным? (5 шагов)

Как сделать ваш сайт мобильным?
5-шаговый план оптимизации вашего веб-сайта для мобильных устройств!

Почему для Google так важен удобный для мобильных устройств веб-сайт?

За десять лет глобальная аудитория перешла с настольных компьютеров на мобильные. Это закончилось тем, что Google объявил, что в 2020 году индексация сначала для мобильных устройств полностью одобрена. Это означает, что при сканировании веб-сайтов приоритет отдается сайтам, оптимизированным для мобильных устройств.Для владельцев сайтов это становится чрезвычайно важным: если вы хотите улучшить рейтинг своего сайта и оставаться на вершине результатов поиска, сделайте его удобным для мобильных устройств.

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

  • В 2020 году на мобильных пользователей будет приходиться более половины мирового трафика, и эта тенденция, вероятно, сохранится.
  • Это был один из факторов ранжирования поисковых систем, повышающий удобство использования мобильных сайтов в результатах поиска.
  • По данным Google, 70% веб-сайтов уже перешли на обслуживание мобильных устройств.

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

Готовы сделать свой сайт мобильным?

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

  • Мобильные экраны довольно маленькие
  • Сотовые телефоны обычно имеют более медленные процессоры по сравнению с ПК
  • Мобильные соединения обычно имеют меньшую пропускную способность и меньшую скорость загрузки
  • Народ тыкает пальцами в тачскрин
  • Люди используют мобильные устройства в дороге

В этом пошаговом руководстве представлена ​​четкая стратегия для долгосрочного выполнения и правильного выполнения всей работы по оптимизации мобильных устройств.Когда начать?

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

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

3. Используйте передовые методы мобильной поисковой оптимизации.
Чтобы сделать мобильную поисковую оптимизацию эффективной, убедитесь, что ваш веб-сайт соответствует критериям мобильной оптимизации Google, таким как использование удобочитаемого текста, отказ от программного обеспечения, не распространенного на мобильных устройствах (например, Flash) и т. Д.

4. Избегайте распространенных ошибок мобильной оптимизации
Не блокируйте JavaScript, CSS или файлы изображений; Избегайте размещения невоспроизводимого контента, исправления нерелевантных перекрестных ссылок и т. д.

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

Давайте подробно рассмотрим шаги.

1. Проверьте свой сайт на удобство использования для мобильных устройств

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

Перейдите в Google Analytics> Аудитория> Мобильные> Обзор / Устройства и просмотрите разбивку посетителей по устройствам: мобильные, настольные и планшеты. Вы можете еще больше разбить это значение, чтобы увидеть такие показатели, как показатель отказов, продолжительность посещения и коэффициент конверсии цели с помощью определенных устройств (iPhone, телефоны Samsung, iPad и т. Д.).

Затем проверьте свой сайт с помощью Google Mobile Friendly Test. Там вы можете получить один из двух следующих результатов:

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

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

Кроме того, вы можете проверить мобильность вашего сайта (и страниц) с помощью веб-сайта Auditor.Запустите инструмент, введите URL-адрес, который вы хотите проверить, проверьте Структура сайта> Аудит сайта> Кодировка и технические факторы .

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

2. Выберите удобное для мобильных устройств решение

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

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

Адаптивный веб-дизайн (рекомендовано Google)

Динамическое обслуживание

Отдельный сайт для мобильных пользователей

Мобильное приложение

1.Адаптивный веб-дизайн

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

Плюсы

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

Минусы

  • Адаптивный дизайн немного ограничен в количестве способов, которыми он может «реагировать» на пользователей. Поскольку вы обслуживаете только одну часть контента, вы можете создать интерфейс, который отображает информацию только для одного типа намерений пользователя.
  • Реализация адаптивного веб-дизайна означает серьезную переработку макета и структуры сайта, что может быть неприемлемо для некоторых владельцев веб-сайтов.
2. Динамическое обслуживание

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

Плюсы

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

Минусы

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

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

Например, многие онлайн-компании в настоящее время имеют поддомен m.example.com , на который мобильные посетители перенаправляются в зависимости от их устройства / пользовательского агента. Ссылка на полноценную версию также обычно предоставляется, если кто-то хочет увидеть весь сайт.

Плюсы

  • Гибкость.Мобильные пользователи обычно хотят определенные типы контента, такие как местонахождение компании, часы работы, направления и т. Д. С помощью отдельного мобильного сайта легко сделать свои веб-страницы, разработанные специально для мобильных пользователей, то есть наполнить их существенно информация, отличная от той, которую мы ожидаем увидеть на сайте для настольных компьютеров.
  • Аналитика. С точки зрения маркетинга проще направить мобильный трафик в отдельную воронку продаж. Итак, мобильный сайт предоставляет вам всю необходимую аналитику для мобильной кампании.

Минусы

  • Трудно охватить все основания. При таком подходе сложно настроить свой сайт на все возможные типы портативных устройств, с которых он может быть доступен. Однако, если вы в первую очередь нацелены, скажем, на пользователей iPhone, это не проблема.
  • Суета в обслуживании. Даже если ваш мобильный сайт может быть хорошо синхронизирован с вашим основным сайтом, он все равно требует обслуживания, и вам придется помнить об этом каждый раз, когда вы обновляете свой контент или вносите изменения в свой сайт.
4. Мобильное приложение

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

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

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

Плюсы

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

Минусы

  • Дорогостоящее решение. Вы могли заметить, что мобильные приложения (или даже несколько решений для разных платформ) разрабатывают в основном крупные бренды.
  • Требуются дополнительные усилия со стороны пользователя. Совсем другое дело - заставить людей установить / использовать ваше мобильное приложение. Скорее всего, это будут делать только ваши лояльные клиенты или те, кто находится довольно далеко в своем цикле покупки.
Совет: существует технология Progressive Web App (PWA), которая создает гибридный интерфейс, похожий на приложение.Когда сайт открывается в браузере настольного компьютера, он выглядит как обычный сайт, а на экране мобильного устройства создается впечатление приложения. Технология PWA позволяет быстрее загружать сайт за счет кеширования. Причем пользователю не нужно скачивать его из магазина приложений - достаточно согласиться с сайта, чтобы добавить значок приложения на рабочий стол. Такие гиганты, как Uber, Twitter, Alibaba использовали PWA и не пожалели об этом.

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

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

Код в HTML5

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

Убедитесь, что ваша страница загружается быстро

Скорость - решающий фактор, потому что мобильные пользователи не любят терять время. Последние обновления Google Core Web Vitals позволяют оценить работоспособность сайта, и одним из основных показателей является скорость загрузки веб-сайта. Если ваш сайт не загружается в течение 2,5 секунд, его нужно улучшить.

Вы можете найти множество бесплатных инструментов для измерения пользовательского опыта, например, Chrome User Experience Report, Lighthouse и т. Д.Например, чтобы проверить скорость вашего сайта с помощью Page Speed ​​Insights, просто введите URL-адрес и посмотрите, соответствует ли ваш сайт оценке Core Web Vitals. Инструмент предоставляет обзор диагностики и рекомендации по улучшению.

Вы можете использовать веб-сайт Auditor, чтобы быстро проверить все ваши носители и найти виновника в большом размере или длительном времени загрузки. Просто запустите инструмент, создайте проект, выберите Структура сайта> Все ресурсы , и вы увидите свои страницы со всеми их файлами, их размером, статусом HTTP и т. Д.Найдите изображения, требующие сжатия, или встроенные ссылки, время отклика которых слишком велико, и, скорее всего, вы сможете заменить их другими ресурсами.

Совет: чтобы страницы загружались быстрее на мобильных устройствах, Google поддерживает платформу AMP (Accelerated Mobile Pages). Этот проект с открытым исходным кодом направлен на улучшение взаимодействия с мобильными пользователями. Он удаляет сжатую HTML-копию веб-сайта, кэширует ее в облаке и мгновенно выполняет предварительный рендеринг для пользователей. Главный аргумент против технологии заключается в том, что пользователи остаются в Google, а не переходят на сайт издателя.И по-прежнему требуется соответствие определенным критериям и некоторый код для создания страниц AMP. Этот проект лучше подходит для средств массовой информации, которые в значительной степени полагаются на то, чтобы сообщать свои новости как можно скорее. Вы можете узнать больше о страницах AMP в нашем блоге здесь.
Не делайте свои страницы тяжелыми

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

Совет: Google предоставляет решение Web Light. Он работает путем перекодирования существующих страниц для мобильных клиентов с медленным подключением. Как утверждает Google, в четыре раза более быстрая загрузка и 80% уменьшение байтов на страницу обеспечивают 50% рост трафика от клиентов с медленным соединением.
Выделение кнопок навигации

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

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

Сделайте так, чтобы содержимое страницы соответствовало экрану

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

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

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

Сделайте текст читабельным без увеличения

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

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

Старайтесь не втискивать слишком много сенсорных элементов в одностраничный сегмент или делать их слишком маленькими.Google рекомендует минимальный размер целевой точки касания примерно 7 мм или 48 пикселей CSS на сайте с правильно настроенным мобильным окном просмотра.

Совет: для тех, кто использует WordPress, Joomla и т. Д.
Если вы используете готовую CMS на своем сайте (в отличие от написания кода вручную с нуля), вот несколько рекомендаций по мобильной оптимизации для сайтов, работающих на WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix и Google Sites. Вкратце, вам нужно убедиться, что ваша тема обновлена ​​и поддерживает адаптивный дизайн; вы можете найти такую ​​информацию в документации по теме.
Используйте теги alt для изображений

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

Сделать поиск по сайту доступным

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

Предоставить ссылки для перехода

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

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

Почему бы не приклеить кнопку Click-to-Call где-нибудь на своей мобильной странице. Ведь на телефоне его все-таки будут смотреть! Как показывают исследования, такая кнопка способна резко увеличить конверсию.

Включить автоматический вход

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

4. Избегайте этих ошибок мобильной оптимизации

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

Не блокировать JavaScript, CSS или файлы изображений

Google уже давно советует оптимизаторам поисковых систем не блокировать эти медиа (скажем, в robots.txt), так как это может привести к ухудшению рейтинга вашего мобильного и настольного сайта. Чтобы убедиться, что они не заблокированы, проверьте это с помощью инструмента проверки URL в консоли поиска Google.

Не загружайте основной контент лениво

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

Не использовать рамки
Фреймы

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

Правильно настройте переадресацию

Что касается мобильной версии сайта, ошибочные перенаправления - это любые перенаправления, которые указывают мобильному пользователю на неправильный эквивалент URL-адреса "рабочего стола".Обычно об этих проблемах сообщается в Инструментах Google для веб-мастеров.

Остерегайтесь мобильных устройств 404

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

Проверить на нерелевантные перекрестные ссылки

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

Не используйте таблицы для настройки макета

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

Не заставляйте всплывающие окна портить пользовательский опыт

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

Не заставляйте пользователей агрессивно скачивать ваше приложение

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

Не забудьте добавить мобильные URL-адреса в файл Sitemap

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

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

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

5. Используйте мобильные инструменты SEO, чтобы повысить свой рейтинг в Google Mobile

Итак, даже когда вы закончили работу с вашим мобильным сайтом, который соответствует критериям Google, означает ли это, что он автоматически получит высший рейтинг в мобильной поисковой системе? Ну нет.Вам все равно потребуется оптимизировать свой мобильный веб-сайт / приложение, чтобы продвигать его в мобильном поиске или в магазине приложений.

Основы мобильной поисковой оптимизации

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

Исследование ключевых слов, ориентированное на мобильные устройства

Возможно, вам следует использовать для своего мобильного сайта / приложения ключевые слова, немного отличающиеся от тех, которые вы используете для своего сайта для настольных компьютеров? Зайдите в Планировщик ключевых слов Google и выберите Mobile Trends , чтобы узнать:

Используйте Rank Tracker, чтобы найти мобильные ключевые слова с высоким рейтингом.Создайте проект и добавьте целевой URL. Выберите Keyword Research> Ranking Keywords> Search as Google Mobile .

Отслеживание органического ранжирования в мобильной поисковой выдаче

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

Сканирование как мобильный робот Googlebot

Вы можете видеть свой веб-сайт так, как его сканирует мобильный робот Googlebot. Перейдите в Website Auditor> Preferences> Crawler settings> Следуйте инструкциям robot.txt для Googlebot-Mobile .

Основы ASO (оптимизация магазина приложений)

В 2018 году люди скачивали приложения 194 миллиарда раз, и более половины этих загрузок приходилось на поиск в магазинах приложений.Так что оптимизация для более высоких позиций в Google Play и iOS App Store - отличная идея.

Факторы ранжирования оптимизации магазина приложений
  • Ключевые слова в заголовке приложения (вот хороший инструмент, который извлекает предложения ключевых слов в App Store из автозаполнения)
  • Ключевые слова в описании приложения
  • Использование красивой иконки (для увеличения загрузок, которая поможет ASO)
  • Используйте правильный тип и категорию
  • Стремитесь к более высоким рейтингам и лучшим отзывам
  • Попробуйте получить больше загрузок
  • Совет
  • Pro: используйте плагины Google+ на странице своего приложения, так как +1 помогает вам занять место в Google Play.
Трекеры рейтинга в магазине приложений

Используйте инструменты, чтобы проверить место вашего приложения среди приложений Android или iOS, например SensorTower или SearchMan.

Перед вами

Итак, вы находите мобильный веб-дизайн легким и захватывающим? У вас есть свои собственные мобильные приемы, которые сделали ваш сайт суперхитом? Пожалуйста, поделитесь своими мыслями и опытом в комментариях ниже!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий