Чуйний дизайн проти адаптивного: як вибрати між двома?
Адаптивний дизайн все більше просувається як золотий стандарт для створення нового спектру веб-додатків. Однак через ускладнення, пов’язані з використанням того самого коду в кожній версії веб-сайту, сьогодні бренди звертаються до альтернативи технології RWD, відомої як адаптивна доставка або дизайн. Як би ви вибрали між цими двома? Ця стаття про те саме.
Адаптивний веб-дизайн – це вже не новина. Братство веб-дизайнерів, технічне співтовариство та навіть пересічний веб-маникант тепер знають, що адаптивний дизайн — це шлях вперед. Смартфон, пристрій, який змінив ігри, дійсно змусив веб-дизайнерів створювати веб-сайти, які могли б автоматично реагувати та адаптуватися до будь-якого пристрою з будь-яким розміром екрана, і таким чином народився адаптивний веб-дизайн. За допомогою техніки RWD макет сайту можна оптимізувати відповідно до розміру екрана пристрою, на якому він переглядається. Тоді звідки беруться розмови про адаптивний дизайн?
Необізнаному обидва модні слова можуть здатися взаємозамінними термінами для однієї техніки. Однак, оскільки все більше і більше трафіку надходить із мобільних пристроїв, для видавців стає дедалі важливішим знати відмінності між ними та вибирати найкраще для свого сайту. Крім того, опитування Millenial Media та comScore, проведене в Сполучених Штатах, показує, що зараз 56% онлайн-контенту споживається через смартфони та планшети, а решта 44% – через настільні комп’ютери. І зсув продовжує прискорюватися. Отже, це раз і назавжди вирішує важливість сайту, який добре підходить для мобільної аудиторії. Тепер повертаючись до питання: як вибрати між двома?
Яка різниця?
Найпростіший спосіб вибрати один із двох варіантів – це зрозуміти відмінності та переваги, які один пропонує над іншим.
У той час як адаптивний дизайн — це підхід на стороні клієнта, коли вся сторінка доставляється клієнту (браузер пристрою), адаптивний дизайн, як правило, на стороні сервера, де сервер спочатку виявляє атрибути пристрою, як правило, за допомогою плагінів на стороні сервера або спеціального користувача виявлення агента, а потім завантажує версію сайту, оптимізовану для його розмірів і власних функцій. Таким чином, адаптивна доставка використовує попередньо визначені макети, створені для різних розмірів екрана. Коли виявляється певний розмір екрана, активується відповідний макет і узгоджується з таблицею стилів. В адаптивному дизайні макети змінюються на основі точок зупину.
Існує також інша альтернатива, адаптивний підхід на стороні клієнта, де використовується великий JavaScript для оснащення веб-сайтів розширеними функціями та налаштуваннями. Трохи схожий на адаптивний веб-дизайн, цей тип доставки працює на стороні клієнта або в браузері користувача, який виявляє різні пристрої та завантажує відповідний шаблон для користувача. Перевагою тут є те, що для використання на всіх пристроях потрібен лише один набір HTML і JavaScript, тому впровадження змін стає набагато легшим.
Чуйний проти адаптивного: який вибрати?
Одна з великих переваг адаптивного дизайну, яка миттєво привела його до слави, полягала в тому, що єдина кодова база добре служила як для настільних, так і для мобільних користувачів. Це полегшило життя розробника, оскільки майже позбулося кошмарного досвіду, пов’язаного з доглядом за кількома версіями коду для різних типів пристроїв. Проте однаковий код для обох пристроїв означає, що веб-сайт, який запускається на смартфоні, матиме той самий розмір і складність, що й версія для настільного комп’ютера, що є основною причиною того, що адаптивні веб-сайти поводяться дивно та роздуто на мобільних пристроях.
З іншого боку, використовуючи адаптивний підхід, сервер має свободу вибирати, як оптимально відтворювати сторінки, видаляючи або додаючи функції на льоту, на основі виявленого пристрою та інформації користувача.
Переваги можна підсумувати так:
- Розробникам не потрібно було б відтворювати веб-сайт з нуля, як це довелося б робити при створенні адаптивного сайту. Більшість веб-сайтів з часом стають надто складними, коли одна функція додається поверх іншої, а витрачати всі зусилля не є життєздатним варіантом. Етап проектування та тестування особливо складний, оскільки важко налаштувати користувацький досвід для кожного пристрою чи контексту.
- Адаптивні веб-сайти швидші, а іноді й зручніші для користувачів. Причина досить проста. Оскільки адаптивна доставка працює шляхом передачі лише специфічних ресурсів пристрою, зображення та мультимедійний вміст можна оптимізувати на льоту відповідно до роздільної здатності та розміру дисплея.
Адаптація на стороні сервера пропонує окремі шаблони для кожного пристрою, забезпечуючи більший рівень налаштування разом із швидшим завантаженням веб-сторінок. Крім того, він сумісний з різними плагінами на стороні сервера, які доступні для популярних систем керування вмістом і систем електронної комерції, таких як Magento. Однак цей підхід вимагає значних змін у внутрішніх системах, і якщо у вас обмежений бюджет, це може виявитися дещо болючим. Вам потрібно буде керувати кількома шаблонами, що відображатиметься як збільшення вартості обслуговування. Проблеми з продуктивністю також можуть виникнути, коли сервери перебувають під великим навантаженням.
Нижня лінія
Веб-сайти з великою кількістю вмісту, де немає великої різниці в намірах користувачів комп’ютерів і мобільних користувачів, як правило, вибирають адаптивний дизайн. Однак, якщо ви розробляєте веб-сайт, де наміри мобільного користувача значно відрізняються від вашої цільової аудиторії настільного комп’ютера, адаптивний дизайн буде кращим вибором. Прикладом є веб-сайти електронної комерції.
Крім того, якщо веб-майстер обирає адаптивний дизайн, він або вона може додатково оптимізувати взаємодію з користувачем, скориставшись додатковими функціями, які пропонують ці пристрої, наприклад, місцезнаходження. Саме тому 82 відсотки 100 найкращих глобальних сайтів Alexa використовують певне виявлення на стороні сервера для надання вмісту.
Для більшості організацій добре працює адаптивний дизайн у поєднанні з адаптивною доставкою. Частина сайту, у якій багато вмісту, використовує адаптивний підхід, що дозволяє читачам споживати вміст із задоволенням незалежно від того, на якому пристрої вони користуються. З іншого боку, високоцільні частини сайту добре працюють завдяки адаптивній доставці. Головне – знайти баланс між обслуговуванням користувачів і досягненням бізнес-цілей.
Веб-дизайн — одна з найпопулярніших навичок на ринку зараз. Відповідно до даних про зайнятість, наданих Бюро статистики праці, перспективи роботи для веб-розробників становлять 20%, що є вищим за середній показник. У звіті USNews про найкращі вакансії за 2014 рік професії веб-дизайну входять до трійки найкращих кар’єр у сфері технологій. Таким чином, для початківця веб-дизайнера знання нюансів дизайну, як описано вище, може бути дуже плідним.