Пару вопросов по верстке

В последнее время как-то много проблем с верстальщиками появилось и в связи с этим пару вопросов:

1. Как вы определяете корректность адаптивной верстки?
Проверка через Гугл оптимальный вариант, но до нее нужно оплатить работу, а после фиг кто захочет дорабатывать.
Есть какие-то варианты проверки на тестовом домене исполнителя?

2. Столкнулся с проблемой общих стилей для контента и прочих элементов дизайна.
То есть, правишь стиль текста в шапке, меняется дополнительно во всех остальных местах. Только я считаю это халтурой или за такое исполнение можно смело динамить исполнителя с оплатой?

3. Какова разница в цене между "адаптивной версткой psd" и "превращением обычной верстки в адаптивную"?
Есть ли смысл заморачиваться со вторым или лучше верстать с нуля?

Хотелось бы увидеть развернутые ответы, особенно на 1 вопрос, очень уж он актуальный сейчас.

Цитата (ermolaev):

Проверка через Гугл оптимальный вариант

Не-а. Оптимальный вариант - проверка на реальных устройствах. Щас тут набегут юзальщики разных сервисов и просто любители двигать окно браузера, но суть от этого не меняется)

Цитата:

но до нее нужно оплатить работу

С какой радости?))

Цитата:

Есть какие-то варианты проверки на тестовом домене исполнителя?

Это не варианты, это единственно правильный алгоритм сотрудничества: верстальщик показывает верстку на своем хостинге, вы проверяете, выкатываете список правок, если таковые имеют место быть. После того, как верстка принимается заказчиком, производится оплата. Буквально сегодня проверял верстку, которую фрилансер вообще выслал заказчику на проверку в виде архива. Заметьте, до оплаты. Если верстальщик боится, что вы скопируете его верстку не заплатив, пусть выкладывает, например, одну страницу (в принципе по одной стр уже можно судить о качестве адаптива и верстки в целом), либо пусть запишет видео с демонстрацией сайта на смарте, айпаде etc.

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

Цитата:

3. Какова разница в цене между "адаптивной версткой psd" и "превращением обычной верстки в адаптивную"?
Есть ли смысл заморачиваться со вторым или лучше верстать с нуля?

Все сугубо индивидуально и сильно зависит от конкретной ситуации. С точки зрения чистоты кода и удобства дальнейшего сопровождения безусловно адаптивная верстка с нуля лучше.

1. Самая лучшая проверка, как заметил vovka-morkovka,  на реальных устройствах, т.к. некоторые моменты, работающие на емуляторах, на тачскрине и на моб. браузерах могут криво работать. Исполнитель должен предоставить верстку для проверки, как застраховать себя от обмана он должен был подумать заранее, то ли поэтапная оплата или безопасная сделка или же на доверии, если заказчик с рейтингом.
2. Это вполне нормальная практика, свести к минимуму вес и писанину в цсс. Если хотите поправить текст в шапке, тогда просто добавляете класс к тексту и правите или через цепочку селекторов. Если верстка соответствует макету - это не халтура и тем более не динамить... Если же у вас есть требования к коду, разделению стилей, и т.п., то до начала работ вы должны были эти требования выложить в ТЗ.
3. Все зависит от исходника и требуемого конечного результат.

1. Как проверяю я:
Первичная проверка на большом мониторе, на маленьком и на 2 ноутбуках.
Вторичная проверка - с помощью уменьшения окна браузера.
Последняя проверка - на разных устройствах: 2 планшета, 2 телефона, эмулятор Opera Mobile, сервис по проверке в разных разрешениях.

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

3. Имхо, лучше верстать с нуля адаптив, чем что-то переделывать. С нуля будет дороже, но качественнее.
В будущем если придется дорабатывать доработанную до адаптива обычную верстку то будет много хлопот.

1. Самое лучшее - на реальных устройствах, на разных ОС, пользуя разные браузеры, ориентации.
Но иметь все варианты на руках нереально.
Примерно такой набор мне достаточен:
несколько пк XP-Win10, OS X, все бразуры
несколько ноутов  XP-Win10, все бразуры
несколько планшетов 768-1280px, android 4-5, iOS, windows, все бразуры
несколько телефонов 320-1920px, android 4-5, iOS, windows, все бразуры
+ все равно тянуть окно инспектора придется.
Я изначально верстаю через инспектор. А в конце уже тестирую по всем устройствам, ОС, браузерам.
Про инспектор: из своего опыта скажу, что инспектор в браузере с эмуляцией (не только разрешения, но и логики работы) спасает в 99% случаев. Т.е. тупо включаем инспектор и таскаем окно в размерах. Затем в режиме эмуляции снова таскаем. Крайне редки случаи, когда некий баг всплывает на устройстве, но не всплывает в инспекторе.
Считаю, чем сложнее проект, чем больше скриптовых плагинов, используя фреймворки, тем обязательнее проверка на реальных девайсах.
Гугл и прочие сервисы ваще не вариант. Только для презентации, не более.
Демонстрация на тестовом сервере, правки (если имеются), затем постоплата, гарантия.

