7 советов по WordPress для мобильного сайта

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

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

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

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

Обновления для мобильных веб-сайтов не отображаются

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

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

Если это проблема, вам нужно очистить кеш, чтобы загрузить исправленную версию. Кэширующий плагин, такой как WP Super Cache, W3 Total Cache, или WP Fastest Cache может помочь решить эту проблему.

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

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

Недружественная навигация

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

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

Ниже приведены несколько способов решения этой проблемы для мобильных веб-сайтов:

• Превратите вашу навигацию в выпадающее меню для мобильных устройств.
• Отобразите свое меню навигации как элементы блока, чтобы они отображались вертикально.
• Используйте значок меню, который можно переключать, чтобы занять меньше места.
• Создайте мобильное меню навигации с помощью jQuery.
• Используйте меню Гамбургер (Многие темы включают это в качестве опции, или вы можете использовать плагин.)

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

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

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

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

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

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

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

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

Отображаемый сайт будет иметь размер области просмотра (размер области веб-страницы, видимой для пользователя).

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

Иногда при обновлении темы этот код может исчезнуть.

Изображения загружаются слишком долго

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

WordPress версии 4.4 и выше автоматически обслуживает самую маленькую версию изображения на вашем сервере.

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

Важнейшее содержание не очевидно

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

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

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

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

Например, страница с ценами с тремя столбцами будет отображать их рядом на компьютере.

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

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

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

Слишком много информации

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

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

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

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

Данные для маленьких экранов

Сложные таблицы с множеством строк и столбцов могут быть проблемой при просмотре на небольших мобильных экранах. Лучшее решение — использовать адаптивные таблицы.

Плагин, такой как WP отзывчивый стол может сделать это легко сделать.

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

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

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

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

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