14.01.2017 в 10:41 |

1 0


Вся таємниця адаптивного веб-дизайну криється в тому, що багато хто не знають, що це, от і все. Є поняття, що це чуйний або реагує дизайн, але що під усім цим криється – невідомо. Постараюся пояснити, що означає «адаптивний дизайн» і як до нього прийти.

Невелике вступ

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

Сьогодні я розповім про наступне:

  • Що таке адаптивний дизайн і навіщо він потрібен;
  • Яка різниця між адаптивним дизайном і реагує дизайном;
  • Як зі звичайного шаблону зробити адаптивний;
  • Як за допомогою media queries зробити свій дизайн адаптивним.

Що таке адаптивний дизайн

Вся «сіль» адаптивного дизайну в тому, що він повинен пристосовуватися під конкретний пристрій, на якому буде проглядатися сайт. Причому, треба передбачити, щоб кожна сторінка і кожен піксель відповідали цим пристроям.

Адаптивний дизайн переслідує наступні принципи:

  • Адаптується під всі види екранів – настільні ПК, планшети, телефони;
  • Зображення змінюється у відповідності з тим, на якому екрані воно проглядається;
  • На мобільних пристроях використовуються зображення з низьким завантаженням;
  • Для мобільних пристроїв використовуються спрощені елементи завантаження;
  • Для кожного виду екранів передбачається приховування непотрібних елементів;
  • Для мобільних пристроїв особливу увагу приділяється посиланнями, так як натискати на них доведеться пальцями;
  • Передбачена функція геолокації.

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

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

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

Реагує дизайн

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

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

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

Як створити адаптивний шаблон

Створити адаптивний шаблон досить просто. В ньому повинні обов’язково міститися такі стандартні елементи, як:

  • Header. Смуга повинна проходити по всій ширині завантаження;
  • Content. Область може знаходитися зліва і займати не більше 65% по всій ширині;
  • Sidebar. Цей модуль може розташовуватися праворуч і займати не більше 20% від робочої області;
  • Навігація. Цей модуль займає близько 15% області сторінки;
  • Футер. Знаходиться в нижній частині сторінки ви можете вручну змінювати розмір вікна браузера в коді.

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

Що таке media queries

Media queries – це ключовий момент у створенні адаптивного дизайну. З його допомогою ви можете зберігати шаблони, які містять певні правила CSS. Якщо використовувати media queries для редагування розміру вікон з шириною менше 700 рх, то прекрасно працює шаблон, адаптирующий вікна для невеликих розмірів браузера. Media queries застосовується практично у всіх браузерах, відомих сьогодні.

Ось час проектування адаптивних шаблонів я найчастіше використовую наступні шаблони:

  • min-width: width. Використовується в тих випадках, коли ширина вікна більше ширини вікна браузера.
  • max-width: width. Використовується в тих випадках, коли ширина вікна менше ширини вікна браузера.
  • min-device-width: width . Використовується, коли ширина екрану пристрою, на якому переглядають сторінку, більше самого шаблону.
  • max-device-width: width . Використовується, коли ширина екрану пристрою, на якому переглядають сторінку, менше самого шаблону.

Можна і не ставити діапазонні значення, а використовувати точні показники, але я б не радила користуватися цим методом.

Адаптивні шаблони для екранів з роздільною здатністю менше 1000 рх

Я вже говорила про те, що адаптивний дизайн добре виглядає у браузері, але найчастіше страждає футер, сайдбар, контент і навігація. Це відбувається у 100% випадків, коли ширина браузера менше 1000 рх. Як це виправити? Повернемося до відомого media queries, щоб визначити ширину браузера. Якщо наші побоювання підтвердяться, то потрібно розташувати навігаційну панель не вгорі сторінки, а збоку, краще всього ліворуч.

Основні правила в цьому випадку звучать наступним чином:

  • Ширина контенту розтягується на 60-70%;
  • Навігаційна панель розташовується збоку і збільшується на 25%;
  • Праве поле не видаляється з бічної панелі, а стає автоматично верхнім. Так ми отримуємо необхідну вертикальне простір між навігаційним полем і сайдбаром.

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