Адаптивність контактної інформації. Як створити ідеальну сторінку контактів? У довгих рядках використовуйте word-wrap

Час читання: 18 хвилин

Відправимо матеріал вам на:

Якщо у вас не проведена адаптація сайту під мобільні пристрої, в цьому немає нічого страшного, проте Яндекс ранжує вище у пошуку ті сайти, у яких така адаптація є.

З цієї статті ви дізнаєтесь:

1. Що дає адаптація сайту під мобільні пристрої
2. Як її перевірити
3. Адаптація сайту для Google
4. Самостійна адаптація сайту
5. Кращий та безкоштовний плагін для Wordpress
6. 6 кращих сервісів для адаптації сайту під мобільні пристрої онлайн

Навіщо потрібна адаптація під мобільні пристрої

Їх умовно поділяють на зовнішні та внутрішні. Іншими словами, зовнішні ПФ є, наприклад, клік за посиланням на сайт з результатів пошукової видачі, тоді як кількість переглянутих сторінок, загальний час, проведений на сайті, є внутрішніми.

Зазначимо, що Google використовує подібну систему. Але ця пошукова система пішла навіть далі, заявивши, що ресурси, що пройшли адаптацію сайту під мобільні пристрої, будуть відображатися вище в списку видачі.

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

Такий самий принцип працює для пошукових систем: чим більше гостей залишає ресурс вже в перші секунди знаходження на ньому, тим нижчий показник його відповідності вимогам людей. Ставлення сесій користувача, що склали менше 10 секунд, до загального числа відвідувань сайту називають показником відмов.

Як приклад візьмемо цей показник одного з російських сайтів:

Подивіться, якщо не проведена адаптація сайту під мобільні пристрої, тобто на них сайт відображається некоректно, то показник відмов зі смартфонів та планшетів виявляється у 2-2,5 рази вищим, ніж з ПК.

Мало того, що ці цифри негативно позначаються на рівні ПФ, вони свідчать про втрату ймовірних клієнтів, які могли оплатити послуги або товар.

Погодьтеся, збільшення частоти застосування мобільного інтернету справді вражає. Без зусиль дізнатися відсоток гостей на будь-якому ресурсі, що використовують мобільні пристрої, дозволить Google Analytics. Щоб переглянути цей показник, необхідно зробити такі кроки:

Не секрет, що пошукові системи завжди дбають про зручність користувачів планшетів та інших пристроїв, а значить, ви ризикуєте залишитися без трафіку, якщо відмовитеся від адаптації сайту під мобільні пристрої.

Пам'ятайте, через цю помилку чимало користувачів залишить вас назавжди, про що свідчить дослідження фірми Equation Research. Її фахівці з'ясували: 46% людей більше не заходять на сайт, де їх не влаштував рівень роботи з мобільних гаджетів.

Як ви знаєте, в результаті на вас чекають сумні наслідки: рівень продуктивності самого ресурсу буде безупинно знижуватися, тому що вже напрацьована аудиторія, заходячи зі смартфона або планшета, не зможе спілкуватися, робити замовлення, отримувати розсилку та ін.

Якщо вас не влаштовує такий розвиток подій, радимо здійснити адаптацію сайту під мобільні пристрої.

Що краще – адаптивний дизайн чи мобільна версія

Давайте спочатку розберемося в різниці між цими двома поняттями.

Адаптивний дизайн використовується тільки для того, щоб надати сайту такий зовнішній вигляд, який буде адекватно відображатися з необхідного користувача пристрою.

Тоді як мобільна версія є принципово новою версією, розробленою спеціально з урахуванням потреб користувачів сайту, що використовують його з портативних пристроїв. Тепер поговоримо докладніше про обидва типи.

Адаптивний дизайн

Цей варіант дає можливість, вкладаючи невеликі кошти, зробити сайт дружнім гостеві, який використовує його з гаджета.

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

Насамперед, це розмір сторінки, що завантажується. Хоча вона буде відображатися на мобільному пристрої, її вага залишиться незмінною. Через що завантаження сторінки займе багато часу, адже швидкість мобільного інтернету нижче ніж у провідного, і користувач втомиться чекати та закриє вкладку.

Мобільна версія

Мобільна версія зазвичай знаходиться на піддоміні основного: m.site.ru, mobile.site.ru. Цю особливість важко віднести до позитивних, якщо говорити з позиції SEO, тому що в такому разі використовується багато умовних редиректів з основної версії на мобільну. Адже site.ru/page та m.site.ru/page з погляду пошукових систем залишаються різними сторінками.

Варто сказати, що мобільна версія важить менше, завантажується швидше в порівнянні з адаптивною версткою, тому що тут забираються непотрібні функції, а індивідуальний дизайн робить взаємодію з сайтом більш простим.

Безумовно, така версія коштуватиме дорожче, ніж попередня. Щоб вам було простіше вибирати, якому з варіантів надати перевагу, виділимо їх особливості:

• Немає сенсу проводити адаптацію невеликого сайту під мобільні пристрої, якщо, наприклад, мова йде про сайт салону краси, для нього вистачить і звичайної адаптації.
• Мобільна версія знадобиться потужному сайту з безліччю сторінок, що підвантажуються. Цей варіант буде актуальним для онлайн-ЗМІ з аудиторією від кількох тисяч людей на добу.

Іншими словами, при виборі необхідно враховувати можливості та потреби. Також підкреслимо, що обидва ці варіанти незалежно від ціни виявляються для конверсії набагато вигіднішими, ніж їхня повна відсутність.

Що вам дасть адаптація сайту під мобільні пристрої

Залишити заявку

Як перевірити адаптацію сайту під мобільні пристрої

Перевірку адаптації сайту під мобільні пристрої, яка полягає в тому, що ви побачите його на різних пристроях, можна провести так:

• Quirktools.

Тут ви зможете подивитися на те, як сайт виглядатиме на екранах різних гаджетів. Щоб почати користуватися порталом, просто введіть в адресний рядок URL порталу, виберіть у горизонтальному меню потрібний пристрій.

• Ipadpeek.

Дозволяє перевірити зовнішній вигляд сайту на iPad, iPhone.

• F12.

Завжди найпростішим варіантом залишається застосування стандартного прийому: натисніть F12, потім клацніть по значку телефону.

Адаптація сайту під мобільні пристрої для Google

Якщо ви хочете провести адаптацію сайту під мобільні пристрої в Google, вам знадобиться безкоштовний інструмент Розробники.Google:

Тут необхідно ввести адресу ресурсу та натиснути кнопку «Аналізувати». У використаному нами прикладі рівень зручності для мобільних користувачів становить 49% зі 100%.

А також поради щодо того, що необхідно змінити для адаптації сайту під мобільний пристрій, даються корисні в цій справі посилання. Завдяки таким рекомендаціям, ви легко наберете 90%, що становитиме мінімум для Google.

Речі, які можна зробити для адаптації сайту під мобільні пристрої самостійно

Встановіть правильні атрибути полів форм

Якщо на вашому сайті використовується поля введення для імені користувача/адреси, відмовтеся від autocorrect, увімкніть autocapitalize:

Ваше ім'я:

Завдяки цьому прийому при адаптації сайту під мобільні пристрої ви забороните системі автоматизованого введення Т9 замінювати імена, наприклад, « Erwan»на « Erevan».

За допомогою установки автоматичного використання перших великих літер у типах words ви позбавите гостей ресурсу необхідності постійно включати капіталізацію літер, іншими словами на початку кожного слова буде ставитися велика літера (припустимо, « Ken burns»перетвориться на « Ken Burns»):

Використовуйте поле email, якщо ваш сайт запитує у користувача електронну пошту, щоб він не вводив символ @ з клавіатури мобільного пристрою:

Ваш email:

Задайте відповідну для мобільних пристроїв ширину

Для цього відкрийте сайт у браузері свого комп'ютера, зменшуйте ширину вікна програми, доки текст не перестане читати. Так ви отримаєте мінімально допустиму ширину. Це поточне значення встановіть як @viewport за допомогою установки тега meta в заголовок сторінки head:

Якщо ви повторно увійдете на сайт з мобільного пристрою, вказана вами ширина буде вибрано автоматично, тобто, гість ресурсу не буде змушений використовувати зум.

На наведеній нижче ілюстрації залишено зайве місце з правого краю:

А тут значення ширини вибрано правильно:

Ваше завдання стає набагато простіше, якщо сайт побудований на основі гумової верстки та сумісний з усіма розмірами екрану. Радимо під час адаптації сайту під мобільні пристрої поекспериментувати із шириною, так ви дозволите своєму ресурсу приємно виглядати та залишатися читабельним. Вибране значення та встановіть у тезі meta.

Встановіть ширину картинок на 100 %

Пам'ятайте, що частина зображень виявиться надмірно широкими після того, як ви підлаштували свій сайт під вибрану ширину. Раніше не доводилося стикатися з такою проблемою, так як десктопні монітори мають досить широку роздільну здатність, багато картинок розміщуються по ширині:

Уникнути такої неприємності ви зможете, встановивши максимальну ширину 100% для ваших зображень. Завдяки цьому, якщо зображення будуть занадто великі для екрана гаджета, вони автоматично змінять розмір. Не забудьте ввести поданий нижче код у CSS-стилі вашого сайту:

img (max-width: 100%)

Якщо ви встановили як фонове зображення якесь зображення не за допомогою тега img, вам просто потрібно встановити CSS властивість background-size у значення contain. Так розмір фону буде змінюватися, якщо роздільна здатність екрана виявиться недостатнім для передачі в 100% масштабі:

.header ( background: url(header.png) 50% no-repeat; background-size: contain )

