Как оптимизировать макеты WordPress для мобильного трафика

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

Чтобы оптимизировать макеты WordPress для мобильного трафика, вам нужно сделать гораздо больше, чем просто установить тему. Вы должны инвестировать в мобильную версию своего сайта не только с точки зрения UX, но и с точки зрения SEO, CRO, рекламы и производительности.

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

Почему мобильный трафик имеет значение

В 2016 году мобильный интернет-трафик впервые превысил объем настольного. Чтобы не отставать от этого, вы должны подготовить свой сайт WordPress к трафику, входящему с любого типа устройства.

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

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

Мобильный веб-трафик постоянно растет, как показано на графике от Statista.

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

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

• Разработка плана «Сначала мобильные» . Команда пришла к выводу, что им необходимо применить сенсорный подход к дизайну, и он действительно хорошо смотрелся на планшетах и ​​смартфонах.
• Внедрение оптимизации мобильного дизайна. Благодаря адаптивному дизайну сайт отлично отображается на экране любого размера. Кроме того, они также оптимизировали страницы своих продуктов для мобильного веб-трафика.

Результат: рост их общего коэффициента конверсии на 20% и увеличение мобильных продаж на 98% , как упоминалось выше.

Как Google оценивает макеты мобильных веб-сайтов?

При оценке способности сайта получать трафик от мобильного поиска Google учитывает следующие факторы:

• Макет страницы. Google проверяет, правильно ли отображается ваша страница на экране мобильного устройства.
• Доступность: проверка того, достаточно ли велики кнопки, мультимедиа и текст, чтобы к ним было легко получить доступ, не заставляя пользователей увеличивать масштаб.
• Производительность. Скорость страницы жизненно важна для работы в Интернете на настольных компьютерах и мобильных устройствах, и Google отдает предпочтение производительности мобильных страниц над настольными компьютерами в результатах поиска.
• Размещение рекламы: страница, заполненная рекламой, для многих навязчива, а также проблема для Google. Вот почему, используя рекламу, вы должны убедиться, что не нарушаете правила размещения рекламы.

Начните с тестирования

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

Mobile Friendly Test от Google как один из лучших инструментов для проверки адаптивных макетов вашего сайта для мобильных устройств.

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

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

• Varvy Mobile SEO
• Мобильный валидатор W3C
• Проверка адаптивного дизайна

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

Проверить производительность

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

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

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

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

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

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

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

Сохраняйте простоту

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

Например, давайте взглянем на сайт бразильского филиала Toyota. На ноутбуке выглядит очень солидно.

Красивый веб-сайт для настольных ПК не означает, что мобильная верстка последует этому примеру. Источник изображения: Toyota Brazil

Но что, если вы хотите просматривать их автомобили на своем смартфоне.

Загроможденный макет мобильного веб-сайта ведет к меньшему трафику и снижению коэффициента конверсии. Источник изображения: Toyota Brazil

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

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

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

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

Пользователи, естественно, смахивают вертикально. Источник изображения: Giphy

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

Кнопка меню гамбургера вверху слева. Источник изображения: AMC

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

Исключить ненужный контент

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

Проверяя, какой контент должен отображаться на странице, задайте себе следующие вопросы:

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

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

Простой пользовательский интерфейс мобильного сайта BuildFire.

Ограничьте интерактивные области

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

В Todoist есть только призыв к действию и красивая графика.

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

Мобильный веб-сайт Quicksprout имеет большие интерактивные области.

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

Адаптивный дизайн ремня безопасности

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

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

• Гибкость: благодаря адаптивному дизайну вам не нужно думать об изменении дизайна на двух веб-сайтах. Вам нужно только один раз исправить или добавить элементы, и вы делаете это как для мобильной, так и для настольной версии.
• Экономическая эффективность: запуск сайта для настольных компьютеров и мобильных устройств может быть дорогостоящим. Используя адаптивный дизайн, вы избавляетесь от ненужных затрат.
• Преимущества SEO. Адаптивный дизайн полезен для вашего поискового рейтинга, потому что Google, как обсуждалось в начале статьи, отдает предпочтение сайтам, оптимизированным для мобильных устройств, в результатах поиска.

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

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

Источник изображения: Giphy

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

PNG и JPEG - наиболее распространенные форматы файлов изображений. Но с развитием новейших технологий и разработок цифровых изображений форматы WebP и SVG становятся все более популярными.

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

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

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

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

Источник: HubSpot

Оптимизировать формы

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

Сохраняйте формы для мобильных страниц как можно проще. Источник: Copyblogger

В WordPress вы можете установить такой плагин, как WPForms, и быстро и легко создавать адаптивные формы, которые помогут конвертировать посетителей мобильного Интернета.

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

Контактная форма 7 - лучший инструмент для оптимизации форм с точки зрения разработчика.

Заключение

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

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

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

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

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