Адаптивна верстка сайту — Що це таке

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

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

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

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

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

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

Про що взагалі йде мова, адаптивна верстка що це таке. На вашому сайті повинен бути ЄДИНИЙ адаптивний дизайн, в якому використовується ОДИН код з коригуванням за розміром екрана. Перемикач на мобільну версію вже не проходить, це не правильно. Можна відкрити керівництво від Гугла і прочитати інформацію більш детально.

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

Що таке адаптивна верстка

Звичайно не кожен з нас має під рукою монитор, планшет і телефон. Щоб перевірити ваш сайт на адаптацію, мати в наявності всі види пристроїв не обов'язково. Якщо ви використовуєте браузер Google Chrome, можете встановити розширення, яке називається Window Resizer. З його допомогою можна швидко перевірити більшість варіантів вашого адаптивного дизайну.

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

Скажу ще раз, ніякої горизонтальної лінії прокрутки бути НЕ ПОВИННО. Все повинно адаптуватися під будь-який дозвіл екрана. Перейдіть на головну сторінку, ваші статті, і ще кілька додаткових сторінок.

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

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

Приклади верстки

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

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

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

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

Плюси і мінуси

До переваг такого підходу слід зарахувати:

• Економія ресурсів та коштів на утримання сайту. Замість кількох версій достатньо забезпечити безперебійну роботу однієї універсальної.
• Кожна з версій сторінки має один і той же URL, що спрощує SEO просування.
• Паралельно з цим спрощується і реклама у соціальних мережах.
• Покращується статистика в аналітичних звітах Google — завдяки синхронізації запитів із комп'ютерів, планшетів та смартфонів вона враховується для єдиного сайту.
• Не потрібні складні серверні компоненти. Діючий сайт досить один раз модифікувати за допомогою CSS стилів, щоб вміст сторінок адаптувався до розміру дисплея гаджета.
• Виключено дублювання контенту, що часто спостерігається під час паралельного запуску мобільної версії сайту.

Це рішення має деякі недоліки:

• Складність адаптації працюючого проекту. Простіше запустити новий сайт, ніж переписати код.
• Об'єм сторінок у адаптивного сайту більший, ніж у звичайного: CSS стилі та JavaScript дають додаткові кілобайти. Це уповільнює завантаження окремих сторінок, що може не сподобається як відвідувачам, так і пошуковим роботам.
• Складно розміщувати якісні ілюстрації з високою роздільною здатністю. Доводиться шукати обхідні шляхи, використовуючи інструменти на зразок плагіна Adaptive Images.

Адаптивний дизайн, чуйна чи мобільна версія – у чому різниця?

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

Однак, у виняткових випадках зустрічаються і девайси з «нетиповою» роздільною здатністю дисплея і тоді відповідного варіанту в готових шаблонах може не знайтися. Відповідно, і відображатися на такому девайсі сторінка може трохи "криво".

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

Мобільна версія — по суті окремий сайт, контент якого дублює основний. Має інше доменне ім'я та потрібне окреме місце на сервері. Відповідно, та додаткових витрат на підтримання роботи. Прийнятний варіант для таких гігантів, як Facebook або AliExpress, але в плані просування не підходить для невеликих інформаційних сайтів.

Принципи адаптивної верстки

При створенні «універсального» дизайну розробники дотримуються наступних принципів:

• Відповідність. Більш компактна версія сайту оформленням не повинна відрізнятись від об'ємної. Дозволяється приховати зайві елементи з урахуванням потреб користувачів різних пристроїв. Повна версія під роздільну здатність монітора Full HD повинна відображати повний функціонал.
• Відносність системи координат. Важливо пам'ятати, що зображення розміром 480 пікселів виглядає по-різному на екрані смартфона та дисплеї ноутбука. Розмір слід встановлювати за тими об'єктами, які є на екрані кожного пристрою. Сьогодні це верхня межа екрану, якою рівняються розробники.
• Контрольні точки. Розмір адаптивних сторінок прив'язується до контрольних точок. Сайт буде відображатися в тому ж вигляді, доки користувач не зайде з іншого пристрою.
• Вкладення об'єктів. Якщо розмір одного блоку залежить від розміру іншого, їх можна помістити в загальний контейнер для взаємного зв'язку. Прийом ефективний у випадку з логотипом, кнопками та іншими навігаційними елементами.
• Відповідні шрифти. Дозволяється перевести їх у веб формат, щоб вони підлаштовувалися під розмір екрану.
• Адекватні ілюстрації. Якщо зображення має багато деталей, його краще робити растровим. Інакше можна зробити векторним. Для більш швидкого завантаження картинки рекомендується стискати.
• Юзабіліті. Розмір елементів, із якими взаємодіє користувач, необхідно адаптувати зручного використання. Наприклад, палець по відношенню до сенсорного екрана має більші розміри, ніж курсор миші порівняно з монітором. Користувачеві може бути незручно натискати дрібні кнопки або переходити за посиланнями, які розташовані надто близько один до одного.

Відео

Читайте також - Як вести свій блог в інтернеті?

Сподобався матеріал? Будь ласка, репости!

Вітаю всіх на нашому інтернет-журналі. Я - Вольдемар Воронцовський. Цей матеріал написаний і опублікований одним з наших авторів (експертом у своїй справі). За кожною статтею стоїть досвідчений співробітник нашої команди, який перевірив матеріал на помилки і актуальність. Познайомитися з нами можна в розділі - «Редакція сайту».

Підписуйтесь на наш канал в Telegram 👉 там все про крипту та інвестиції

• Етапи створення (розробки) web-сайту. Процес створення сайтів.
• Як вести свій блог в інтернеті?