Не варто турбуватися, що зображення втратить чіткість – сучасні мобільні пристрої цього не допустять. Справа в тому, що коли гість сайту використовує збільшення, браузер підвищує чіткість картинки. Правда, при цьому варто переконатися, що ваш портал не має властивості user-scalable=no в тезі meta, оскільки він не дозволяє використовувати зум:

Встановіть ширину полів введення 100 %

Коли ви встановили ширину зображень за допомогою властивості max-width, зробіть те саме з полями input. Для цього просто додайте файл CSS – файл вашого сайту:

input, textarea ( max-width:100% )

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

Будьте обережні, коли використовуєте Disable для кнопок підтвердження відправлення форм

Якщо submit перестане бути активним після першого натискання кнопки, не відбудеться численних натискань на кнопку підтвердження відправки форми.

Але пам'ятайте, що, якщо порівнювати з настільними ПК, мобільні пристрої часто переривають зв'язок з Інтернетом.

Тому, коли ви робите кнопку неактивною, ви позбавляєте користувача можливості натиснути її знову і проблема може ховатися не тільки в втраті Мережі. Так, браузер подібного пристрою закриється при вхідному дзвінку, і виникне проблема заблокованої кнопки, адже вона не дасть надіслати форму після її заповнення.

Якщо ви вирішили деактивувати кнопку submit, зробіть це на кілька секунд при адаптації сайту під мобільні пристрої.

У довгих рядках використовуйте word-wrap

Іноді слід використовувати довгі рядки: сюди входять приклади коду, посилання, номери банківських рахунків. Якщо ширина порталу буде недостатньою для всього рядка, та може опинитися за межами екрана гаджета:

Впорається з цим word-wrap, за допомогою якого рядок буде переноситися, досягнувши краю екрана. Так гість сайту зможе бачити відразу всю інформацію, не вдаючись до прокручування:

Тут вам знадобиться пароль:

435143a1b5fc8bb70a3aa9b10f6673a8

Будьте обережні, використовуючи прогалини

Всі ми звикли, що кожні п'ять знаків розділяються пробілами, якщо вони становлять довгий рядок. Адже так людині буде простіше запам'ятати їх для подальшого введення в іншому додатку.

Але відзначимо, що навряд розумний користувач погодиться вводити знаки самостійно - він знає про буфер обміну. Щоправда, розставлені вами прогалини йому доведеться видаляти вручну. Подумайте, чи зручно їх прибирати на мобільному чи планшеті?

Щоб полегшити користувачам життя, під час адаптації сайту під мобільні пристрої замініть пробіли відступами:

Вашкод: 435143a1b5fc8bb

Як бачите, між символами залишаються перепустки, але з ними не потрібно боротися під час копіювання. А це береже час!

Переваги медіа-запитів

Ви можете створити стилі для сайту при відображенні на мобільних пристроях (або в маленькому вікні браузера), тоді як на настільному ПК залишиться звичний вигляд веб-сторінки. Для цього потрібні цільові стилі у медіа-запитах, ось приклад:

Уникайте fixed позиціонування

Якщо заголовок або сайдбар позиціоновано фіксовано, CSS властивість position встановлено значення fixed, радимо бути обережними.

У цьому випадку при створенні розмітки розмір вашого заголовка зросте пропорційно сторінці, тобто може зайняти екран повністю:

Найпростіше при адаптації сайту під мобільні пристрої вам відмовитиметься від фіксованих позицій при відображенні на мобільних гаджетах.

Приклад показує, як це працює на практиці:

Використовуйте стандартні шрифти

Завдяки користувальницьким шрифтам, сайт виглядає дорого та професійно. Але при цьому гостям доводиться підвантажувати файли зі шрифтами – ця операція провадиться перш ніж користувач зможе побачити сайт.

Зазвичай такі файли характеризуються великим обсягом, тобто на мобільному пристрої завантаження їх займе багато часу. А що побачить гість порталу? Нічим незаповнений простір:

За допомогою адаптації сайту під мобільні пристрої з Google Font Loader, поки завантажується варіант користувача, буде відображатися текст зі стандартним шрифтом. Далі ви генеруєте сторінку заново, і гість бачить обраний шрифт.

Але вам доведеться написати два варіанти CSS-правил: перший для стандартного шрифту, ще один - для завантаженого.

Повірте, такий вихід буде оптимальним: людина прочитає все, що їй потрібно, доки завантажуються шрифти, а потім матиме можливість побачити дизайн. Використовуйте наступний код:

Підкреслимо:селектор класу.wf-opensans-n4-active додається в код сайту динамічно Font Loader"ом, але лише, коли шрифт завантажений.

Запропонуйте користувачам читабельний контент

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

Тому у вас на сайті вони з'являться, коли їх залучить заголовок. Далі їм важливо знайти контент, підготовлений під читання з невеликого екрана.

Для опису цього правила в англійській є досить ємне слово snackable (від англ. Снек - закуска). Так ось, контент для таких користувачів повинен бути саме snackable, тобто зручним для швидкого читання, перегляду в русі.

