1. Responsive Web Design
2. Налаштування області перегляду
3. TL; DR
4. Спеціальні можливості області перегляду
5. Масштабування контенту для області перегляду
6. TL; DR
7. Поліпшення чуйності за допомогою медіазапросов CSS
8. TL; DR
9. Застосування медіазапросов на основі розміру області перегляду
10. Примітка до min-device-width
11. Використання відносних одиниць
12. Вибір контрольних точок
13. TL; DR
14. Вибір другорядних контрольних точок (якщо необхідно)
15. Оптимізація тексту для читання
16. Ніколи не приховуйте контент повністю

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

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You'll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you'll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you'll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

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

Про чуйну веб-дизайні вперше написав Ітан Маркотт в статті журналу A List Apart . Це саме те, чого так не вистачало пристроїв і їх користувачам. Макет підлаштовується під пристрій, виходячи з його можливостей і розміру. Наприклад, певний контент на телефоні розташовується в одній колонці, а на планшеті - в двох.

Налаштування області перегляду

Сторінки, адаптовані для перегляду на різних пристроях, повинні містити в контейнері head-тег viewport. Він повідомляє браузеру, яким чином потрібно контролювати розміри і масштаб сторінки.

TL; DR

• Щоб контролювати масштабування вікна перегляду в браузері, використовуйте метатег viewport.
• Додайте width = device-width, щоб адаптувати ширину вікна перегляду до екрану пристрою.
• Вставте initial-scale = 1, щоб забезпечити співвідношення 1: 1 між пікселями CSS і незалежними пікселями пристрою.
• Щоб сторінка була доступна, перевірте, чи не відключено чи призначене для користувача масштабування.

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

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

Щоб сторінка підлаштувалася під ширину потрібного екрану (в незалежних пікселях), використовуйте метатег viewport width = device-width. З його допомогою розмір і положення контенту зміняться, і сайт буде добре виглядати на будь-якому пристрої.

Деякі браузери не редагують ширину сторінки і розмір контенту, а змінюють орієнтацію сайту на альбомну або збільшують масштаб. За допомогою атрибута initial-scale = 1 можна вказати браузеру співвідношення пікселів CSS і пристрої, що дорівнює 1: 1 незалежно від орієнтації дисплея. Завдяки цьому сторінка буде краще виглядати в альбомної орієнтації.

Спеціальні можливості області перегляду

Налаштувавши initial-scale, ви також можете встановити наступні атрибути для області перегляду:

• minimum-scale
• maximum-scale
• user-scalable

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

Масштабування контенту для області перегляду

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

TL; DR

• Не використовуйте великі елементи з фіксованою шириною.
• Для коректного відображення контенту не обмежуйте його певної шириною області перегляду.
• Використовуйте медіазапроси CSS, щоб вказати різні стилі для великих і маленьких екранів.

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

Діапазон розмірів екрану і ширини в пікселях CSS дуже великий (наприклад, телефони можуть значно відрізнятися від планшетів або навіть від інших телефонів), тому відображення контенту не повинно залежати від конкретної ширини області перегляду.

Установка великих абсолютних значень ширини CSS для компонентів сторінки зробить div занадто великим для більш вузької області перегляду (наприклад, на пристроях шириною 320 пікселів CSS, таких як iPhone). Замість цього можна використовувати значення в відносних одиницях, наприклад width: 100%. Також намагайтеся уникати великих абсолютних значень позиціонування. Через них на маленькому екрані елемент може виявитися ЕА межами області перегляду.

Поліпшення чуйності за допомогою медіазапросов CSS

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

TL; DR

• Медіазапроси також дозволяють вибрати стиль на основі характеристик пристрою.
• Додайте min-width замість min-device-width для коректного відображення сайту на більшості пристроїв.
• Щоб не порушувати структуру макета, використовуйте елементи відносних розмірів.

Наприклад, ви можете помістити в медіазапрос print всі стилі, необхідні для друку:

<Link rel = "stylesheet" href = "print.css" media = "print">

Крім використання атрибут media в посиланні на таблицю стилів існує ще два способи застосувати медіазапроси @media і @import, які можна вбудувати в файл CSS: Пріоритет віддається першим двом методам, більш ефективним, ніж синтаксис @import (див. Уникайте правила @import ).

@media print {/ * print style sheets go here * /} @import url (print.css) print;

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

Застосування медіазапросов на основі розміру області перегляду

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

@media (query) {/ * CSS Rules used when query matches * /}

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

Атрибут Результат min-width Правило застосовується до браузеру, ширина якого більше значення, зазначеного в запиті. max-width Правило застосовується до браузеру, ширина якого менше значення, зазначеного в запиті. min-height Правило застосовується до браузеру, висота якого більше значення, зазначеного в запиті. max-height Правило застосовується до браузеру, висота якого менше значення, зазначеного в запиті. orientation = portrait Правило застосовується до браузеру, висота якого не менше його ширини. orientation = landscape Правило застосовується до браузеру, ширина якого більше висоти.

Розглянемо приклад:

<Link rel = "stylesheet" media = "(max-width: 640px)" href = "max-640px.css"> <link rel = "stylesheet" media = "(min-width: 640px)" href = "min -640px.css "> <link rel =" stylesheet "media =" (orientation: portrait) "href =" portrait.css "> <link rel =" stylesheet "media =" (orientation: landscape) "href =" landscape .css "> <style> @media (min-width: 500px) and (max-width: 600px) {h1 {color: fuchsia; } .Desc: after {content: "In fact, it's between 500px and 600px wide."; }} </ Style>

• При ширині браузера від 0 пікс. до 640 пікс. застосовується max-640px.css.
• При ширині браузера від 500 пікс. до 600 пікс. застосовуються стилі з @media.
• При ширині браузера від 640 пікс. і вище застосовується min-640px.css.
• Якщо в браузері ширина більше висоти, застосовується landscape.css.
• Якщо в браузері висота більше ширини, застосовується portrait.css.

Примітка до min-device-width

Також можливе створення запитів на підставі * -device-width, хоча робити це настійно не рекомендується.

Різниця невелика, але дуже важлива: min-width виходить з розміру вікна браузера, а min-device-width - з розміру екрану пристрою. На жаль, деякі браузери (включаючи застарілу версію браузера для Android) не завжди правильно визначають ширину області перегляду і замість неї можуть повідомити розмір екрану в пікселях пристрою.

До того ж, використання * -device-width може перешкодити контенту підлаштуватися під екран звичайного комп'ютера або іншого пристрою, на якому можна змінити розмір вікна. Причина в тому, що цей запит заснований на розмірі конкретного пристрою, а не вікна браузера.

Використання відносних одиниць

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

Наприклад, установка параметра width рівним 100% для блоку div верхнього рівня призведе до того, що він буде заповнювати всю ширину області перегляду і ніколи не буде занадто малий або великий для неї. Блок div в будь-якому випадку буде відповідати екрану, будь то iPhone (320 пікс.), Blackberry Z10 (342 пікс.) Або Nexus 5 (360 пікс.).

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

Not recommended - fixed width

div.fullWidth {width: 320px; margin-left: auto; margin-right: auto; }

Recommended - responsive width

div.fullWidth {width: 100%; }

Вибір контрольних точок

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

TL; DR

• Створюйте контрольні точки на основі контенту, а не для окремих пристроїв, продуктів або брендів.
• Спочатку розробіть дизайн для самого маленького мобільного пристрою, а потім переходите до версій для великих екранів.
• Обмежте довжину рядків 70-80 символами.

Вибір головних контрольних точок: від меншого до більшого

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

Як приклад розглянемо вже знайомий вам прогноз погоди . Спочатку зробимо так, щоб прогноз добре виглядав на невеликому екрані.

Потім збільшимо розмір вікна браузера, поки між елементами чи не з'явиться занадто багато порожнього простору. Тепер прогноз погоди виглядає не так красиво. Ви можете вибрати будь-яке значення, але 600 пікселів - це занадто багато.

Щоб зробити 600 пікселів контрольної точкою, потрібно створити дві таблиці стилів: одну для менших значень, іншу для великих.

<Link rel = "stylesheet" href = "weather.css"> <link rel = "stylesheet" media = "(max-width: 600px)" href = "weather-2-small.css"> <link rel = " stylesheet "media =" (min-width: 601px) "href =" weather-2-large.css ">

В кінці проведіть рефакторинг CSS. У цьому прикладі ми помістили загальні стилі (шрифти, значки, кольори і базове позиціонування) в weather.css. Потім ми включили макет для маленьких екранів в weather-small.css, а для великих - в weather-large.css.

Вибір другорядних контрольних точок (якщо необхідно)

Відзначивши головними контрольними точками великі зміни макета, внесіть другорядні коригування. Наприклад, між головними контрольними точками можна встановити відступи для елемента або збільшити розмір шрифту, щоб він виглядав в макеті більш природно.

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

@media (min-width: 360px) {body {font-size: 1.0em; }} @Media (min-width: 500px) {.seven-day-fc .temp-low, .seven-day-fc .temp-high {display: inline-block; width: 45%; } .Seven-day-fc .seven-day-temp {margin-left: 5%; } .Seven-day-fc .icon {width: 64px; height: 64px; }}

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

@media (min-width: 700px) {.weather-forecast {width: 700px; }}

Оптимізація тексту для читання

Згідно поширеній теорії, найзручнішою для читання є колонка з довжиною рядка близько 70-80 знаків (8-10 слів). Тому для всіх текстових блоків, ширина яких перевищує 10 слів, слід встановити контрольну точку.

Розглянемо докладніше наведений вище приклад записи в блозі. На маленькому екрані відмінно поміщаються рядки довжиною в 10 слів шрифтом Roboto з розміром 1em, але для екранів більшого розміру необхідно встановити контрольну точку. В цьому випадку для вікна перегляду браузера розміром більше 575 пікселів оптимальна ширина контенту дорівнює 550 пікселям.

@media (min-width: 575px) {article {width: 550px; margin-left: auto; margin-right: auto; }}

Ніколи не приховуйте контент повністю

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