4 плагина для того, чтобы помочь вашим мобильным пользователям

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

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

Но как этого добиться? Только путем адаптирования сайта и придания ему «mobile ready». В статье мы сделаем обзор плагинов, которые помогут вашему сайту достойно выглядеть и работать для посетителей с мобильных устройств.

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

Вряд ли вы не слышали таких терминов как «responsive web design» или «adaptive web design» в течение последних лет. Целью такого дизайна является то, чтобы «вписать» страницы сайта в экраны мобильных устройств.

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

Hammy

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

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

Responsive Widgets

Responsive Widgets — это плагин, который добавлять новые text/HTML-виджеты в WordPress; эти виджеты появляются только на определенных устройствах типа iPads, Nooks, PlayStation Vitas, а также на других общих устройствах типа планшетов и смартфонов.

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

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Phablets
• Tablet (portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Surface Tablet
• Nook Tablets
• PS Vitas
• Desktops
• Large Monitors (1240px+ screens)
• Print only

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

WP Lightbox 2

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

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

Responsible

Responsible — это очень полезный плагин для WordPress, который позволяет вам тестировать адаптивные дизайны «на лету» в своем браузере. Он использует Viewport Resizer Bookmarklet для того, чтобы поместить фиксированную панель вверху страницы, где можно изменить размер страницы на определенные разрешения, имитирующие разрешения смартфонов, планшетов или разрешения десктопных компьютеров, а также позволяет задавать произвольные разрешения экрана.

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

Заключение

В веб-дизайне нужно постоянно следить за трендами и предлагать пользователям то, что они хотят, особенно если вы что-то хотите от них взамен (будь то деньги или просто похвала за материал). В наши дни «mobile ready» становится стандартом и было бы глупо «принимать» ваших пользователей на сайте, который криво выглядит на мобильных устройствах.

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

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