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

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

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

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

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

Обновления веб-сайта для мобильных устройств не отображаются(Mobile Friendly Website Updates Not Showing Up)

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

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

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

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

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

Недружественная навигация(Unfriendly Navigation)

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

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

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

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

Адаптивный макет внезапно перестает работать(Responsive Layout Stops Working Suddenly)

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

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

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

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

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

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

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

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

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

<meta name=”viewport” content=”width=device-width”>

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

Изображения загружаются слишком долго(Images Are Taking Too Long to Load)

Оптимизация изображений и уменьшение размера файла изображения(reducing image file size) имеет смысл. Неоптимизированные большие изображения могут замедлить скорость загрузки ваших веб-страниц. Это может раздражать мобильных пользователей.

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

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

  • Установите плагин, такой как Smush Image Optimization, Compression и Lazy Load( Smush Image Optimization, Compression, and Lazy Load) , чтобы изменять размер и оптимизировать ваши изображения .
  • Перед загрузкой изображений на сайт используйте инструмент сжатия и оптимизации, например TinyPNG , Compress JPEG или Online Image Optimizer .

Самый важный контент не очевиден(Most Important Content Isn’t Obvious)

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

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

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

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

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

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

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

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

Слишком много информации(Too Much Information)

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

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

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

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

Данные для маленьких экранов(Data For Small Screens)

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

Плагин, такой как WP Responsive Table , может упростить эту задачу.

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

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

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

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

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



Нестор Лебедев

About the author

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


Related posts