Добрый день. Для сайта возникла необходимость сделать рекламные баннеры, которые бы были адаптивны под разные разрешения. Каждый баннер выглядит примерно как фоновая картинка с какими-ниубудь абстрактными элементами (которых не жалко при обрезании границами экрана) с текстом, который задаётся через CMS и текстом, который уже есть на картинке, а так же с одной или двумя кнопками., которые так же задаются через CMS. Насколько я понимаю, это не совсем здоровый подход (делаю не с нуля, переделываю чужое) и в связи с этим у меня возникло нескольо вопросов.
1) Стоит ли текст (слова, цифры, проценты, разные символы, простые геометрические фигуры), который есть на картинке изначально накладывать на голый фон как svg или это утяжелит загрузку? И делают ли вообще так? Возникла мысль, что так элементы хотя бы не будут наезжать друг на друга и, чисто теоретически можно будет их расположить по своему усмотрению для мобилки, планшета и десктопа.
2) Как обычно делают подобные баннеры? Беглый осмотр сайтов Сбера и ещё нескольких больших контор, у кого увидел баннеры, показал, что там есть, фон, который соответсвует фону картинки, которая на него наложена и картинка, благодарая этому, вне зависимости от разрешения не пересекается с текстом.
В целом, будет интересно почитать какие-нибудь кейсы на эту тему, спасибо
Все зависит от дизайна. Ваше абстрактное описание можно оценивать по разному. Оптимальный вариант, текст и кнопки расположить в разметке сайта, тогда проблем с адаптацией не будет и в svg нет необходимости.
Виталий Першин, дело в том, что это слайдер с баннерами. И у каждого отличается дизайн, разные кнопки, их расположение, фон, картинки-элементы на этом фоне.
Средний
