Лекція третя. Адаптивный дизайн

На початку уроку перевірка домашнього завдання.

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

Отже ми з'ясували про сайт все що нас цікавило, затвердили ТЗ у замовника, залишається останнє питання - чи потрібно передбачити на сайті адаптивність?

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

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

Мобільна версія - це така урізана версія сайту, яка добре виглядає ТІЛЬКИ на телефоні. І ми платимо за розробку дизайну цієї мобільної версії, потім за верстку і програмування. Через рік ми дізнаємося, що наша цільова аудиторія перейшла на планшети, тоді ми замовляємо версію ще й для вертикальної орієнтації планшетів - це ще + окремий дизайн, верстка та програмування. Те ж саме відбувається, коли на ринок виходить новий розмір гаджета або з'являється новий дозвіл монітора. Скільки розмірів - стільки і мобільних версій. Якщо популярних розмірів 8 то і розробку нашого сайту ми множимо на 8.
Накладно - чи не так?



Адаптивна верстка - це, коли ми робимо (виконуємо або замовляємо) тільки 1 сайт (1 дизайн, 1 верстку і 1 програмування), але цей сайт вміє підлаштовуватися під розмір будь-якого монітора в межах від 370 до 1200 пікселів. Є монітори і по 5000 пікселів в ширину, але на такому розмірі незручно читати текст і його фіксують в форматі підручника. Адаптивної буває саме верстка, а дизайн повинен бути під неї змінено відповідно. Web-дизайн не може існувати як чисте мистецтво саме тому, що в ньому завжди зав'язаний на функціональності. У ньому повинні бути закладені зручності для користувача, можливості для розробника і при всьому при цьому необхідно утримати стилістику. Так, виявляється, що дизайн сайту вторинний. Первинна функціональність. Але професіоналізм дизайнер саме в тому і полягає, щоб звести всі ці точки воєдино і створити такий продукт, який і зручний і функціональний і красивий.

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

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

Найбільш прийнятний стиль для адаптивного дизайну - це flat

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

Плоска заливка, з точки зору завантаження, важить менше ніж градиентная.



Чорний колір важить більше ніж білий.



Темна картинка важить більше ніж світла ...



... але світла важить більше ніж заливка одним кольором.



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

Таким картинкам як тут https://web-design.gretthen.com/web-design/trustgalaxi.html (Всім цим прошивкам, металевим вигинам, дерев'яним кнопкам з округленими кутами) на екрані телефону доведеться просто зникнути, їх не можна системно коректно стиснути, їх можна тільки перемалювати під різні розміри, а це, як ми говорили вище, вартість сайту помножена на 8.

Шапці цього сайту https://web-design.gretthen.com/web-design/basartov.html теж не можна задати зменшення або системно перебудувати, можна тільки перемалювати під різні версії моніторів.

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

Якщо ще пару років назад питання: "Чи потрібна адаптивна версія?" був одним з головних в брифі то сьогодні це питання взагалі не обговорюється. Так, звичайно, будь-який сайт повинен бути адаптивним. Навіть якщо замовник каже вам, що для нього в пріоритеті десктопна версія, а мобільний він потім дозамовить - не ведіться! Погоджуйтеся з його думкою, але робіть так, щоб верстальщику було зрозуміло як слід все це адаптувати.

Доречі, у мене питання до залу:
Я беру на себе сміливість затверджувати, що зліва адаптивна версія, а справа НЕ адаптивна.
Чому?



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

І, здавалося б, рішення знайдено. Є мобільний інтернет і є адаптивний дизайн. Він зручний не тільки в плані відображення, але і в плані розробки дизайну. Його легко намалювати. Створити інфографіку в стилі flat набагато швидше, зручніше і зрозуміліше, ніж городити город з реалістичних картинок. Я не відкидаю реалістичні і псевдооб'ёмние зображення, але працювати з ними набагато довше і копітка.

У чому проблема плоского дизайну?
Він не подобається нашій людині )) як це не парадоксально.
Часто бували випадки, коли мені замовляли дизайн сайту, приводили референс дизайну в стилі flat, а робила все про що мене просили, але у відповідь чула: "Я не очікував. У вас таке гарне портфоліо. Може бути воно не ваше?" А у мене на той момент флет і правда не було в портфоліо, цей стиль тільки починав входити в моду, але людина вибирає саме моє портфоліо в надії отримати подібне, а в якості прикладів приводить модні сайти.
Цей період тривав року зо 2. За цей час я вже стала недолюблювати плоский стиль тому, що стільки розбіжностей з замовниками у мене не було навіть на зорі моєї дизайнерської кар'єри.
Я довгий час намагалася зрозуміти де тут собака порилася і знайшла цьому пояснення, яке виклала в своїй статті "Про смаки не сперечаються".

Зараз люди вже визнали, незважаючи на моду, що відрізнятися від конкурентів тільки фотографіями їм не хочеться і слово флет все менше звучить у вживанні.
Є цьому і практичне пояснення - фотографії. Шедеври плоского дизайну рясніють гарними фотографіями.
Добре якщо ви робите дизайн сайту для великої фешн компанії. Якісні фото - це їх коник. Добре, якщо замовник готовий замовити фотосесію спеціально для сайту. Власник заводу "Комунар" (вхідні двері, Харків) перед тим як замовити дизайн сайту, замовив всім працівникам фірмовий одяг з логотипом фірми, фото сесію і вже з цим прийшов до виконавця. Так, таке буває, але дуууже рідко. Але що ж робити, якщо до Вас прийшов замовник у якого хороший смак, який підібрав прекрасні референс, склав гарне ТЗ, вніс передоплату, але зробити йому потрібно сайт який не будь провінційної греблі і хороших фотографій немає, а за авторські малюнки він платити не має наміру ??

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

Ось приклад сайту в стилі флет http://demo.aggressivemotions.com/barcelona/ с прекрасными фотографиями.



Ось приклад того ж сайту, але без фотографій. Напевно, так виглядав його прототип (я просто закрила картинки). Тут ми бачимо, що він не має власного оформлення.




А тут картинки не відображені взагалі:



А ось приклад сайту, який має оформлення http://taurussoft.ru/і він адаптивний. Хтось може сказати про те, що наука не стоїть на місці, мобільний інтернет стає все більш мобільним, але це сайт 2012 року.




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