Какой должна быть ширина PSD макета для монитора 1920px?

Question

[avr1972]

Мне важно, как сайт будет выглядеть на разрешении монитора 1920px. Скажите пожалуйста какой должна быть рабочая ширина psd макета? Сейчас вроде стандарт 1170px при общей ширине 1920px. Но при этом не cовсем понятно, как сайт будет выглядеть на мониторе 1920px. Подскажите пожалуйста, как правильно решить эту проблему? Сайт адаптивный.

Comments

[vladimir_html]

У меня 1920 моник, скриншот отправить?)

[sim3x]

1920px+

[avr1972]

sim3x, Так какой должна быть рабочая ширина макета для 1920?

[sim3x]

avr1972, Какой должна быть ширина PSD макета для монитора 1920px?

[Ankhena]

Мне важно, как сайт будет выглядеть на разрешении монитора 1920px. Скажите пожалуйста какой должна быть рабочая ширина psd макета?

Логично, любой, больше или равной 1920.
Также не забудьте про полосу прокрутки и что в разных браузерах она может быть разной.

[avr1972]

Ankhena, Вот и вопрос какой должна быть рабочая ширина макета, с учетом прокруток? Если ориентируемся на разрешение 1920?

[Ankhena]

avr1972, Открываете любой сайт, например, в хроме на 1920 мониторе или в окне соответствующего размера. Скрините. Открываете в фотошопе (ну или в чем хотите) и измеряете все что нужно.
Меняете хром на ФФ. Повторяете.
Процедуру проводите со всеми интересующими вас браузерами.

Как бонус: изменяете ширину браузера и смотрите на поведение сайта. Повторите так с десяточком разнообразных сайтов.

Иначе не поймете.

[Johny Smith]

Ankhena, да, 100%, лучше всего смотреть как это сделано у других, лайк вам

[avr1972]

Ankhena, Странно, а я первый такой? Больше никто никогда не рисовал?

[Johny Smith]

avr1972, все используют bootstrap, смотря какой дизайн

[avr1972]

Olek1, bootstrap - Здорово, но безумно скучно, хочется чего нибудь нового

[Johny Smith]

avr1972,

безумно скучно, хочется чего нибудь нового

креатива в вёрстке почти не бывает, покажите дизайн, что вы собрались сверстать?

[Ankhena]

avr1972,

Странно, а я первый такой? Больше никто никогда не рисовал?

Ну конечно, вы уникальны.
Это ваш макет, мы не знаем какие задачи и каким способом вы собираетесь решать.

Откройте бутстрап и подумайте почему, например, ширина экрана 1280, а точка слома 1170, 1024 и 980 и т.д.?
Вы, кстати, не обязаны делать также как в бутстрапе. Это только повод для размышлений.

Начните с начала и попытайтесь понять прочитанное выше в комментариях и в ответах.

До кучи еще можете посмотреть статистику использования браузеров.

[avr1972]

Ладно, всем большое спасибо. Выпендриваться не буду, пошел рисовать на 1170

[Алексей Сегодин]

avr1972, вот ответ на ваш вопрос: В каком разрешении рисовать макет на Retina?
Если вкратце, то не имеет значения в каком разрешении рисовать, главное чтобы вы потом смогли объяснить верстальщику что и как должно выглядеть. А если вопрос в растровых картинках, то готовьте их в нужном разрешении отдельно и отдавайте верстальщику в отдельном архиве.

Answer 1

[Евгений Вольф]

Подскажите пожалуйста, как правильно решить эту проблему? Сайт адаптивный.

"Правильно" - это когда вёрстка выглядит так же, как макет.

Как макет N будет выглядеть на разрешении Y - Вы можете проверить очень просто - экспортируете макет в картинку, например PNG, потом открываете её в любом граф. редакторе, вьювере или прямо в браузере.

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

Comments

[avr1972]

А кто нибудь рисует в том числе например 1900px? Обычно примерно так 1170, 980, 480, 320.

[Евгений Вольф]

avr1972, обычно когда рисуют 1170 - то и на мониторе 1920 контентная часть сайта располагается по центру монитора, т.е. точно так же, как Вы видите макет у себя на экране. "Резиновые" макеты сейчас практически не делают, т.к. не всем и не всегда удобно работать с большой контентной частью сайта, особенно на мониторах которые больше чем 1920... З.Ы. Надеюсь, я правильно понял Ваш вопрос.

[avr1972]

Евгений Вольф, https://www.citilink.ru/ А у этого сайта, разве не резиновый макет?

[avr1972]

Евгений Вольф, Разве не лучше смотрится, когда на мониторе 1920 сайт занимает всю ширину, а не только 1170?

[Johny Smith]

avr1972,

Разве не лучше смотрится, когда на мониторе 1920 сайт занимает всю ширину, а не только 1170?

в вьюпорте ещё присутствует скролл, автор вопроса косвенно на это намекает

[Евгений Вольф]

