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

by Guest Author
Как оптимизировать ваш сайт WordPress для мобильных устройств thumbnail

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

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

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

Станьте универсальными, переходя на адаптивный дизайн

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

Однако лучшим вариантом будет сделать ваш сайт адаптивным. Адаптивный дизайн направлен на создание оптимального визуального восприятия на широком спектре устройств — без необходимости пользователя прокручивать страницу, панорамировать или настраивать экран. Большинство адаптивных дизайнов работают на фреймворках, таких как Bootstrap от Twitter, которые отображают масштабируемые колонки или сетки, адаптирующиеся под ширину браузера. Другие фреймворки включают Skeleton и Foundation. Независимо от выбранного фреймворка, вам потребуется знание HTML и CSS (если нет, обратитесь к Upwork или подобным сайтам), чтобы поддержать ваши усилия по созданию адаптивности.

К счастью, для участия в тренде адаптивного дизайна не обязательно уметь программировать. Даже базовый поиск по запросу «responsive» в каталоге тем WordPress дает тысячи результатов. Поскольку темы проходят строгий процесс проверки перед тем, как быть принятыми в каталог тем, рекомендуется искать там и избегать багового кода из других источников. После установки адаптивной темы проверьте, хорошо ли она выглядит на всех ваших устройствах. Большинство современных браузеров имеют некоторую форму инспекции кода. Chrome DevTools позволяет симулировать широкий диапазон ширин устройств, а также адаптивный режим Firefox. Если ваш сайт выглядит хорошо, значит все готово.

Торопитесь? Активируйте Jetpack

Не готовы сменить темы или просто не хватает времени? Ваш лучший выбор – активировать Jetpack, официальное дополнение плагина WordPress, созданное командой Automattic.

Jetpack добавляет множество функций в WordPress, включая мобильную тему. Даже если тема вашего сайта не адаптивна, мобильная тема Jetpack мгновенно заменит её на малых экранах, так что мобильные пользователи смогут легко просматривать сайт. После установки плагина Jetpack перейдите в вашей панели управления WordPress в Jetpack → Настройки → Вкладка Внешний вид, активируйте мобильную тему и нажмите «Сохранить».

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

Изображение фона объявления

Получите больше с DreamPress

Пользователи DreamPress Plus и Pro получают доступ к Jetpack Professional (и более чем 200 премиальным темам) без дополнительных расходов!

Посмотреть планы

Не забудьте про приложение!

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

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

Редактирование вашего сайта с мобильного устройства также поможет вам лучше понять ваших мобильных пользователей. На панели управления приложения есть выделяющаяся ссылка «Посмотреть сайт», и скорее всего, вы захотите проверить её время от времени, пока вы вносите изменения в мобильный контент. Став мобильным пользователем, вы научитесь понимать, что на вашем сайте может быть сложным или неудобным для ваших читателей.

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

Репортаж Лорен Орсини