Давайте позначимо основні риси, які слід враховувати при адаптації сайту під мобільні пристрої для читання з екрана:

1. Починайте з короткого, ємного, привабливого заголовка.Радимо складати його близько 10 слів, причому використовувати великий шрифт.
2. Розбивайте текст на блоки, кожен із них необхідно починати коротким, інформативним підзаголовком, що виділяється на загальному тлі.
3. Вставляйте в текст нумеровані/марковані списки,щоб вашим мобільним користувачам було зручно швидко знаходити потрібне.
4. Використовуйте візуальні вставки,додатково структуруючи інформацію та спрощуючи сприйняття.

Адаптуйте електронні листи до читання з маленького екрану

Провести адаптацію електронної пошти до читання з екранів мобільних пристроїв вам допоможуть такі інструменти для розсилки:

• MailChimp.
• AWeber.
• Constant Contact.

Замініть посилання на «тапабельні» кнопки

Як тільки користувачі потрапляють з мобільних пристроїв на сайти, що не адаптовані під них, вони діагностують у себе «синдром товстих пальців». Його не знайти серед медичної термінології, це сленг фахівців даної сфери, що описує помилки при спробі потрапити пальцем на конкретний елемент.

Який розмір буде оптимальним для кнопки елемента навігації, щоб у людини не виникало з ними проблем? Вам допоможуть рекомендації щодо адаптації сайту під мобільні пристрої:

• Apple вважає, що оптимальний розмір для кнопок, навігаційних елементів починається із співвідношення 44 на 44 пікселі.
• Nokia рекомендує мінімальні габарити 48 на 48 пікселів або 0,7 на 0,7 см під час створення подібних елементів.
• Microsoft радить кнопки 34 на 34 пікселі.

Пам'ятайте, що мобільним користувачам буде складно користуватися сайтом, якщо ваш текст виявиться насичений посиланнями, що знаходяться близько один до одного.

У наведеному прикладі меню повної версії сайту виконано у вигляді посилань. Тут одразу потрапити до потрібного розділу буде вкрай непросто на десятидюймовому планшеті.

Щоб отримати так звані mobile-friendly кнопки, елементи навігації, ви можете вибрати два шляхи: замовити їх із індивідуальним дизайном або застосувати шаблонні інструменти. Якщо ви вибрали WordPress, радимо скористатися такими плагінами:

• Standout Color Boxes and Buttons.З його допомогою ви створите зручні кнопки різного розміру, кольору, а контекстне меню адаптоване під мобільних користувачів.
• Responsive Menu.Цей плагін дозволить створити зручне меню "Гамбургер".

Кращий та безкоштовний плагін для адаптації сайту під мобільні пристрої для Wordpress

JetPack

В першу чергу поговоримо про найбільш простий метод адаптації сайту під мобільні пристрої самому на WordPress, що при цьому має найвищий рівень ефективності. Набір інструментів JetPack впорається з таким завданням, зажадавши від вас мінімальних зусиль – натиснути лише одну кнопку.

І швидше за все, він уже встановлений серед ваших базових плагінів. Якщо так воно і є, клацніть на посилання «JetPack» в меню адміністратора сайту, перейдіть на сторінку модулів. Тут вам необхідно лише активувати Mobile Theme.

MobilePress

Він належить до поширених, у своїй найпростіших плагінів. Поставляється з двома темами та корисний при подальшому створенні тем мобільними розробниками.

WPtouch

Цей варіант вважається наступним у списку безкоштовних інструментів адаптації сайту під мобільні пристрої за рівнем ефективності. Як показує статистика, він був завантажений понад 4,3 млн. разів.

Його перевага полягає в тому, що за пару хвилин ви зможете створити красивий, швидкий мобільний сайт, не написавши навіть рядка коду. У платній версії, яка називається WPtouch Pro, ви отримаєте окрему адмін-панель, підтримку в системі тикетів.

Wapple Architect Mobile Plugin

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

Він застосовує власний API для кожного гаджета, і цей варіант набагато кращий, ніж метод сніфінгу, оскільки не стосується структури адрес настільного сайту. Виходить, цей плагін є зручним у роботі та досить простим рішенням.

Mobile Detector

Даний варіант адаптації сайту під мобільні пристрої оснащений автоматичним розпізнаванням звичайних мобільників, смартфонів, завдяки чому сайт завантажується у версії, сумісної саме з пристроєм користувача, тобто враховується його роздільна здатність екрана, діагональ, ін.

Загалом пропонується сім встановлених варіантів мобільної теми оформлення. Крім того, Mobile Detector самостійно змінює розмір, роздільну здатність зображень відповідно до параметрів дисплея. Тут пропонуються також свої віджети, збір статистики.

Ключові переваги:

1. Автоматичне розпізнавання гаджета за допомогою бази, що включає понад 5000 гаджетів.
2. Здатність виділяти стандартні телефони серед розвинених пристроїв.
3. Підготовка статистики за мобільними користувачами, в яку входять такі показники, як кількість унікальних відвідувань, пошуковий трафік, ін.