2. Если элемент в оформлении повторяется в макетах в нескольких разных блоках, то само собой, ему дается один класс.
Но в 99% не все свойства совпадают. И дополнительно заводится правило с указанием родителя блока. И если вам нужно править отдельно для одного блока, то вы и ищете правило с этим блоком.
Простой пример:
p {
font-size:16px;
margin:0 0 20px;
color:#000;
}
#header p {
color:#ccc;
}
#footer p {
color:#fff;
}


3. Если предполагается изначальный адаптив, то и дизайн в идеале рисуется способным к адаптации. А если сайту много лет, дизайн рисовался без учета будущей адаптаци, то как правило, такой сайт адаптировать сложнее.
Кроме того, если сразу планируется адаптив, даже разметка верстаком продумывается с учетом адаптива. Т.е. даже если дизайн поддается адаптиву, но версталось давно и без учета будущего адаптива, часто приходится не только добавлять adaptive.css, но и менять разметку. 
Верстать с нуля нужно, если основная верстка кривая. Если к основной претензий нет, то сложность постадаптива + 20-30%. 
Тут верстак должен аргументированно решать.

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

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

ссылка, пример не дам, уже все поправлено. Но расскажу.

На сайте в контенте не проработаны маркеры для списков и отступы (в PSD их нет, поэтому верстальщик забил на них).
Лезу в код и вижу, что одним стилем прописаны списки для контента, бокового меню, нижнего меню, верхнего меню. 
Приходится дописывать стили дополнительно.

Или на сайте слишком маленький шрифт (в PSD норм, на практике ад для глаз).
В CSS один стиль для текста в контенте, менюшках и футере. Опять же приходится дописывать.

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

Цитата:

сервис по проверке в разных разрешениях

А что за сервис?

Цитата (ermolaev):

А что за сервис?

Ну их на самом деле много, вот тут есть несколько ссылка

Цитата:

адаптивная верстка, не проходящая проверку в Гугл по сути бесполезна. 

так бы и писали, что вам важна seo
Уверен, что любой нормально сверстанный сайт пройдет эту проверку. По крайней мере я не встречал, чтобы такая проверка не была пройдена.
Цитата:

как найти подход к верстальщику, чтобы он согласился на оплату после одобрения Гуглом. Вы бы согласились? 

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

Сервисы всего лишь сделают за вас уменьшение окошка браузера под разные размеры. Максимум на что они как правило способны - это подмена агента. Даже близкой эмуляции не ждите. Т.е. в любом случае нужна либо хорошая эмуляция (поведение и обработка сайта близкая к реальному устройству, а не просто разрешение дисплея) или реальное устройство.

Цитата (parkgraphic):

так бы и писали, что вам важна seo

Год назад Гугл возвел требования к адаптивности сайтов в "must have". И тут, наверное, даже не сео,  а юзабилити. Хотя, наказывать такие сайты будет понижением в выдаче (тоесть сео). Плохое юзабилити - получай оплеху в сео.

Цитата (ermolaev):

То есть, главное требование - это прохождение проверки в Гугл, а остальное вторично

Ага, т.е., если сайт проходит проверку роботом гугля, но на айфоне едет верстка - плевать? ))) Ну так бы сразу и говорили, что вам нужна проверка с точки зрения сео.
Цитата:

чтобы проверить верстку в Гугл ее нужно одеть на сайт и подождать некоторое время

Мы сейчас говорим об одном и том же?)) Вы имеете в виду PageSpeed Insights? А вы в курсе, что часть параметров, по которым этот сервис проверяет сайт, обеспечиваются на стороне сервера и к верстке прямого отношения не имеют? И как-раз "натянуть на сайт и подождать" - это уже не вопросы верстки, это уже вопросы бэкенда и серверные дела. PageSpeed Insights проверяет сайт в целом, а не верстку. А сайт - это и программная часть, и настройки сервера - и это все к верстке не имеет никакого отношения.

Цитата:

На сайте в контенте не проработаны маркеры для списков и отступы (в PSD их нет, поэтому верстальщик забил на них).

Ну, начнем с того, что забил на них дизайнер)) И спрашивать в первую очередь нужно с него. Макет должен содержать заголовки всех уровней, маркированные/нумерованные списки, цитаты и пр., если на этапе разработки интерфейса было принято решение, что они должны отличаться от стандартных. В данном случае речь идет о непрофессионализме дизайнера. Безусловно верстальщик в этом случае должен учесть, что бы все эти элементы отображались корректно, имели соответствующий дизайну интерлиньяж, отступы и т.п., но рисовать вам маркеры или как-то оригинально стилизовать цитаты на свой вкус, он не обязан.
Цитата (ermolaev):

То есть, главное требование - это прохождение проверки в Гугл, а остальное вторично

Ага, т.е., если сайт проходит проверку роботом гугля, но на айфоне едет верстка - плевать? ))) Ну так бы сразу и говорили, что вам нужна проверка с точки зрения сео. Если бы все было так просто - забил ссылку, жамкнул кнопку и пялишься мечтательнов монитор в ожидании процентов, то профессия тестировщика уже давно изжила бы себя. Ан нет, работают, и неплохие деньги получают между прочим))
Цитата:

