Каким требованиям должен отвечать дизайн-макет для адаптивной верстки сайта?

Question

[Артем Грачев]

UPD:
Исходник под ширину экрана 1920, сверстан один в один. Если это открыть на экране 1440 он выглядит неправильно, т.к не адаптировался под это разрешение.
Вопрос вот в чем: обязательно ли отрисовывать исходник для каждого разрешения, как это говорит мой версталщик или можно сверстать все разрешения по одному макету?
Речь не идет о верстке для мобильных устройств, то есть страница сохраняет свой внешний вид, меняться должен только масштаб.

Answer 1

[Александр Флоринский]

1 - Что бы убедиться, сверстал ли верстальщик макет правильно - достаточно наложить скриншот сверстаной страницы (масштаб 100%) к макету в фотошопе ( масштаб 100%) и дать скриншоту 50% прозрачности.
Если все совпадает - то верстальщик сверстал правильно и дизайнер нарисвал не правильный масштаб.

2 - Обычно в 80% случаев нет необходимости рисовать разые дизайны под каждое из разрешений. Исключения составляют варианты, когда дизайн на моб. версии сильно отличается.

3 - уменьшить масштаб бывает сложно, если в дизайне есть куча картинок, которые верстальщик вырезал и использовал в макете.
Например, он вырезал иконку лупы для кнопки поиска. Ее размер соответствует дизайну в макете. Вы просите уменьшить масштаб верстки на 10%.
Верстальщик может уменьшить размер кнопки на 10%, но иконка останется такой же большой. Для этого он и просил вас перерисовать макет.

4 - Я бы, скорее всего, сам уменьшил макет, и перевырезал картинки, но конечно за доп. плату.

5 - И наконец то отвечая на ваш вопрос,

Каким требованиям должен отвечать дизайн-макет для адаптивной верстки сайта?

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

Comments

[Иван Гончаренко]

Если не ошибаюсь для Лисы есть вспомогательный плагин как раз для точной верстки. Фоном накладывается изображение макета и затем то ли поверх то ли на нижнем уровне мы верстаем страницу. Не пользовался этим инструментом, но где-то он мне попадался на глаза.

[Артем Грачев]

1. Так и есть, она сверстала макет один в один с исходником
2. Это именно тот случай, когда рисовать разные дизайны необходимости нет, потому что эти дизайны не будут отличаться друг от друга ничем, кроме масштаба
3. Картинки есть, но их немного и они векторные. Ведь нет проблем с масштабированием вектора?
4. Дизайнер сегодня пару часов перерисовывал одну только главную страницу, точнее уменьшал ее :)

[Александр Флоринский]

Да, если есть векторные изоражения, то проблем с масштабированием нет.
Иногда, на масштабирование уходит много времени.
Но не видя макета или верстки говорить сложно о каких либо сроках.

Иван Гончаренко - плагин называется PixelPerfect , но у меня он дико глючил, по этому я им не пользуюсь, хотя он очень удобный.

[Артем Грачев]

Александр Флоринский: написал письмо в почту

Answer 2

[Иван Гончаренко]

Мы делаем сайт на базе сетки для Бутстрап (фреймфорк для адаптивной верстки). Нам дизайнер специально подгонял элементы макета по сетке. Бутстрап имеет 12 полос, посмотрите здесь - bootstrap-3.ru/css.php

За счет сетки мы увидели как нам надо сделать адаптив без привлечения дизайнера на отрисовку макетов под мобилу и планшет. Лично верстаю сайт под адаптив и я далеко не дизайнер. А если по технологии, то должен быть отрисован каждый вид, опять же согласно сетке. Надо еще посмотреть на ваш макет, чтобы окончательно понять требуется ли дизайн под планшет и мобилу или можно обойтись базовым сжатием, по аналогии большинства сайтов. Ведь не понятно какой это сайт - интернет-магазин, лендинг, блог или корпоративный.

Comments

[Артем Грачев]

Исходник под ширину экрана 1920, сверстан один в один. Если это открыть на экране 1440 он выглядит неправильно, т.к не адаптировался под это разрешение. Вопрос вот в чем: обязательно ли отрисовывать исходник для каждого разрешения, как это говорит мой версталщик или можно сверстать все разрешения по одному макету? Напомню что речь не идет о верстке для мобильных устройств, то есть страница сохраняет свой внешний вид, меняться должен только масштаб.

[Иван Гончаренко]

