Стаття доповнена в листопаді 2020 року

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

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

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

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

Адаптивне верстання. Що це таке і навіщо воно потрібне

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

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

Контент, зміст проекту відображається на різних пристроях індивідуально. Залежно від розміру екрану. Спрощений приклад:

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

Проходить адаптація усіх складових контенту:

кнопок;
шрифтів;
анімації й інших візуальних складових.

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

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

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

Чому така важлива адаптація сайту

Адаптив – цей не модний напрям, не просте бажання виділитися на тлі конкурентів. Це гостра потреба. Зокрема, для комерційних проектів.

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

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

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

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

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

Перевага	Пояснення
Зростання конкурентоспроможності	Відсутність адаптивки – гарантована втрата приблизно 50% потенційних клієнтів. Адже, як показують профільні дослідження, саме такий об’єм мобільного трафіку. Якщо проект не адаптований, він програє конкуренцію.
Розширення аудиторії	Як вже відзначалося вище, біля 50% трафіка (і це мінімальний показник), йде з мобільних гаджетів. Хочете розширити аудиторію проекту? Ви знаєте, що треба робити!
Збільшення доходів	Трафік йде з двох напрямів – десктопів і «мобілок». Відповідно, росте прибуток. Крім того, підвищуються позиції в пошуковій видачі, що забезпечує ще більший приплив відвідувачів.
Простота обслуговування	Усі сторінки знаходяться за однією адресою, зберігається цілісність сайту. Управління здійснюється з однієї адмінки. Зміна інформації, контенту в десктопної версії призводить до автоматичних змін в адаптивній.
Підвищення позицій в пошуковій видачі	При ранжируванні в пошукових системах обов’язково враховується наявність адаптивної версії.
Універсальність	Адаптація сайту робить проект більш універсальним. Ним зможуть користуватися усі, незалежно від пристрою. Доступними залишаються абсолютно усі елементи, кнопки, функції. Вони відображаються коректно, працюють без збоїв.

Як зрозуміти, чи потрібна адаптивна версія

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

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

Проте залишається декілька випадків, при яких виконувати подібні роботи не варто:

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

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

Мобільний додаток VS адаптивний веб-ресурс: що краще і чому

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

мобільна версія;
мобільне застосування;
адаптивна версія.

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

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

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

Як правильно проводиться адаптація сайту: 5 етапів

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

Зібрана інформація про поведінкові чинники відвідувачів допоможе зрозуміти, що саме і як треба буде реалізувати.

Адаптація сайту – процес, що припускає декілька послідовних етапів. Коротко розповімо про них.

1. Планування і проектування

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

2. Формування прототипу

Спочатку проводяться обговорення:

зовнішнього вигляду;
поведінка аудиторії;
розташування функціональних модулів, кнопок.

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

3. Верстання, тестування

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

Також на цьому етапі опрацьовується структура html-коду.

4. Візуальне оформлення

З десктопної версії переносяться усі основні візуальні елементи оформлення:

картинки;
фотографії;
іконки;
та інші.

Зберігається колірна гамма проекту.

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

5. Детальне тестування

Останній етап – комплексне тестування готового проекту. Профільні фахівці перевіряють:

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

При виявленні недоліків вони обов’язково виправляються, вносяться уточнення.

Різні типи адаптованих макетів

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

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

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

Окрім налаштування безпосередньо самого макету, верстальники обов’язково використовують медіазапити або скрипти. Вони потрібні для того, щоб надати елементам потрібні css-властивості, що активуються при зміні розміру екрану. Ось декілька прикладів:

зміна розміру шрифту або зміна шрифту в цілому;
перетворення виду блоків;
зміна розташування блоків;
приховання окремих елементів;
додавання нових деталей;
і так далі.

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

Основні принципи, яким повинен відповідати адаптований проект

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