чтобы проверить верстку в Гугл ее нужно одеть на сайт и подождать некоторое время

Мы сейчас говорим об одном и том же?)) Вы имеете в виду PageSpeed Insights? А вы в курсе, что часть параметров, по которым этот сервис проверяет сайт, обеспечиваются на стороне сервера и к верстке прямого отношения не имеют? И как-раз "натянуть на сайт и подождать" - это уже не вопросы верстки, это уже вопросы бэкенда и серверные дела. PageSpeed Insights проверяет сайт в целом, а не верстку. А сайт - это и программная часть, и настройки сервера - и это все к верстке не имеет никакого отношения.

Цитата:

На сайте в контенте не проработаны маркеры для списков и отступы (в PSD их нет, поэтому верстальщик забил на них).

Ну, начнем с того, что забил на них дизайнер)) И спрашивать в первую очередь нужно с него. Макет должен содержать заголовки всех уровней, маркированные/нумерованные списки, цитаты и пр., если на этапе разработки интерфейса было принято решение, что они должны отличаться от стандартных. В данном случае речь идет о непрофессионализме дизайнера. Безусловно верстальщик в этом случае должен учесть, что бы все эти элементы отображались корректно, имели соответствующий дизайну интерлиньяж, отступы и т.п., но рисовать вам маркеры или как-то оригинально стилизовать цитаты на свой вкус, он не обязан.

Цитата (vovka-morkovka):

т.е., если сайт проходит проверку роботом гугля, но на айфоне едет верстка - плевать? )))

Такое может быть очень и очень редко.

Цитата (vovka-morkovka):

Мы сейчас говорим об одном и том же?)) Вы имеете в виду PageSpeed Insights?

Речь идет вот об этом ссылка
и к PageSpeed Insights отношения не имеет.

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

Цитата (Hungry_Hunter):

Такое может быть очень и очень редко.

Ой ли))) Не думаю, что гугл "заметит" сдвинутые иконки, некорректное верстикальное выравнивание текста в инпутах, надписей на кнопках и т.п. Причем не просто "увидит", а "увидит" одновременно в Хроме и FF на Андроиде, в Сафари на iOS и в Opera Mobile))

Цитата (vovka-morkovka):

Оптимальный вариант - проверка на реальных устройствах

Поддерживаю. Только так можно увидеть все в действии.

Цитата:

т.е., если сайт проходит проверку роботом гугля, но на айфоне едет верстка - плевать? )))

Цитата:

Такое может быть очень и очень редко.

да сплошь и рядом.

Цитата:

Год назад Гугл возвел требования к адаптивности сайтов в "must have". И тут, наверное, даже не сео,  а юзабилити

да в курсе я про это. 

Цитата:

к PageSpeed Insights отношения не имеет.

а мне сдается, что один и тот же алгоритм.

И опять же - это алгоритм. А грамотная верстка прежде всего для юзера. Как может алгоритм проверить юзабилити? Наличие адаптива - да. А вот его качество уже сомнительно.

Цитата (parkgraphic):

да сплошь и рядом.

Ну ок, мне встречать такого пока не доводилось

Цитата (Hungry_Hunter):

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

С этим никто не спорит. Все верно. Вот только проверка по гуглосервисам - это необходимое, но не достаточное условие качественной адаптивной верстки.

Цитата (parkgraphic):

Как может алгоритм проверить юзабилити?

Он проверяет на сколько удобно пользоваться сайтом с телефона.
Например размер шрифта, на сколько близко отображаются интерактивные элементы, удобно ли в них тыкать пальцем итд.

Цитата (vovka-morkovka):

Вот только проверка по гуглосервисам - это необходимое, но не достаточное условие качественной адаптивной верстки.

Ну с этим я и не спорю

Цитата (Hungry_Hunter):

Он проверяет на сколько удобно пользоваться сайтом с телефона.
Например размер шрифта, на сколько близко отображаются интерактивные элементы, удобно ли в них тыкать пальцем итд.

Яж говорю, что наличие юзабилити он определит, а качество нет.
Это как с поисковыми системами. Годами совершенствуется алгоритм ранжирования и все равно далеко не с первого раза находишь нужное.

С этим согласен

Господа в том-то и дело, что проходящая в Гугл верстка отлично смотрится в ios, андройде и windows. 
Не приходилось, в крайнем случае, наблюдать обратного.

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

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

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

А важно одинаково, как одобрение гугла, так и удобство. Без данных факторов топовых мест сайт не увидит и конверсии хорошей тоже.

UPD.
Раз уж завел тему про Гугл и верстку, то задам и еще один вопрос, мучающий в последнее время.

Гугл требовал открыть для индексации некоторые разделы Вордпреса, включая wp-content. После данного сообщения сайт просел сильно.
Прописал правила в роботс, позиции вернулись в течение недели.
Но теперь Гугл пишет об отсутствии адаптивной версии у вновь открытых страниц, например, у ../wp-content/uploads/2015/04/

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