Маркетолог • SMM • WEB-розробник

Створюємо сайт майбутнього: Responsive Web-design

На сьогоднішній день найбільш актуальним питанням є застосування responsive / adaptive web-design при створенні сайту. Щораз більша кількість найрізноманітніших розмірів екрану з'являються на ринку мобільних пристроїв. При цьому важливо враховувати особливості відповідної користувацької взаємодії. Всі ці завдання і вирішує Responsive Web design: він дозволяє красиво відображати зміст веб-ресурсу на екранах будь-яких мобільних пристроїв, у тому числі і гаджетів майбутнього покоління.

Якщо ви ще дієте «по старинці» - створюєте 2 сайти (один спеціально для гаджетів і ще один для для більш великих екранів - стаціонарного ПК, ноутбука або ТБ), то вам просто необхідно скористатися responsive web-design для вашого сайту, поки це не зробили всі ваші конкуренти! Також, ви можете створити свій сайт самостійно.

  • Для початку трохи історії

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

Із застосуванням смартфонів ситуація стала ще гіршою. iPhone від компанії Apple став першим мобільним пристроєм, який забезпечив по-справжньому зручний перегляд веб-сторінок, і багато інших компаній наслідували його приклад. Сьогодні все більше людей воліють серфінг по інтернету здійснювати з пристроїв, що мають невеликі розміри екрану. У той же час багато людей як і раніше користуються великими моніторами, планшетами і навіть ТБ. Таким чином, наявна в даний час різниця між переглядом веб-сторінок на пристроях з найменшими і найбільшими екранами велика як ніколи. Користувачам мобільних пристроїв, що люблять займатися серфінгом по всесвітній мережі, набридає постійно збільшувати і зменшувати області сторінок, щоб їх було зручно переглядати на маленькому дисплеї, а потім прокручувати сторінки вліво і вправо, щоб прочитати весь текст, що не вміщається в область перегляду екрану, і намагатися при цьому випадково не зачепити непотрібне посилання. Всі ці користувальницькі проблеми зникають, якщо ваш сайт створений або поліпшений за допомогою responsive web-design.

  • Responsive web-design: що це?

Засновником даного підходу веб-дизайну є Ітан Маркотт (Ethan Marcotte). У своїй конструктивній статті на сайті A List Apart він об'єднав три існуючі методики (макет гнучкою сітки, гнучкі зображення і медіазапити) в єдиний підхід і назвав його чутливий веб-дизайн. Цей термін часто має на увазі те ж саме, що і такі поняття, як «гумовий» дизайн, еластичний макет, «гумовий» макет, дизайн з непостійними розмірами, адаптивний макет, дизайн з підтримкою різних пристроїв і гнучкий дизайн. Ітан Маркотт зробив величезний вплив на загальноприйнятий підхід до створення веб-сайту.

Чутливий дизайн (Responsive web design або RWD) - це створення дизайну, при якому веб-сайт розробляється з розрахунком на те, щоб забезпечити найбільш просте його використання: зручний перегляд сайту з мінімумом ресайзів і зайвих прокручувань - на найбільш широкому спектрі пристроїв.

Responsive web design володіє кількома особливостями: при його верстці використовуються виключно HTML5 та CSS3 - без підключення JavaScript для визначення «чутливості» елементів дизайну.

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

  • Основні принципи Responsive web design

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

  1. розташування всіх елементів в рамках модульної сітки;
  2. всі елементи верстки та медіа-файли (в тому числі зображення) є «гумовими» (flexible) - їх розміри залежать від розміру екрана;
  3. робота здійснюється з Media queries - модулем CSS3, що дозволяє задавати різні стилі (або навіть таблиці стилів) залежно від дозволу екрану, його розмірів та інших характеристик.

Responsive web design створюється з використанням адаптивної розмітки (не плутати з адаптивним дизайном). Адаптивна розмітка (adaptive layout) полягає в тому, що на сайті створюється кілька стилів, варіантів розташування елементів на модульній сітці і кілька варіантів стилів елементів дизайну. Ці варіанти змінюють один одного при зміні розмірів екрану, при цьому утворюються якісь точки переходу між різними видами розмітки / стилів сайту.

При цьому чуйний дизайн не має на увазі роботи з об'єктною моделлю елементів на сторінці та зміну / вкладеності блоків і об'єктів при зміні виду розмітки.

