Адаптивна та чуйна верстка

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

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

Перевірити чи сайт пристосований до мобільних пристроїв можна використавши сервіси гугла:
https://www.google.com/webmasters/tools/mobile-friendly/ - mobile-friendly
https://developers.google.com/speed/pagespeed/insights/ - швидкість завантаження сторінок

Мета-теги та медіазапити для адаптивної та чуйної верстки

Для адаптивних сайтів потрібно використовувати meta viewport:


				<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут content вказує пристрою, що шрину viewport'а потрібно прирівняти до ширини екрану а також задати початковий маштаб 100% (1.0).

Для неадаптованих сайтів можна вказати потрібну ширину, до якої сайт буде автоматично змаштабований:


				<meta name="viewport" content="width=980">

Можна заборонити міняти маштаб сайту (тобто, його не можна буде збільшити/зменшити двома пальцями):


				<meta name="viewport" content="initial-scale=1, user-scalable=no">

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

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

Можна встановити границі маштабування:


				<meta name="viewport" content="initial-scale=1, minimum-scale=0.7, maximum-scale=1.5">

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

Щоб заборонити все це - можна скористатися наступним тегом:


				<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">

Та для покращення користувацьких властивостей сайта (UI/UX) фронтенд-девелопер повинен сам створювати необхідні посилання.

Использование мета тега viewport в неадаптивных шаблонах.

Для адаптації блоків під різні розміри екранів в медіазапитах використовуються min-width та max-width (у дужках):


				.map { display: hidden; }

				.wrapper { width: 980px; }


				@media screen and (min-width: 800px) {

				  .map { display: block; }

				}

				@media screen and (max-width: 1006px) {

				  .wrapper { width: 100%; }

				}

Можна вказати діапазон:


				@media (min-width: 768px) and (max-width: 920px) {

				  .box { margin-left: 200px;}

				}

Медіазапитами можна фільтрувати різні типи екранів та зерно екрана:
Retina Display Media Query

Адаптивна верстка

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

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

Стоп-точки бувають двох видів: жорсткі та м'які.

До жорстких належать: 320px, 400px, 480px, 640px, 720px, 768px, 800px, 960px, 980px, 1024px і так далі.

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

М'які точки - близько розташовані до жорстких, на малих розмірах екранів вони, як правило, відрізняються на 8-10 пікселів, на великих - 24-32 пікселя.

Приклади м'яких точок: 312px, 330px, 410px, 732px, 790px, 816px, 990px, 1050px і так далі.

На м'яких точках сайт завчасно готується до адаптації під певний розмір екрану.

Чуйна верстка

У чуйної верстки немає фіксованих стоп-точок, вони створюються щоразу за потреби.

Як правило, чуйні сайти на великих екранах або гумові, або фіксовані. При зменшенні розміру екрану коли блоки перестають влазити по горизонталі - створюють стоп-точку (з невеличким запасом в більшу сторону) і адаптують даний блок до нового розміру екрану.

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

Комбінування та два принципа створення медіа-запитів.

Можна комбінувати різні види верстки: на великих екранах сайт може мати фіксовану ширину, на середніх - бути адаптивним, на невеликих - бути гумовим та чуйним.

В залежності від основної цільової аудиторії сайт може верстатися "від більшого до меншого" або "від меншого до більшого".

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

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

Домашнє завдання

Зробіть адаптивну верстку сайту Суперпосилка.