У чому різниця між респонсивним, адаптивним чи оптимізованим для мобільних дизайнів сайтів
Поняття адаптивного та респонсивного дизайну сайту схожі, і обидва є синонімами поняття оптимізованого для мобільних… так? Не зовсім. І ми розповімо, у чому їх відмінності.
Алгоритм Mobilegeddon - закономірна відповідь на зміни у перевагах браузерів. Люди найчастіше користуються мобільними браузерами. Важливі моменти мобільного сайту: уникати використання Flash, що не використовується на мобільних девайсах; текст має бути досить великим, щоб можна було прочитати його без зуму; посилання та кнопки повинні розташовуватися на певній відстані один від одного, щоб їх легко натискати.
І хоча всі зараз використовують мобільні сайти, мало хто розуміє різницю міжреспонсивним,адаптивнимтаоптимізованимдля мобільних дизайнів.
Оптимізація vs. Респонсивність
Перегляньте мобільний сайт Spirit Airlines. Це просто зменшена версія робочого столу.
А тепер подивіться на сайт H&M, чия мобільна версія зовсім інша. Шаблон десктопного сайту не можна якісно перетворити на мобільний. На маленькому екрані ці шість вкладок угорі наповзали б один на одного і були б надто дрібними, щоби прочитати їх.
У респонсивних сайтів є ті ж характеристики, що й у оптимізованих під мобільні. Наприклад, навігаційний простір. Але є й суттєві відмінності. Респонсивні сайти спочатку заточені під мобільні ОС, на яких розташований динамічний контент, який змінюється в залежності від пристрою, з якого сайт проглядається.
Іншими словами, кожен респонсивний сайт оптимізованопід мобільні пристрої. Але не кожен мобільний сайт – респонсивний. Якщо ви хочете протестувати респонсивність сайту, не переглядаючи його з різних девайсів, просто змініть розмір свого браузера, щоб побачити, як ваш сайт змінюється при цьому.
Продовжуючи показувати на прикладах сайтів Spirit та H&M, ми відкриємо обидва сайти під моїм браузером, перш ніж змінимо розмір екрану. При зменшенні розміру екрана можна помітити, як вкладки на верху сайту H&M розташувалися ближче один до одного, щоб поміститися на екран.
Респонсивність vs. адаптивність
Респонсивні та адаптивні сайти схожі теоретично, але на практиці мають низку відмінностей. Обидва змінюють розміри залежно від браузера або девайса.
Респонсивні сайти пристосовуються до будь-якого шаблону. Адаптивні сайти – лише до певного. Спочатку сайт перевіряє ширину браузера, щоб передати контент, який поміститься на сторінку. Іншими словами, адаптивний сайт має кілька різних шаблонів, які використовуються в залежності від розміру екрана браузера.
Ця гіфка від компанії Froont, латвійського стартапу, що спеціалізується на респонсивному веб-дизайні, на якій чудово показано, у чому різниця між респонсивним та адаптивним дизайном:
Steve Madden — добрий приклад бренду, який має адаптивний сайт. Залогіньтесь на сайті компанії з робочого столу та змініть розмір екрану.
Ось, як виглядає сайт, коли браузер нормальної ширини:
Ось, як виглядає браузер трохи стислий. Деякі вкладки зникли, але логотип виглядає також.
При іншій ширині екрана змінився розмір шрифту. Тепер шрифт логотипу значно збільшився.
Що краще длянас?
Кожен має бути сайт, оптимізований під мобільні пристрої. Не кожному потрібний адаптивний чи респонсивний сайт. Але якщо трафік на сайт надходить переважно з мобільних аксесуарів, то такий дизайн - річ першої необхідності.
Адаптивний сайт - зробити простіше та дешевше. Оскільки зображення просто зберігаються у зменшеному форматі, такі сайти завантажуються швидше.
Але якщо ваш сайт складна структура, вам потрібно подумати про респонсивний дизайн. Особливо це стосується веб-сайтів інтернет-магазинів. Подивіться на десктопний сайт H& на ньому так багато дрібних деталей, які просто можуть загубитися на маленькому екрані.
Плюс, якщо ви розповідаєте людям про важливість респонсивного дизайну, очевидно, що і у вас також має бути респонсивний сайт.