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


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

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы б

Как просмотреть мобильную версию сайтов 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.

.

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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями
.

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

.

web - Как запустить мобильную версию сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

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

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

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

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