Как верстать сайты большей ширины, чем твой экран?

Question

[minazavr]

Всем привет , возник такой вопрос, есть psd 1600px ширины , который мне нужно сверстать , но к сожалению ширина psd больше , чем мой экран , из за этого верстка становиться не удобной , так как я верстаю основываясь на размеры указанные дизайнером в фотошопе , из за чего padding(и) и margin(ы) отображаются некорректно на моем устройстве , хотя при просмотре с устройства в >=1600 px ширины , все довольно таки хорошо. Подскажите пожалуйста что делать , не разу не верстал из psd макеты большей ширины чем мой экран. Спасибо.

Answer 1

[Андрей Верх]

Вёрстка должна отталкиваться от ширины в 1000px. И если вдруг есть макет в 1600px, то должен быть и макет под 1000px. Если нет, то дизайнер идиот.

А к вопросу как верстать - media queries, как и для любых адаптивных сайтов.

Comments

[minazavr]

Я сверстал немало адаптивных сайтов с media queries и bootstrap, но никогда не верстал сайты больше 1366 px, то есть , если макет превышает ширину твоего устройства , то должна быть версия меньше шириной , все так ?

[Андрей Верх]

minazavr: "Твоё устройство", тут не играет роли. Ширина 1000px, это стандарт. И она всегда должна быть. А если есть только макет 1600px, то встаёт вопрос о том здоров ли дизайнер.

Если у вас вопрос чисто технический, то нужно нормальный монитор покупать, разумеется. FullHD как минимум. Иначе придётся верстать с CTRL+Scroll.

[minazavr]

Андрей Верх: спасибо

[Андрей Верх]

А так, верхняя граница, это примерно 1400px по ширине. Больше, уже редко делают.

[iBird Rose]

Андрей Верх: никто уже не рисует дизайн под все устройства, если только проект не сравним с каким нить веб приложением, где можно всего на странице, и где реально нужно продумать куда воткнуть тот или иной элемент. щас все дизайнеры рисуют только декстопную версию и мобильную - а промежуточные оставляют на усмотрение верстальщика. и это правильно. потому что нафига заморачиваться дизайнеру рисовать целый макет под 1000px потратив на это несколько часов, когда верстальщик то же самое адаптирует прописав пару строк в медиа запросах. а с бутсрапом вообще ничего не придется писать - 80% шанс что на 992 - ничего не надо будет править, если изначально сверстано было правильно.

[Андрей Верх]

iBird Rose: И что же, по вашей версии, нужно рисовать, если не макет с шириной в 1000пикселей?

[iBird Rose]

Андрей Верх: если макет шириной 1000 - значит и рисовать 1000. тут вопрос был в другом. у автора макет 1600 - и отрисован он соответсвенно в 1600. и я сказал о том что нет надобности отрисовывать такой макет в 1000

[Андрей Верх]

iBird Rose: Первую часть вообще не понял...рисовать макет с макета?!
То есть, для вас макет в 1600px - нормальный и вы его можете спокойно сверстать?

[iBird Rose]

Андрей Верх: а почему не нормальный то? ты щас сидишь на тостере - тут 1440 ширина. щас дофига сайтов с такой шириной. потому что fullhd уже повсюду. прогресс не стоит на месте.
да хоть 1900px и мобильную версию если дадут - спокойно все промежуточные сверстаю

[Андрей Верх]

iBird Rose: А опыт у вас такой есть? Или это всё предположения?

Я, имел дело с такими макетами. И даже 1200px, верстать напряжно, т.к. не всегда можно просто уменьшить все отступы и ширину. А уж в 1600, деть куда-то 1/3 сайта, без заранее подготовленного макета...Или вы думаете, что можно всегда создать гамбургер и туда пол сайта запихать?

Хороший дизайнер, всегда готовит 3варианта макета для адаптива - мобильный, планшетный и десктоп. А если вам дают один и тот в 1600px, то тут уже не смотря на него, можно сказать, что это трэш.

[iBird Rose]

Андрей Верх: опыт есть. я дизайнером изначально был. потом уже верстать научился и фронтендером занялся. может поэтому легче.

Answer 2

[iBird Rose]

как я понял автор просто хочет получить ответ - верстай масштабируя браузер)

Comments

[osmolka]

аналогично поступаю :)

Answer 3

[Владимир]

1) www.adobe.com/ua/creativecloud/extract.html бесплатній сервис, которій позволяет получить падинги, шрифты, размеры с PSD не на глаз
2) Режим адаптивной верстки в браузере позволяет выставлять разрешение больше чем у монитора и сам масштабирует картинку

P.S. добавлю ресурсы чтобы выбрать соотношения сторон
screensiz.es/phone
mydevice.io

Answer 4

[Андрей Хохлов]

Купите монитор, лучше сразу 2560 шириной.
Потому что хоть Сергей и дал правильный совет, работать так не очень удобно.

По поводу макета.
Если стоит задача с 1600px макета (особенно если в нем контентная часть на всю ширину, а не ~1000) сделать адаптивную вёрстку - просите много денег и условие что как сделаете так и будет. И то если уверены что вывезете.
Присоединяйтесь, используйте, предлагайте дополнения - требования к psd-макетам

Answer 5

[Antony Bark]

единственно вменяемый способ вёрстки, если монитор меньше, чем макет:

1. из фотошоп сохраняем макет 1:1 в jpg\png
2. вставляем его подложкой

html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

3. далее верстаем как обычно, подложка неплохо помогает видеть несовпадения вёрстки с макетом, а для просмотра вёрстки, не входящей по ширине в окно, тягаем гориз.скролл*

* т.к. у нас принудительный гор.скрол, то для оценки ошибок вёрстки по ширине даём red, если косяк - справа появится красный край
** учитываейте, что body и остальные слои поверх подложки на время вёрстки обязательно надо background-color: transparent

Answer 6

[Константин Давыдов]

Если не требуется Perfect Pixel, то например в Google Сhrome, можно включить Инструменты разработчика, там активировать Device Toolbar и изменить Zoom на 75 или 50%-ов, так чтобы сайт стал влезать в экран монитора.
С другими браузерами, думаю аналогично.

Answer 7

[Михаил Еникеев]

Верстай через bootstrap ну или подобным фраймворком

Answer 8

[xmoonlight]

Простое правило:
Отталкиваться нужно от минимальной ширины Desktop-макета.
Он состоит из суммы минимальных размеров по-ширине всех колонок, а они в свою очередь равны максимально возможному по-ширине элементу внутри них.
Ширина по-умолчанию для Desktop'a: 1024px

Answer 9

[Фёдор Ананин]

Можно долго спорить каким должен быть макет и должен ли быть вообще.

Если ширина вашего экрана меньше ширины макета, то есть два пути:
1) Попросить заказчика/дизайнера сделать макет в 1000-1300;
2) Работать с масштабированием в браузере.

Можно просто зажать Ctrl и крутить колёсико, а можно зайти в инструменты разработчика и там уже вписать нужное разрешение.

Если от вас требуют адаптивную/резиновую вёрстку, то достаточно будет пару раз посмотреть как всё работает в 1600, а остальное время работать в 1366.

Если использовать любой фреймворк, то всё в разы проще. Например, фреймворк моего написания умеет вплоть до 8К экранов.

Comments

[minazavr]

что за Fremework ?

Answer 10

[dom1n1k]

Купить нормальный монитор