Адаптивний дизайн сайту
- Розміри макетів адаптивного дизайну
- Мedia query і viewport в адаптивному дизайні
- Media Queries
- Як зробити адаптивний дизайн сайту з фіксованого макета
Останнім часом все більше і більше розвиваються технології і різні пристрої (планшети, смартфони, монітори) за допомогою, яких проглядаються сайти.
У сферу чого ми отримуємо безліч різних дозволів екранів, що в свою чергу веде до утруднення отримання інформації з сайтів. Щоб інформація була добре читається і зручно оглядовість на більшості пристроїв і була розроблена технологія адаптивного дизайну.
Метою адаптивного дизайну є розробка універсального дизайну веб-сайту, який би в свою чергу дозволяв переглядати і взаємодіяти з ресурсом з різних пристроїв.
А також дана технологія передбачає розробку однієї версії веб-сайту для всіх пристроїв, а не кількох.
Адаптивний веб-дизайн (англ. Adaptive Web Design) - дизайн веб-сторінок, що забезпечує коректне відображення сайту на різних пристроях, підключених до інтернету і динамічно підстроюється під задані розміри вікна браузера.
Основні принципи адаптивного дизайну:
- Адаптивний шаблон сайту, здатність шаблону підлаштовуватися під різні дозволи екранів пристроїв від монітора комп'ютера до смартфона;
- Адаптація та переміщення блоків контенту, здатність блоків контенту в залежності від дозволу екрану пристрою приймати необхідні розміри, а також здатність пересуватися на іншу позицію в макеті;
- Адаптація зображень, здатність зображень міняти розмір в залежності від дозволу екрану або завантажувати більш адаптоване зображення з меншою вагою і розміром;
- Використання гнучкої сітки, дозволяє максимально швидко змінювати конструкцію макета;
- Приховування менш важливих блоків, на невеликих екранах деякі блоки можуть ховатися;
- Переробка юзабіліті елементів навігації, так як на мобільних пристроях в зв'язку з невеликим дозволом елементи навігації стають менш розмітки, їх переробляють, роблячи зручно-використовуваними;
- Спрощення ряду елементів на веб - сторінці, деякі елементи спрощуються для використання на мобільних пристроях;
- Адаптація відео контенту, також слід врахувати і адаптацію відео;
- Використання медіа - запитів (media query), дозволяють створювати адаптивний макет;
- Спочатку мобільні (mobile first), проектування адаптивного дизайну починається з макета для мобільних пристроїв.
З приводу останнього пункту правильно це чи ні складне питання, по крайней мере, багато хто стверджує, що необхідно починати розробку макету саме з версії для мобільних пристроїв. Я ж дотримуюся трохи іншого погляду, мені простіше розробити макет під максимальний дозвіл з продуманою сіткою і повним функціоналом, а вже потім адаптувати під інші дозволи.
Розміри макетів адаптивного дизайну
Якщо слідувати принципу спочатку мобільні то будуть такі розміри дозволів, під які необхідно розробляти макет 320px / 480px / 768px / 1024px / 1280px може бути і більше залежить від завдань.
Картина виглядає приблизно, таким чином, але часто під якісь дозволи немає необхідності створювати макет, наприклад, під 480px. якщо макет не ламається на проміжку 768 - 320px.
Зрозуміло, створювати полотно в фотошопі ми будемо з урахуванням відступів, смуги прокрутки і всього іншого, як і звичайний макет. Створимо модульну сітку для зручності розробки, а також більш швидкого проектування макета. Багато хто використовує в роботі фреймворки, а отже спираються на сітку того фреймворка на якому ведуть розробку.
Завдяки чому, ми зможемо показати верстальщику, як буде вести себе макет на різних дозволах екранів і пристроях. Для прикладу я накидав невеликий макет, його Ви можете подивитися на скрині нижче. 
Мedia query і viewport в адаптивному дизайні
Для того щоб повідомити браузеру як відобразити розміри сторінки і змінити її масштаб використовується метатег viewport. Даний метатег прописується в <head> сайту. Він дозволяє розробникам встановити ширину екрану для пристроїв, яка прописана в css.
Записується мета тег viewport так:
<Meta name = "viewport" content = "name = value, name = value" />
Рекомендується записувати в такий спосіб:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
- width = device-width - означає що ширина сторінки сайту встановлюється в відповідність ширині екрану пристрою.
- initial-scale = 1.0 - даний атрибут скаже браузеру встановити відповідність масштабу 1: 1 для пікселів, що означає не масштабувати.
Зліва без мета-тега, праворуч з використанням мета-тега viewport.
Також для мета-тега можуть встановлюватися інші атрибути і параметри.
Media Queries
У розробці адаптивних сайтів головну роль відіграють css3 media queries (медіа - запити). Медіа - запити включають в себе медіа - тип (принтери, смартфони, екрани, телевізори, проектори та ін.) І умови, що може приймати в свою чергу істину або брехня (true, false). Залежно від того чи вірний медіа - тип і виконується умова будуть застосовуватися різні стилі css. Якщо буде вірно, то будуть застосовуватися ті стилі, які прописані в цьому медіа - запиті, якщо ж буде хибним, то будуть застосовуватися звичайні стилі css.
Завдяки таким запитам і створюються різні відображення сайту, для мобільних, планшетів і екранів моніторів. Підтримується всіма сучасними браузерами.
Записується в такий спосіб:
@media screen and (max-width: 1000px) {
.class {
властивість: значення;
}
}
- @media - медіа - запит;
- screen - медіа - тип (також називають тип носія);
- max-width: 1000px - умова, яка повинна виконуватися (в нашому випадку стилі будуть застосовуватися, якщо ширина вікна менше ширини 1000px);
- . class - прописуються відповідні селектори (класи, id) в яких властивостям задаються нові значення.
У більшості випадків для розробки адаптивного дизайну використовуються наступні медіа - функції.
- max-width: width - означає, що якщо ширина вікна браузера менше заданої ширини, то виконується умова і застосовуються відповідні стилі (приклад: max-width: 768px, означає, що якщо ширина вікна браузера менше 768px то слід використовувати стилі, зазначені в медіа - запиті).
- min-width: width - означає, що якщо ширина вікна браузера більше заданої ширини, то умова виконується, і застосовуються зазначені стилі в запиті (приклад: min-width: 480px).
Але також можуть використовуватися і інші функції: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution і інші.
Значення, які використовуються в медіа - функціях називають також breakpoints (переломні або контрольні точки). У цих контрольних точках як Ви здогадалися, і змінюється дизайн сайту.
- 320px - мобільні
- 480px - мобільні
- 768px - планшети
- 1024px - планшети, нетбуки
- 1280px і більш - персональні комп'ютери.
Контрольні точки можуть бути і не жорстко прив'язані до якогось дозволу екрану, так як можуть створюватися з іншими параметрами в тих значеннях, де макет видимим чином ламається, відображається некоректно, перестає правильно відображатися.
У медіа - запитах також застосовуються і логічні оператори такі як:
- and - логічне І, застосовується для об'єднання декількох умов (приклад: @media print and (color) {...}).
- not - логічне НЕ, застосовується для заперечення умови (приклад: @media not all and (color) {...}).
- only - застосовується для старих браузерів, які не підтримують медіа - запити (приклад: @media only screen and (max-width: 1300px) {...}).
Media queries прописуються в кінці файлу стилів, після всіх основних стилів css.
Як зробити адаптивний дизайн сайту з фіксованого макета
Отже, припустимо у Вас є робоча тема сайту з фіксованим розміром, яку Ви б хотіли залишити і зробити з неї адаптивний макет, але не знаєте з чого почати. Далі я розповім, як це можна зробити, чи можна зробити взагалі, і що потрібно зробити, з чого почати.
- Насамперед робимо резервну копію шаблону (теми), на всякий випадок.
- Далі нам потрібна програма для редагування css, це може бути будь-який редактор коду, наприклад brackets від adobe він безкоштовний або Notepad ++.
- А також браузер google chrome, з його інспектором коду (викликається клавішею F12).
Далі почнемо редагування, для зручності можна перенести шаблон на Денвер (локальний сервер), або на піддомен, кому як зручніше, щоб користувачі не бачили всі ті правки, які будуть відбуватися з макетом. Насамперед додамо мета-тег viewport, про нього я писав вище в тому вигляді як рекомендується.
Далі нам необхідно перевести всі статичні одиниці вимірювання в відносні одиниці виміру.
Такими є px, необхідно перевести їх в%, а шрифти задати в em. В основному це стосується ширини і шрифтів.
Ширину основного контейнера wraper {max-width: 960px;} залишаємо без зміни, якщо записано width змініть на max-width. Для інших контейнерів будемо міняти ширину на% відношення. Перекладати ми будемо за формулою:
Розмір контейнера (px) / розмір основного контейнера (одного з батьків) в (px) * 100% = результат (%)
Наприклад, статичний контейнер тіла сайту 720px розмір основного контейнера (його батька), наприклад, стандартний 960px, тоді отримаємо наступне 720/960 * 100 = 75%.
Таким чином, ми переведемо нашу статичну верстку в гумову. Далі переведемо наші шрифти, якщо вони в px в em для цього знову ж скористаємося формулою:
Розмір шрифту (px) / 16px (стандартний розмір) = розмір шрифту (em)
Наприклад, розмір шрифту 32рх, тоді 32/16 = 2em.
Після чого зробимо наші зображення адаптивними. Для цього в css пропишемо такі властивості і значення.
img {
max-width: 100%;
height: auto;
}
Цей спосіб непогано адаптує картинки, єдине він не зменшує вагу картинок, а це значить, що на мобільних пристроях будуть завантажуватися картинки з великою вагою. Щоб такого не було необхідно вантажити різні картинки в залежності від розміру екрана.
Після внесення всіх цих змін, якщо Ви внесли все вірно, то на сайті нічого не повинно змінитися, а якщо спробувати зменшити вікна браузера дизайн і картинки повинні стискатися.
Ну, ось наша з вами основа готова, тепер необхідно визначити контрольні точки, в яких макет буде перебудовуватися, продумати, як будуть вести себе блоки, що будемо приховувати і записати це все в медіа - запити. Визначати ці самі переломні точки ми будемо за допомогою браузера google chrome.
Відкриємо в ньому наш макет, натиснемо клавішу F12 і будемо зменшувати розмір вікна браузера. У верхньому правому куті у нас будуть писатися розміри вікна, нас цікавить перше значення, воно вказує на ширину. Необхідно стискати до тих пір, поки дизайн не перестане коректно відображатися. У тому розмірі, коли макет виглядає некоректно, ми і будемо створювати контрольну точку.
Визначивши першу переломну точку, запишемо її в файл style.css в самий кінець після всіх основних стилів. Припустимо наш макет, має лівий сайдбар і контентну частину з анонсами, і при 910px сайт починає відображатися некоректно. В даному випадку ми запишемо наступний медіа запит.
@media only screen and (max-width: 910px) {
/ * Контентную частина ми робимо на всю ширину, скасовуємо вирівнювання * /
section {
width: 100%;
float: none;
}
/ * Сайдбар ми робимо також у всю ширину, скасовуємо вирівнювання * /
aside {
width: 100%;
float: none;
}
}
Якщо у цих блоків є якісь відступи (margin, padding) їх слід, або обнулити, або врахувати при написання ширини. Наприклад, padding: 2%; тоді ширину запише в такий спосіб width: 96%; .
Таким чином, ми адаптували наш макет на дозвіл менше 910px. Якщо вікно браузера буде менше 910px, то контент стане на всю ширину, а сайдбар проститься під контентную частина і стане також у всю ширину.
За таким же принципом ми створюємо і інші контрольні точки, знаходимо ширину, при якій макет ламається (виглядає некоректно) записуємо медіа - запит, формуємо для нього стилі задаємо ширину блоків, можемо приховати менш важливі блоки (display: none).
Як Ви помітили, в даному прикладі контрольні крапки не будуть жорстко прив'язуватися до розмірів екранів, що в свою чергу гарантує гарне відображення сайту в різних пристроях, не залежно від їх дозволу.
джерело: http://fotodizart.ru/adaptivnyj-dizajn-sajta.html
