Responsive design.Первый заказ. Как быть с макетом?

Question

[lollypop88]

Здравствуйте. Я только недавно занялась разработкой макетов сайтов.

Сейчас возникла следующая ситуация. Я сделала макет с рабочей областью 960 px. Дизайн заказчику понравился, однако он прислал следующий ответ:

Нам нужен responsive. Мы планируем использовать https://next.tailwindcss.com/docs/container. Поэтому хотелось бы увидеть, как макет будет работать с такими данными?

Вопрос: значит ли это, что мне нужно разработать отдельные макеты под каждый из указанных размеров? Или мне нужно сделать макет с рабочей площадью 640 пикселей? Если последнее, то какой должен быть размер холста?

Comments

[Антон Спирин]

Заказчика спросить не пробовали?

[Сергей delphinpro]

Как договоритесь.
Можно нарисовать три макета - 320 / 768-920 / 1200, а дальше верстала доделает.
Можно два - мобильный/десктоп.
Можно нарисовать под каждое требуемое разрешение.
Разумеется с количеством макетов должна расти стоимость работы.

[Сергей delphinpro]

Мне макеты в одном разрешении приходят - десктопном. Адаптирую сам.

Answer 1

[profesor08]

Разводи на макет для каждого брейкпоинта, с соответствующей оплатой. Хорошо будет всем, тебе и тому, кто этот макет будет верстать, и тому, кто будет все интегрировать.

Comments

[lollypop88]

он это и просит. попрошу оплату.дело в том, что я не могу понять, с какими размерами рабоатть. Должна ли контентная площадь тоже в размерах меняться? Например, при экране 1280 пх сколько должна быть рабочая область?

[profesor08]

lollypop88, почему бы это не спросить у заказчика, раз он просит под тот фреймворк, значит он с ним знаком и может ответить на вопросы?

[lollypop88]

profesor08, не хочу показывать, что я новичок...(((( вдруг это вещь, которую я была обязана знать. Откровенно говоря..

[profesor08]

lollypop88, значит выбери свою ширину контента. Величину меньше чем ширина окна.

Answer 2

[Александра]

Там в документации к этому фреймворку написано, от каких величин отталкивается верстальщик
screens: {
'sm': '576px',
// => media (min-width: 576px) { ... }

'md': '768px',
// => media (min-width: 768px) { ... }

'lg': '992px',
// => media (min-width: 992px) { ... }

'xl': '1200px',
// => media (min-width: 1200px) { ... }
},

Comments

[Александра]

Min-width: минимальная ширина для данного размера.
За максималку беру 1920 пикселей (я и верстаю и дизайню).
А так, вполне нормально спросить требования верстальщика к макету.
Удачи с первым заказом)