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

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

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

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

Що таке адаптивний сайт

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

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

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

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

Верстка кодів HTML та CSS визначає різні версії сайту та правила його адаптації до різних пристроїв.

Заповнити бриф

Чому адаптивність сайту життєво важлива

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

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

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

Основні методи адаптації

Сайти можна адаптувати під телефони та планшети кількома способами.

Різні версії для комп’ютерів та смартфонів

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

«Гумова» версія сайту

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

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

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

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

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

Додатки для мобільних пристроїв

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

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

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

Розробка мобільного додатка досить трудомісткий і фінансово затратний процес. Веб-сайти працюють на багатьох платформах, а мобільні додатки доведеться створювати окремо під кожну платформу (iOS, Android, Windows Phone).
Звичайно, існують спеціальні інструменти, які спрощують створення додатків і дозволяють перенести його відразу на всі основні платформи, наприклад, Phonegap, Ionic, jQuery Mobile. Але в будь-якому випадку за розробкою та оновленням програми доведеться звертатися до фахівців.

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

Окремий мобільний сайт

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

За цим посиланням відкривається окремий сайт з іншою URL-адресою, наприклад, m.site.com. Також зазвичай на основному сайті налаштовується автоматична переадресація всіх мобільних користувачів на мобільний сайт.

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

Що вибрати: додаток, адаптивний сайт або мобільну версію

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

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

Основи адаптивного дизайну

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

Гнучкість елементів. Шрифти, зображення та інші елементи сайту адаптуються під роздільну здатність та розмір екрана користувача. Вони можуть бути меншими або більшими, залежно від бачення дизайнера.
Дотримання послідовності елементів. Елементи сайту можуть розташовуватися по горизонталі в кількох колонках на робочому столі, але на вузькому екрані мобільних пристроїв вони зміщуються вниз і будуються в одну-дві колонки. Це означає, що HTML-розмітка повинна зберігати їхню ієрархію.
Різні версії сайту використовують один і той самий стиль дизайну. Це вимагає використання однакових кольорів, шрифтів, форм, логотипів та інших елементів як мобільних, так і десктопних стилів CSS. Це очевидно ідентичні копії сайту. Хоча мобільний дизайн часто спрощується в процесі адаптації, він повинен залишатися пізнаваним. Інакше деякі користувачі подумають, що сайт не працює правильно і підуть.
Єдиний зміст та функціонал. Все, що ви бачите на сайті з комп’ютера, має бути доступним і на телефоні. Якщо сторінка на мобільній версії занадто велика, її можна розбити на частини або сховати частину вмісту під кнопками, такими як «ще», «докладніше» і т.д. Однак небажано скорочувати контент та можливості сайту у процесі адаптації.
Простота використання. Дуже важливо, щоб у HTML-коді, кнопки та інші клікабельні елементи адаптивного сайту були досить великими. У десктопній версії немає величезних банерів, що займають половину екрана, і в мобільній версії немає маленьких кнопочок, по яких важко клікнути з першого разу.
Швидкість завантаження веб-сторінки. Щоб не дратувати користувачів та зменшити відсоток відмов, бажано, щоб вона не перевищувала 3 секунди. У процесі верстки мобільної версії сайту може знадобитися не тільки модифікація, а й оптимізація, враховуючи, що мобільні пристрої все ще в середньому слабші в продуктивності, ніж ноутбуки та стаціонарні комп’ютери.

Ще донедавна адаптивні веб-сайти зазвичай будувалися за принципом “desktop first”. Спочатку створювалася версія для ноутбуків та стаціонарних комп’ютерів. Потім код HTML та CSS адаптувався для смартфонів та планшетів. На сьогодні Google використовує принцип “mobile first”, що означає, що мобільна версія сайту є пріоритетною в оцінці та ранжуванні ресурсу в пошуковій видачі.

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

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

Чуйний формат зображення

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

Флексбокси та сітки

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

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

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

Флексбокс, також відомий як “гнучкий контейнер”, – це модуль CSS, який дозволяє з’єднувати елементи один з одним, змінювати розміри, порядок, напрямок, відступи та інші параметри елементів сайту, а також їхнє взаємне розташування на екрані. Він схожий на коробку з вмістом. Можна змінити, як вміст кожної «коробки», так і взаємодію між ними.

При цьому коробки “розумні”, а не прості. Флексбокс може автоматично заповнювати весь простір усередині кожної коробки вмістом, змінюючи розмір елементів та відстань між ними. Таким чином, багато робиться автоматично, і вам не потрібно доводити все до останнього пікселя для кожного можливого випадку.

Контрольні точки та поточність

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

Брейкпоінти, також відомі як контрольні точки, є набором екранних дозволів, в яких відбувається зміна адаптивного дизайну веб-сайту. Наприклад, брейкпоінт у CSS-коді – ширина екрану 768 пікселів, що є межею для ноутбуків та моніторів. В результаті мобільна версія сайту буде доступна для екранів з меншою роздільною здатністю. Якщо ви бажаєте більше, десктопна. Найпопулярніші дозволи для брейкпоінтів – 1920 пікселів, 1280 пікселів, 768 пікселів та 480 пікселів.

Адаптивне меню та шапка

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

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

Адаптивне тло

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

Є кілька способів оцінити адаптивність сайту:

Зробити реальні тести на пристроях з різною роздільною здатністю екрану – найпростіший, але й найскладніший метод. Однак для цього необхідні як мінімум ноутбук, великий монітор, смартфон та планшет, а найкраще кілька.
Використовувати інструменти розробника браузера ще один спосіб. Більшість популярних браузерів, таких як Microsoft Edge, Google Chrome та Mozilla Firefox, мають цю функцію. Коли ви активуєте режим розробника, екран поділяється на дві частини: одна відображає HTML-код сторінки, а інша – сам сайт. З’являється панель, яка дозволяє перемикатися між різними віртуальними пристроями, які мають різні роздільні здатності та розміри екрана, а також спостерігати, як різні CSS-стилі відображаються на них.
Спеціалізовані сервіси для оцінки адаптивності сайтів.

Підсумок

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

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

Оскільки кількість користувачів, які відвідують Інтернет із мобільних пристроїв, станом на сьогодні становитиь близько 90% і продовжує зростати, дуже важливо адаптувати стилі та структури HTML для мобільних пристроїв.

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