Для того, щоб більш наочно зрозуміти суть роботи сайтів, створених за допомогою RWD, можна відвідати bostonglobe.com і, поступово зменшуючи розмір вікна браузера, стежити, як зміст (картинки та текст) відповідатиме змін розміру вікна. Або відвідати сайт liquidapsive.com в меню якого можна вибирати різні варіанти відображення сторінки: adaptive / liquid / responsive / static (адаптивний / гумовий / чуйний / статичний). Або ж зробити те саме на цьому сайті :-)

  • Поняття adaptive / liquid (адаптивний / гумовий) web design

Адаптивний дизайн (Adaptive web design або AWD) - це дизайн, заснований на операціях з різними макетами сайту або його розміткою для забезпечення найкращого його використання на певних, заданих заздалегідь, пристроях і дозволах екрану.

Особливостями даного підходу при створенні веб-проекту є:

  1. Елементи сайту можуть ховатися, замінюватися іншими;
  2. Можуть змінюватися поведінка і функції окремо взятих елементів веб-сайту;
  3. Потрібно повсюдне використання JavaScript для управління поведінкою і функціями об'єктів на сайті;
  4. Необхідні роботи з об'єктною моделлю елементів на сторінці, має на увазі зміну їх ієрархії / вкладеності на різних пристроях.

При цьому аdaptive web design не є обов'язковим забезпечення однакового виду сайту і його функціоналу в різних браузерах. Можливе використання нових технологій, які не підтримуються старими версіями програм - тому що дизайн, як було сказано вище, адаптується під певні типи пристроїв.

Гумовий дизайн (Liquid web design) - з'явився досить давно, довгий час будучи сусідами зі статичним (Static web design), фіксованим дизайном. Основна його особливість у тому, що ширина колонок задається в % -тах, а не в стандартних пікселях. Тому "гумовий" дизайн при будь-якому дозволі монітора розтягується на всю його ширину. Зробити такий дизайн, особливо при використанні блочної верстки дещо складніше, ніж фіксований, зате користувач не буде бачити порожніх полів на сторінці. Примітно, що спочатку гумовий дизайн досить широко використовувався в Укронеті, в той час як на Заході розробники дуже довго зберігали прихильність статичному дизайну.

  • Плутанина у визначеннях adaptive / liquid / responsive (адаптивний / гумовий / чуйний /) web design

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

Насправді, adaptive web design є необхідною частиною responsive web design, оскільки передбачає роботу тільки з макетом сторінки: медіазапити CSS3, гнучкі зображення (fluid images) і макет (fluid grid). На відміну від адаптивного -респонсів веб-дизайн (чутливий) включає в себе трохи більше. Зокрема, існує окреме поняття «адаптивний макет» - це макет, зроблений поєднанням безлічі горизонтальних розмірів однакової ширини. Тому responsive web design може бути однією з форм adaptive web design сайту. Тобто в підсумку отримуємо, що Responsive web design = adaptive web design + прогресивні покращення. Хоча на практиці ці поняття насправді часто збігаються.

  • Чому варто віддавати перевагу саме Responsive web design

Responsive web design має можливість регулювання потоку інформації, що міститься на сторінці - по мірі зміни областей перегляду, але це не єдина перевага. Медіазапити CSS3 - важлива складова частина responsive web design, а додаткові CSS3-модулі дозволяють досягти небачених раніше параметрів гнучкості макета. З можливістю заміни фонової графіки і складних сценаріїв JavaScript - на легковагові CSS3-градієнти, тіні, верстки, анімації і всілякі трансформації.

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

  • Неабиякі «пристрасті» з питання відмінностей responsive / adaptive web-design

Хочеться відзначити великий сплеск дискусій з питання responsive / adaptive web-design, на сьогоднішній день «пристрасті» тільки розпалюються і однозначно правильної відповіді ніхто дати не може - думок багато і всі різняться. Я, зі свого боку - виходячи з накопиченого досвіду, раджу вам для найбільш повного розкриття питання, самостійно прочитати книги з даної тематики, написані на мові оригіналу: «Adaptive Web Design» Аарона Густафсона і «Responsive Web Design» Ітана Маркотт (російське видання називається «Чуйний веб-дизайн»).

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

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

З усіх питань створення та підготовки сайту до перегляду на мобільних пристроях за допомогою підходу Responsive web-design, ви можете звернутися до мене за Контактами.