Якщо ви вже чули про Ітана Маркотта і респонсивний дизайн, ви прийшли за адресою. Якщо ж ні — то тим паче, ця стаття для вас необхідна. Давайте розглянемо коротку історію респонсивного дизайну.
Походження респонсивного дизайну
Жив собі і кодив хлопець на ймення Ітан Маркотт. Він знав багато важливих слів, як от фіксований дизайн чи мобільна революція, але ці терміни його не влаштовували, і, як багато інших користувачів мобільного інтернету, йому вже у печінках сиділи проблеми з відображенням сайтів на різних екранах.
“Так далі продовжуватися не може”, — вирішив Ітан одного дня і почав писати статтю.
Стаття називалася “A List Apart”. Вона побачила світ у травні 2010 року і включала термін “респонсивнивний дизайн”, після чого Ітана почали вважати батьком нового напряму веб-розробки. Основна його ідея була адаптовувати сайти до різних екранів.
Однак наполегливий хлопець Ітан Маркотт вирішив не зупинятися і навіть надрукував книжку через рік — у 2011. Робота “Респонсивний веб-дизайн (Коротка книжка для людей, які роблять вебсайти)” стала заповітом для тих, хто поділяв принципи Ітана.
Про що йдеться у книжці Ітана Маркотта "Респонсивний веб-дизайн"?
Основна ідея респонсивного дизайну — це один сайт із одним URL і контентом, який змінює розміри й організацію відповідно до розширення екранів.
Це працює завдяки трьом основним компонентам: гнучкі макети, Media Queries і адаптивні медіафайли.
Гнучкі макети — це переважно гріди — сторінки, які верстаються у вигляді карток, так що їхню послідовність і розмір можна легко міняти.
Media Queries — це властивість, яка змінює елементи сайту за шириною і висотою, роздільною здатністю тощо. Зокрема, найпоширенішими є такі рішення екранів: 1920, 768 і 460 пікселів, тож сторінка сайту існує в чотирьох чи трьох варіантах, які по-різному відображаються залежно від типу девайсу.
Адаптивні медіафайли — це зміна розмірів не лише в межах шаблону, а й автоматичне розширення чи звуження відео чи картинки — ви можете протестувати це, всього лиш рухаючи вікно сайта мишкою.
Респонсивність дизайну переважно закладається під час створення макету сайту, з якого може розпочинатися робота, але частіше цей етап слідує за дизайном. Веб-розробники створюють респонсивні сторінки і прописують відповідний код.
Нововведення швиденько перейняли веб-розробники всього світу, і хоч його ім’я легендою не стало, респонсивний дизайн нині — догма.
Чому вашому сайту необхідний респонсивний дизайн?
51% американців заходять в інтернет через мобільники, тоді як 42% використовують настільні комп’ютери.
25% для інтернету використовують тільки мобільні пристрої.
69% користувачів таблетів купують через таблети кожного місяця.
Тож облишмо Ітана у спокої — хай продовжує розвиватися як веб-дизайнер і спікер (адже він також досвідчений тренер) і давайте опановувати веб-дизайн. Прямісінько зараз тисячі девелоперів у світі кодують респонсивні сайти, і ви також можете опинитися серед них.