Відсутність горизонтальної прокрутки вмісту.
Випадне меню, оптимізоване під різні пристрої.
Оптимальний масштаб усіх інтерактивних блоків.
Необхідна для зручного користування відстань між клікабельними елементами, у тому числі – посиланнями. Це важливо для роботи з майданчиком пальцями.
Плавна перебудова блоків, елементів при зміні роздільної здатності екрану.
Оптимальна довжина рядків – від 45 до 80 символів в рядку – і правильний міжрядковий інтервал для зручного читання.
Гнучкість картинок.
Спрощена навігація.
Легковагі сторінки, що забезпечують швидке завантаження, але не знижують функціональність і продуктивність веб-майданчика.
Сегментація наповнення – не основні, не важливі функції і матеріали приховані.

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

Адаптація сайту і 8 помилок, які допускаються найчастіше

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

1. Непомітні активні елементи та дрібний шрифт

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

Не можна робити занадто дрібними:

інтерактивні блоки;
кнопки;
заклики до дії;
форми для заповнення;
і так далі

І пам’ятати – навіть якщо шрифт добре видимий на екрані монітора персонального комп’ютера, він може виявитися нечитабельним на екрані девайса – мінімальний розмір 12px.

2. Блоки з прокруткою

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

Вихід – або спочатку передбачити демонстрацію в повну висоту, або розкривати блок по кліку.

3. Запуск сценарію при наведенні/торканні

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

4. Меню, що не згортається

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

з прокруткою;
переглядом матеріалів;
використання функцій;
і іншими операціями.

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

5. Проблеми із завантаженням сторінок

Тривале завантаження – погано. Сторінки повинні відкриватися максимально швидко. Показник безпосередньо залежить від розміру сторінки, її наповнення, «тяжкості» елементів. Важливо влаштовувати всі деталі, правильно розподілити контент по окремих вкладках, що дозволить знизити вагу наповнення.

Крім того, на швидкість відкриття чинять безпосередню дію:

картинки;
скрипти;
файли CSS.

Щоб зменшити вагу елементів, застосовуються спеціалізовані, профільні інструменти і сервіси.

6. Відсутність попереднього аналізу ЦА

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

Такі аналітичні дослідження потрібні, щоб зрозуміти:

які пристрої використовуються найчастіше;
як саме входять на веб-майданчик користувачі;
які дії виконуються;
які очікування є.

7. Відсутність тестування

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

При тестуванні:

перевіряється загальна функціональність;
виявляються помилки;
перевіряються основні маршрути відвідувачів;
і так далі.

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

Що дає адаптація сайту: 3 важливі моменти

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

1. Простота навігації

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

Серед інших складових простої навігації:

зрозуміла і зручна система пошуку;
кнопка «Додому»;
кнопка «Вгору» або «В початок сторінки»;
кнопка «Назад».

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

2. Зручність читання

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

3. Простота виконання цільових дій

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

перегляду матеріалів;
перегляду карток товарів;
додавання товарів в кошик;
оформлення замовлення;
підписки;
оплати;
і так далі.

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

Як перевіряється адаптація сайту

Ми вже відмічали вище, що створення адаптивки дозволяє підвищити навіть результати пошукової видачі основного сайту. Це пов’язано з введенням пошуковою системою Google принципу Mobile First. Суть його полягає в тому, що при ранжируванні обов’язково враховується наявність адаптованої версії.

Визначити, чи правильно виконана адаптація сайту можна навіть фактично вручну:

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

Зрозуміло, що це далеко не всі ознаки. Щоб перевірити, як виконана адаптація сайту, слід користуватися спеціалізованими сервісами, інструментами:

Google Mobile Friendly;
I love adaptive;
засоби від Bing;
і інші.

Користуватися подібними сервісами зазвичай просто. Досить зайти на них і ввести в рядок адресу веб-майданчика.

Підбиваючи підсумок

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

Адаптація сайту під різну роздільну здатність

Content

Адаптивне верстання. Що це таке і навіщо воно потрібне