10 порад, як адаптувати свій сайт під мобільні пристрої
Люди витрачають понад три години на день на серфінг в інтернеті зі смартфонів. Саме мобільні пристрої стали основним гаджетом, який люди використовують для читання новин, перегляду відео та здійснення покупок. Сьогодні недостатньо зробити сайт, який швидко завантажується і має гарний вигляд на ПК. Більшість відвідувачів заходять на сайти зі смартфонів, тому розробники все частіше використовують стратегію “mobile first” під час створення сайтів.
Існує кілька способів адаптувати сайт під мобільні пристрої. Адаптивна верстка або встановлення адаптивної теми – найпростіший і найсучасніший спосіб “подружити” сайт зі смартфонами і планшетами.
Що таке mobile-friendly сайт?
Мобільні пристрої – гаряча тема у веб-дизайні, бо наразі трафік зі смартфонів і планшетів перевищує кількість відвідувань із ПК. Сайт mobile-friendly оптимізований під мобільні пристрої та правильно відображається на кожному з них.
Існує кілька способів “подружити” сайт із мобільними пристроями:
- Адаптивний дизайн. Це найпростіший спосіб, що передбачає встановлення адаптивного шаблону (або створення його з нуля). Такий шаблон підлаштовується під розмір екрана, змінюючи розміщення і розмір елементів, або зовсім приховуючи їх. Якщо ваш сайт працює на CMS, наприклад, WordPress або Joomla!, виберіть одну з адаптивних тем, щоб зробити сайт mobile-friendly.
- Мобільна версія на субдомені. Це більш трудомісткий шлях, що передбачає створення окремої версії сайту. За фактом, це окремий домен із повноцінним функціоналом, скриптами, кошиком замовлень, окремим каталогом товарів. Для такого сайту потрібен мультидоменний сертифікат SAN, щоб не купувати кілька SSL для кожного субдомена.
Для більшості сайтів створення адаптивного дизайну більш доцільно. Окрема мобільна версія підійде великим порталам, соціальним мережам, дошкам оголошень.
Що таке адаптивний дизайн?
Адаптивні сайти можуть адаптуватися під розмір екрана користувача. Під час масштабування сторінки вміст змінюватиме розташування і розміри, щоб усі елементи були представлені якнайкраще. Адаптивні сайти однаково добре виглядають на ПК, ноутбуці, планшеті або смартфоні. Однак для цього веб-сайту потрібна оптимізація.
Типовий веб-сайт складається з набору сторінок. Кожна сторінка містить HTML-код і контент (текст і зображення), скрипти. Дизайн веб-сторінки оформляють за допомогою файлів, які називають каскадними таблицями стилів (CSS). Для простоти пояснення припустимо, що неадаптивний веб-сайт має один файл CSS, який керує дизайном. Адаптивний сайт застосовує додатковий файл CSS залежно від пристрою, з якого користувач заходить на сайт. Дизайн відображатиметься по-різному залежно від пристрою.
Адаптивний дизайн не вимагає окремого макета для кожного пристрою. Достатньо встановити одну адаптивну тему або замовити розробку одного макета. Це також позбавляє необхідності налаштовувати редиректи для направлення користувача на потрібну версію сайту. А якщо ви керуєте кількома доменами і хочете передати цю роботу на аутсорс, TutHost пропонує управління DNS-записами недорого.
10 порад, як зробити сайт mobile-friendly
Наступні поради допоможуть адаптувати ваш ресурс під мобільні пристрої. Це не тільки збільшить трафік зі смартфонів, а й стане позитивним сигналом для Google.
1. Встановіть адаптивну тему
Це перший і найважливіший крок. Сьогодні кожен провідний конструктор веб-сайтів пропонує адаптивні шаблони. Squarespace ідеально адаптується до мобільних пристроїв і буде найкращим вибором, якщо ви створюєте сайт з нуля. Усі шаблони Wix адаптовані для мобільних пристроїв, але обов’язково перевіряйте розміщення елементів під час розробки дизайну.
Якщо ви створюєте сайт за допомогою CMS, такої як WordPress, переконайтеся, що тема, яку ви вибрали, адаптована для мобільних пристроїв. Просто введіть “responsive” у бібліотеці тем WordPress або знайдіть шаблон на сторонньому сайті, такому як Themeforest. Обов’язково читайте відгуки і, якщо можливо, зазирніть на будь-які сайти, що використовують цю тему, зі свого мобільного телефону, щоб оцінити її.
Якщо ваш веб-сайт було створено з використанням старого, неадаптивного шаблону, і ви з якихось причин не можете змінити його, додайте такий рядок коду в секцію кожної сторінки:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Це означає, що ваші сторінки мають автоматично переформатовуватися, щоб відповідати ширині екрана відвідувача.
2. Спростіть меню
Одна з найкращих порад зі створення mobile-friendly сайтів включає розробку зручної навігації. Щоразу, коли відвідувачі потрапляють на ресурс, вони повинні легко зрозуміти структуру вашого веб-сайту і перейти до потрібних розділів без будь-якої плутанини.
Припустимо, відвідувач приходить на ваш сайт, щоб купити певний товар. Не перевантажуйте його статтями про продукт, підпискою на розсилку новин і пропозиціями підписатися на вас у соцмережах. Вам потрібно лише забезпечити максимально легкий процес купівлі, щоб відвідувачі могли вибрати продукт і замовити його за лічені секунди.
У розробці ПЗ і веб-застосунків модель KISS (Keep it simple stupid) використовується для створення застосунку зі зручним інтерфейсом, зрозумілими функціями навігації та мінімальною кількістю завдань. Згідно з цим принципом будь-який користувач має перейти на сайт, виконати потрібні дії, нікуди не відволікаючись, і в підсумку отримати бажане настільки просто, наскільки це можливо.
3 Не відлякуйте відвідувачів формами заповнення
Ще одна важлива річ, яку слід враховувати під час створення мобільної версії, – це форми. Вони часто бувають довгими і складними, і їх не завжди просто заповнити на мобільному пристрої. Занадто довге заповнення форм є поширеною причиною відмови від цільової дії.
Щоб зробити форми простішими та зручнішими для використання на мобільних пристроях, вимкніть функцію автозаміни. Це не дозволить клавіатурі змінити те, що ви друкуєте, і спростить заповнення форми. Переконайтеся, що всі поля форми досить великі, щоб їх можна було легко натискати на смартфонах з маленьким екраном.
Якщо форма довша, скоротіть кількість полів або розбийте її на кілька сторінок, щоб користувачам не доводилося прокручувати довгий список полів.
4. Чітко відобразіть кнопку CTA
При створенні адаптивної або мобільної версії сайту пам’ятайте, що у вас обмежені можливості привернути увагу відвідувачів. Мобільні користувачі розраховують швидко знайти потрібну інформацію. Якщо ви не запропонуєте їм виконати цільову дію протягом кількох секунд, то знизите ймовірність конверсії. В ідеалі кнопка СТА має бути помітна відразу, протягом 1-3 секунд.
Розмістіть CTA на видному місці. Що більш візуально виразним і явним ви зробите CTA на своєму сайті, то швидше досягнете кінцевої мети. 49% мобільних користувачів використовують великі пальці для навігації та натискання на елементи, які знаходяться в межах досяжності. Це означає, що будь-який елемент, розміщений у кутах веб-сайту, буде важкодоступним для більшості користувачів. Переконайтеся, що всі кнопки СТА великі й розташовані в центрі екрана, де до них легко дістатися.
5. Додайте функцію пошуку
Функція пошуку необхідна практично будь-якому великому сайту. Неважливо, продаєте ви товари або публікуєте статті, відвідувачам буде значно простіше знайти потрібну інформацію в рядку пошуку. Зробіть рядок пошуку помітним, щоб користувачам не довелося довго шукати його. Так ви допоможете їм знайти потрібну категорію або товар, тим самим підвищивши коефіцієнт конверсії.
6. Полегшіть клієнтам зв’язок із підтримкою
Відвідувачі можуть захотіти зв’язатися з вами. Причини найрізноманітніші: питання щодо товару, складнощі з оформленням замовлення, зауваження щодо роботи сайту, висловлення подяки. Зробіть так, щоб ваші клієнти могли легко зв’язатися з підтримкою. Популярні варіанти включають онлайн-чат, форму зворотного зв’язку або просто номер телефону, вказаний на видному місці.
Подбайте про те, щоб знайти контакти або кнопку виклику онлайн-чату не становило труднощів навіть дитині.
7. Розмір має значення
Це твердження підходить до всіх елементів сайту, коли йдеться про мобільну версію. Користувачам незручно натискати занадто маленькі кнопки, вибирати дрібні пункти меню, читати дрібний або, навпаки, дуже великий шрифт.
Зробіть кнопки досить великими, розділіть пункти меню, щоб уникнути випадкових натискань, виберіть великий шрифт. Не розташовуйте інтерактивні елементи в кутах – це найбільш незручне місце розміщення для користувачів смартфонів.
8. Виключіть або мінімізуйте спливаючі вікна
Користувачі не дуже люблять спливаючі вікна, але за обережного використання вони можуть дуже добре працювати на десктопній версії сайту. Коли справа доходить до мобільних пристроїв, краще уникати спливаючих вікон. На маленькому екрані вони викликають у користувачів лише роздратування. Таке вікно заважає перегляду контенту, а закрити його може бути складно – потрібно потрапити пальцем у маленький хрестик у кутку екрана.
9. Підберіть правильний шрифт
Розмір шрифту важливий під час перегляду сайту з мобільного телефону. Ніхто не хоче придивлятися до дрібних літер, але й величезні символи відлякають відвідувачів. Рекомендується використовувати шрифт розміром щонайменше 14 пікселів, але перевірте, який вигляд він має на мобільній версії – найімовірніше, ви виявите, що він замалий, і ви захочете трохи збільшити його.
Перевірте читабельність шрифту. Можна спробувати експериментальний шрифт на десктопі, але навряд чи цей крок доречний на мобільних пристроях.
Під час роботи над мобільним представленням сайту у вас набагато менше простору для впровадження оригінального дизайну. У десктопній версії ви можете відокремлювати текст розривами, порожнім простором або зображеннями. На мобільних пристроях спробуйте замість цього виділяти лініями або жирним шрифтом різні фрагменти тексту, щоб вони не зливалися один з одним.
10. Швидкість у пріоритеті
Швидкість – один із найважливіших чинників у роботі сайту. За статистикою, 47% відвідувачів залишають сайт, якщо він завантажується понад 3 секунди. Якщо йдеться про мобільну версію, їхня кількість збільшується до 53%.
Щоб збільшити швидкість завантаження, необхідно стиснути файли, такі як зображення, CSS і скрипти. Що легші ці файли, то швидше завантажуватимуться сторінки. Щоб збільшити швидкість, намагайтеся, щоб інтерфейс був чистим і простим, не перевантаженим зображеннями і відео. Це допоможе користувачам швидше побачити контент і залишитися на вашому сайті.
Безпека сайту також важлива. Встановіть SSL-сертифікат від Comodo, щоб підвищити її. Ми також пропонуємо зручні SSL утиліти.
Регулярно тестуйте й оптимізуйте сайт на різних пристроях і розмірах екрана, навіть після розробки. Гаджети постійно змінюються і розвиваються, тому оптимізація вкрай важлива для збереження трафіку і просування в пошукових системах. Використовуючи згадані методи, ви можете регулярно покращувати свій веб-сайт протягом усього його життєвого циклу. Ці поради допоможуть визначити й усунути потенційні проблеми, які можуть виникнути у користувачів мобільних пристроїв на вашому ресурсі. А якщо ви хочете заробляти разом із TutHost, пропонуємо вигідний реселінг SSL-сертифікатів, що користуються високим попитом в Україні та за її межами.
