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

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

Чи не здається, що світ крутиться навколо смартфонів? Впевнені, що навіть ті, хто не використовує телефон прямо зараз, все одно тримає його під рукою – на столі, в кишені, в сумочці або десь в поле зору. Любов до гаджетів полегшує доступ до будь-якого сайту на планеті. Якщо бажання юзера зайти до вас на сторінку – це 50% справи, то інші 50% – це надати зручну платформу.

Статистичний портал Statista порахував, що більше половини світового трафіку надходить з мобільних пристроїв:

Наочно видно, що відсоток зростає з року в рік. І немає ніяких передумов, що тенденція не продовжиться. У деяких регіонах – наприклад, в Азії – інтернет-трафік має істотну перевагу (більше 65%).

Якщо ви не оптимізували контент і сторінки, то втрачаєте частину трафіку. А з новими законами Google, які вступають в силу з 1 липня 2019 року, сайт просто почне втрачати трафік, якщо не пристосується до нових правил.

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

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

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

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

Що таке mobile-friendly сайт 

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

Контент «для мобільних» – це матеріал, який добре відображається не тільки на комп’ютерах, а й на екранах гаджетів: легко читається, посилання адаптивні і клікабельні, і з контентом зручно взаємодіяти.

Є два способи, щоб перевірити сайт на адаптування до мобільних екранів.

Перший – це перевірка, яку надає сам Google: просто вставте посилання і дізнайтеся, оптимізований сайт чи ні:

Другий спосіб – використовувати емулятор смартфона. Так, ви тут не побачите підсумкову оцінку, як у Google, але зможете оцінити картинку візуально і навіть скролити сторінки:

Адаптивний дизайн – а це що? 

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

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

10 порад як зробити сайт мобільним

1. Встановіть адаптивну тему 

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

Якщо ви використовуєте WordPress, тоді змінити тему просто: зайдіть у вкладку «Зовнішній вигляд», виберіть «Теми», потім кнопка «Додати нову» і в пошуку напишіть «responsive» – вам випадуть теми, які відразу налаштовані під мобільні екрани.

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

2. Спростіть меню  

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

Відмінний приклад як до цього підійшли Domino’s Pizza:

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

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

Бокова панель – відмінна ідея, там можна розмістити основні вкладки, які при цьому не будуть спочатку захаращувати користувачеві перегляд. Ми теж використовували такий прийом, щоб менше відволікати відвідувача:

3. Не відлякуйте відвідувачів формами заповнення

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

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

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

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

4. Чітко відобразите кнопку CTA

CTA – це call-to-action або кнопка призову до дії, її завдання вкрай очевидна і полягає в тому, щоб змусити користувача зробити потрібне.

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

За статистикою, 53% веб-сайтів, де на пошук кнопки йде більше 3-х секунд, втрачають потенційних клієнтів. Це надто довго. СТА повинен виявлятися за 1-2 секунди.

5. Додайте функцію пошуку

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

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

6. Полегшить клієнтам зв’язок з підтримкою

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

Інформація про вас, контактні номери, форми зв’язку, онлайн-чат розташовані на видному місці? Ну а в мобільній версії? Якщо так, тоді ви все робите правильно. Якщо ні, тоді варто звернути на цей пункт увагу і зробити так, щоб зв’язатися з вами було вкрай швидко.

7. Розмір має значення 

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

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

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

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

8. Виключіть або мінімізуйте спливаючі вікна

Для тих, хто заходить на сайт з персонального комп’ютера, кілька спливаючих вікон не будуть труднощами (хоча вони можуть викликати роздратування), але якщо до вас прийшли зі смартфона – тут будуть неприємності. Позбавтеся від спливаючих вікон на мобільній версії сайту. Люди взагалі недолюблюють їх, але на мобільному пристрої постійні вікна викликають справжній гнів. Форма не тільки закриває половину екрану, але ще її досить складно закрити. Такий собі тригер у тригері.

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

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

9. Підберіть правильний шрифт 

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

Тут не так-то й багато простору для оригінальності, шрифт – головна частина сайту, на яку звертатимуть більше всього. Експериментуйте над текстом, але не забудьте перевірити читабельність сторінок через гаджет. Більше про вплив дизайну на відвідуваність сайту ми писали тут. 

10. Швидкість в пріоритеті

Незалежно від внесених змін на сайт, пам’ятайте про швидкість: аналітики з’ясували, що 53% користувачів відмовляться від мобільної версії, завантаження якої займає більше 3 секунд (більше про вплив швидкості ми писали тут). Ось наочна статистика співвідношення відмов зі збільшенням часу завантаження сторінки:

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

Висновок 

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