Всем привет, меня зовут Александр, я являюсь фронтенд разработчиком и в сегодняшней статье хочу рассказать разницу между адаптивным и отзывчивым дизайном и почему ее необходимо понимать ui разработчику.
В моем опыте работы за 4 года мне довелось поработать как и на аутсорс компании, так и на продуктовые. И вот что я хочу сказать по аспекту работы с макетами в этих компаниях: в аутсорс компаниях чаще всего используют отзывчивый дизайн, а в продуктовых — адаптивный. Это связано с нюансами реализации вышеупомянутых дизайнов.
Адаптивный, гибкий и отзывчивый дизайн
Адаптивный дизайн — это дизайн, который состоит из нескольких макетов и под них разработчик делает отдельные страницы под каждый макет соответственно. Следующие размеры, под которые разрабатывают макеты: 320, 480, 760, 960, 1200, и 1600. Способ очень трудозатратный и дорогой в реализации.
Адаптивный дизайн, в основном, разрабатывают компании с крупным для этого бюджетом. Это необходимо, чтобы на каждом устройстве добиться максимально эффективной работы сайта или мобильного приложения. Примером адаптивного дизайна можно увидеть на сайтах крупных банков, например Сбербанк или ВТБ банк, торговых сетей, например Пятерочка или Перекресток, и тому подобные компании.
Также адаптивный дизайн могут использовать и более мелкие игроки, в сценарии, когда у них есть свой основной сайт и они хотят улучшить дизайн на своем сайте. Мобильные приложение здесь тоже может содержать адаптивный дизайн, но как показывает моя практика работы и наблюдения, здесь просто переносят внешний вид мобильного устройства в мобильное приложение. Здесь хочу сделать уточнение: я не разрабатываю лично мобильный приложения и просто описываю свои наблюдения по их разработке. Под более мелкими игроками я имею ввиду бизнес, которому необходим сайт для их работы: какие-либо предприятия, мастерские, небольшие онлайн магазины и т.п.
Отзывчивый дизайн — это дизайн основанный на одном макете, который в последствии подгоняют под остальные используемые размеры. Этот способ реализации макета более дешевый в производстве, потому что разработчику вместо нескольких макетов достаточно разработать один и после этого подогнать его под все остальные необходимые размеры.
Большинство мелких и средних бизнесов сейчас используют как раз отзывчивый дизайн в самом начале создания своего сайта.
В подавляющем количестве сценариев использования заказчики на этом и останавливаются, но как показывают мои наблюдения, это является их ошибкой, потому в дальнейшем, при хорошем развитии сайта, необходимо переходить от отзывчивого дизайна к адаптивному.
Хоть и отзывчивый дизайн дает в начале возможность быстро разработать сайт и выпустить его во всеобщий доступ, также его проще поддерживать, но в дальнейшем такой сайт тяжелее оптимизировать под поисковики и вот здесь на арену выходит адаптивный дизайн со всеми его преимуществами, где под каждую группу устройств можно отдавать соответствующий макет, технические детали оптимизации я опущу в этой статье.
Также считаю нужным упомянуть гибкий дизайн — в моем понимании это разновидность адаптивного дизайна, в котором переходы между макетами указаны в процентах. Это сделано для более плавного перехода между экранами, если этого не сделать, то при изменении окна браузера сайт будет дергаться, в противном случае он будет плавно менять размеры пока не достигнет очередной точки слома, в которой будет подгружен необходимый макет и стили для него.
Дизайн на моем сайте
Не смотря на то, что выше я упомянул, что адаптивный дизайн является лучше, чем отзывчивый, на своем сайте я решил использовать все-таки отзывчивый дизайн, потому что мне его проще поддерживать и разрабатывать, а идеальный дизайн на моем сайте не является главной целью. Для меня более важнее, чтобы сайт имел приличный вид и им удобно было пользоваться, поэтому мой выбор и пал на отзывчивый дизайн.
По экранам я сделал следующие брейкпоинты: 360, 480, 720, 1080, 1366, 1601, 1921, 2560.
Выводы
Итак, что мы имеем на выходе
- адаптивный дизайн — это дизайн, который основан на нескольких макетах и для каждого макета необходимо разработать свою страницу;
- отзывчивый дизайн — это дизайн, который основан на одном макете, под который разрабатывают одну страницу и далее подгоняют под все целевые размеры.
Также при выборе работы важно понимать, как показывает практика, что в продуктовых компаниях используется адаптивный дизайн, а в аутсорсовых — отзывчивый.
Если не вдаваться в крайность, то на сайте нужно применять как и адаптивный, так и отзывчивый дизайн. Мое мнение базируется на том, что часто не понятно какой дизайн на сайте лучше подойдет. То есть мысль заключается в том, что лучше на старте попробовать сделать несколько макетов с отзывчивым дизайном и попробовать их реализовать, а когда будет понятно, что какой-то дизайн подошел вам по требованиям и понравился пользователям остановится на нем и через какое-то время дальше его дополнять адаптивным по мере надобности. Вышеописанный способ позволит избежать лишних трат, но оставит за собой поле для экспериментов, чтобы выбрать наиболее лучший вариант их доступных.
Больше статей в моем блоге. Спасибо, что дочитали и до новых встреч в следующих статьях.