Семь плагинов в помощь мобильным пользователям

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

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

Но как сделать это с наименьшими затратами? При помощи плагинов, которые помогают настроить наш сайт для использования в мобильных устройствах. Давайте рассмотрим семь таких плагинов.

Плагины, способствующие повышению адаптивности сайтов

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

Следующие четыре плагина могут помочь вам в этом.

Hammy

Hammy

Этот плагин умеет динамически изменять размеры встроенных в страницу картинок для мобильных браузеров, используя код, уже имеющийся в ядре WordPress версии 3.5 и выше. Он также заменяет тэг <img> на семантический элемент <figure>.

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

Responsive Widgets

Responsive Widgets

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

Для использования этого плагина вы должны уметь работать с виджетами WordPress. Установив плагин, зайдите на страницу «Widgets», и вы увидите новые виджеты для следующих устройств и типов экранов:

  • Смартфон (портретный режим);
  • Смартфон (пейзажный режим);
  • iPhone или iPod;
  • Фаблет (планшетофон);
  • Планшет (портретный режим);
  • Планшет (пейзажный режим);
  • iPad (портретный режим);
  • iPad (пейзажный режим);
  • Планшет Nexus;
  • Планшет Kindle;
  • Планшет Surface;
  • Планшет Nook;
  • PS Vita;
  • Десктоп;
  • Большой монитор (1240 строк и более);
  • Принтер/

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

WP Lightbox 2

WP Lightbox 2

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

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

Responsible

Responsible

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

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

Плагины-мобильные темы

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

WPTouch Mobile

WPTouch Mobile

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

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

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

WordPress Mobile Pack

WordPress Mobile Pack

Этот плагин весьма популярен (более 600 тысяч загрузок, оценка 3,8 из 5) и похож по принципу работы на WPTouch Mobile.

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

Jetpack от WordPress.com

Jetpack от WordPress.com

Jetpack – сверхпопулярное комплексное решение от WordPress.com и Automattic, и одной из функций этого плагина является мобильная тема, которой я и рекомендую вам воспользоваться.

Чтобы включить мобильную тему, необходимо после установки плагина зайти в его настройки (“Jetpack” – “Settings”) и отметить чекбокс напротив пункта «Mobile Theme». Дизайн мобильной темы прост и удобен. Я обнаружил у неё только один недостаток: тема плохо совместима с официальным плагином Disqus.

Заключение

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

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

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

Перевод статьи «Seven Plugins to Help Your Mobile Users» был подготовлен дружной командой проекта Сайтостроение от А до Я.