Почему адаптивная верстка не совпадает с psd-макетом?

Question

[safbek]

Всем привет! Не могу никак понять, почему верстка не совпадает с psd-макетом?Накладывал сверху псдшник. Есть различия. Причем переводил кое-какие блоки в пх для сравнения. Все равно не то. Насколько точно должен совпадать?Также буду благодарен за конструктивную критику моей верстки. Вот ссылка на работу. codepen.io/safbek/pen/BLBOxd
Это моя первая работа-не обессудьте.

Comments

[safbek]

Писал второпях. Вопрос в том, насколько точно вы подгоняете адаптивную верстку? какие расхождения допустимы? и страницы недоделана под некоторые разрешения. плюс форма. Пока не решил установить просто ширину или высоту или можно(нужно ли)использовать флексбокс. Есть какие-нить решения?спасибо всем за участие

Answer 1

[Ankhena]

Пока в вопросе нет ссылки, напишу так:

1. Про флексбокс.
Это прекрасный набор свойств. Если Вам не нужны древние браузеры, то Вы получите удовольствие от работы с ними :)
caniuse.com/#search=display%3Aflex

2. Про соответствие макету адаптивной верстки.
Во-первых, надо смотреть точно на том разрешении для которого нарисован макет (версия макета).
Во-вторых, могут быть различия в шрифтах у браузера и фотошопа.
В-третьих, все ли в макете нарисовано четко по пикселям или есть какие-то размытые тени или подобное.
В-четвертых, насколько у дизайнера все четко отцентрировано. Бывает, например, стоят иконки с подписями вроде бы по центру блоков. Но на самом деле дизайнер их там на глазок отцентрировал. А Вы в макете пишете center без всяких разночтений.

Дальше надо смотреть в чем именно расхождения.

Comments

[safbek]

Извините. По спешке даже ссылку вставить забыл. Исправил. как все сложно с этой точной подгонкой. Может с практикой придет( а вот ссылка... не могли бы оценить
codepen.io/safbek/pen/BLBOxd

[Ankhena]

safbek: а картинка макета? Можно в обычном jpg, не важно.

Из того, что сразу видно: горизонтальная прокрутка начинается примерно с 523 точки, т.е. будет на маленьких экранах.
Смотрите тут вьюпорты viewportsizes.com

[Ankhena]

safbek: Дальше это шрифты на мелких экранах: там картинка с ежиком и текст, при сжимании браузера там уже вообще ничего не разобрать.

Также на мелких input поиска слипается с кнопкой. Внизу в новостях аналогично.

На всех: что с иконками соц.сетей, надо аккуратненько вырезать.

[Ankhena]

safbek: Кнопка Send тоже прилипла к предыдущему полю.
Разная ширина у input и textarea. И в данном случае хорошо бы убрать возможность горизонтального растягивания у textarea. Вертикальное - под вопросом.

[Ankhena]

safbek: Не убираются placeholder при попадании фокуса в поле.

input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:-moz-placeholder {
color: #48595b;
}
input::-webkit-input-placeholder {
color: #48595b;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:-moz-placeholder {
color: #48595b;
}
textarea::-webkit-input-placeholder {
color: #48595b;
}

[safbek]

Ankhena W: спасибо за разбор. да, у меня много еще недоделок. а формы внизу вообще недоделаны. кажется, я писал в комментарии к своему вопросу. Как вы думаете, стоит устанавливать ширину через флекбокс или просто установить ширину и высоту им в процентах?2. нет ли какого-нибудь руководства по форм для маленьких разрешения? не мого понять менять надо дизайн форм или просто расположить внизу с отсупами. поис и внизу add. 3. "там картинка с ежиком и текст, при сжимании браузера там уже вообще ничего не разобрать.".Как решается это? например, у меня нав в сайдбаре. если уменшить шрифт, то вообще не разберешь. Если ж разрешить перенос меню, то вообще каша. Как решается это маленьких экранов? Благодарю за участие. Буду рад, если ответите хоть наполовину вопросов)

[Ankhena]

safbek:
1. Пока не видно зачем форме (основной) флексбокс. Высота в %% я тоже не поняла зачем, размер шрифта + padding. Сама форма по высоте растянется по содержимому.
По ширине: для больших экранов можно ставить 50% от ширины или жестко в точках, на мелких 100%.
Можно и флексами, тут как душа просит.

2. Во-первых, поиск работает по энтеру :) Но это не правильно.
Во-вторых, на счет "как правильно". Берем мобильник, открываем гугл и яндекс и смотрим как эту проблему решили они. Выбираем какой из вариантов больше по душе и повторяем. Считаем, что людям привычен интерфейс поисковиков и следовательно если на Вашем сайте будет аналогично, проблем с восприятием будет минимум.

3. Ежика с хомяком на мелких экранах можно:
- поставить один под другим
- поставить под "контентное" поле либо 2 рядом либо тоже один под другим
- выяснить вообще их нужность в мобильном интерфейсе.

[safbek]

Ankhena W: Спасибо Вам!) А код смотрели вы хоть одним глазом? )сойдет для первого раза?

[Ankhena]

safbek: вполне :)