avr1972,

Разве не лучше смотрится, когда на мониторе 1920 сайт занимает всю ширину, а не только 1170?

А Вам лично какой сайт больше нравится, Ситилинк или ДНС? Мне например, цены больше нравятся в Ситилинк, а дизайн сайта в ДНС :D

[avr1972]

Евгений Вольф, Вот здесь о вкусах не спорят, но мне больше ситилинк. Ужасно надоели сайты по центру на 1170.

[4X_Pro]

avr1972, вообще. обычно делают так: сайт фиксированной ширины (почему — вам объяснил Евгений Вольф), а оставшуюся часть заполняют каким-нибудь фоном (либо повторяющимся, либо просто большой картинкой), чтобы не смотрелся слишком пустым. И по-хорошему, в макете должно быть показано, как этот фон выглядит.

[avr1972]

Евгений Вольф, Очень хочу растянуть на 1920 естественно с учетом прокрутки

[Johny Smith]

avr1972, вёрстка дело неблагодарное - сил уходит много а денег можно заработать мало

[avr1972]

вёрстка дело неблагодарное - сил уходит много а денег можно заработать мало

Olek1, С этим полностью согласен. А если не смотря на это, есть такое желание. Ну просто жутко надоели выровненные по центру сайты на 1170

[Евгений Вольф]

avr1972, ну... flexbox думаю Вам в этом поможет, без проблем.

[avr1972]

Евгений Вольф, Да меня не верстка волнует, какой ширины макет делать?

[alex-1917]

avr1972, у ситилинка есть пара нюансов и говорить что у них сайт на всю ширину - небольшое лукавство:
на экране 1920 - слева фикс колонка с категориями на 220px - это РАЗ
справа блок с ценой и всякой не ахти важной инфой на 520px - Это ДВА
и совсем справа вообще пустой кусок...
фактически рабочая ширина таки 1060px - просто прокрутите страницу любого товара чуть ниже и перед вами будет все тот же блок шириной 1060, который вам так надоел. думаете это случайно?)) нет, все рассчитано и 99,999% людей имеют именно такой охват зрения!
а крутить головой по всей ширине монитора 1920px никто не будет, это приводит к мигрени))) тем более если монитор как например у меня 27дюймов)))

[avr1972]

alex-1917, Интересно, а зачем тогда монитор больше 1200? Если смотреть все равно только на 1160?

[alex-1917]

avr1972, можно два окна открыть - редактор кода слева и ютуб с поррнушкой справа - удобно же!!)))

[Евгений Вольф]

avr1972,

Да меня не верстка волнует, какой ширины макет делать?

Так Вы макет рисуете? Т.е. Вы - дизайнер? Рисуйте тогда либо 1170, либо 1900 (1920), как Вам удобнее + прикладывайте описание, как макет должен "резиниться" и пр. логику, которая на Ваш будет правильной/нужной для данного макета.

[xtala zen]

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

Шта?

[Евгений Вольф]

xtala zen, автор спрашивал, "как посмотреть, как готовый шаблон по макету N будет выглядеть на мониторе", я предложил ему наиболее простые варианты. Или о чем Вы? :)

[xtala zen]

Евгений Вольф, о том что масштабировать PNG не лучшая идея.

[Ankhena]

xtala zen, для того, чтобы дизайнеру понять как его макет будет выглядеть в браузере - нормальная идея.
Какая лучше?

[xtala zen]

Ankhena, лучше на каждое разрешение отдельный макет в псд. Некоторые сейчас делают в одном файле с помощью областей монтажа, но поговаривают что таким деятелям дают п@зды за гаражами. Совсем не факт, что макет выполненный под широкий формат должен выглядеть так же в масштабировании под маленький. Вернее совсем не факт на сегодняшний день когда адаптивность де факто стала стандартом.

[Евгений Вольф]

xtala zen, никто же и не предлагал масштабировать PNG. Я предлагал просто сохранить его и открыть в браузере. Почему именно PNG и почему именно в браузере:
0. Для "полного эффекта" можно макет (PNG) поставить на фон страницы, подсунуть через PerfectPixel, воткнуть как картинку и т.д.
1. Формат PSD браузером обычно не открывается, по этому PNG
2. Можно посмотреть как макет выглядит с учётом скролла
3. Можно посмотреть в разных браузерах (с разной шириной скролла)
и т.д.

[Ankhena]

xtala zen, Мы вообще говорим не о том, как лучше рисовать макеты и сколько их должно быть, а о том как лучше дизайнеру понять как его макет будет выглядеть в натуре.
А для этого png вполне адекватный вариант.

[Евгений Вольф]

Ankhena, в этом плане я полностью с Вами согласен :)

Answer 2

[Andrew]

Вообще то вы сами решаете какая будет рабочая область и отступы по бокам, при скачивание bootstrap все регулируеться под вас.
И вообще не стоит бояться выходить за сетки в bootstrap