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

Question

[gintasui]

Добрый день,на собеседовании получил задание сверстать одну страницу (типовой лендинг) "согласно идеологии адаптивного дизайна". Проблема в том, что в PSD находится только дизайн сайта для 1920х1080, а если мне не изменяет память, для адекватного RWD нужен дизайн для каждого из брейкпоинтов дизайна.
Как поступать в такой ситуации? Должен ли я сам придумать дизайн, оставить все как есть или я просто не понимаю этой самой "согласно идеологии адаптивного дизайна"?

Заранее спасибо.

Answer 1

[Anton Filippov]

именно поэтому дизайнер должен быть еще и верстальщиком, а верстальщик - дизайнером.
Там по сути и дизайна даже нет, скорее нужно базовое представление о UX.

Как обычно делаю я? Верстаю full-width макет, и начинаю уменьшать ширину браузера попиксельно, появляется косяк - рефакторю этот момент или пишу для него media query. И так до 320(сейчас чаще до 400) пикселей.

Answer 2

[bro-dev]

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

Answer 3

[Пётр Попов]

Как вариант просто начать верстать "mobile first". Сначала одним столбцом делаешь стили для основных блоков. Потом начинаешь постепенно (по мере увеличения ширины экрана) позиционировать эти элементы. В зависимости от проекта можно либо сетки всякие использовать, либо обычными 'float' и 'position: absolute' делать layout (позиционирование). Брейкпоинты можно из того же Bootstrap взять. Мне кажется, тем людям, которые дали тебе задание, даже понравится, что ты всё сделал без лишних вопросов. А если им что-то не понравится в мобильной версии, то всегда можно сослаться на отсутствие PSD-макета или ТЗ по мобильной версии.

Answer 4

[x404]

В таких случаях я делаю 20-30% наценки на проект. Так-как появляется дополнительная возня + тестирование адаптивности.
Ну и разумеется делаешь все на свой вкус, придерживаясь дизайна мобильных приложений.

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

Answer 5

[Vlad]

Обсудите с заказчиком. Предупредите, что можете сделать адаптивку сами, но переделка может стоить времени и денег, поэтому стоит уточнить всё «на берегу»

Comments

[gintasui]

Это собеседование а не работа. Хотя может вы и правы, и таким образом они отсеивают народ.