Адаптивний веб-дизайн
Ринок інтернет-технологій повсюдно захоплюють різноманітні мобільні пристрої. Відвідувачів сайтів з телефонів, смартфонів та планшетів стає все більше. Деякі аналітики навіть пророкують, що мобільний трафік скоро перевищить трафік зі звичайних комп'ютерів. У світлі подібних тенденцій нерозумно ігнорувати цей сегмент інтернет-користувачів та розробляти сайти, непристосовані до сучасних гаджетів. Раніше найкращим вирішенням цієї проблеми було створення окремої мобільної версії сайту. Але тоді всі портативні пристрої були невеликих розмірів, а зараз їх екранні дозволи рясніють різноманітністю. Мобільний сайт, орієнтований на маленькі екрани, буде виглядати непривабливо на планшеті з fullHD роздільною здатністю. У зв'язку з цим з'явився новий підхід у розробці сайтів – адаптивний веб-дизайн .
Опис підходу, етапи розробки адаптивного сайту
Адаптивний дизайн — це технологія розробки сайту, яка має на меті зручність перегляду сайту на будь-яких дозволах. Це дозволяє не витрачати час на створення декількох версій сайту, а розробити один проект з універсальною версткою, який добре відображатиметься на будь-якому пристрої, навіть наручному годиннику та телевізорі на всю стіну.
Сайт з адаптивною розміткою вимагає відмінного традиційного підходу до процесу розробки. Необхідна тісна взаємодія веб-дизайнера та фронд-енд розробника, крім того, збільшується кількість етапів проектування. Тут типовий ланцюжок "прототип - дизайн - верстка - програмування - тестування" не такий ефективний.
Спочатку повинен створюватися прототип з урахуванням поведінки всіх елементів інтерфейсу по всьому спектрі екранних дозволів. Потім слідує верстка прототипу і його тестування - на цьому етапі чернетка обкатується, стає видно реальну поведінку блоків при зміні розміру вікна, виробляються найкращі рішення в розміщенні та перебудові елементів інтерфейсу.
Потім слідує етап естетичного оформлення готового інтерактивного прототипу: створення графічних елементів, типографіки і т.д. Відверстаний інтерфейс доповнюється цим оформленням, після чого настає черга комплексного тестування. На етапі тестування слід приділити велику увагу юзабіліті, гнучкості інтерфейсу та коректності відображення. Після всіх виправлень та уточнень можна приступати до серверного програмування. Нарешті настає черга остаточного тестування та наповнення контентом.
Не можна не згадати про чудовий підхід "Mobile first". Як можна зрозуміти з назви, інтерфейс проектується, починаючи з пристроїв з маленькими екранами, а потім прогресивно модифікується разом із збільшенням доступного екранного простору. Обмеження простору дозволяє сконцентруватися на найважливішому та не дає заповнити місце непотрібним функціоналом, інтерфейс опрацьовується більш детально та якісно.
Техніки адаптивної верстки
Гумова верстка
Проста і найпопулярніша техніка, при якій ширина сторінки задається у відсотках, таким чином, контентна область стискається в міру зменшення ширини екрана, доки не перебудовується в одну довгу колонку.
Media queries
Media Queries - це частина стандарту CSS, яка дозволяє застосовувати стилі, ґрунтуючись на розмірі області перегляду. За допомогою їх можна переносити блоки в різні частини сторінки, або повністю змінювати їх візуальне відображення.
Приклад:
/* початок css */
Тут базові стилі для мобільних браузерів, які не підтримують Media Queries.
@media only screen and (min-width: 320px) {
Стилі для пристроїв з мінімальною шириною екрана 320 пікселів.
}
@media only screen and (min-width: 768px) {
Стилі для планшетів у портретному режимі.
}
@media only screen and (min-width: 1000px) {
Стилі для планшетів у ландшафтному режимі, нетбуків, ПК тощо.
}
/* кінець css */
Кожна з наступних ітерпретацій успадковує попередню, тому немає потреби дублювати стилі для кожного діапазону дозволів. Зі збільшенням ширини екрану просто додаватимуться додаткові властивості, а деякі перевизначаються при необхідності.
Адаптивні зображення
Для зображення задається максимальна ширина 100%, таким чином, воно ніколи не вилізе за межі батьківського блоку і стискатиметься залежно від його ширини. Крім того, останнім часом з'явилася велика кількість технік створення адаптивних зображень, які дозволяють підставляти різні зображення залежно від заданих умов. Це означає необхідність готувати кілька версій кожного зображення: для великих екранів велика картинка, для маленьких – маленька.
Переваги та недоліки адаптивного веб-дизайну
Переваги:
- СЕО
Такий підхід дружній для пошукової оптимізації: використовується одна URL-адреса для сторінок, що позбавляє зайвих редиректів і дублювання контенту, полегшує процес індексації. - Юзабіліті
Інтерфейс сайту не змінюється радикально, як у випадку з окремою мобільною версією, а м'яко адаптується до різних дозволів. Грамотне проектування адаптивного сайту дозволяє зробити такий перехід непомітним для користувача. - Доступність контенту
Вміст сайту залишається незмінним незалежно від пристрою, тому користувачам завжди доступна повна інформація на сайті. У мобільній версії сайту часто урізують контент та функціонал – це згубна традиція, заснована на помилковій думці, ніби потреби мобільних та звичайних користувачів інтернету чимось відрізняються.
Недоліки:
- Неможливість перегляду повної версії сайту
Коли сайт поділено на мобільну та настільну версії, користувач отримує можливість вибрати, яку версію переглядати зі свого пристрою. Адаптивна верстка не дозволяє здійснити такий вибір, і користувач може просто залишити сайт, якщо інтерфейс сайту спроектований невдало. - Низька продуктивність
Сьогодні типова сторінка сайту може важити від 1Мб і вище, тому швидкість роботи при повільному інтернеті може бути дуже незадовільною. Теоретично такого обсягу можна уникнути при розробці адаптивної верстки, проте на практиці це не завжди вдається.
Адаптивний веб-дизайн добре підходить для сайтів, орієнтованих на контент - блогів, онлайн-журналів тощо. Для сайту зі складним інтерфейсом може бути доцільніше розробити окрему мобільну версію або мобільний додаток. Цей підхід вимагає високої кваліфікації як дизайнерів, так і розробників, уважного проектування та детального тестування. Все це звичайно значно збільшує терміни та вартість розробки, але на виході ми отримаємо якісний веб-сайт та вдячних користувачів.
Приклади адаптивних сайтів
