PSD макеты для responsive верстки?

Question

[Candis]

Начинаю разбираться с адаптивным дизайном. Нужно сделать 3 PSD макета сайта - под десктопы, планшеты и мобильные. С разрешением ещё более-менее понятно для планшетов - 720 или 768, для мобильных - 320 или 480. А что нужно делать с сеткой. Например, беру сетку 1140 для десктопов. Какую брать в этом случае сетку для мобильных и планшетов? Уменьшать кол-во колонок, строить вообще произвольную сетку, или это все не важно для верстки?

Answer 1

[Денис Инешин]

Следуйте простому правилу уменьшения контента в ширину. Грубо говоря:
4 колонки, десктоп -> 2 колонки, планшеты -> 1 колонка, мобилки.
Дальше старайтесь делать это кратно, чтобы было удобно менять сетку на css налету. Ну а дальше все зависит от вашего воображения. Хотя можете следовать некоторым стандартным сеткам, которые легко гуглятся.

Answer 2

[GreatRash]

Знаете, есть такой принцип в адаптивном дизайне - mobile first. Это когда дизайн сперва создаётся под мобилу, а уже затем под большие разрешения. Возможно вам стоит прочитать про него, есть парочка хороших книг на тему.

Answer 3

[Anna Arteeva]

Количество колонок не уменьшается, просто сетка сжимается пропорционально. А там вы выбираете сколько тот или иной элемент колонок будет занимать на заданном разрешении. Я бы посоветовала ознакомиться с гайдлайном бутстрапа (принцип у всех более или менее одинаковый) getbootstrap.com/css/#grid

Answer 4

[Bodarev]

freebiesbug.com/psd-freebies/bootstrap-3-grid-syst...