Давним-давно, коли для перегляду Інтернету використовувалися лише ПК та ноутбуки, було досить легко створити веб-сайт, який виглядає добре на більшості екранів. Але сьогодні смартфони, планшети, смарт-годинники та інші носимі пристрої значно ускладнили цей процес. Саме тому адаптивний інтернет-магазин, який підлаштовується під різні екрани, є необхідністю для багатьох компаній.
Як створити адаптивний веб-сайт
Створіть кілька спеціалізованих макетів
По-перше, вам слід вирішити, скільки макетів вам насправді потрібно. Наприклад, якщо веб-сайт має лише одну колонку, все, що вам потрібно зробити, це адаптувати його до екранів з різною роздільною здатністю. Але якщо веб-сайт використовує більш складну структуру, вам потрібно мати кілька макетів, які враховують доступний простір на екранах різного розміру. Наприклад, ось як виглядає веб-сайт дизайну з нашого портфоліо на настільних комп'ютерах:
Але коли ви переглядаєте його на смартфоні, відображається більш простий макет, який краще підходить для маленьких екранів:
Можливо, ви помітили, що версія для ПК має горизонтальне меню, тоді як на мобільному сайті його елементи приховані в меню-«сендвіч». Це хороша практика для мобільних сайтів, оскільки на маленьких екранах навігація займає занадто багато цінного простору, відволікаючи користувача від важливого контенту веб-сайту.
Подумайте про швидкість завантаження
Сьогодні люди рідко віддаляються від своїх мобільних пристроїв, тому ви повинні звернути увагу на швидкість завантаження сторінок, оскільки вони можуть отримати доступ до веб-сайту з високошвидкісного Wi-Fi, 3G або повільніших EDGE-мереж. Видаліть важкі зображення з мобільної версії та не завантажуйте відео автоматично. Наприклад, на фоні веб-сайту для нашого Code’n’Cofee IT заходу ми використовували відео, яке відтворюється автоматично. Але відвідувачі, які переглядають його на мобільних пристроях, побачать замість цього фото:
Ще один спосіб прискорити завантаження сторінки — використовувати спеціальні символи замість зображень для простих форм, таких як зірки в рейтингових системах (★ і ☆).
Використовуйте viewport та media query
HTML5 представив новий елемент viewport для контролю масштабування та розміру сторінки. Ось приклад коду:
<metaname="viewport"content="width=device-width, initial-scale=1.0">width=device-width вказує, що ширина сторінки має відповідати ширині екрану пристрою.
initial-scale=1.0 задає рівень масштабування, який використовується після завантаження сторінки.
Щоб зробити веб-сайт адаптивним, вам слід використовувати елемент viewport.
CSS3 представив правило @media, яке дозволяє використовувати певні CSS параметри лише тоді, коли певна умова є істинною:
@media only screen and (max-width:500px){ body {width:100%;}}
Ось як ви можете завантажувати різні стилі для різних типів пристроїв:
<linkrel="stylesheet"media="mediatype and|not|only (media feature)"href="newsheet.css">Вказуйте розміри в відносних одиницях
Щоб вебсайт був адаптивним, слід вказувати всі розміри в відносних одиницях (таких як відсотки). Наприклад, коли ви вказуєте, що розмір колонки дорівнює 50%, вона завжди займатиме рівно половину екрана. Цей підхід використовується в концепції сітки, яка ділить екран на 12 колонок з загальною шириною 100%. Коли ми змінюємо розмір сторінки, сітка та елементи, що її містять, адаптуються до нового розміру. Наприклад, ось як виглядає дизайн вебсайту, який ми створили для нашого клієнта KeepSnap, на ширококутних екранах:
А ось та ж сама сторінка з гамбургер-меню на меншому екрані:
Як ви можете бачити, сторінка адаптується до розміру екрана iPhone, iPad, Android-пристроїв. Ось як виглядає KeepSnap на екрані смартфона:
Використовуйте векторні та адаптивні зображення
Коли використовувати векторні зображення, а коли залишатися на растрових? Відповідь проста: якщо іконки на вебсайті достатньо прості і не містять багато деталей, використовуйте SVG-зображення або спеціальні шрифти іконок. У цьому випадку іконки виглядатимуть добре навіть на дуже великих екранах. Але це не так просто для растрових зображень. Щоб вони виглядали добре на більшості екранів, потрібно використовувати JavaScript або PHP для генерації та відображення зображень, призначених для конкретного розміру екрана.
Це були основи розробки адаптивних вебсайтів. Тепер давайте розглянемо кілька прикладів.
Приклади найкращих адаптивних eCommerce сайтів
Ось адаптивний eCommerce сайт, який ми зробили для Radialka, магазину, що продає товари для кемпінгу та туризму:
Ось той же вебсайт на меншому екрані:
Ви могли помітити, що на меншому екрані два блоки, які раніше були в центрі, тепер розташовані один над іншим. Поле пошуку також розташоване прямо над меню.
Ось ще кілька прикладів адаптивних вебсайтів. Інтернет-магазин, що продає електронні книги:
iOS/OS X ігровий сайт:
Магазин, що продає годинники:
Приклади мобільних адаптивних сайтів
Ось кілька прикладів адаптивних сайтів для смартфонів. Готельна група:
Магазин, що продає краватки:
Компанія, що продає фарби для внутрішніх і зовнішніх робіт:
Нарешті, хочемо зазначити, що розробка адаптивного сайту — це безсумнівно чудовий спосіб зробити ваш інтернет-магазин більш привабливим для клієнтів, які переглядають його на різних пристроях.
Ми, IT-компанія Stfalcon.com, захоплюємося адаптивним веб-дизайном для eCommerce сайтів і будемо раді допомогти вашому сайту стати адаптивним. Натхніться бізнес-ідеями прибуткових онлайн-майданчиків - і давайте разом створимо успішний e-commerce проект!
