Как сделать ваш сайт WordPress мобильным

Привет всем!

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

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

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

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

Как сделать ваш сайт WordPress мобильным

Там, где раньше мы использовали наши компьютеры, мы теперь выполняем эти задачи на наших смартфонах и планшетах. Фактически, в отчете SimilarWeb говорится, что 56% всего трафика в Интернете поступает с мобильных устройств, а данные StatCounter показывают, что мобильные устройства и планшеты теперь получают больше использования, чем настольные компьютеры.

Еще одна интересная статистика взята из отчета IBM, который показывает рост продаж мобильной электронной коммерции в праздничный сезон. Добавьте к этому факту объявление Google, сделанного еще в 2015 году, в котором говорится, что Google учитывает удобство использования мобильных устройств при ранжировании сайтов, и вы можете понять, почему важно иметь сайт, удобный для просмотра на мобильных устройствах.

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

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

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

Прежде чем проверять, подходит ли ваш сайт для мобильных устройств, всегда полезно точно знать, какой объем трафика вы получаете с мобильных устройств. Самый простой способ сделать это — использовать Google Analytics. Все, что вам нужно сделать, это войти в свою учетную запись Google Analytics и выбрать соответствующий веб-ресурс для вашего сайта. В левом меню выберите «Мобильный», а затем «Обзор». Вы сможете увидеть, сколько посетителей приходят с настольных, мобильных и планшетных устройств.

Как проверить

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

Google Mobile Friendly Test

Первый инструмент исходит от Google, и его очень просто и удобно использовать. Откройте браузер, перейдите в Google Friendly Test и введите URL своего веб-сайта, затем нажмите «Проверить страницу». После краткого анализа *, он скажет вам, является ли ваш сайт мобильным или нет. Если ваш сайт подходит для мобильных устройств, вы получите зеленое сообщение, сообщающее об этом.

Google Mobile Friendly Test

* Почему то мой сайт никогда не проходил такую проверку, хотя другие пишут что все нормально)))

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

Google Mobile Friendly Test

Screenfly

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

Screenfly

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

MobileTest.me

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

MobileTest

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

Как оптимизировать ваш сайт, чтобы он был мобильным

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

Как оптимизировать ваш сайт

Например:

  • Могут ли посетители, которые просматривают сайт на мобильном устройстве, нажимать на кнопки общего доступа ?
  • Вашу форма регистрации или подписки трудно закрыть, что делает ваш сайт трудно прокручивать и видеть?
  • А как насчет вашего интернет-магазина, ваши продукты можно купить с помощью мобильного устройства?
  • Являются ли поля ввода достаточно большими, так что вы можете увидеть, что вы печатаете?

Кнопки социальных сетей

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

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

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

Email Optin Forms

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

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

Другой вариант: Bloom — премиальный плагин, который разработан Elegant Themes, поэтому, если вы решите инвестировать в Bloom, вы также получите доступ ко всему набору тем. Наконец, Optin Forms — это еще один бесплатный плагин, который быстро реагирует и без проблем отображается на мобильных устройствах. Он предлагает 5 различных форм подписки, которые вы можете добавить к своим сообщениям, страницам и виджетам с помощью шорткодов.

E-Commerce

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

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

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

Встраивание объектов с заданной шириной и высотой

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

Время медленной загрузки

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

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

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

Платные решения включает в себя Genesis Framework (WP Framework, который очень популярен), чьи дочерние темы являются адаптивными из коробки или ищите адаптивную тему на ThemeForest.

Если вы еще не заинтересованы в переключении тем, подумайте над тем, чтобы использовать плагин для мобильной версии вашего сайта. Одним из таких плагинов является WP Mobile Detector (правда уже давно не обновлялся). Он автоматически определяет, использует ли посетитель стандартный мобильный телефон или смартфон, и загружает совместимую мобильную тему WordPress для каждой из них.

Другой плагин, который поможет вам оптимизировать ваш сайт для мобильных устройств — Any Mobile Theme Switcher (также уже давно не обновлялся). Этот плагин обнаруживает мобильный браузер и отображает тему в качестве настройки, выполненной в области администрирования вашего сайта, давая вам возможность выбрать разные мобильные темы для каждого мобильного браузера.

Инициатива Google AMP

В октябре 2016 года Google анонсировала новый проект под названием Accelerated Mobile Project. AMP — это инициатива с открытым исходным кодом, целью которой является улучшение мира мобильного Интернета:

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

Инициатива Google AMP

Проект AMP опирается на AMP HTML — новую платформу, которая позволяет веб-сайтам создавать легкие веб-страницы. По сути, он удаляет большинство элементов, которые замедляют загрузку веб-страниц на мобильных устройствах, таких как JavaScript и сторонние скрипты. Некоторые крупные компании, такие как Twitter, WordPress.com, Pinterest, Adobe Analytics, LinkedIn, уже приняли эту инициативу и сотрудничают с Google, чтобы сделать мобильный интернет лучше для всех.

Что это значит для владельцев сайтов, как вы?

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

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

Мгновенные статьи Facebook

Как и в случае с инициативой AMP от Google, были созданы «Мгновенные статьи Facebook», чтобы решить одну конкретную проблему — положить конец медленной загрузке на мобильных устройствах. Как объясняет Джош Робертс:

«Цель Facebook — соединить людей с историями, постами, видео или фотографиями, которые для них наиболее важны. Открытие «Мгновенных статей» позволит любому издателю рассказать замечательные истории, которые быстро загружаются, людям во всем мире. С «Мгновенными статьями» они могут делать это, сохраняя контроль над своими объявлениями и своими данными».

С точки зрения непрофессионала, «Instant Articles» позволит издателям создавать контент, а пользователям — просматривать контент в виде документа HTML5, оптимизированного для быстрой мобильной работы. iPhone и Android пользователи Facebook смогут участвовать в визуально привлекательных, интерактивных мультимедийных статьях прямо с платформы Facebook. «Мгновенные статьи» будут включать автоматическое воспроизведение видео, интерактивные карты, функцию увеличения и аудио.

Мгновенные статьи Facebook

А поскольку «Instant Articles» будет загружаться прямо с сервера Facebook, это будет в десять раз быстрее, чем загрузка через браузер смартфона. Это приводит к более быстрому обмену, что означает, что ваш контент будет распространяться дальше и в более короткий промежуток времени, что, естественно, приводит к увеличению количества кликов, увеличению количества просмотров и, в конечном итоге, увеличению продаж. По данным тестирования платформы с мая 2015 года:

  • Мгновенные статьи получили на 20% больше кликов, чем статьи в мобильных сетях из новостной ленты.
  • Когда кто-то нажимает на «Мгновенную статью», вероятность того, что она откажется от статьи перед прочтением, на 70% ниже
  • Они делятся на 30% больше, чем статьи в мобильном Интернете

Чтобы начать работу с «Мгновенными статьями Facebook», первое, что вам нужно сделать, это зарегистрироваться через http://instantarticles.fb.com/. После этого вы должны выбрать свою бизнес-страницу Facebook и указать свой URL. После того, как вы заявили свой URL, следующим шагом будет создание статей. Хорошей новостью является то, что статьи могут быть опубликованы непосредственно из WordPress.

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

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

В заключении

Наличие дружественного к мобильному сайту WordPress может существенно изменить ваш бизнес, привлекая новых заказчиков и клиентов или отправляя их на сайты ваших конкурентов. Лучший способ обеспечить мобильность вашего сайта WordPress — следовать советам и рекомендациям, изложенным в этой статье. Я что-то пропустил или у вас есть предложение? Дайте мне знать в комментариях ниже!

До свидания!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!