@stero
впитываю мудрость

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

UPD:
Исходник под ширину экрана 1920, сверстан один в один. Если это открыть на экране 1440 он выглядит неправильно, т.к не адаптировался под это разрешение.
Вопрос вот в чем: обязательно ли отрисовывать исходник для каждого разрешения, как это говорит мой версталщик или можно сверстать все разрешения по одному макету?
Речь не идет о верстке для мобильных устройств, то есть страница сохраняет свой внешний вид, меняться должен только масштаб.
  • Вопрос задан
  • 7023 просмотра
Пригласить эксперта
Ответы на вопрос 3
@flor_master
Могу верстать, могу не верстать.
1 - Что бы убедиться, сверстал ли верстальщик макет правильно - достаточно наложить скриншот сверстаной страницы (масштаб 100%) к макету в фотошопе ( масштаб 100%) и дать скриншоту 50% прозрачности.
Если все совпадает - то верстальщик сверстал правильно и дизайнер нарисвал не правильный масштаб.

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

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

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

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

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

За счет сетки мы увидели как нам надо сделать адаптив без привлечения дизайнера на отрисовку макетов под мобилу и планшет. Лично верстаю сайт под адаптив и я далеко не дизайнер. А если по технологии, то должен быть отрисован каждый вид, опять же согласно сетке. Надо еще посмотреть на ваш макет, чтобы окончательно понять требуется ли дизайн под планшет и мобилу или можно обойтись базовым сжатием, по аналогии большинства сайтов. Ведь не понятно какой это сайт - интернет-магазин, лендинг, блог или корпоративный.
Ответ написан
Groov3
@Groov3
Full stack web developer/Performance marketing
1. Я поправлю, зачем скриншоты тащить в фотошоп, сохраняете design.jpg, кидаете его в корень страницы, заходите на неё, в Chrome скачиваете себе Crosspixel и кликаете на его иконку один раз - вуаля.

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

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

Войти через центр авторизации
Похожие вопросы