Какую ширину и высоту использовать при создании макетов для адаптивного сайта?

Question

[Inacheinache]

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

Answer 1

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

https://github.com/andrey-hohlov/psd-templates-req...

Comments

[Odisseya]

Спасибо за толковый мануал. Помогает сохранить нервы и сэкономить время :)

Answer 2

[Odisseya]

Главное, делайте макет по модульной сетке — верстальщику будет проще понять логику адаптации контента (например, можно взять за основу 12-ти колоночную стетку Bootstrap'а).

Какой аудитории будет больше на сайте? В зависимости от этого выбирайте подход к отрисовке макета: десктоп-first или мобайл-first. Если есть возможность, сделайте макеты для трёх состояний: мобильный (300—600px), планшетный (600—960px) и десктопный (960+px) — для каждой типовой страницы и стайл-гайд для разных состояний элементов. Подробнее: Требования к PSD-макетам > Адаптивный дизайн.

Пример набора контрольных точек:

• 320 px (смартфон, в том числе iPhone до 6 включительно).
  
• 768 px (планшет в портретной ориентации).
  
• 1024 px (планшет в альбомной ориентации, ноутбук).
  

Comments

[Антон Гук]

960 или 1024 уже маловато для десктопа - на FullHD актуально 1170.
А вот планшеты скоро умрут окончательно Сейчас это в среднем около 10% трафика.

[Odisseya]

Антон Гук, у меня в практике типично, когда дизайнер отдает под верстку макет с шириной контентной области 960–1000px (сам макет может быть шире — 1170, 1280). И договаривает, что на фулл-скринах центруем (чаще всего) или добавляем справа/слева колонку.
По рунет-статистике самые ходовые разрешения: 640x480, 1366x768, 1920x1080. На деле, большой разброс, надо учитывать конкретный случай и конкретную аудиторию. В моей последней верстке (инфосайт с сео-трафиком из Гугла) — 70% мобильных юзеров, 25% десктопных.

Answer 3

[Ivan Bogachev]

Ответов на данную тему много, но мне пока не удалось собрать все в единый алгоритм и порядок...

Есть один тайный способ, который гуру UX бережно хранят уже много лет. И простой и сложный одновременно, подходящий для любых сайтов. Только избранный может познать всю мощь идеи, которая в него заложена... Называется он "контент-фёрст дезигн". В переводе со англо-славянского "смотри на контент и делай так, чтобы его было удобно потреблять на любых устройствах". Нет конкретных разрешений, под которые что-то нужно подгонять. Напротив - стоит стремиться делать так, чтобы везде было хорошо. Получится два состояния страницы - хорошо, получится десять - ну значит десять.

Comments

[Ivan Bogachev]

P.S.: И да, если компоненты отрисованы в виде отдельного стайлгайда, со всеми размерами и модификациями, то потенциальные десять макетов не нужно рисовать полностью пиксель в пиксель, можно только набросать расположение элементов.

[Ankhena]

Ivan Bogachev,

"контент-фёрст дезигн"

прочитала конфет
типа "сделай из сайта конфетку"
:)

Answer 4

[ой всё]

фантазировать можно долго и много, но по факту для реальных бизнес-проектов делают 2 разрешения: декстоп под 1280px неретиновых экранов и усредненный телефонный размер типа 375px

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