Що таке адаптивний дизайн?
Відео: Адаптивний дизайн сайтів (2015)
Адаптивний веб-дизайн з`явився порівняно недавно. Як поняття його ввів І.Маркотт в 2010 році. Це словосполучення означає, що при розробці та створенні сайту були використані методи і прийоми, які дозволяють переглядати інформацію як на великих, так і на малих пристроях. При цьому у користувача не виникає особливих незручностей.
В даний час в інтернет можна зайти з комп`ютера, ноутбука, нетбука, айфона, айпеда, телефонів за помірно низькими цінами екраном і ін. Робити під кожен пристрій свою версію сайту досить затратно. І в цьому випадку на допомогу приходить адаптивний дизайн.
У число прийомів, які використовує даний напрямок, входять:
- «Підгонка» веб-сторінки під різні розміри і дозволу екрану;
- облік такого явища як тачскрін, яка не передбачає використання мишки (тут також звертають увагу на небажаність меню з лівого боку, тому що користувачі є переважно правшами, що тягне за собою періодичне «зачіпання» меню, коли девайс знаходиться в лівій руці);
Відео: Адаптивний веб дизайн - Що? Де? Коли?
- використання динамічних зображень, які змінюють свої розміри (тут перед розробниками стоять дві основні проблеми - швидкість завантаження і підтримка конфігурації сторінки усіма браузерамі- наприклад, опцію max width 100% в CSS не підтримують деякі версії Інтернет Експлорер);
- зміна конфігурації всього макета сайту при заході на нього з різних гаджетів (фахівці, практикуючі адаптивний дизайн, звертають увагу на корисну опцію CSS media queries, яка дає можливість прописати основний стиль і «уточнити» параметри для різних екранів) -
- робота з контентом, що припускає, що для основних форматів підібрано такий зміст, який легко прочитати без втрати інформативності (наприклад, для телефонних версій великі рекламні фотографії має сенс поміняти на посилання і ін.);
- створення в один стовпчик ресурсів;
Відео: Адаптивний дизайн - Інструкція для дизайнерів від веб-програміста
- переформатування таблиць або подання даних в вигляді діаграм / малюнків;
- формування меню, що випадає;
Відео: Поняття адаптивного дизайну - Відповідь професіонала (+ Практика)
- багаторазове тестування отриманих результатів.
Адаптивний дизайн розвивається досить швидко (разом з ростом числа і виду пристроїв, а також користувачів Мережі). Тому сьогодні можна знайти безліч прикладів сайтів, виконаних з застосуванням цієї методики, а також програми, що дозволяють створити «гумові» сітки або згенерувати готові сайти, маючи тільки основні знання html і CSS.
Все про дизайн сайтів можна дізнатися, пройшовши кілька етапів, серед яких можна відзначити роботу з графічними редакторами, а також вивчення основ верстки, яке дозволяє не тільки намалювати красиву картинку і шрифти, а й мати уявлення про те, як деталі можуть бути «перенесені» на екран засобами програмування. Така комбінація навичок дозволяє уникнути зайвих «переробок» і нерозуміння з боку тих, хто буде реалізовувати дизайнерські задумки. Чи не будуть зайвими професійну художню освіту і знання в області фотографії. А «аси» знають ще іноземні мови, тому що переважно на англомовних ресурсах публікуються нові цікаві статті та методики, в тому числі з мітками «Адаптивний дизайн».
