Адаптивный дизайн. Какими должны быть размеры экранов?

Абсолютный новичок в адаптивном дизайне
Сейчас вопрос про макет, не про верстку. С версткой более/менее всё понятно.
Делать макеты нужно для нескольких размеров экрана. В bootstrap такие размеры экрана:
<768, >768, >992, >1200
Следовательно макеты нужно делать для 320px, 768px, 992px, 1200px. Верно понимаю?

И сразу вопрос про отступы между колонками: какими они должны быть? 320px — 5px, 768px — 10px, 992 — 15px, 1200 — 20px. ? Или другими?
  • Вопрос задан
  • 1880 просмотров
Решения вопроса 2
Serj-One
@Serj-One
i'm sexy and i know it
Если ориентироваться строго на бутстрап, то ответы следующие:
Следовательно макеты нужно делать для 320px, 768px, 992px, 1200px. Верно понимаю?

Нет. Смотреть нужно на размер контейнера. Соответственно, размеры - 1170, 970, 750, 320. При этом не забывая про поля.

И сразу вопрос про отступы между колонками: какими они должны быть?

Отступа между колонками быть не должно. Все отступы, и у контейнера и у колонок, внутренние. Независимо от разрешения равны 15px.
Ответ написан
@dragonesis
Не совсем верно. Все зависит от начального дизайна. Следует учитывать, что требуется. Сегментированная адаптация или респонсиваня. Если сегментированая, то градации бутстрапа вполне подойдут. Если респонсивный, то в идеале продумывать его изначально, т.е. строить карту сжатия на листе и задавать ключевые параметры в ui гайде. Например у вас три блока одинаковой ширины. Ширина задается в процентах на верстке и нужно определить, какова минимально допустимая ширина этого блока. По достижении этой ширины блоки можно расположить друг под другом или же опустить один блок ниже, при этом задав размер им не в ~33% от размера рабочей области, а в 50%. И далее в таком ключе. Почему это важно? Потому что если это не сделать, то верстальщик либо вас доконает вопросами, либо сделает на свое усмотрение, в большинстве случаев плохо.

Сетки размеров для базового представления можно взять те же. Также следует учитывать landscape режим просмотра, в котором достаточно мало остается вертикальной рабочей области. Особенно проблемным местом являются full page страницы.

P.S.
Сегметированный дизайн. Дизайн по строгим ключевым точкам, зачастую с жестким переходом в размерах рабочей области, сейчас применяется редко, в основном на сложно структурированных проектах или проектах с большим количеством жестко позиционированных элементов
Пример:

Респонсивный дизайн. Когда при верстке большая часть контента легко "сжимается" по ширине\высоте, подстраиваясь под размеры рабочей области. Вызывает проблему с неровным разбиением, что вынуждает предугадывать поведение блоков при изменении размеров экрана.
Пример:

UP.
Касательно отступов, то все на усмотрение дизайнера. В том же бутстрапе не составит труда переменить размеры отступов, несмотря на предложенные им 15px, иногда требуется 60, 30, 15 и все в одном макете. Все зависит от вашего умения и виденья
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Dimensi
@Dimensi
Совсем недавно начал познавать верстку.
Я сам верстать начал месяца 2-3 назад, в данный момент верстаю адаптивный дизайн сайтам самым простым способом. Беру отдельно каждый блок и сжимаю окно (в инструментах гугл для это есть возможности), когда вижу, что дизайн слетает, беру отметку на котором все слетает и пишу под нее изменения. Обычно на каждый блок уходит по 4-5 media, зато уверен, что когда буду просматривать на разных устройствах, у меня все будет ок.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы