Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks,

о чём вообще можно с вами спорить, если у вас у обоих акцент на верстку,

Не надо со мной спорить. Вопрос прочитайте. Спрашивают как делать качественно и на что обратить внимание, а вы пишете, что сойдет и тяп ляп.

Вообще вы как из олдов должны больше всех понимать что раньше так и верстали, без доп монитора. В 2 направления, вверх и в низ, да даже и сейчас так верстают, вы что думаете я один такой перец ? не смешите

Всё верно. И с "каким есть" моником и из картинок в jpg и из сомнительных psd. Так у нас и не возникает вопроса, как имея 1600 верстать на 1920+. И для этого не нужно просить рисовать убогий дизайн.

нахер он мне сдался если я регулярно ей не занимаюсь

Разумеется. Поэтому и не понятно почему вы решили так яростно участвовать в этой теме и отстаивать позицию непрофессионала.
Собственно, поэтому прекратим эту дискуссию. Думаю, ТС уже и так хватит сказанного для выводов.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks, угу и повезло плиточнику, у которого есть плиткорез. А иначе будем класть только целыми. Или наломаем как получится.

делать 1920 потому что у како-то конкретного верстальщика моник 1920 ?

Да наплевать какой моник у верстальщика. Хоть вообще без него, вслепую.

если у вас там бывает так что делают аж 5-6 размеров

Качественные дизайнеры да, делают именно так.
А тема как раз об этом.

поверьте вам крупно повезло

Верю. Только к везению это не имеет никакого отношения.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks, не делать 1920 потому что у какого-то конкретного верстальщика моник 1600?
Т.е. разрабатывать дизайн исходя не из целевой аудитории, а моника верстальщика?
Сильная логика. Вы чего?
Ладно бы ещё исходя из характеристик устройства клиента, ведь это он деньги платит и заказывает музыку.

Но даже если у верстальщика есть 1920, то он всё равно должен верстать так, чтобы и стареньких смартфонах в 300px и на 4к и на 8к всё выглядело нормально. Правда, и дизайнер должен постараться учесть разнообразные размеры вьюпортов.

Современные качественные дизайнеры рисуют по 5-6 размеров.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

Конечно, мы сверстаем всё, что вы нарисуете или скорректируем так, чтобы выглядело прилично.
Но сразу вам спасибо за то, что думаете о том, как сделать комфортнее.

Можете посоветовать ресурсы, видео и/или статьи, где мой вопрос описан максимально подробно и по делу?

Я частенько за завтраком слушаю разные дизайнерские блоги. В частности, Алексея Бычкова, у него специфическая манера изложения, кому-то нравится, кому-то нет. Но мне нравится смысл его речей и забота о том, чтобы верстальщик не проклял дизайнера. И это как бальзам на мою душу верстальщицы.
https://vk.com/alexeybychkov
Попадется кто-то ещё с аналогичными материалами, поделитесь, пожалуйста.

Понимать возможные размеры экранов

Тут всё просто с ответом: любые :)
Но это не просто для дизайнера.
Раньше рисовали либо десктоп либо три размера.
Но между 320 и 768 или 768 и 1440 (не говоря уж про 1920) огромная пропасть и куча блоков там не смотрятся. И выходит, что вы отдаете отображение на этих промежутках на волю верстальщику. Хорошо, если у него есть вменяемое чувство прекрасного.
Поэтому сейчас рисуют по 5-6 размеров.
При этом делают это так, чтобы верстальщику было понятно что делать и дальше, на 1920+. Куда тянуть фоны и где и из чего их раздобывать.

Макеты одной страницы на разной ширине должны быть рядом, а не на разных страницах Фигмы. Даже если во время рисования было удобно все десктопы нарисовать в одном месте, все мобилки в другом.

Верстальщику важно понимать "что хотел сказать дизайнер" - откуда и по какой логике что берется.

Компоненты - обязательно используйте компоненты. Тогда верстальщик спокойненько тоже сначала их сверстает и потом будет переиспользовать.

Также мы будем благодарны за здоровые названия слоев. В идеале, чтобы их можно было использовать при экспорте (но это скорее налаживается при длительном сотрудничестве). Или хотя бы просто понятные, при просмотре дерева.

Состояния интерактивных элементов - не парьтесь, верстальщик с каким-то опытом просто поставит всем opacity 0.8. Верстальщик без опыта добавит пачку свежеизученных эффектов. Возможно, каждой кнопке достанутся уникальные эффекты.

И ещё куча нюансов, про которые прямо сейчас не вспомнились или кажутся совсем банальными.

Почему html,vs code.в текстовом файле открывается весь набранный код?

1.1 Включите отображение зарегистрированных типов файлов в винде.
1.2. Создавайте файлы прямо в VS Code. Это и быстрее и .txt не вылезет. Хотя внимательность в любом случае нельзя выключать.

