Що таке адаптивний дизайн?
Адаптивний дизайн сьогодні розглядається як сучасний стиль інтернет-сторінок, здатний забезпечити комфортний перегляд текстового та медіа змісту веб-сторінки в будь-якому браузері на різноманітних пристроях, як стаціонарного (ПК, телевізори, холодильники), так і мобільного характеру (смартфони, планшети).
Створюючи інтернет сайт з адаптивним дизайном переслідується мета створити якусь універсальність сайту для всіх користувачів, але особливо віддається перевагу зручності мобільного перегляду, оскільки сучасні інтернет-користувачі більшу частину часу займаються інтернет за допомогою смартфонів і планшетів.
Для прикладу можна взяти сторінки реєстратора доменних імен Ник Юей (NIC.UA), який також надає якісні послуги по розміщенню сайтів і інших інтернет-проектів.
Кожна сторінка сайту компанії адаптована для комфортного перегляду та отримання інформації за допомогою будь-якого устройчтва здатного виводити зображення на екран. Адаптивний дизайн, впроваджений на сторінках NIC.UA, показує як змінюється розташування основних елементів сайту в завимимости від пристрою:
Монітор 23 дюйма
Планшет 9,7 дюйма
Смартфон 4 дюйма
Необхідність створювати інтернет-проекти згідно концепції адаптивного дизайну з’явилася не відразу. До цього призвело поява на ринку безлічі пристроїв, які став використовуватися для виходу в інтернет, а також посилення вимог лідерів пошукового ринку до сайтів про комфортність відображення вмісту сторінок для мобільних пристроїв (принцип «Mobile first»).
Адаптивний і чутливий дизайн сайту
Сучасний веб-дизайн повинен включати в себе чутливі елементи, які автоматично підлаштовується під ширину вікна браузера. Коли екран пристрою або ширина браузера зменшується, дизайн змінюється, щоб створити такий вигляд сайту, який краще підходить для меншого екрану. Зображення стискуються, колонки, які були розташовані горизонтально можуть розташовуватися вертикально одна під одною, а меню може змінитися на стандартний для мобільних пристроїв значок.
Одна з різновидів чутливого дизайну – адаптивний дизайн, який визначає тип пристрою, з якого відвідується сторінка і забезпечує оптимізовану функціональність спеціально для невеликих пристроїв. Такий дизайн вимагає додаткових зусиль у програмному коді, щоб відтворити правильну поведінку роботи сайту для користувачів з різними пристроями.
Приміром, в адаптивних шаблонах компанії RocketTheme, застосовуються CSS класи, приховують або відображають елементи сторінки, в залежності від використовуваного пристрою. Наприклад, з допомогою класу hidden-phone модуль або віджет буде прихованим, коли користувач використовує пристрій з браузером шириною 480px або менше. Це дозволяє приховати віджети і модулі, які погано відбиваються на мобільному пристрої.
Всі хочуть, щоб дизайн сайту для мобільних пристроїв був приємним і сучасним, при цьому не жертвуючи дизайном для великих екранів. Для цього в програмному забезпеченні сучасних сайтів існують механізми динамічного побудови структури сайту, в залежності від конкретного пристрою.
Атрибути форм введення і адаптивний дизайн
Поля вводу, в яких користувач повинен внести конкретну інформацію, таку як ім’я, адресу електронної пошти або пароль можуть бути проблематичними для мобільних користувачів, коли не встановлені елементи авто заміни (autocorrect) або автоматичного перекладу першого символу слова у верхній регістр (autocapitalize).
Якщо ви хочете трохи полегшити роботу користувача, використовуйте переваги атрибутів для полів вводу. Наприклад, установка autocapitalize=words робить заголовної першу літеру кожного слова. В полях, де потрібно ввести справжні ім’я та прізвище користувача, це буде автоматично замінювати перші літери цих слів, що полегшить роботу для користувача.
Відключення автокорекції є ще однією доброю практикою, коли запитується така інформація, як імена й адреси електронної пошти, які часто включають слова, у словнику автокорекції. Це дозволяє уникнути дратівної неправдивої авто заміни, яка стала загальним розчаруванням для користувачів останнім часом.