Все про мобільних спочатку, або як не втратити позицію в Google в 2019-2020

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

Сьогодні близько 53% веб-трафіку в світі надходить з мобільних пристроїв. До кінця 2019 ця цифра може зрости до 60%. Не звертайте уваги на мобільну версію вашого сайту-злочин проти бізнесу!

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

Що таке мобільний перший і чому це важливо

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

Зазвичай створення сайту виглядає так: програмісти і дизайнери розробляють повну (комп’ютерну) версію, а потім адаптують її до мобільних пристроїв.

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

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

Тренд на мобільний перший набір Google

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

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

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

Близько 50% відвідувачів приїжджають на ваш сайт з телефонів

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

У 2017 було проведено кілька масштабних досліджень на мобільних майданчиках, ось найцікавіші дані:

• 60% респондентів заявили, що вони навряд чи повернуться на сайт з незручною мобільною версією;
• 57% користувачів впевнені, що вони ніколи не рекомендуватиме Інтернет-бізнес з поганим мобільним сайтом;
• 80% сайтів Alexa Rank адаптували мобільні версії;
• 69% часу в мережі – використання смартфонів;
• Щогодини, 68 000 000 пошуки Google зроблені з мобільних пристроїв;
• 35% запитів на мобільні пошукові запити зроблені з пристроїв з 5,1-дюймовим екраном. Найбільш популярною роздільною здатністю дисплея є 720 x 1280 точок.

Як адаптивні та адаптивні дизайни відрізняються від перших мобільних

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

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

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

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

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

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

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

Мобільний перший

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

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

Esquire є хорошим прикладом. Він заснований на принципі мобільного спочатку:

Контрольний список: які мобільні спочатку повинні бути як

Перевірте, чи відповідає мобільна версія сайту таким пунктам:

• Інформація відображається коректно як у книзі, так і в альбомній орієнтації;
• Всі інтерактивні елементи працюють;
• Немає важких зображень, які сповільнюють завантаження сторінок;
• Немає нічого, пов’язаних з спалахом на сайті;
• Немає спливаючих вікон, які накладаються на половину сторінки;
• Немає горизонтального прокручування;
• Контактний номер активується або він може бути скопійований принаймні;
• Поля у вигляді реєстрації короткі і прості, функція автозаповнення відключена (часто неправильна інформація може бути стягнута);
• Всі кнопки робляться за допомогою CSS, без кнопок зображення;
• Розмір зображень змінюється автоматично залежно від типу пристрою;
• Є можливість зробити покупку в один клік.

Прикладами для натхнення є мобільні версії Booking.com, ETQ і Fortnum &Mason. Грамотне редизайн останньої стали приносити ланцюжки ресторанів і продуктових магазинів сувенірів на 57% більше додатків з смартфонів.

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

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

Все про професію інтернет-маркетингу

18 та 19 червня Олесь Тимофєєв проведе серію безкоштовних онлайн майстер-класів. Він розповість вам, як стати популярним маркетолога в 3 місяці, отримати престижну компанію і заробити $2000-5000 щомісяця. Зареєструйтеся зараз:

УЧАСТЬ У КНИЗІ