Ви запитали себе: «Що таке веб-дизайн?» Чуйний веб-дизайн - це підхід, за допомогою якого дизайнер створює веб-сторінку, яка «реагує» або змінює розміри в залежності від типу пристрою. Це може бути величезний монітор настільного комп'ютера, ноутбук або пристрої з невеликими екранами, такими як смартфони та планшети.
Чуйний веб-дизайн став важливим інструментом для всіх, хто має цифрову присутність. З ростом смартфонів, планшетів та інших мобільних обчислювальних пристроїв більше людей використовують менші екрани для перегляду веб-сторінок.
$config[code] not foundЦі веб-сайти також повинні враховувати індекс мобільних телефонів, оголошений Google у квітні 2018 року. Оскільки більша кількість малих підприємств збільшує свою мобільну присутність, їх веб-сайт, електронна комерція, сторінка Google Business, сторінки соціальних медіа та інші активи повинні бути легко доступні для всіх пристроїв.
Що таке чуйний веб-дизайн?
Метою адаптивного дизайну є наявність одного сайту, але з різними елементами, які по-різному реагують на пристрої різних розмірів.
Давайте візьмемо традиційний "фіксований" веб-сайт. Наприклад, при перегляді на настільному комп'ютері веб-сайт може відображати три стовпці. Але коли ви переглядаєте ту саму макет на меншому планшеті, це може змусити вас прокручуватись горизонтально, що не подобається користувачам. Або елементи можуть бути приховані або перекручені. Вплив ускладнюється також тим фактом, що багато планшетів можна переглядати або в портретній орієнтації, або повертатися вбік для пейзажного вигляду.
На крихітному екрані смартфона, веб-сайти можуть бути ще більш складними, щоб побачити. Великі зображення можуть "зламати" макет. Сайти можуть завантажуватися на смартфони повільно, якщо вони важкі для графіки.
Однак, якщо сайт використовує адаптивний дизайн, версія планшета може автоматично налаштовуватися для відображення лише двох стовпців. Таким чином, вміст легко читається і зручно орієнтуватися. На смартфоні вміст може відображатися у вигляді однієї колонки, можливо, складеної вертикально. Або, можливо, користувач має можливість перетягувати, щоб переглянути інші стовпці. Зображення змінюватимуться, а не спотворювати макет або обрізатися.
Справа в тому, що завдяки адаптивному дизайну веб-сайт автоматично налаштовується на основі пристрою, в якому він бачить його.
Як працює адаптивний веб-дизайн?
Реагуючі сайти використовують текучі сітки.Всі елементи сторінки мають розмір за пропорцією, а не за пікселями. Отже, якщо у вас є три стовпці, ви не могли б сказати, наскільки широким має бути кожен, а наскільки вони повинні бути широкими по відношенню до інших стовпців. Колонка 1 повинна займати половину сторінки, стовпець 2 - 30%, а стовпець 3 - 20%.
ЗМІ, такі як зображення, також змінюються відносно. Таким чином, зображення може залишатися в межах своєї колонки або відносного елемента дизайну.
Пов'язані питання
Mouse v. Touch: Проектування для мобільних пристроїв також викликає проблему миші проти дотику. На настільних комп'ютерах користувач зазвичай має мишу для навігації та вибору елементів. На смартфоні або планшеті користувач переважно використовує пальці і торкається екрана. Що може здатися легким для вибору за допомогою миші, може бути важко вибрати пальцем на маленькому місці на екрані. Веб-дизайнер повинен враховувати «дотик».
Графіка і швидкість завантаження: Крім того, існує проблема графіки, оголошень і швидкості завантаження. На мобільних пристроях може бути доцільно відображати менше графіки, ніж для перегляду на робочому столі, щоб веб-сайт не завантажувався на смартфоні назавжди. Можливо, для більшої кількості оголошень потрібно розмістити більші розміри оголошень.
Програми та "мобільні версії": У минулому ви, мабуть, думали про створення програми для свого веб-сайту - скажімо, додаток для iPad або додаток для Android. Або ж ви мали б мобільну версію для BlackBerry.
Але сьогодні, з такою кількістю різних пристроїв, все складніше створювати програми та різні версії для кожного пристрою та операційної платформи.
Чому малим підприємствам потрібно перейти на чуйний веб-дизайн
Більше людей використовують мобільні пристрої. Нещодавнє дослідження Pew 77% американців тепер володіють смартфонами у 2018 році, що у порівнянні з 35% у першому дослідженні власності смартфонів Pew Research Center, проведеному в 2011 році.
Перевірте трафік, і ви просто можете бути шоковані тим, як багато відвідувачів потрапляють на ваш сайт через мобільні пристрої. (У Google Analytics виберіть "Аудиторія" з лівого боку, потім "Мобільний", щоб дізнатися, яка частка трафіку йде від мобільних пристроїв. Можна навіть деталізувати, щоб дізнатися, які пристрої надсилають трафік.)
Адаптивні шаблони дизайну зараз скрізь, для покупки. Якщо, наприклад, у вас є сайт WordPress, ви можете відвідати авторитетну галерею шаблонів, таку як ThemeForest, і шукати «відповідні теми WordPress». Ваш веб-розробник може налаштувати його для вашого логотипу та бренду.
Примітка редактора: тут, у тенденціях малого бізнесу, ми працюємо над новим адаптивним дизайном. Чи не так?
Фото через Shutterstock
Більше в: Зміст маркетингу, Що таке 95 Коментарі ▼