WP Mobile Edition

Насправді, це копія представленого до цього варіанту - він має такі ж переваги, опції, але, крім іншого, підтримує систему коментування Disqus, мобільну карту XML з власним генератором для сайтів.

Останнє може бути корисним у пошуковій оптимізації. Зазначимо, що цей плагін, призначений для адаптації сайту під мобільні пристрої, формує мобільну версію на піддоміні виду m.facebook.com, завдяки чому досягається прискорене кешування, підтримка мобільних cookie.

WordPress Mobile Pack

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

Адаптація таблиць сайту під мобільні пристрої

Не секрет, що найскладнішою справою при адаптації сайту під мобільні пристрої, а саме під різні дозволи є робота з таблицями. Причому це найбільш актуально для таблиць з великим обсягом інформації.

Поговоримо про два варіанти верстки адаптивної таблиці.

Насамперед давайте подивимося на зовнішній вигляд таблиці:

Bootstrap-способ верстки адаптивної таблиці

Чесно кажучи, дійсно адаптивною таку таблицю назвати складно. Вона органічно виглядає на мобільному пристрої, і верстка сайту не тече. Цей варіант підійде, якщо у вас не багато таблиць на сайті, тому підключення плагіна, написання додаткових стилів буде зайвою тратою часу. Саме такий спосіб застосовується Bootstrap-ом.

Для застосування на практиці цього способу таблиця обернута в div, якому задана максимальна ширина 100%, overflow: auto.

Крім того, при адаптації сайту під мобільні пристрої можна вибрати максимальну висоту, зафіксувати шапку таблиці, якщо вона довга.

Верстка по-справжньому адаптивної таблиці

Тепер обговоримо ситуацію, в якій ваш сайт дійсно насичений таблицями – тут варто вдатися до плагіна Footable.

Насамперед необхідно підключити плагін (завантажити на GitHub / підключити з CDN), ініціалізувати його:

Але є одна тонкість в адаптації сайту під мобільні пристрої: скрипт рахує ширину таблиці, а не ширину viewport-а. Оскільки нам необхідно цю помилку усунути, важливо «модернізувати» скрипт:

Для цього в ініціалізації вказуємо клас таблиці або просто тег table, якщо хочемо, щоб усі таблиці сайту виявилися адаптивними.

Що ми маємо на увазі? На планшетах будуть ховатися колонки "RAM", "Діагональ", "PPI", "Акумулятор". При використанні на ще меншому телефонному екрані сховається також «Ціна».

В ініціалізації можна встановити контрольні точки:

Виходить, в діапазоні 0-720 правилу підпорядковуються mobile, 720-1024 – tablet, а вище 1024 – desktop. При необхідності ви можете створити більше правил.

Ще у вас є можливість розкрити певну колонку за промовчанням. У такому разі вказуємо data-атрибут data-expanded=«true»:

Ми розповіли не про всі можливості плагіна, але цього блоку буде достатньо створення адаптивних таблиць.

Адаптація сайту під мобільні пристрої онлайн: 6 найкращих сервісів

1. mobiSiteGalore

Цей сервіс для адаптації сайту під мобільні пристрої вважається найлегшим в управлінні редактором мобільних веб-сайтів. За словами його авторів, у вас піде всього 54 хвилини на розробку повністю функціональної мобільної версії сайту.

Зазначимо, що більшість із існуючих сервісів націлена на роботу зі смартфонами, тоді як mobiSiteGalore дозволяє вести підготовку сайтів і для старих моделей телефонів.

1. MobStac

З MobStac ви отримуєте мобільний веб-сайт підготовлений за допомогою HTML5. Крім того, у вас є можливість внести зміни налаштування або вибрати певний шаблон для зміни дизайну, що не складе великої праці.

Підкреслимо, що MobStac є єдиним з існуючих сервісів, що пропонує вбудований план монетизації мобільного веб-сайту. Його мінус полягає в тому, що сервіс поки що знаходиться в стадії бета, але ви можете отримати запрошення, після чого пройти реєстрацію.

1. Mofuse

Тут вдасться розробити мобільну версію веб-сайту, використовуючи два підходи: зробити все самостійно за допомогою mofuse або провести адаптацію сайту під мобільні пристрої, замовивши у команди фахівців.

У першому випадку ви отримуєте більш широкі можливості в області дизайну, причому щомісяця доведеться платити лише за роботу сервісу. Якщо ж найняти спеціалістів, вся робота ляже на їхні плечі.

1. Mobile App America

Цей варіант надає покращений аспект SEO для вашого веб-сайту. Завдяки його можливостям, ви випередите конкурентів, чиї портали поки що навіть не мають мобільної версії. Поки готувався цей текст, програма підтримувала пристрої iPhone, Blackberry, Android.

1. bMobilized

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

За словами розробників, база даних bMobilized підтримує понад 13 тисяч моделей мобільних девайсів, у тому числі до неї вже внесено популярні на сьогоднішній день бренди.

