Это 2017 год. Это означает, что вы больше не можете игнорировать эту маленькую вещь, называемую мобильным дизайном, когда дело доходит до WordPress. Но мы не все крупные компании с миллионами в банке, верно? Так что если вы просто обычный старый пользователь WordPress, Как вы можете сделать свой веб-сайт WordPress мобильным бесплатно?
В этом и заключается проблема! Это может показаться сложной задачей, но есть много основных принципов, которые вы можете реализовать самостоятельно, чтобы улучшить мобильность вашего сайта. И я буду спорить все из них.
Вот все, что я расскажу в этом довольно длинном посте:
- Почему важно сделать ваш сайт WordPress мобильным
- Бесплатный инструмент для проверки мобильной совместимости вашего сайта
- Несколько простых способов сделать ваш сайт WordPress мобильным совместимым бесплатно
- Два разных способа создания версии приложения на вашем сайте WordPress
Я собираюсь вдаваться в подробности здесь … так что я надеюсь, что у вас есть свежая чашка кофе! Начнем…
Цель мобильной дружбы как цель
Лицо сети меняется. Десять лет назад вы даже не увидели бы поста, посвященного оптимизированному для мобильных устройств дизайну, не говоря уже о том, чтобы он был важной целью для вашего сайта. Теперь все изменилось.
В 2016 году мобильные браузеры превзошли настольные веб-браузеры в первый раз, Да, на мобильный трафик приходится удивительно 51,3% мирового трафика. И хотя настольный компьютер остается легким лидером в США. Соединенные Штаты Америки (Это составляет 58% всего трафика), тенденции определенно движут все в сторону мобильных устройств.
Итак, я думаю, что я говорю это …Вскоре мы можем увидеть сообщения о том, «почему вам все еще нужно, чтобы ваш веб-сайт был удобным для рабочего стола».
Помимо простого предоставления доступа к вашему сайту одним из самых популярных способов просмотра веб-страниц, оптимизированный для мобильных устройств дизайн может помочь вашему сайту WordPress занять более высокое место в результатах поиска. Google мобильный поиск.
Это связано с тем, что у Google есть специальный алгоритм для мобильных устройств, который они применяют к результатам своего мобильного поиска. В результате использования алгоритма сайты, оптимизированные для мобильных устройств, получают повышение рейтинга результатов мобильного поиска. Частично это включает в себя обеспечение мобильности вашего интернет-магазина, о чем вы можете узнать на ECommerce Booth.
В любом случае, если вы считаете, что большинство поисковых запросов в Google сейчас выполняются на мобильных устройствах, это отличный стимул!
Обновление контента
Бесплатный контрольный список безопасности WordPress
(4 страницы) 21-ступенчатый контрольный список для
Защищайте сайт WordPress на 99,9%
скачать
Насколько мобильным ваш сайт WordPress… прямо сейчас?
Хорошо, вы знаете, что оптимизированный дизайн для мобильных устройств важен. Но как вы можете узнать?
- Что такое оптимизированный дизайн для мобильных устройств
- Является ли ваш сайт WordPress мобильным прямо сейчас?
Это то, что я расскажу в этом разделе!
Что Google считает подходящим для мобильных устройств?
К счастью, вам не нужно гадать, когда речь идет о том, что представляет собой удобный для мобильных устройств дизайн вашего сайта WordPress. На самом деле, Google выпустил конкретные рекомендации для мобильной совместимости. Это то, что говорит Google чтобы избежать когда вы пытаетесь сделать свой сайт WordPress мобильным:
- Неиграемый контент – Убедитесь, что источники контента, которые вы включаете, воспроизводятся как на мобильных устройствах, так и на настольных компьютерах.
- Малые размеры шрифта – Google рекомендует минимум 16px для мобильных шрифтов.
- Нажмите элементы, которые находятся слишком близко – Пальцы толстые! Вы должны дать людям достаточно места, чтобы прикоснуться к нужному предмету.
- Неправильный вид – убедитесь, что ваша мобильная страница правильно устанавливает графическое окно.
Помимо рекомендаций Google, вы также можете найти множество ресурсов для веб-дизайнеров по мобильному дизайну. Отличное место для начала – Smashing Guidelines for Mobile Web Development.
Как использовать удобный для мобильных устройств инструмент Google Checker
Так как же узнать, подходит ли ваша существующая тема WordPress для мобильных устройств? Это на самом деле довольно легко благодаря инструменту, который создал Google.
Все, что вам нужно сделать, это пойти сюда. Затем введите URL сайта, который вы хотите проверить, и нажмите ДОКАЗАТЕЛЬСТВО ИСПОЛНЕНИЯ:
Google проанализирует вашу страницу и расскажет, насколько дружелюбен ее текущий дизайн для мобильных устройств:
Похоже, мой сайт уже совместим с мобильными устройствами! Но это твое? Давайте посмотрим, как вы можете сделать свой сайт WordPress мобильным совместимым бесплатно!
Как сделать ваш сайт WordPress мобильным и бесплатным
Вот несколько советов о том, как сделать ваш сайт WordPress мобильным бесплатно. Я расскажу обо всем, от важных решений, таких как выбор темы и плагина, до более мелких вещей, таких как ограничение всплывающих окон и Google AMP.
Мы углубимся в.
Используйте адаптивную тему WordPress
Это может показаться очевидным, но факт таков:
Гораздо проще выбрать мобильную совместимую тему WordPress, чем вернуться и адаптировать существующую тему WordPress для совместимости с мобильными устройствами. И этот процесс, безусловно, не бесплатный!
Поэтому, если вы хотите, чтобы ваш сайт WordPress был дружественным для мобильных устройств, обязательно выберите тему, которая отвечает. Если вы придерживаетесь бесплатных тем, все в каталоге тем WordPress.org отвечает сегодня.
И то же самое происходит почти со всеми существующими темами. Но то, что в теме реализованы базовые принципы адаптивного дизайна, не означает, что она на 100% удобна для мобильных устройств.
Итак … как узнать, насколько дружественна тема WordPress для мобильных устройств? Для этого у меня есть маленькая хитрость!
Видите ли, большинство тем WordPress предоставляют демонстрационный сайт, поэтому вы можете просмотреть, как выглядит тема в живом окружении. Что ж, все, что вам нужно сделать, это взять URL этого демонстрационного сайта и подключить его к инструменту мобильного тестирования Google:
Например, приведенный выше снимок говорит нам, что популярная тема ThemeIsle Zerif Pro на 100% совместима с мобильными устройствами.
Поэтому, прежде чем выбрать любую тему WordPress, убедитесь, что она Совместим с мобильными устройствами, выходящими за рамки поиска для обозначения «Отзывчивый».
Или … Используйте другую тему для мобильных устройств
Одно предостережение: я НЕ рекомендую такой подход для подавляющего большинства сайтов WordPress., Но если вам нравится внешний вид вашей текущей темы на рабочем столе, но вы не довольны его мобильной совместимостью, на самом деле довольно просто использовать другую тему для вашего мобильного трафика.
Бесплатный плагин под названием Mobile Smart позволяет использовать различные темы WordPress в зависимости от устройства каждого посетителя. Или вы можете просто использовать разные шаблоны WordPress для работы в одной и той же теме.
Pro версия также позволяет:
- Укажите разные версии ваших страниц для разных устройств.
- Отправить мобильный трафик на другой URL
- Отключите определенные плагины на вашем мобильном сайте
- Управление виджетами / шорткодами на основе устройства посетителя
Вы также можете найти множество других мобильных плагинов WordPress, чтобы помочь вам.
Лично я думаю, что использование единственной адаптивной темы – все еще лучший подход. Но Mobile Smart – отличный выбор, если в настоящее время это невозможно для вашей ситуации.
Убедитесь, что ваши плагины также соответствуют адаптивному дизайну
Вот часто упускаемый из виду аспект простоты использования WordPress для мобильных устройств:
Это не просто выбор адаптивной темы WordPress. Вы должны убедиться, что каждый устанавливаемый плагин также работает с адаптивными принципами дизайна.
Например, если вы устанавливаете плагин, который добавляет форму контакта на ваш сайт WordPress, Вам лучше убедиться, что контактная форма выглядит хорошо как на настольных, так и на мобильных устройствах.
К сожалению, на самом деле не существует автоматического теста для этого. Вместо этого вам нужно будет вручную проверять каждый раз, когда вы устанавливаете новый плагин.
Вы также можете:
- Используйте свой собственный смартфон, чтобы увидеть, как плагин выглядит на мобильном
- Воспользуйтесь сайтом типа «Я отзывчивый», чтобы увидеть, как работает плагин на различных устройствах.
- Использовать браузер Инструменты разработки функциональность
Используете генератор страниц? Воспользуйтесь преимуществами отзывчивого контроля
Создатели страниц довольно популярны в наши дни. Но если вы не знакомы, они в основном позволяют создавать сложные макеты, не зная никакого кода. Обычно использует простой интерфейс перетаскивания для перемещения «элементов».
Итак, как строители страниц связаны с тем, чтобы сделать ваш сайт WordPress мобильным? Поскольку большинство конструкторов страниц позволяют вам включать или отключать элементы в зависимости от устройства, которое использует посетитель.
Например, давайте посмотрим на мой личный конструктор страниц, Elementor. Допустим, у меня есть изображение, которое отлично смотрится на рабочем столе … но оно заполняет страницу на мобильном телефоне или загружается очень долго.
Все, что мне нужно сделать, это снять флажок, чтобы убедиться, что изображение не отображается в мобильной версии моей страницы:
Вы можете использовать эти настройки, чтобы:
- В нем достаточно места для сенсорных элементов.
- Весь контент на вашем мобильном сайте можно воспроизводить
- Ваш мобильный сайт не слишком переполнен
Поэтому, если вы используете конструктор страниц, стоит выбрать тот, который позволит вам реализовать адаптивные макеты страниц.
Ограничьте агрессивные всплывающие окна на мобильных устройствах. Особенно на первой странице
Это очень легко, потому что все, что требуется, это нет делать что-то Вместо того, чтобы добавлять какую-то новую технику, все, что вам нужно сделать, это воздержаться от показа всплывающих окон на мобильной версии вашего сайта.
Почему? Потому что в дополнение к раздражению мобильных посетителей и нарушению стандартов мобильного дизайна Google, Это также негативно влияет на рейтинг вашего сайта в мобильном поиске.
Это связано с тем, что Google ввел штраф за ранжирование на мобильных устройствах для сайтов, где «контент не легко доступен пользователю при передаче результатов мобильного поиска». Это наказание действует с 10 января 2017 года.
то, не используйте всплывающие окна или рекламные вставки для мобильных устройств на мобильных страницах вашего сайта. Особенно не для первой страницы, которую посетитель посещает после получения результатов поиска Google.
Рассмотрите возможность интеграции Google AMP для WordPress
Если вы не знакомы, AMP означает Ускоренные мобильные страницы. Это поддерживаемая Google инициатива по ускорению загрузки мобильных страниц путем публикации сокращенной версии страницы.
Если вы что-то искали в мобильном поиске Google, вы, вероятно, сталкивались с сайтами, помеченными знаком AMP:
Так в чем же преимущество Google AMP для WordPress? В то время как вы отказываетесь от небольшого контроля над внешним видом вашего мобильного сайта (поскольку код удален), страницы Google AMP по своей природе быстрые и удобные для мобильных устройств.
Так что если вы хотите, чтобы ваш сайт WordPress работал быстро на мобильных устройствах бесплатно… AMP – отличный вариант.
Это также очень просто настроить Google AMP для WordPress. Есть даже официальный плагин Automattic, который поможет вам сделать это!
Практически все, что вам нужно сделать, это установить и активировать плагин AMP. Тогда ваш сайт начнет предлагать контент AMP посетителям Google для мобильных устройств. И если вы ищете подробное руководство по использованию, прочитайте это: Google AMP – Как реализовать его в WordPress
Если вы хотите больше гибкости в том, как выглядит ваш WordPress AMP, плагин AMP для WP – отличный вариант. Он основан на официальном плагине AMP с новыми опциями стиля, а также опциями для добавления рекламы и кнопок для публикации в социальных сетях:
Если вы обеспокоены влиянием ваших страниц Google AMP WordPress на SEO, обратите внимание на две важные вещи:
- Плагин AMP автоматически добавляет теги rel = "canonical" к вашему контенту AMP, поэтому вам не нужно беспокоиться о дублировании штрафов за контент.
- Вы можете убедиться, что ваши настройки Yoast SEO перенесены на ваш контент AMP, установив бесплатный плагин Glue for Yoast SEO & AMP. Кроме того, All in One SEO также совместим с Google AMP в основном плагине.
Идем дальше: превратите WordPress в мобильное приложение
Итак, все советы о том, как сделать ваш сайт WordPress мобильным. Но если вы хотите использовать все на мобильных устройствах, вы можете выйти далеко за рамки простого адаптивного дизайна.
Я говорю о приложениях! Послушайте, есть спор о том, лучше ли использовать адаптивный веб-дизайн или мобильное приложение.
Сейчас я не собираюсь утверждать, что обладаю знаниями для того, чтобы влиять на эти дебаты … но я точно знаю, как вы можете превратить свой сайт WordPress в мобильное приложение.
Так что если вы на командное мобильное приложение, Вот как превратить ваш сайт WordPress в:
- Прогрессивное веб-приложение
- Родное приложение
В чем разница?
Прогрессивные веб-приложения они являются своего рода гибридом адаптивного дизайна и нативных приложений. Технически они все еще являются «веб-сайтом», но работают так же, как приложение.
Родные приложения, с другой стороны, они фактически установлены на смартфонах своих посетителей.
Как превратить WordPress в прогрессивное веб-приложение бесплатно
Чтобы создать прогрессивную версию веб-приложения для вашего сайта WordPress, вы можете использовать умный плагин freemium под названием WordPress Mobile Pack.
В бесплатной версии вы можете создать базовую прогрессивную версию веб-приложения для вашего сайта. Для начала все, что вам нужно сделать, это установить и активировать бесплатный плагин WordPress Mobile Pack.
Тогда вы сможете запустить свое прогрессивное веб-приложение всего за несколько минут. Начните с добавления вашего логотипа и установки цветовых схем и стилей:
Затем выберите контент, который вы хотите включить в свое приложение. Вы можете включить все или просто выбрать конкретные категории или страницы для включения. Это отличный вариант, если у вас есть контент, который просто не подходит для мобильных устройств:
И это все! Вы можете изучить другие варианты, чтобы добавить отслеживание Google Analytics и настроить, кто видит ваше прогрессивное мобильное приложение. Но больше нечего делать.
Что вы получаете в WordPress Mobile Pack Pro?
Если вы хотите получить доступ к вашему прогрессивному веб-приложению, вы можете приобрести профессиональную версию, чтобы получить доступ к:
- Больше вариантов стиля
- Дополнительные темы приложения, чтобы легко изменить всю эстетику
- Варианты включения рекламы в ваше прогрессивное веб-приложение
Разработчики также работают над дополнительными расширениями, которые позволяют добавлять такие функции, как:
- Push-уведомления
- Автономный режим
- HTTPS
- Решение для загрузки встроенной версии вашего прогрессивного веб-приложения для лучшего из двух миров
Как конвертировать WordPress в нативное приложение
К сожалению, поскольку процесс преобразования вашего сайта WordPress в собственное мобильное приложение довольно сложный, Большинство аксессуаров стоят немного денег. Поэтому, если вы серьезно относитесь к созданию собственной версии мобильного приложения вашего сайта WordPress, вам нужно открыть свой кошелек и заплатить за премиум-плагин.
Хотя есть несколько плагинов, которые утверждают, что делают это, их три самых популярных варианта:
- WordApp
- MobiLoud
- AppPresser
Как работает WordApp?
WordApp позволяет создавать собственные приложения для Android и iOS с вашего сайта WordPress. Лучше всего, вы можете создать приложение для Android бесплатно, хотя вам придется заплатить за версию для iOS,
Создание вашего приложения занимает всего около 5 минут, и вы даже можете отправлять push-уведомления пользователям вашего приложения прямо с панели управления WordPress.
Даже если вы выберете платную версию, WordApp по-прежнему стоит менее 10 долларов в месяц.
Как работает Appmaker?
Appmaker позволяет конвертировать ваши сайты WordPress и WooCommerce в собственные приложения для Android и iOS WordPress / WooCommerce.
Ценообразование персонализировано, и вы можете получить ориентировочную стоимость, связавшись со специалистами по вашему приложению. Компания отдает предпочтение качеству и производительности превыше всего, поэтому, хотя цены могут быть выше, чем у конкурентов, они соответствуют мантре: «Вы получаете то, за что платите», так сказать.
Как работает MobiLoud?
С MobiLoud вы устанавливаете бесплатный плагин и синхронизируете его с вашей платной учетной записью MobiLoud. Затем MobiLoud создает собственную версию приложения для вашего сайта для iOS и Android.
Вы получите свой собственный логотип, значок и домашний экран. И MobiLoud даже позаботится о процессе доставки.
В настоящее время самый дешевый тариф MobiLoud начинается с $ 69 в месяц при ежемесячной оплате. У них также есть более многофункциональные планы, которые растут в цене.
Как работает AppPresser?
С AppPresser вы можете создать собственное мобильное приложение в интерфейсе AppPresser. Затем AppPresser предлагает вам специальный плагин для синхронизации вашего сайта WordPress с вашим собственным мобильным приложением.
При создании своего приложения не волнуйтесь! Вам не нужно знать какой-либо код для создания собственного приложения WordPress. Все сделано через визуальный генератор, который очень аккуратный. Очевидно, вы не собираетесь создавать следующую Flappy Bird с визуальным генератором. Но для простой версии приложения вашего сайта WordPress это вполне нормально.
AppPresser предлагает несколько разных планов:
- инициирование – базовый план за 199 долларов
- суд – план, нацеленный на магазины WooCommerce за 399 долларов
- агентство – рассчитан на агентства по 499 долларов
Хотя ни один из них не является на 100% бесплатным для iOS и Android, все они являются хорошими решениями для превращения WordPress в нативное мобильное приложение.
Упаковка вещей
Уф! Мы много покрываем, верно? Прочитав этот пост, вы должны знать все, от того, почему важно сделать WordPress для мобильных устройств дружественным, до того, как превратить ваш сайт WordPress в изящное мобильное приложение.
Если вы обычный пользователь сайта WordPress, вам не нужно беспокоиться о приложениях. Просто следуйте основным советам по дизайну для мобильных устройств, таким как адаптивный дизайн, удаление всплывающих окон и, возможно, установка Google AMP для WordPress.
Однако, если у вас серьезный бизнес на WordPress, вам следует потратить немного больше времени, чтобы сделать ваш сайт WordPress мобильным.
Как показано в некоторых статистических данных, которые я обсуждал, мобильный трафик не исчезнет в ближайшее время (как раз наоборот). Поэтому, если вы хотите, чтобы ваш бизнес был успешным, инвестирование в оптимизированный дизайн для мобильных устройств принесет дивиденды в будущем.
SaveSave
SaveSave
