Как дизайнеров научили неправильно верстать сайты
Холиварная тема — должен ли веб-дизайнер понимать в верстке. Предлагаю подискутировать в комментах💬 А в статье расскажу, почему верстка бывает неправильная, даже если сайт хорош по дизайну. Чем это грозит сайту (спойлер — долгая загрузка и плохое ранжирование поисковиками) и дизайнеру (спойлер — дольше собирать проект и делать адаптацию). Как дела…
В тильда раздражает невозможность отображения hi-res image. Они пишут, что ширина jpg или png у них 1680 (можно включить 1920, но уточняют, что все-равно ужмется до 1680 px, wtf) и что конвертирует в webp автоматически, но это работает не всегда.
Проблема: изображения размыты на Retina дисплее. img 1680px на разрешении 1440x2 (2880px) теряет четкость, особенно касается изображений типа скриншот (интерфейсы), про фото я не говорю, тк не юзаю. Также слетают сетки (настройка адаптивной сетки сделана на главной) добавляешь zero жмешь в настройки сетки он создает НОВУЮ и сбрасывает ту, что ты ранее настроил. Приходится просто записывать в блокноте что ты настроил для всех трех брейкпоинтов.
После этого происходит понимание в отличии проф тулзов и просто конструкторов.
Иду на сайт pinkman.ru в кейс ВТБ, вижу high-res изображение, скачиваю, сморю на соотношение сторон: по ширине 2400 px.
Поэтому в тильда с ограничением в 1680 все как у окулиста.
Действительно Тильда уменьшает разрешение картинок до 1680 по ширине. Taptop не меняет разрешение автоматически, картинка остается в исходном размере. Но разрешение можно уменьшить в настройках, если не нужна большая картинка. В webp мы конвертируем автоматически, это позволяет уменьшить размер файла без изменения разрешения.
С адаптивами в Taptop тоже все гораздо лучше, чем в Тильде. Все четко настраивается на авто-лейаутах, ничего не слетает и не надо руками перетаскивать. Так что профессиональные инструменты рулят)