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

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

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

В этой статье вы узнаете, как сделать сайты WordPress мобильными с помощью адаптивного дизайна. Мы также объясним важность скорости отклика для поисковой оптимизации (SEO). Давайте взломать!

Подходит ли WordPress для мобильных устройств?

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

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

Что такое адаптивный дизайн?

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

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

Если вам нужен отличный пример, откройте Mashable.com в новом окне (при условии, что вы еще не используете мобильное устройство). Оказавшись там, измените размер окна браузера, чтобы оно становилось все меньше и меньше, и наблюдайте, как веб-сайт перестраивается соответствующим образом.

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

Сайт перестраивается, потому что есть медиа-запросы CSS, которые применяют к странице разные правила в зависимости от размера устройства (в данном случае окна браузера), которое просматривает сайт. HTML остается прежним, он просто перестраивается с помощью CSS. Правила CSS могут применяться для изменения порядка всего на сайте, в том числе для отображения различных размеров изображений в соответствии с разрешением устройства. Это действительно здорово, когда вы хотите делать такие вещи, как показ улучшенных изображений сетчатки специально для устройств iOS.

Мобильные приложения против адаптивных сайтов

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

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

Вопросы производительности адаптивных сайтов

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

С технической точки зрения, при доставке вашего сайта на мобильное устройство, использующее сотовые данные, вы теряете целых 0,5 секунды с самого начала. Например, для получения 40 КБ в сети 4G в оптимальных условиях требуется 700 мс. Задержка в сети и ситуационные вариации также только увеличат время загрузки. Вы не можете контролировать переменные сотовой сети, поэтому очень важно, чтобы вы с самого начала создавали свой адаптивный сайт с производительностью как функцией.

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

• Оптимизируйте изображения: автоматически определяйте размер экрана устройства для создания, кэширования и доставки изображений нужного размера.
• Сократите свои HTTP-запросы: сведите к минимуму количество CSS и JavaScript, которые вам нужно использовать, а затем кэшируйте все остальное.
• Условная загрузка ресурсов: большие кнопки социальных сетей, изображения и т. п. отлично подходят для больших устройств, но не повлияют на взаимодействие с пользователем на устройствах меньшего размера. Планируйте свой дизайн, чтобы загружать только то, что абсолютно необходимо.
• Ленивая загрузка: если вы можете избежать загрузки определенных ресурсов, в частности JavaScript, после наиболее важных элементов страницы, сделайте это. К тому времени, когда ваши пользователи потреблят контент, который они хотели, в первую очередь, эти другие активы будут загружены.

Должен ли ваш сайт WordPress быть адаптивным?

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

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

• Каков вариант использования вашего сайта? Будет ли иметь значение мобильное потребление? Скорее всего, ответ на этот вопрос — «да, и с каждым годом все больше и больше». Исключения будут, но не много.
• Кто ваши пользователи? Чем более они техничны, чем более передовые, тем больше вероятность того, что они будут ожидать адаптивный сайт для каждого бренда, с которым они ассоциируются.
• У вас есть бюджет? Это большой. Создание адаптивного сайта на начальном этапе немного дороже, но дешевле создать один адаптивный сайт, чем планировать создание двух отдельных версий вашего сайта, а затем управлять обслуживанием обеих.
• Готовы ли вы изучить новый тип дизайна? Отзывчивый дизайн вводит множество новых концепций и способов понимания цифрового контента. будет важно работать с командой дизайнеров, которая может не только спроектировать что-то красивое, но и обучить вас на этом пути.

Создание адаптивного веб-дизайна WordPress

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

• Масштаб браузера по умолчанию
• Ширина и высота жидких элементов
• Оптимизация изображения
• Точки останова для конкретного проекта
• Отдельные адаптивные меню для мобильных устройств

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

Выбор правильной темы WordPress

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

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

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

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

Доступ к этим темам также включен в каждый план WP Engine, что означает, что клиенты WP Engine могут использовать их все без дополнительной оплаты.

Мобильные плагины WordPress

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

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

