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

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

Чтобы сделать ваш сайт WordPress мобильным, вам необходимо:

1. Поймите, почему адаптивный веб-дизайн важен
2. Пройдите тест Google Mobile-Friendly Test
3. Используйте адаптивную тему WordPress (или создайте свою собственную)
4. Рассмотрите удобные для мобильных устройств плагины WordPress
5. Используйте удобные для мобильных устройств подписки
6. Думайте с точки зрения адаптивных медиа
7. Приоритет производительности сайта

Готовый? Давайте погрузимся!

1. Почему важны мобильные сайты?

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

Помимо UX, есть еще одна важная причина, по которой ваш сайт должен быть оптимизирован для мобильных устройств: Google. Начиная с 2015 года (год «Mobilegeddon») Google провел серьезную переработку своего поискового алгоритма, чтобы вознаграждать сайты, которые считаются «удобными для мобильных устройств». Изменение сводилось к одному важному пункту данных: является ли ваш веб-сайт адаптивным.

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

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

2. Пройдите тест на совместимость с мобильными устройствами

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

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

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

Довольно аккуратный маленький инструмент, не так ли? Ну, это становится еще лучше.

Для всех вас, разработчиков, Google также выпустила Mobile-Friendly Test API, который позволяет вам тестировать URL-адреса с помощью автоматизированных инструментов. Преимущество этого заключается в том, что вы можете быстро протестировать больше страниц, но вы также можете отслеживать наиболее важные страницы на своем сайте без необходимости постоянно вручную обращаться к инструменту браузера. Счет!

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

3. Используйте (или создайте) адаптивную тему WordPress

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

Перво-наперво: еще раз проверьте свою версию WordPress и текущую версию темы. Если есть ожидающие обновления, начните с них. Я не могу говорить о каждой теме, но некоторые обновления будут содержать элементы, удобные для мобильных устройств, и их может быть достаточно, чтобы решить ваши проблемы. В WordPress 4.4, например, добавлена ​​действительно полезная функциональность для адаптивных изображений (вы можете прочитать все об этом здесь).

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

Лучшие темы WordPress для мобильных устройств

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

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

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

Не уверен, где начать? Когда вы размещаете свой сайт WordPress на WP Engine, вы получаете бесплатный доступ к темам StudioPress (включая Genesis Framework!) в рамках своего плана. Эти темы полностью адаптивны, поэтому они будут отлично смотреться на любом устройстве, плюс вы можете легко переключаться между ними (вместо того, чтобы чувствовать себя застрявшим на «той» премиум-теме, которую вы решили приобрести).

Как создать свою собственную адаптивную тему WordPress

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

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

Также есть функция Live Links, которая генерирует общий URL-адрес локального сайта. Это позволяет вам отправить его клиенту или просмотреть на своем телефоне, чтобы вы могли легко проверить, как сайт выглядит на мобильном устройстве.

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

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

• Как создать адаптивное меню навигации в WordPress
• 7 лучших советов по адаптивному веб-дизайну
• Работа с адаптивными изображениями в WordPress

4. Используйте адаптивные плагины

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

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

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

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

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

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

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

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

6. Разработайте стратегию адаптивных медиа

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

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

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

7. Приоритет производительности сайта

Скорость страницы долгое время была важна с точки зрения того, как ваш сайт ранжируется в поиске Google для настольных компьютеров, но с июля 2018 года это также относится к ранжированию мобильных устройств. Соедините это со статистикой выше, что более 60% интернет-поиска используют мобильные устройства, и производительность вашего сайта (на каждом устройстве) сейчас важнее, чем когда-либо.

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

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

Что касается вашего хоста WordPress, убедитесь, что вы используете качественного партнера, который включает в себя такие услуги, как технология кэширования, CDN и инфраструктура, предоставляемая надежными поставщиками, такими как Google Cloud Platform. Если вы размещаете свой сайт на WP Engine, вы настроены во всех этих областях.

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

Получите доступ к более чем 30 премиальным (и мобильным!) темам

Сэкономьте время (и деньги!) с хостингом WordPress от WP Engine и получите доступ к темам StudioPress и Genesis Framework. Темы полностью адаптивны и легко настраиваются, что экономит ваше время при попытке создать сайт, оптимизированный для мобильных устройств. Кроме того, мощная платформа WP Engine будет поддерживать оптимизацию производительности вашего сайта, помогая поддерживать высокую скорость страниц и повышая рейтинг вашего сайта.