Що таке адаптивна верстка, навіщо і де вона потрібна

Термін «адаптивна верстка» родом із 2010-2011. Тоді два веб-дизайнери – Аарон Густафсон та Ітан Маркотт – незалежно один від одного розпочали розробку революційної технології, завдяки якій стало зручно переглядати веб-сторінки на будь-яких пристроях. Це була адаптивність - універсальна HTML-розмітка, яка дає можливість користуватися однією і тією ж сторінкою на пристроях з різним розміром екрану без втрати функціональності та привабливості.

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

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

Адаптивність — це широкий підхід до веб-дизайну, який зосереджується на придатності різних інтерфейсів, а не обмежується десктопним форматом.

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

Онлайн-платформа з інструментами для маркетологів

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

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

Існує два основні підходи:

responsive web design (RWD) чи чуйний дизайн;
adaptive web design (AWD) чи адаптивний дизайн.

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

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

Приклад чуйного сайту

Чуйний веб-дизайн базується на трьох принципах:

гнучкий макет на основі сітки (flexible, grid-based layout);
гнучкі зображення (flexible images);
медіа-запити (CSS3 media queries).

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

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

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

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

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

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

320 px;
480 px;
760 px;
960 px;
1200 px;
1600 px.

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

Приклад адаптивного сайту

Приклад адаптивного сайту

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

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

Читайте також:

Чому адаптивна верстка настільки важлива

З кожним роком важливість адаптивності зростає: у січні 2024 року на користувачів мобільних пристроїв припало 59,01% всього інтернет-трафіку. При цьому різноманітність пристроїв зашкалює: інтернет-магазин Rozetka пропонує більше ніж 1500 моделей смартфонів від 216 брендів, 80% з яких дозволяють виходити в інтернет.

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

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

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

Крім візуальної привабливості, адаптивність впливає на швидкість завантаження, яка разом із зручністю для користувачів стала фактором ранжування ще в 2015 році. Це означає, що сайти з неоптимізованими зображеннями та зайвими HTTP-запитами знижуються у видачі Google та інших пошукових систем, а отже, стають «невидимими» для потенційної аудиторії та отримують менше органічного трафіку.

З 2018 року Google слідує правилу mobile-first indexing, індексуючи ресурси з пріоритетом мобільного контенту. Це означає, що краще ранжуються адаптивні сайти. Пошуковик стежить, щоб сервер відправляв той самий HTML-код всім пристроям, при цьому малюючи сайт по-різному залежно від розміру екрана.

Дублювання контенту — ще одна причина відмовитися від окремих сторінок для мобільних та робочих столів. Якщо ви створюєте два варіанти сторінки, наприклад site.com та m.site.com, то ускладнюєте пошуковим роботам сканування та індексування контенту, що може негативно вплинути на позиції у видачі. Адаптивна верстка дає можливість працювати з єдиною URL-адресою, наприклад, site.com, яка відображається для всіх користувачів незалежно від пристрою.

Також адаптивна верстка допомагає:

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

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

Повністю адаптивний конструктор сайтів

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

Де застосовується адаптивна верстка

Адаптивна верстка застосовується:

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

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

У статті зосередимося на адаптивності сайтів та електронних листів як найчастіших випадках застосування цієї технології.

Адаптивна верстка сайтів

Окремі мобільні версії сайтів йдуть у минуле: 4,6 мільйона користувачів смартфонів у всьому світі найчастіше споживають контент, адаптований під будь-які екрани.

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

Розглянемо ключові принципи адаптивної верстки сайтів.

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

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

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

Достатній розмір клікабельних елементів: згідно з посібником для веб-розробників WCAG, розмір іконок та кнопок не повинен бути меншим за 44 px у висоту та ширину. Також важливо додавати відстань між клікабельними елементами та розміщувати їх у зоні досяжності великого пальця.

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

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

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

Приклад неадаптивної верстки

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

Адаптивна верстка email шаблонів

У нас вже є докладна стаття про те, як верстати email листи, з урахуванням особливостей та прикладів коду. Рекомендуємо вивчити: з написання матеріалу нова ера адаптивності не настала.

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

Можливості створення таких листів покривають будь-які вимоги.

Приховувати окремі блоки на мобільних, щоб зменшити висоту листа чи уникнути горизонтального скролла.
Дотримуватися постійний дизайн та ієрархію елементів усередині шаблону.
Задавати максимальну ширину картинок у відсотках окремо для мобільних та десктопів.
Налаштувати вирівнювання елементів.
Встановлювати фіксовану ширину кнопки або встановити значення «На всю ширину».
Задавати вертикальний відступ між блоками за допомогою роздільника або покладатися на автоматичний відступ у 15px.

Для створення повністю адаптивного HTML-листа в конструкторі SendPulse навички програмування не потрібні. Все, що вам знадобиться – гарний смак та небагато часу.

