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


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

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

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

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

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

  1. 1.

    Чтобы выбрать режим отображения, кликните на значок Адаптивный:

  2. 2.

    В выпадающем меню выберите Смартфон:

    Здесь вы можете выбрать другие режимы для редактирования (например: Десктоп — для десктопной версии, Планшет — для планшетной).

  3. 3.

    Появится разметка для редактирования мобильной версии сайта:

  4. 4.

    Теперь вы можете отредактировать модули мобильной версии сайта. Для этого нажмите на Карандаш и выберите нужное действие. О том, как редактировать модули, читайте в статье: Работа с модулями в Конструкторе REG.RU.

    Важно:

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

    • При редактировании в одном из режимов не удаляйте модуль, который не нужен для этой версии. Он удалится и в остальных версиях. В таком случае модуль нужно скрыть: нажмите на Карандаш и выберите Скрыть. Данный элемент скроется только для режима, в котором вы сейчас редактируете сайт.

    • Если шрифт в какой-то из версий слишком большой или маленький (например, в версии «Широкий» шрифт отображается корректно, а в версии «Смартфон» он слишком крупный), то можно изменить его масштаб для одной из версий.

Как изменить масштаб текста в мобильной версии

  1. 1.

    Кликните на текст, чтобы посмотреть его стиль (в примере это стиль Page Title):

  2. 2.

    Кликните на значок Шестерёнка и в выпадающем меню выберите Стили:

  3. 3.

    В открывшемся окне перейдите на вкладку «Ещё». Выберите в списке слева стиль, который используется в тексте мобильной версии. В поле «Смартфон» выберите масштаб шрифта в процентах. Нажмите Применить:

    Здесь вы можете выбрать другие режимы для редактирования (например, Десктоп и Планшет).

  4. 4.

    После сохранения стиля он применится к тексту.

  1. 5.

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

    Статус поменяется на Включено:

  2. 6. Для сохранения внесённых изменений опубликуйте сайт.

Готово, мобильная версия сайта создана.

Режим «Автокомпоновка»

В Конструкторе есть режим «Автокомпоновка». Он включает автоматическую адаптацию сайта под различную ширину устройств.

Данный режим активно дорабатывается и находится в режиме beta-тестирования.

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

Конструктор сайтов REG.RU

Готовый сайт с почтой совершенно бесплатно! Попробуйте прямо сейчас!

Подробнее Помогла ли вам статья?

51 раз уже
помогла

Сделайте свой сайт мобильным сейчас; 3 способа

Примечание редактора: эта статья была первоначально опубликована Web Marketing Today. В 2012 году компания Practical Ecommerce приобрела компанию Web Marketing Today. В 2016 году мы объединили два сайта, оставив компанию Practical Ecommerce в качестве преемника.

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

По данным comScore,

Mobile теперь превышает использование Интернета на настольных компьютерах.

Пользователи

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

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

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

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

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

Самый быстрый способ сделать ваш сайт оптимизированным для мобильных устройств - это создать мобильную версию сайта для настольных компьютеров, используя платформу преобразования, такую ​​как bMobilized или Duda Mobile.

Создайте мобильную версию сайта с помощью таких платформ, как Duda Mobile.

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

2. Используйте мобильные плагины на популярных платформах CMS

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

Мобильные плагины WordPress . WPtouch - один из лучших плагинов для сайтов WordPress, которые хотят добавить индивидуальный мобильный интерфейс. Он предоставляет платную версию, которая содержит дополнительные функции для сайтов электронной торговли. JetPack - это решение WordPress.com для реализации простой мобильной темы для обеспечения мобильного доступа к своим веб-сайтам.

WPtouch - это плагин для сайтов WordPress, которые хотят добавить индивидуальный мобильный интерфейс.

Мобильные плагины Joomla . И Responsivizer, и JoomlaShine содержат простые способы добавить мобильную функциональность на ваш сайт. Это может быть необходимо только в том случае, если вы используете старую версию Joomla, например 2.5 или ниже. Joomla 3.x поддерживает мобильные веб-сайты.

Мобильные плагины Drupal . Drupal предлагает два модуля - ThemeKey и MobileTheme - которые определяют, использует ли пользователь мобильное устройство, и автоматически переключают тему сайта на более удобный мобильный вид.Оба предоставляют простые в использовании интерфейсы после их установки.

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

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

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

Разработка сайта с ориентацией на мобильные устройства требует планирования того, как он будет использоваться на мобильных устройствах - упражнение, которое помогает определить приоритетность контента, размещаемого на сайте.Также возникает вопрос: если он не нужен на мобильных устройствах, то должен ли он быть на настольной версии?

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

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

Пример веб-сайта с адаптивным дизайном.

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

Что бы вы ни делали, делайте это сейчас

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

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

.

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

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

Почему веб-сайт, оптимизированный для мобильных устройств, так важен для 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. Инструмент предоставляет диагностику обзор и рекомендации по улучшениям.

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

Совет: чтобы страницы загружались быстрее на мобильных устройствах, Google поддерживает платформу AMP (Accelerated Mobile Страницы).Этот проект с открытым исходным кодом направлен на улучшение взаимодействия с мобильными пользователями. Удаляет сжатый 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, Битрикс и Сайты Google. Вкратце, вам нужно убедиться, что ваша тема обновлена ​​и поддерживает адаптивный дизайн; вы можете найти такие информация в документации по теме.
Используйте теги alt для изображений

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

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

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

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

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

Создание кнопки "Звонок нажатием"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если существует отдельная версия веб-сайта для мобильных устройств, вы можете отправить несколько карт сайта, чтобы указать, что некоторые из ваших URL служат для содержания мобильного Интернета. После добавления мобильного контента отправьте Карта сайта в 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> Настройки сканера> Следуйте инструкциям robot.txt для Googlebot-Mobile .

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

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

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

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

Перед вами

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

.

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

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

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

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

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

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

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

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

Веб-сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

Если вы создали версию своего веб-сайта для мобильных устройств , вам необходимо убедиться, что перенаправляет посетителей мобильных устройств на ваш веб-сайт для мобильных устройств. Например, если кто-то посещает domain.com со своего телефона, вам понадобится способ перенаправить его на m.domain.com (мобильная версия вашего сайта, созданная на субдомене под названием « m ») .

Тогда возникает вопрос: «Как вы автоматически отправляете пользователей на мобильный сайт?»

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

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

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

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

Используйте Javascript или jQuery

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

Использование кода программирования для обнаружения мобильного браузера

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

Использовать универсальный файл ресурсов беспроводной сети (WURFL)

WURFL на самом деле состоит из API и файла конфигурации XML, который дает вам доступ к базам данных, которые содержат информацию на самых разных мобильных устройствах. Преимущество использования WURFL заключается в том, что хотя код API может устареть, информация о мобильных устройствах регулярно обновляется. Вы можете периодически обновлять его и получать самый последний список используемых мобильных устройств. Вам нужно будет реализовать API на своем веб-сайте, чтобы использовать его.

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

Чтобы узнать больше об использовании адаптивного дизайна, прочтите нашу статью «Введение: создание адаптивного веб-дизайна».

.

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

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

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

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