1. Джетпак

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

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

Кроме того, если вам нужны ежедневные резервные копии, настраиваемые темы и инструменты SEO, вам необходимо инвестировать в премиум-версию Jetpack. В зависимости от ваших потребностей вы можете получить плагин премиум-класса для личного использования за 39 долларов в год, а высший уровень — 299 долларов в год.

2. ВПтач

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

Бесплатная версия также имеет довольно надежный функционал. Однако, если вы ищете другой внешний вид, вам придется приобрести профессиональную версию. Тарифные планы Pro начинаются с 79 долларов в год и варьируются до 359 долларов в год для лицензирования на уровне предприятия.

3. Мобильный пакет WordPress

Хотя WordPress Mobile Pack не тестировался с последней версией WordPress, это популярный плагин для создания прогрессивного веб-приложения (PWA) из вашего существующего веб-сайта. Это означает, что пользователи вашего сайта получат опыт работы, подобный приложению, и вам не потребуется вкладывать ресурсы в программирование загружаемого приложения для магазина приложений.

С помощью этого плагина вы сможете отправлять баннерные сообщения пользователям, предупреждая их о возможности добавления вашего веб-сайта на их домашние экраны. Тогда ваши страницы будут кэшироваться и загружаться очень быстро. Базовая функциональность этого плагина бесплатна, но вам придется приобрести профессиональную версию, чтобы получить доступ к большему количеству тем, параметров настройки и возможности синхронизации определенного контента.
Про версия плагина имеет три уровня на выбор. Пакет Freelancer стоит от 99 долларов в год и может использоваться на трех доменах. Ценовые уровни достигают максимума с опцией VIP по цене 499 долларов в год за десять лицензий на домен.

Адаптивные изображения

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

img {
max-width: 100%;
height: auto;
}

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

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

Адаптивные меню

Существует два основных подхода к созданию адаптивных меню:

1. Сделайте одно меню, которое работает при всех размерах.
2. Создайте два меню: одно для больших экранов и одно для маленьких экранов. Только один будет отображаться одновременно, в зависимости от используемого размера экрана.

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

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

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

1. УберМеню

Один из вариантов, который вы можете попробовать, — это UberMenu. За 25 долларов вы получите доступ к будущим обновлениям и шесть месяцев поддержки. UberMenu может помочь вам создать полностью адаптивное сенсорное меню. К сожалению, если ваша тема не предназначена для UberMenu, вам, вероятно, придется внести некоторые изменения вручную, чтобы ваша тема работала должным образом.

2. Макс Мега Меню

Другой вариант — плагин Max Mega Menu. У этого инструмента есть бесплатная опция в каталоге плагинов WordPress, и он работает с вашими существующими меню, чтобы преобразовать их в «мега» меню:

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

3. Адаптивное меню

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

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

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

Адаптивные таблицы

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

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

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

table {
width: 100%;
border-collapse: collapse;
}

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

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

1. Настольный пресс

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

2. Конструктор таблиц WP

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

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

3. wpDataTables

Третий плагин, который мы рекомендуем проверить, — это wpDataTables. С помощью этого инструмента вы можете быстро создавать таблицы и диаграммы из существующих данных Excel, CSV, PHP или других данных. Это означает, что вы можете брать большие наборы данных и делать их доступными на своем веб-сайте.

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

Добавление многоязычных возможностей

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

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

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

Ознакомьтесь с этим руководством, чтобы узнать больше, и посетите WP Engine, чтобы узнать о наших различных планах и других функциях и функциях, которые поставляются с нашей платформой Digital Experience для WordPress.

Мобильная отзывчивость для SEO

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

Конечно, успех быстро загружаемых адаптивных веб-сайтов зависит от звездного хостинга. Когда вы выбираете качественную хостинговую компанию, такую ​​как WP Engine (мы предлагаем PHP 7 в стандартной комплектации и бесплатную сеть доставки контента на тарифах более высокого уровня), вы заметите более быстрое время загрузки и более плавную работу.

Создавайте адаптивно с помощью WP Engine

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

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