Адаптивний дизайн сайту, Данило Фімушкін

Адаптивний дизайн сайту

Адаптивний дизайн - це дизайн сайту, який підлаштовується під роздільну здатність пристрою, з якого виконано вхід на сайт. Розповім про принципи проектування адаптивних сайтів та навіщо потрібні різні версії сайтів. Завантажте PSD-вихідник адпативного сайту.

Як виглядає адаптивний сайт

Є один і той же сайт, але на різних пристроях виглядає по-різному:

Як адаптивний сайт виглядає на різних пристроях

Адаптивний дизайн, коли ваш сайт підлаштовується під різні дозволи. Важливо розуміти, що у різних пристроях дозвіл різний і треба намагатися, щоб на всіх пристроях ваш сайт відображався коректно та зручно. Для цього є два принципи, яких потрібно дотримуватися при створенні адаптивного дизайну: Принцип 1. Спочатку мобільні Принцип 2. Адаптивний контент

Як зрозуміти адаптивний сайт чи ні

Блог перебудувався версії для ПК на версію для планшета під час стиснення браузера

Такі моменти переходу називають контрольною точкою чи точкою перегину. Якщо стискати далі (мінімальний розмір 460 пікселів), то можна побачити, як сайт відображатиметься на айфоні. Є кілька точок перегину, у яких змінюється дизайн. У такий простий спосіб можна визначити адаптивність сайту. Адаптивний дизайн - коли ви робите не одну версію сайту, яка відображається скрізь однаково, а кілька версій під різні пристрої.

За принципом «спочатку мобільні» потрібно починати з розробки версії для мобільного пристрою (наприклад, айфона), тобто з розміру макета 460 х 960. Другий розмір для планшета 768×1024, третій — роздільної здатності ноутбука 1280×802. Останній контрольний розмір – 1600×992. Під ці дозволи нам потрібнорозробляти наші дизайн-макети.

Створення адаптивного дизайну сайту у Фотошоп

Проектування сайту для настільного ПК. Створюєш макет як звичайно з використанням модульної сітки та 12 колонок.

Макет адаптивний дизайн сайту для ПК та ноутбука

Далі створюєте новий файл з роздільною здатністю 768 х 1024 рх. Перебудовуєш макет сайту так, щоб його було зручно дивитися у такому форматі. Наприклад, винеси меню нагору. Слід врахувати, що на планшетах люди працюватимуть не мишкою та стрілочками, а натискатимуть пальцями. Тому варто зробити кнопки більшими і не робити посилання близько один до одного. Звичайним меню сайту вже не дуже зручно користуватися, тому краще зробити розкривається. Розмір карток товару не варто змінювати у розмірах, можна зменшити їх кількість у рядку. Тут у сітці вже не 12 колонок, а 9.

Адаптивний дизайн сайту для планшета

Адаптивний контент

Сервіси для тестування адаптивного дизайну

Додаткова інформація щодо адаптивного дизайну

Не втрачай гроші клієнта через незручний сайт, створюй адаптивні сайти і заробляй більше 🙂