Адаптивний веб-дизайн. Як буде виглядати інтернет в 2016 році? Частина 1
Для кожного відвідувача вашого сайту потрібно надати кращий користувальницький досвід, з якого б пристрою вони не заходили.
Чи можна бачити сайт з телефону або з комп`ютера, за допомогою миші або сенсорного екрану, він повинен виглядати і функціонувати належним чином.
Це те, що називається адаптивним веб-дизайном. Згідно з рекомендацією Google, такий дизайн ще й добре індексується.
Для створення гарного вигляду сайту на всіх пристроях можна використовувати різні прийоми. Подивіться на надихаючі приклади нижче.
негативний простір
Сайт Vestre має послідовну схему на будь-яких пристроях. Пристосовується не тільки ширина зображення, але і текст. Якщо ширина екрану не дозволяє розмістити текст на зображенні, він переходить на негативне простір.
Логотип в одному і тому ж місці
Epicurrence складається з безлічі елементів, які складаються по-іншому на різних пристроях. Але, незалежно від ширини екрану, логотип знаходиться в тому ж місці - в правому куті.
Портретна і альбомна орієнтація
Альбомний макет найкраще підходить для настільних комп`ютерів, ноутбуків і інших широких екранів, а портретний формат - для планшетів і смартфонів.
Як показує Kuselias, проектування з книжкової або альбомної орієнтацією для кожного пристрою може допомогти передати найнеобхіднішу інформацію, з чітким і ясним розташуванням.
Відео: Веб-Дизайн З Нуля. Photoshop. Заняття Для Початківців
Скролінг або НЕ скролінг?
Сайт Boone Selections на комп`ютері заохочує користувачів прокручувати сторінку вниз. Для цього використовується ефект паралакса.
Але на маленькому екрані користувач може втомитися стільки скролить, тому тут сайт показує трохи найважливішою інформації - що за компанія, і що вона робить.
Для пальців різних розмірів
Розробляючи адаптивний веб-дизайн, важливо подбати про зручність користувача. Зокрема про те, чи зручно буде йому натискати на кнопки на сенсорному екрані. Приклад - Rudy`s Paris. Кнопки і посилання тут досить великі, щоб без проблем потрапити в них пальцем на маленькому екрані телефону.
Незначні зміни макета
Свіжий дизайн сайту Uve виглядає майже однаково на всіх пристроях. Кнопка меню завжди зліва, а бронювання - справа. Тільки на маленьких екранах, щоб не заважати тексту, вони переміщаються вгору .
Визначення числа символів в рядку
Налаштуйте розмір шрифту заголовків і основного тексту для кожного пристрою, забезпечуючи при цьому хорошу читабельність тексту, особливо, якщо він важкий, як на The Forecaster. Орієнтуйтеся на приблизно 60-75 знаків в рядку для комп`ютера, і близько 30-40 для смартфона.
Видалення зайвих візуальних ефектів на невеликих екранах
Зменшення кількості візуального контенту на сайті полегшує завантаження. Візуальних елементів на сайті MRAssociates стає менше на смартфоні і більше на моніторі комп`ютера.
Відео: Уроки веб-дизайну. Адаптивний веб-дизайн. Респонс веб-дизайн
Пропорційна обрізка зображення
На сайті Dans Mon Sac одна і та ж інформація (текст) залишається на різних екранах, а картинка праворуч пропорційно зменшується.
Фокусування на важливому вмісті
Визначте, яка інформація на сайті - найважливіша. Зосередьтеся на ній, коли мова піде про маленькому екрані.
Stephen Caver прибирає чорні квадрати на смартфоні, залишаючи важливі посилання у верхній частині екрану.
Масштабуються стовпці
The Design School by Canva масштабує число стовпців від чотирьох на великому екрані, до двох - на планшеті, і одного - на телефоні.
Це робить макет зрозумілим, текст - читаним. Порядок стовпців також масштабується зі зміною розміру вікна браузера.
Відео: Адаптивний дизайн - Інструкція для дизайнерів від веб-програміста
Однакове число колонок
А ось сайт ETQ-Amsterdam надходить інакше. Тут число стовпців не зменшується - дві колонки залишається для всіх пристроїв. На сайті немає тексту, а лише зображення, тому в масштабуванні немає необхідності.
Анімація або статика
На головній сторінці «звичайного» Five Foot Six - прекрасна анімація. Але на смартфонах і планшетах ви її не побачите.
На цих пристроях анімація може відображатися некоректно, і гальмувати завантаження, тому краще використовувати статичні зображення.
фонове зображення
Фонове зображення може не працювати однаково на всіх пристроях.
Відео: Як Замовити Крутий Веб Дизайн Сайту Недорого у Студії Веб Дизайну або Фрілансера # 1
Edwin-Europe використовує два різних зображення - одне для робочого столу, а інше для смартфонів і планшетів. Якщо обрізати фон, який використовується на великому екрані, картинка стала б незрозумілою.
Крупний план
На сайті 62Models на великому екрані видно дві фотографії з великою кількістю порожнього простору навколо них. Але на смартфонах і планшетах фото стають крупним планом, а порожній простір зникає.
Великі плани на робочому столі виглядали б не так добре, як на смартфоні.
