Сколько необходимо макетов для адаптивного сайта, для каких ориентаций (для смартфона и планшета) и какие сетки должны быть?

Question

[KseniyaArt]

Здравствуйте, коллеги. Разъясните, пожалуйста, некоторые моменты по макетам для адаптивного сайта и сеткам для макетов. Делаю макет под адаптивный сайт впервые и сразу же столкнулась с рядом вопросов.
1. Сколько макетов нужно?
2. Под какие разрешения должны быть макеты?
3. Для смартфонов и планшетов делается только портретная версия или landscape тоже нужен для обоих устройств?
4. Если для экрана 1920 у меня макет имеет сетку 1880, то какие еще нужны макеты которые будут на экранах до планшетной версии?
5. Может ли сетка иметь колонок больше чем 12? К примеру могу ли я для сетки 1880 использовать 16 колонок.
6. Можно ли сверстать макет по такой модульной сетке с помощью bootstrap?

Еще наткнулась на данную статью, где рассказывается о модульных сетках, к примеру говорится о сетке для 1440 из 20 колонок, а как тогда такой макет верстать на bootstrap, если он предполагает 12 колонок?
https://habrahabr.ru/company/rambler-co/blog/261679/

Помогите разобраться, очень хочется научиться делать макеты для адаптивных сайтов правильно и чтобы верстальщик не проклял )))

Answer 1

[Сергей delphinpro]

Я считаю, трех макетов вполне достаточно (я был бы счастлив, если бы мне хотя бы столько предоставляли, на деле дают один и крутись как хочешь, а адаптив нужен :) ). Мобильный - 320, планшет - 768 и десктоп - 1280. Сейчас чаще макеты приходят под 1920. Иногда их сложно адаптировать под меньшую ширину. Первый два макета, как правило, это упрощенный вид сайта, с тач-ориентированным интерфесом.
При этом хорошо бы учитывать ретину, и рисовать макеты либо в двое большем разрешении (320*2, 768*2, 1280*2), либо использовать смарт-объекты (в фотошопе), либо рисовать в иллюстраторе.
Портретных макетов достаточно, в промежуточных значениях нормальный верстальщик всегда сделает красиво.
Сетка должна быть по возможности. Какая она будет, неважно. Делайте столько колонок, сколько нужно для вашего дизайна. Но тут тоже не надо фанатизма. 12-16, максимум 24 (хотя это наверное перебор). С точки зрения кода, описать любую сетку не составит труда, лишь бы она была.
Бутстрап довольно гибкий в настройке, число колонок может быть любым, как и расстояния между ними. Я чаще всего встречаю 12- и 16-колонные сетки.

Comments

[KseniyaArt]

Спасибо большое за ответ! :)