Докладно про створення email шаблонів на конструкторі SendPulse читайте у базі знань.

Рекомендуємо також:

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

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

Підготовчий етап

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

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

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

Складання технічного завдання

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

Мета проекту та завдання користувачів, які він має вирішувати.
Короткий аналіз цільової аудиторії та конкурентного оточення.
Детальна інформація про проект
Кількість сторінок та загальна структура ресурсу.
Вимоги до кросбраузерності та дозволів екрану.
Побажання до дизайну та контенту.
УТП та оффери.
Графік: фото, відео, банери.
Плани щодо просування ресурсу.

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

Малювання макетів і верстка

Розробкою адаптивного дизайну займається дизайнер, верстає сайти фронтенд-розробник.

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

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

Можливості конструктора сайтів SendPulse

Блоковий редактор дає можливість гнучко редагувати будь-який блок та змінювати налаштування сайту в цілому. Ви можете підключити власний домен, налаштувати 404-сторінку, завантажити фавікон, закрити сайт для індексації, підключити Google Analytics, Facebook піксель та метатег Facebook.

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

Рекомендуємо також:

Готовий сайт можна посилити завдяки інтеграції з іншими інструментами екосистеми SendPulse. Наприклад, збирати ліди за допомогою розумних попапів, організувати підтримку в онлайн-чаті, переводити трафік у чат-боти в месенджерах, надсилати email, SMS та Viber розсилки цільової аудиторії. Також посилити маркетинг та продажі допоможуть автоворонки та CRM.

Використовуйте інструменти SendPulse для створення сайту та комплексного просування свого проекту!

Наскільки трудомісткішим робити адаптивну верстку на відміну від фіксованої?

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

І що потрібно від замовника? Якщо замовник надасть звичайний PSD шириною 1000 пікселів, чи можна з нього згорнути адаптивний? Чи обов'язково потрібно кілька макетів різної ширини?

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

За вимогами: сам макет+варіант(и) адаптивності та обов'язково по сітці.
За кожен не наданий елемент + 30% до ціни (щоб не повадно було)

PS Обосную: якщо немає макета адаптивності то по суті ви працюєте за дизайнера, якщо не по сітці то ви отримуєте гемор з припасуванням по пікселям

Подивіться на purecss.io - css фреймворк, мені особисто подобається адаптивні макети досить легко і зрозуміло робити і важить не багато.

Наскільки складніше та довше за часом займає адаптивна верстка на відміну від фіксованої?

Якщо використовувати фреймворки типу bootstrap то не має значення.

Адаптивний? Фіксований? Це вже в принципі не має значення. Роль грає тип сайту Ladding Page, сайт візитка, портал, інтернет магазин, .

І що потрібно від замовника? Якщо замовник надасть звичайний PSD шириною 1000 пікселів – чи можна з нього згорнути адаптивний? Чи обов'язково потрібно кілька макетів різної ширини?

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

Увійдіть, щоб написати відповідь

Як очистити HTML від усіх атрибутів?

Як закріпити div з iframe?

Як зробити відбиття інших html сторінок на одній без переходу?

Які знання в HTML потрібні копірайтеру? Чи потрібно У ДОБАВОК знати CSS?

Адаптивна верстка сайту на HTML: що це і чому вона така необхідна

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

Історія виникнення

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

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

Фронтенд-фахівці почали поступово відмовлятися від окремих мобільних версій на користь сайтів, які б самі могли підлаштовуватися під екрани користувачів. Спочатку з'явилися так звані гумові сторінки — при їх зменшенні картинки, текст та інші елементи також змінювалися в розмірах, але продовжували повністю відображатися. Однак цей метод мав свої вади — після зменшення нормально відображалися лише прості сайти з однією колонкою тексту, заголовком і парою картинок. Ті сторінки, які мали багато елементів, просто ставали важкочитаними.

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

До плюсів цього відносять:

Збереження цілісності зовнішнього вигляду. Завдяки готовим макетам розмір тексту залишиться зручним для читання, картинки відразу показуватимуться повністю, а елементи оформлення не почнуть зміщуватися.
Відносну простоту реалізації. Не потрібно розробляти з нуля окремий сайт — достатньо налаштувати декілька шаблонів для вже існуючого.
Допомога у розширенні аудиторії сайту. Наразі, за даними «Яндекса», близько 66% користувачів виходять в інтернет з мобільних пристроїв. Сторінки, з якими незручно взаємодіяти, просто не будуть цікаві. Однак, якщо ваш сайт отримає адаптивну верстку, велика ймовірність, що на нього прийдуть нові відвідувачі.
Пріоритет у пошуковій видачі. Здатність адаптуватися під різні екрани - важливий параметр сайту, на який звертають увагу пошукові роботи "Яндекса" та Google. Якщо адаптивна верстка виконана якісно, вища ймовірність того, що ресурс отримає хорошу позицію на пошуку.

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