2. Установите Live Server для VS Code и запускайте через него.
https://marketplace.visualstudio.com/items?itemNam...
Есть некоторые вещи даже в статических сайтах, которые не будут работать без сервера. Например, маски или SVG спрайты.
Кроме того, лайв сервер будет обновлять страницу в браузере при сохранении кода в редакторе. (Только не включайте автосохранение)

Как показать взаимосвязь полей формы?

Сергей, я бы сменила теги вопроса на Дизайн. Причем тут CSS и HTML? У вас же не с ними проблема.

Как добиться срабатывания transition для checkbox?

Если что, радио и чекбоксы можно стилизовать напрямую. А также их псевдоэлементы. Если добавить appearance: none

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

А что мне делать если вы не говорите как это сделать.

Можно пойти на фриланс. Ведь у вас, я так понимаю это задание по работе.

Но в любом случае, придется начать с того, чтобы найти и убрать противоречие в этой фразе:

код который расширит красный див на всю высоту body, розовый див растягивает body больше вьюпорта а красный див не растягивается на всю высоту розового дива и body.

Вряд ли без этого кто-то сможет вам помочь. Я лично без понятия как растянуть блок по высоте body, не растягивая его по высоте body.

Или переформулировать вопрос так, чтобы было понятно чего вам нужно. Можно со скринами или видео.

Если один блок со скроллом, а другой без, то мне больше нравятся гриды.

Но и учитывайте, что сейчас ночь между двумя выходными.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

Можете дать код который...

Это на фриланс.

Просто очень срочно надо но ничего не получается

Тем более на фриланс

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT, возможно, имеет смысл осознать разницу между height и min-height.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

Мне надо растянуть красный div на всю высоту скролла body

Сейчас так и есть. Body на высоту вьюпорта и красный блок на всю высоту body и, соответственно, равен вьюпорту.

Это сделано для того чтобы в ios не было сильного скролла за пределлы бавузера

И как оно? Помогло?
Это решается либо нормальной версткой либо overflow на ближайшем родителе с подходящей шириной.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,
Хорошо сформулированный вопрос залог успеха. Пока не понятно, какой блок куда не растягивается. Вы сказали, что body 100vh и соответственно, красный блок тоже. Первый div 150vh. В браузере так и вижу. Что именно не так?

А вешать overflow на body, во-первых, дурной тон, во-вторых, на мобилках по крайней мере в части браузеров не сработает.

Как исправить эффект при наведении?

MaxKeany, разбейте фон на две части. Вокруг инаута и лейбла.

Как исправить эффект при наведении?

MaxKeany, а и правильно, зачем всю информацию сразу выдавать? Пусть они тратят время на первую часть, а потом будем вносить уточнения.

Как исправить эффект при наведении?

Отличный вопрос, содержащий в себе ответ.
Вы задаете псевдику ширину 100%. Чтобы эта ширина в итоге оказалась по контенту, то и родительский li должен быть не на ширину списка, а по контенту.
А ширина контента это width: fit-content.
Либо за счет свойств родительского флекса.

Ещё, у вас нет никакой анимации и не ясно зачем вообще псевдо, можно просто задать фон для li.

Кстати, в современном мире не нужен спан для стилизации чекбоксов и радио. Из можно задать appearance: none и дальше стилизовать напрямую.
А даже если их по-старинке скрывать, то всяко не через display: none, а доступно с помощью visually-hidden (гуглится)

Чему равна высота и ширина элемента .content в следующем коде?

Самый простой способ, если лениво читать теорию, открыть всё это дело в браузере и посмотреть. Будет 200х150.

Как думать:
1. Узнать что там с box-sizing будет в итоге. Которое из значений останется.
2. Аналогично разбираете про border и padding. Которые из значений применятся по каскаду.
3. Понять влияют ли они на размеры исходя из результатов п.1
4. Посмотреть какие свойства влияют на высоту: тут высота и максимальная высота. Выяснить кто победит, учитывая, что значения с виду противоречат другу другу. Не забыть про результат п3.
5. Аналогично с шириной.

Почему не работает slidesPerView auto?

DZHAMBUALT, поэтому и нужна песочница, чтобы было видно что ещё есть.
С другой стороны, зато самостоятельно разобрался.

Как сверстать нестандартный грид блок?

starkingdom,
Да вот из древнего вопроса
https://jsfiddle.net/Ankhena/8ps6g5ur/

Как сверстать нестандартный грид блок?

Три колонки, три строки. Большие карточки занимают по 2 строки (span 2).
Что именно у вас не получилось?
Если нужно, чтобы повторялось, то соответственно, через nth-child.

Почему не работает slidesPerView auto?

Тут, наверное, два глобальных варианта:
1. Делать минимальную песочницу с иллюстрацией проблемы.
2. Самостоятельно смотреть в стили.

Из того, что вы пишете видно, что картинка и её блок должны быть квадратными. Но на скринах всё не так. Значит, какие-то ещё стили влияют на это поведение. Но их вы нам не показали.