Адаптивная верстка, сколько должно быть макетов?

Question

[lindim3000]

Добрый день, при передачи дизайна версатльщику, сколько макетов должно быть 1 или 3 (вид под 1200, 768, и 480). Если макет один и он адаптивный, то как понять как должен вести себя тот или иной блок при верстке?

Answer 1

[Дима Паутов]

Зачем столько макетов?
Если шаблон адаптивный, то он сразу должен быть резиновым и тянуться.
К примеру, возьмите свой шаблон и начните уменьшать окно браузера, как только появляется полоса прокрутки(снизу) или верстка начинает ползти, вот там первый размер для @media запроса и так далее (в хроме консоль показывает ширину окна при его уменьшении. Ну или плагины для браузера). Ваш шаблон сам скажет вам, когда нужно перестраивать блоки. Вам лишь нужно смотреть, на какой ширине экрана нужно писать @media запрос.

Пользуясь этим правилом, вам может понадобиться всего лишь 3 макета, а то и вообще обойтись без них.
1) Основной(большой для PC) - 1280 px
2) Средний(для планшета) - 1024 px
3) Маленький(для смартфона) - 480 px

Answer 2

[Andrey Bazykin]

У нас дизайнер рисует макеты для всех необходимых разрешений, PSD верстальщик получает самого большого макета, а остальные макеты в JPG для наглядности. Актуальные на сегодняшний день разрешения:

320 px — Мобильные устройства в портретной ориентации
480 px — Мобильные устройства в альбомной ориетации
640 px — Небольшие планшеты
768 px — Планшеты в портретной ориентации
1024 px — Планшеты в альбомной ориетации
1280 px и более — настольные компьютеры

Верстальщик (если достаточно компетентный), то может сложить макет из самого большого разрешения в самое маленькое, если макет соответственно расчитан на адаптивную верстку.

Comments

[Виталий Киренков]

Я бы посоветовал 480, заменить на 568 (iphone landscape).

[Andrey Bazykin]

@DeLaVega откуда у айфона такое разрешение? Даже если учесть что дисплей retina то, получается 480 x 2 = 960 (iphone landscape)

[Виталий Киренков]

@FAT IPhone 5

[Andrey Bazykin]

@DeLaVega точно, я даже не подумал, что он шире, спасибо!

[Виталий Киренков]

@FAT не за что =)

Answer 3

[Тим]

Не меньше двух. Чем больше макетов, тем больше гемора. С двумя макетами у верстака больше меневра.

Answer 4

[Trow_eu]

зависит от макета, на некоторых сразу, невооруженным глазом, видно сетку и понятно, с другими кроме 3х макетов нужно еще и описание/комментарии.