Але якщо вас турбує питання вартості адаптації сайту під мобільні пристрої, цей сервіс для вас, адже чим більше веб-сайтів ви розміщуєте через нього, тим більшу знижку отримуєте. Іншими словами, bMobilized виявиться практично ідеальним варіантом для власників мережі сайтів, яку потрібно адаптувати під мобільні пристрої.

1. Mobify

Mobify визнаний найкращим сервісом для тих, хто має відношення до електронної торгівлі. Він пропонує власникам функціонал HTML5, а його команда розробників, спираючись на ваші побажання, створює мобільний веб-сайт.

Як показує практика, створення повноцінно функціонуючого електронного магазину від стадії ідеї йде трохи більше трьох тижнів. Крім того, у вас є можливість самостійно поринути у його розробку.

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

Array ( => 21 [~ID] => 21 => 28.09.2019 13:01:03 [~TIMESTAMP_X] => 28.09.2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 21.09. 2019 10:35:17 [~DATE_CREATE] => 21.09.2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Статті Дмитра Свистунова [~NAME] => Статті Дмитра Свистунова => 11076 [~PICTURE] = > 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Дмитро Свистунов [~DESCRIPTION] => Дмитро Свистунов => text [~DESCRIPTION_TYPE ] => text => Статті Дмитра Свистунова Дмитро Свистунов [~SEARCHABLE_CONTENT] => Статті Дмитра Свистунова Дмитро Свистунов => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya-svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [ ~EXTERNAL_ID] =>)

Добрий день друзі! У цьому уроці я навчу вас, як створити контактну форму на WordPress за допомогою плагінів. Форма зворотнього зв'язку на WordPress є ідеальним рішенням для тих, хто хоче підтримувати контакт зі своєю аудиторією або отримувати заявки на адресу електронної пошти на замовлення будь-яких послуг. Ми навчимося з вами робити форму в модальному вікні. Після прочитання цієї статті, ви зможете самостійно вставляти форму на свої сайти. Тож поїхали.

Для чого вам потрібна контактна форма WordPress?

Ви, можливо, будете здивовані питанням чому мені потрібна форма зворотного зв'язку на сайт вордпрес? Чому б просто не додати адресу електронної пошти на сайт, щоб люди мені просто написали?

Це найбільш поширене питання від новачків, які бояться додавати код форми на сайт без знання програмування. Правду сказати вам взагалі не потрібен код при створенні форми зворотного зв'язку на WordPress. У цьому посібнику ми крок за кроком створимо контактну форму і зробити її може навіть найабсолютніший новачок.

Нижче наведу три головні причини, чому використання форми краще, ніж просто додати адресу пошти на сайт.

• – спам боти із завидною регулярністю вичіплюють через свої парсери адреси пошти, де є згадка поштового домену та заносять його до себе в базу, щоб потім надсилати вам небажану кореспонденцію. З іншого боку при використанні форми зворотного зв'язку для WordPress ви позбавляєтеся проблеми засилля СПАМних листів на свою скриньку.
• Повнота інформації – при надсиланні пошти люди не завжди надсилають всю інформацію, яка вам потрібна. За допомогою контактної форми ви самі визначаєте, які поля вам потрібні, щоб полегшити користувачам можливість надіслати вам листа (ім'я, email, номер телефону, коментар та багато іншого).
• Економія часу – форма зворотного зв'язку WordPress допоможе заощадити час. Крім повноти інформації, яку ви запросили у користувача і яку він вам надішле, ви також можете вказати, що чекає на наступному кроці, наприклад, «Ваша заявка буде розглянута протягом 24 годин» або Дивіться відео та багато інших корисностей.

Нижче наведено приклад контактної форми, яку ми створюватимемо в цьому посібнику.

Почнемо, панове.

Крок 1: Вибираємо найкращий плагін форми зворотного зв'язку для WordPress

На цьому етапі нам необхідно визначитися з вибором відповідного плагіна форми. Їх існує безліч як безкоштовних, так і платних. У цьому уроці я розповім вам про різні плагіни, щоб у вас був багатий вибір. У першому випадку буде задіяно плагін WPForms.

Нижче наведені причини, за якими WPForms є кращим плагіном зворотного зв'язку:

1. По-перше, це найдружелюбніший до новачків плагін. Методом простого перетягування потрібних блоків можна створити контактну форму в кілька кліків.
2. WPForms Lite повністю безкоштовний.
3. Коли ж ви будете готові до потужнішого функціоналу і якщо він справді для вас буде важливим, тоді можете перейти на версію Pro.

Відмінно, якщо ці причини виявилися достатніми і я вас переконав, тоді рухаємося вперед.

Крок 2: Встановлення плагіну контактної форми WordPress

Для цього уроку ми використовуємо версію Lite, тому що це безкоштовно та зручно в роботі. Ви можете встановити його увійшовши в блог і перейшовши в Плагіни – Додати новий.

У рядку пошуку набираємо назву нашого плагіна і тиснемо Install now (Встановити зараз).

Після встановлення плагіна переконайтеся, що його активували. Це показано тут:

Крок 3: Створення контактної форми WordPress

Отже, після успішного завершення активації плагіна, саме час створити форму зворотного зв'язку. Для цього в панелі адміністратора блогу натисніть вкладку WPForms Menu і перейдіть в Add New (Додати нову).

Це дозволить відкрити вам конструктор Wpforms, де простим перетягуванням потрібних блоків ви можете створити контактну форму зворотного зв'язку WordPress. У безкоштовній версії Lite доступні два попередньо вбудовані шаблони (порожній і проста форма). Ви можете використовувати їх разом, щоб скласти потрібну і зручну для вас. У цьому прикладі вам вибрали другий варіант, тобто простий контактної форми. До неї додамо ім'я, Email та текстове поле.

Ви можете натиснути на кожне поле, щоб відредагувати його. Також за допомогою миші ви можете перетягувати та змінювати порядок полів форми.

Якщо ви хочете додати нове поле, просто виберіть потрібно зі списку ліворуч та перетягніть у робочу область.

Коли все зроблено, просто натисніть кнопку Зберегти (Save).

Крок 4: Налаштування повідомлень та підтверджень

Після того, як ви успішно створили форму зворотного зв'язку на WordPress, дуже важливо правильно налаштувати форми повідомлень та підтверджень.

Форма підтвердження це те, що бачать ваші користувачі, коли надсилають вам заявку з форми. Це може бути повідомлення подяки або ви можете їх перенаправити на іншу спеціальну сторінку.

Форма повідомлення – це повідомлення, які ви отримуєте, коли до вас приходить нова заявка або email лист з вашого WordPress сайту.

Ви можете налаштувати обидва ці поля, перейшовши в Налаштування (Setting) всередині плагіна конструктора фор WPForms.

Ми за умовчанням не ставили чіпати і залишили таке поле Форми Підтвердження з повідомленням «Дякуємо за ваше звернення». Однак, ви можете змінити його на інший текст або перенаправити користувача на окрему сторінку.

Найкращим у цьому плагіні є те, що налаштування, які йдуть за замовчуванням, просто ідеальні для новачків. Їм не треба думати, що зробити або що змінити. Все дуже інтуїтивно зрозуміло та просто. Коли ви переходите в установку повідомлень, всі поля будуть заповнені динамічно.

За замовчуванням повідомлення надсилаються на ту пошту, яку ви вказали. Якщо ви бажаєте змінити адресат для надсилання повідомлень, його також можна легко змінити. Якщо хочете вказати кілька адрес пошти (вказуються через кому), то будь ласка, карти в руки, як то кажуть 🙂

Поле Тема email буде автоматично заповнено з вашим ім'ям форми. Поле ім'я буде братися з імені користувача (вашого імені). Коли ви будете відповідати на лист, він буде йти на пошту з ім'ям користувача, який заповнив контактну форму.

Крок 5: Додавання контактної форми WordPress на сторінку

На цьому кроці, коли ви побудували та налаштували форму зворотного зв'язку, потрібно створити для неї окрему сторінку «Контакти», куди ви зможете її помістити. Або ви створюєте нову, або редагуєте існуючу сторінку, де ви можете її додати.

Ми використовуватимемо простий шорткод для вставки форми на сторінку. Просто натисніть кнопку «Add form» і виберіть назву вашої форми, щоб вставити її на сторінку.

Чудово. Тепер зберігаєте сторінку і відкриваєте перегляд, щоб побачити зміни.

Ось як приблизно виглядатиме форма на простій WordPress сторінці:

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

Крок 6: Додавання контактної форми WordPress до сайдбару

Плагін WPForms поставляється з вбудованим віджетом форми зворотного зв'язку, який ви можете додати до сайдбару або будь-якої іншої області на сайті (наприклад, у підвал).

Для цього нам потрібно перейти в розділ «Зовнішній вигляд» (Appearance)-> Віджети (Widgets). Там ви побачите встановлений віджет плагіна форми у лівій частині. Просто беремо і звичайним перетягуванням задаємо порядок відображення у потрібній області в сайдбарі.

Наступним кроком вказуєте назву віджету та зберігаєте. Переходьте на сайт та дивіться результат.

На цьому огляд нашого плагіна форми зворотнього зв'язку WPForms завершено. Але, спеціально для вас я підготував ще огляд одного безкоштовного плагіна, за допомогою якого ми можемо зробити спливаючу форму зворотного зв'язку і ті ж фішки, що і в попередньому. Він називається Contact Form 7. Він реально дуже потужний і козир його в тому, що він повністю БЕЗКОШТОВНИЙ!

Його також можна зробити адаптивним, тобто форма зворотного зв'язку буде пристосовуватися до розмірів екрана вашого пристрою.

Так, про всяк випадок, щоб ви знали, що вони є

Як зробити контактну форму зворотного зв'язку за допомогою Contact Form 7

Продовжуємо розбиратися у питанні створення форм для прийому заявок із вашого сайту. Попереду ми маємо ще один плагін контактної форми вордпрес під назвою Contact Form 7. Давайте його встановимо до себе на блог і активуємо, як ми це вміємо робити.

Вона вже встановлена ​​на моєму сайті, не на цьому блозі. Процедура стандартна. Тепер нам потрібно зайти в адмінку блогу та створити нову форму, яка буде збирати нам заявки та іншу корисну інформацію. Переходимо до розділу «Contact Form 7» -> Додати нову.

Чудово! Тепер давайте дамо їй відповідну назву, у разі цих контактних форм дуже багато. Виберемо одну, наприклад «Форма замовлення просування сайту»

Коротко розповім, що нам тут буде потрібно. Насамперед, нам потрібно визначитися скільки полів форм ми хочемо зробити. Відразу скажу, що 100500 полів робити не потрібно і це безглуздо, тому що люди закриють ваш сайт і не залишать заявку. Їм слід спростити цей етап. Тобто якщо подумати, то нам від людини потрібно що:

1. Його ім'я, щоб до нього звернутись (персональне звернення)
2. Адреса пошти (зворотній зв'язок, куди надсилати йому пропозицію)
3. Номер телефону, щоб одразу зателефонувати (якщо це відбудеться швидко, то він у будь-якому разі стане вашим клієнтом)
4. Власне кнопка «Надіслати»

Це основні дані, інші ви можете з'ясувати вже під час листування або телефонної розмови. Логічно? Я думаю, що так. Рухаємось далі.

Створення полів контактної форми у плагіні Contact Form 7

Так, з кількістю полів визначилися, тепер нам потрібно створити ці поля. Нам доступні такі таби:

• Text (Будь-яке текстове поле, наприклад «Ім'я», «Задати питання», або будь-яку іншу назву, яку ви збиратимете через це поле)
• Email (тут призначення одне, щоб користувач ввів)
• URL (в це поле вводитиметься адреса сайту, інші значення не прийнятні, видаватиметься помилка)
• Tel (поле з телефонним номером для нашої форми зворотного зв'язку на WordPress, допустимі числові значення, текст дасть помилку)
• Number (Числовий діапазон значень, можна застосувати, наприклад, до ціни: "скільки ви готові заплатити за сайт? Від 23000 до 120000 рублів")
• Date (Вказуємо дату, з якого за скільки. Приклад: «Бронювання автомобіля з 13/04/2016 по 25/04/2016»)
• Text Area (Текстова область, сюди можна вводити текст як коментар)
• Drop-Down Menu (Випадаючий перелік). Реалізовано на моєму блозі, можете подивитися. Наприкінці кожної статті я пропоную користувачам створення або простого сайту або інтернет магазину. Саме такий функціонал забезпечує ця опція.
• Checkboxes (множинний вибір, наприклад: Сайт + Створення логотипу + просування + контекстна реклама)
• Radio buttons (Вибір якогось одного пункту, наприклад: «Ви замовляєте або контекстну рекламу або таргетовану»)
• Acceptance (Приймаєте умови угоди, тобто користувальницька інформація, нібито публічної оферти)
• Quiz (Вікторина – серія коротких питань, також можна вставити у контактну форму).
• reCaptcha (Підтвердження, що ви не робот і не спамите.) Гарний захист від спаму. Примітка: ця опція працює, якщо ви підключили плагін Really Simple Captcha.
• File (Якщо ви хочете дати можливість користувачам завантажити вам файл, наприклад: "Прикріпіть ТЗ на розробку сайту").
• Submit (Надіслати дані на пошту)

Отже, з полями ми визначилися, значення кожного ви знаєте. Давайте приступимо до збирання нашої контактної форми на WordPress.

У наведеному нижче прикладі я використав 2 поля: Ім'я, Email. Відповідно вам знадобляться ці вкладки:

Натиснувши на текстову вкладку (Text), ми потрапляємо в діалогове вікно:

Тут нам потрібно натиснути на галочку Тип Поля - Обов'язкове. Зроблено для того, якщо користувач не введе в нього ім'я, то заявку він вам надіслати не зможе, буде помилка відправки, що не всі поля заповнені коректно.

Потім ви побачите шорткод для вставки цього поля та поруч із ним синя кнопка «Вставити тег». Таким чином, ви додаєте одне нове поле контактної форми.

Щоб ви не заплуталися, я виділив його стилем. Код нижче:

А ось скрін:

Аналогічну операцію виконуємо на полі «Email». Клікаємо на відповідну вкладку і потрапляємо в таке діалогове віконце.

Абсолютно нічим не відрізняється від попереднього, просто повторюємо наші дії з вами. У мене поле емейла також має стиль. Наводжу нижче код:

А ось скрін:

І, нарешті, кнопка Submit (Відправити дані). Вона у мене вся у стилях.