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

Напевно ви вже знаєте, що адаптивна верстка повинна бути на кожному сайті. Чим же вона відрізняється від мобільної версії сайту? Якщо ви далекі від світу веб-дизайну, то для вас мобільна і адаптивна верстка схожі. Проблема зміни розміру веб-сторінки виникла з появою першого сенсорного телефону, який розробила корпорація Apple. Після телефонів з'явилися планшети, і проблема адекватного відображення веб-сторінок на різних пристроях стала ще гостріше.

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

У чому суть адаптивності?

Сайт, в якому застосована адаптивна верстка, однаково відображається на пристроях всіх розмірів. Під усіма пристроями мається на увазі і великий монітор, і планшет у вертикальному і горизонтальному положенні, і, звичайно ж, мобільний телефон. З великими розмірами екрану проблем не виникає, а от на маленьких деякі блоки відображаються некоректно, що скорочує час перебування користувача на сайті і збільшує відсоток відмов. На будь-якому моніторі сайт повинен виглядати однаково, без смуг прокрутки і «тих, хто виїхав» блоків. Принадність адаптивності в тому, що сайт підлаштовується під будь-який розмір екрану так, що користувач цього навіть не помічає. На сайті працює один код, який переключається при визначенні розмірів екрану пристрою. Якщо у вас виникають питання звертайтеся в компанію Євросайт.

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

Як перевірити сайт на адаптивність?

Навіть при достатку гаджетів не всі мають під рукою пристрої з різним розміром екрану. Але, технології та розробка ПО на місці не стоїть, тому в якості перевірки сайту на адаптивність використовуйте розширення для веб-браузера Google Chrome Window Resizer. Воно допоможе швидко перевірити адаптивний дизайн на основних розмірах. З плагіном для Chrome можна перевірити адаптивність сайту на основних розмірах, включаючи старі версії смартфонів на Андроїд і iPhone.

Відкрийте в браузері Google Chrome сайт, який необхідно перевірити на адаптивність.

Натисніть праву кнопку миші і виберіть в меню "Подивитися код" або скористайтеся командою Ctrl + Shift + I

У додатковому меню виберіть пункт "Toggle device mode" або за допомогою комбінації клавіш Ctrl + Shift + M

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

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

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

Приклад сайту з адаптивною версткою

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

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

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