1. «30% користувачів мобільних телефонів використовують смартфони. Якщо ви заробляєте тільки в інтернеті,...

«30% користувачів мобільних телефонів використовують смартфони. Якщо ви заробляєте тільки в інтернеті, ваш бізнес в біді. »

Mary Meeker's 2014 Internet Trends Report

Як підготувати свій сайт до перегляду на мобільних пристроях? Який підхід вибрати? У чому переваги і недоліки адаптивного і Респонс дизайну?

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

Спробуємо розібратися в цьому питанні, і поділитися накопиченим AGENTE ™ досвідом. Відразу попередимо - універсального рішення не існує, скільки б про це не говорили на всіх можливих конференціях і воркшопах.

Термінологія і відмінності підходів.

Responsive Web Design (RWD) - чуйний веб-дизайн, Adaptive Web Design (ADW) - адаптивний веб-дизайн. Кожен з термінів позначає особливий підхід до створення вашого веб-сайту і використовується для опису процесу створення веб-сайту, який буде зручно переглядати з різних мобільних пристроїв. У цій статті ми розповімо вам про різницю між адаптивним і Респонс дизайном на практиці, не заглиблюючись в технічну термінологію.

Весь інтернет-маркетинг за 19 тижнів!

Cossa рекомендує: онлайн-курс по інтернет-маркетингу від Ingate - digital-агентства з 17-річним досвідом.

• 17 навчальних блоків з ключових питань інтернет-маркетингу
• підтримка менторів
• диплом
• Стажування в топових агентствах Росії
• Допомога в працевлаштуванні

Реклама

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

По суті, ADW (adaptive web design) і RWD (responsive web design) вирішують одну і ту ж задачу, але різними способами.

При созданііResponsive (чуйного) веб-сайтаіспользуется гнучка структура сторінки - «гумовий макет» (fluid grid), пропорції і розміри елементів якої задаються у відсотках. Крім «гумовою» структури, використовуються гнучкі зображення (fluid images), «гумові» текстові блоки. При зменшенні ширини такої сторінки весь контент плавно стиснеться, структурні елементи зменшаться відносно один одного. Так, наприклад, якщо ваш веб-сайт мав 3-х колончатую структуру, то на більш вузькому екрані він буде мати дві або одну колонку контенту.

Для створення responsive версії веб-сайту використовуються медіа запити (media queries) - блоки коду із зазначенням параметрів пристроїв виведення. Медіа запити дозволяють застосовувати певні правила (стилі) для виведення різних тематичних блоків в різному порядку і пропорціях в залежності від ширини екрану і можливостей пристрою, на якому відбувається перегляд веб-сайту.

ось відмінний анімований приклад «Гумового» (Респонс) сайту.

Щоб ще краще зрозуміти, як працюють Респонс сайти, ви можете відвідати www.bostonglobe.com або www.disney.com і, поступово зменшуючи розмір вікна браузера, стежити, як зміст (картинки і текст) буде відповідати змінам розміру вікна, або відвідати ось цей сайт www.liquidapsive.com , В меню якого можна вибирати різні варіанти відображення сторінки.

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

Наприклад, при створенні сайту проектується дизайн сторінок кількох типових розмірів по ширині: 320 px для смартфонів, 760 px, 1024 px для планшетів і 1680 px для десктоп браузерів. Коли користувач заходить на адаптивний сайт, сервер визначає, за допомогою якого пристрою здійснюється перегляд, і показує користувачеві потрібний контент і шаблон.

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

Так, наприклад, визначивши, що користувач зайшов на ваш сайт за допомогою iPad'a, ми можемо скористатися наявними можливостями тач-скрін навігації (свайпи), яка недоступна в браузерної версії, або, навпаки, відключати або замінювати зайві блоки з flash банерами або flash елементами, які не відображаються на iOS пристроях, а так само задіяти інші характерні можливості пристроїв, з яких відбувається перегляд вашого веб-сайту.

Крім відмінностей в інтерфейсі і взаємодії користувача з сайтом, адаптивні веб-сайти мають великий швидкістю завантаження, так як після визначення вашого пристрою сервер віддає оптимізований контент (картинки та інші файли потрібного розміру) конкретно для вашого смартфона або планшета. У Респонс версії використовується один і той же HTML шаблон, і мобільний користувач завантажує той же контент, що і для браузерної десктоп версії, цілком.

Щоб краще зрозуміти і побачити адаптивний веб сайт в дії, відвідайте з вашого стаціонарного комп'ютера і смартфона. Інший відмінний приклад - www.colly.com . Потягнувши за кут вікна браузера, можна відстежити, як при досягненні певної ширини вікна шаблон сайту почне змінюватися.

Який же підхід вибрати?

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

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

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

На жаль, універсального рішення не існує, і кожен випадок створення мобільного сайту потрібно розглядати окремо. Для простоти прийняття рішення пропонуємо вам невелику порівняльну таблицю використання ADW (adaptive web design) і RWD (responsive web design).

Автор: agente

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

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

Андрій Терьохін - CEO / Директор з розвитку AGENTE ™.