Please enable JavaScript.
Coggle requires JavaScript to display documents.
«Техніки адаптивної верстки» - Coggle Diagram
«Техніки адаптивної верстки»
Поняття адаптивної верстки
Адаптивне верстання – підхід, що припускає зміну дизайну залежно від поведінки користувача, розміру екрана, платформи і орієнтації девайса. Іншими словами, сторінка повинна автоматично підлаштовуватися під дозвіл, змінювати розмір картинок і так далі.
Ознаки адаптивної верстки
Структура макета сторінки, що налаштовується
Медіазапити CSS3
JavaScript
Опціональне відображення контенту
Типи адаптивних макетів (види версток)
Панелі
Спосіб, що прийшов з мобільних додатків, де додаткове меню може з'являтися при горизонтальному або вертикальному тапе. Головний недолік - неочевидність дій для користувача: дуже незвично бачити мобільну навігацію на веб-сайту. Але думаю, з часом спосіб стане досить популярним
Гумовий
Простий в реалізації і очевидний для користувача тип подання контенту. Основні блоки стискаються до ширини екрану мобільного пристрою, де таке неможливо - перебудовуються в одну довгу стрічку. Такий макет дуже просто реалізувати за допомогою адаптивних CSS-фреймворків, наприклад Twitter
Перенесення блоків
Очевидний спосіб для многоколоночной сайту: при зменшенні ширини екрану додаткові блоки (сайдбарі) переносяться в нижню частину макета.
Перемикання макетів
Цей спосіб найбільш зручний при читанні сайту з різних пристроїв: під кожний дозвіл екрана розробляється окремий макет. Спосіб трудомісткий, тому менш популярний, ніж попередні два.
Сервіси для перевірки адаптивності верстки
отладчик
W3C Валидатор.
IE Tester.
Website Resolution Test
Responsive Design Testing across Devices
Приклади помилок адаптивності верстки сайтів
Нагромадження шрифтів – намагаючись прикрасити сайт та задовільнити естетичні вимоги користувачів, часто малодосвідчені дизайнери утворюють цілі шрифтові колекції. На прикладі в межах 1 екрану зосереджено 4 різних шрифти.
Не використовуйте мерехтливі тексти чи банери, це дуже часто дратує відвідувачів.