Як зробити адаптивну верстку

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

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

Для мобільних версій зазвичай використовуються шаблони, ширина яких розрахована на діапазон від 375 до 960 пікселів.
Версії для планшета знадобиться шаблон на розмір від 960 до 1200 пікселів.
Десктопна версія найбільша - її ширина становить від 1200 до 1920 пікселів. Однак розробники часто надають перевагу шаблону на 1600 пікселів.

Значення в 375, 960 та 1200 пікселів ще називають брейкпоінтами, оскільки вони позначають чіткі межі можливих розмірів версій сайту. Іншими словами, мобільна версія не може перевищувати 960 пікселів, а десктопна завжди більша або дорівнює 1200 пікселів завширшки.Також досить часто використовуються шаблони на 992, 768, 576 та 376 пікселів.

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

Чи не вдається самостійно впровадити адаптивну верстку? Опишіть ситуацію і ми обов'язково зв'яжемося з Вами

Сполучення успішно відправлено!

Ми зв'яжемося з вами найближчим часом!

Кількість макетів залежатиме від розміру сайту — для невеликого лендингу достатньо двох (один для показу на ПК, а інший — на смартфонах), а великому багатосторінковому ресурсу потрібно від трьох і більше. Під час роботи з макетами для адаптивної верстки дотримуйтесь наступних правил:

Усі версії повинні мати дизайн оформлення. Це стосується таких елементів як колір тла, шрифт текстів, зображення логотипів. Якщо у верстці сайту для мобільного пристрою вони відрізнятимуться від десктопних, користувач може вирішити, що потрапив на сторінку шахраїв, і поспішить піти.
Функціонал версій має збігатися. Важливо простежити, щоб при відображенні сторінки на мобільному пристрої збереглися всі необхідні фільтри, кнопки та форми замовлення та способи показу контенту. Інакше користувачі не затримаються надовго.
Зміст версій не може відрізнятись. Відкриваючи ту саму сторінку з комп'ютера та телефону, користувач повинен бачити однакову інформацію. Якщо дані не співпадатимуть, це знизить довіру до сайту.
Ієрархію елементів слід зберегти.Іншими словами, якщо в десктопній версії спочатку йде заголовок, потім текст, а після нього форма замовлення, в мобільній має бути так само.
Висота та ширина елементів, на які можна натискати, у верстці для мобільного пристрою мають бути більше 44 пікселів. В іншому випадку відвідувач сайту просто не зможе потрапити пальцем по кнопці або рядку меню.
Для мобільної верстки не потрібно багато колонок. Зазвичай достатньо від однієї до чотирьох. У десктопних версіях їх близько 12, а на планшетах – шість.
Важливо враховувати особливості розташування контенту. На десктопах окремі інформаційні блоки (наприклад, картки з товарами) розміщуються горизонтально, кілька рядів, але в смартфонах — вертикально, в одну колонку. Так їх краще видно на невеликому екрані і не виникає незручностей із прокручуванням.
Не варто забувати про підказки, що спливають, які спрощують навігацію по сайту. У мобільній версії важливо вибрати такий значок для їхнього виклику, на який легко натиснути пальцем.

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

Зображення. Щоб вони помістилися на екрані мобільного пристрою, знадобиться кадрування або пропорційне зменшення. Перший спосіб варто використовувати тільки в тому випадку, якщо при обрізанні не втрачаються важливі елементи картинки. Він особливо нагоді, коли велике місце відведено написи - через зменшення без обрізки вона може стати занадто дрібною.А за відсутності тексту на зображенні краще використовувати пропорційне зменшення. Тоді картинка на мобільному пристрої буде видно повністю і ніякий важливий елемент не постраждає.
Шрифт. Їхній розмір вимірюється кількістю пікселів у букві по вертикалі і часто позначається терміном «кігель». На десктопах зазвичай використовуються шрифти розміром від 16 до 18 пікселів для основного тексту, і 14-15 для підписів до картинок. Однак з маленьких екранів текст 14-15 кігеля важко читати, тому при підготовці версій, призначених для смартфонів, краще використовувати більші шрифти.
Заголовки. Створення макета часто починається до завершення всіх текстів, які будуть розміщені на сайті. Через це дизайнер може залишити дуже мало вільного місця під заголовок, і пізніше верстку доведеться коригувати. Щоб такі заходи не були потрібні, зробіть відступ досить великим — тоді поміститься будь-який текст.
Довжиною рядків. Мобільні пристрої мають вузькі, витягнуті вгору екрани, тому рядки тексту розташовуються на них на всю ширину, не залишаючи з боків вільного простору. Однак з десктопними версіями так не вийде - рядки, розтягнуті від одного кордону екрана до іншого, буде важко читати. Їхня оптимальна довжина для десктопів - 60-70 символів з пробілами, а для мобільних пристроїв - 40-60.

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

Скільки часу займає адаптивна верстка