знакомы с понятием "резиновый сайт"? я вижу что именно о таком сайте мы ведем речь. Верна ли моя мысль?

[Артем Грачев]

Да

[Иван Гончаренко]

В этом случае возникает вопрос о минимальном разрешении экрана для сайта. Резину можно спроектировать без дизайнера. Нужно видеть сам макет чтобы понять какие элементы будут смещаться, а какие масштабироваться по ширине. Есть возможность показать скрин?

[Артем Грачев]

Никакие элементы смещаться не будут, т.к нет задачи сверстать под такой маленький экран, для которого потребуется смещать элементы. Все элементы будут только масштабироваться. Минимальное разрешение под которое нужно сверстать 1024х768. Отправил вам на почту макет и ссылку на верстку

[Иван Гончаренко]

Артем Грачев: получил. очень солидно выглядит. дизайнер молодцом.

[Иван Гончаренко]

Артем Грачев: я окончательно запутался и теперь уже я прошу помощи раскрыть мне глаза. у меня монитор 1920, сжимаю окно браузера и сайт тоже сжимается. на разрешении 1024 все на своих местах, только что в ширине все уменьшилось, а в целом ничего не расплылось - тексты читаются отлично, картинки на месте. --?!--

[Артем Грачев]

Иван Гончаренко: сжимается не сайт, а только пустые пространства, это резиновая верстка. В идеале нужно, чтобы изменялся масштаб по ступеням, например на 1900 масштаб %100, на 1600 %90, на 1280 %85. При этом расположение элементов сохраняется всегда одинаковое. Это будет адаптивная верстка.

Я уже понял, что это можно сделать без проблем, когда есть исходники отрисованные под каждую из ступеней.
Проблема в том, что все эти исходники отрисовывать проблематично, поэтому я думал, что верстальщик может легко и просто сам уменьшить масштаб верстки просто введя команду scale: %90 (я не технарь). И вероятно, что такой способ действительно существует, потому что вот например у сайта www.dohvinci.ru верстка адаптивная и масштаб изображений и всех элементов меняется в зависимости от размера окна браузера (проверьте, любопытно). При этом у них был всего 1 PSD исходник, на котором был отрисован вариант только под 1900. Так как же они подогнали верстку под другие размеры?

[Артем Грачев]

Иван Гончаренко: Вот на примере сайта www.dohvinci.ru
Большой экран: gyazo.com/39bb52ad933658cc0909ce92dff16d1c
маленький экран: gyazo.com/d9ef5719d3d7f9ba05af5947e5489b55

Как видно сайт не просто растянулся, но и его элементы увеличились пропрционально: кнопки, картинки и все прочее. Увеличились они как раз до оригинального размера, который был прорисован в исходнике.
Как же они смогли сделать "сжатую" версию не имея для нее отдельного исходника?
Вариант, что верстальщик в ФШ самостоятельно сжимал макет маловероятен.

[Иван Гончаренко]

как я и предполагал...они заложили интервалы разрешения экрана и в зависимости от размера экрана. Например, уменьшая размер они просто напросто уменьшили размер шрифра с 69px до 39px...и так у них со всеми элементами...ребята задают четкие размеры элементов и всего то

[Артем Грачев]

Иван Гончаренко: хорошо со шрифтами ясно. А что сделали с изображениями? Они загружают те же самые картинки, только задают другой размер? Или они заранее отмасштабировали картинки под маленькую версию?

Answer 3

[Denis Smirnov]

1. Я поправлю, зачем скриншоты тащить в фотошоп, сохраняете design.jpg, кидаете его в корень страницы, заходите на неё, в Chrome скачиваете себе Crosspixel и кликаете на его иконку один раз - вуаля.

2. Если ваш дизайн в ширину 960px, то все в порядке и все десктопы вы удовлетворяете. Но в Вашем случае как я понимаю ширина 1920px. Значит либо вы забиваете на самые популярные разрешения в интернете (1366px), либо переделываете верстку. Отдельно - под забытую часть десктопов, и, возможно, еще одну под мобильники.

Comments

[Артем Грачев]

Вопрос в том, нужно ли дизайн перерисовывать под меньшее разрешение, чтобы сделать верстку под меньшее разрешение?
Или эту работу по масштабированию верстки под меньшее разрешение может выполнить верстальщик без вмешательства в psd макет?

[Denis Smirnov]

Артем Грачев: Можно без вмешательства.

[Артем Грачев]

Denis Smirnov: большое спасибо, теперь все ясно