Как правильно протестировать и найти ошибки в вёрстке, если я не верстальщик?

Question

[Юрий Вискалин]

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

Comments

[sim3x]

0. Цель проверки?
1. Для чего будет использована верстка?
2. Почему вам поручили, если у вас нет компетенции?
3. Наймите другого верстальщика для оценки

Answer 1

[Kadzi]

чек лист вёрстки
то же, подробно

что можно делать без опыта:

открыть сборку на смартфоне, планшете, десктопе. именно на реальном устройстве.

а) быстрый обзор страницы, соответствие макету: отступы, размеры, шрифты и размер шрифта, формат графики, неровности, что сразу бросаются в глаза.
б) медленный обзор по блокам: сходство, косяки, работоспособность, прям пробегаемся по каждому блоку с каждого устройства. (нет планшета? самый простой вариант веб-инспектор гугла)
в) нажимаем, тыкаем, зумим, скролим, листаем (меняем масштаб страницы, делаем все агрессивно, чтобы быстрее заметить микроглюки). Задача взаимодействовать со всем, что есть на странице. Смотрим че ломается, едет, скрипит при нашем тесте.
г) сразу можно проверять оптимизацию графики: с помощью гугл пейдж спид, вбиваем юрл, смотрим, на что жалуется, сколько весит графика (оптимизировали ли её?)
д) повторяем процедуру в ТОП браузерах: хром, яндекс, мозила, сафари, едж (ИЕ, если нужно), мобильные браузеры, смотрим, что не так и всё ли работает

это минимум:

ПОХОЖЕ НА МАКЕТ
ВСЕ КОНТРОЛЫ РАБОТАЮТ
НЕ ЕДЕТ, НЕ РАЗВАЛИВАЕТСЯ
В ДРУГИХ БРАУЗЕРАХ ОК

отдельным пунктом ДОСТУПНО
всеми контролами можно управлять клавиатурой, сайт (в идеале) полностью функционирует при выключенном CSS и JS (в хроме есть плагин - Web Developer, скачиваем из магазина, тыкаем, тестим)

ПЕРЕПОЛНЕНИЕ КОНТЕНТОМ
тестируем поведение блоков прямо в хроме, через инспектор. (об этом предлагаю автору найти уже готовые описалки... аааа, ладно, на: обзор веб-инспекторов)

______________________________________

полезные ссылки:

Блог Киселёвой, куча обзоров книг + полезные вырезки, крутейший блог

о доступности:

https://weblind.ru/ ОСНОВНОЕ ЧИТАТЬ
https://www.bl2.ru/programing/colourcontrastcheck.html
https://habr.com/post/347478/
https://developer.paciellogroup.com/resources/cont...
https://usabilitylab.ru/blog/dostupnost-internet-b...
https://blog.sibirix.ru/2018/05/22/almost-blind-ve...
https://www.toptal.com/designers/colorfilter
www.bbc.co.uk/guidelines/futuremedia
https://www.lightningdesignsystem.com/accessibilit...
https://geon.github.io/programming/2016/03/03/dsxyliea
https://wearecolorblind.com/
blog.gov.design/blog/2016/11/08/accessibility.html
specialbank.ru/guide
specialbank.ru/guide/index.html

P.S

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

Comments

[Юрий Вискалин]

Огромное спасибо за такой развернутый ответ и, что потратили на него своё время! Думаю информации, которую вы мне дали, мне будет достаточно. Баланс кармы проверьте, там от меня много плюсов прилететь должно.

[Kadzi]

Юрий Вискалин, пжлст, если найдёте что-нибудь ещё годное для некодеров, скидывайте в комменты или прикладывайте к вопросу

[Kadzi]

Юрий Вискалин, вот ещё одни критерии вёрстки

там эти пункты на сайте академии ещё подкрепляются интерактивными визуальными примерами, но это платно. Можно поискать на всяких сливах интенсивов

[Юрий Вискалин]

Боже я не могу перестать мысленно благодарить вас! как много тут всего полезного! Ещё раз огромное спасибо за ответ!

[Юрий Вискалин]

Kadzi, может подскажите вот какой момент. В чеклисте для проверки, который вы скинули, есть пункт "№4. Независимость блоков в CSS: минимизация каскада, использование техник БЭМ". Написано что он "Проверяется в FF через плагин Firebug". Но так как статья старая, этого плагина я не нашёл. Его уже нет в магазине. Может знаете аналог? Чем ещё можно проверить каскад?

[Юрий Вискалин]

Kadzi, прошу прощения за глупый вопрос про Firebug. https://habr.com/ru/post/316974/ для тех кто тоже искал как я этот плагин.

Answer 2

[Andrew Garfield]

Как вариант, можно воспользоваться валидатором.

Answer 3

[Dima Polos]

1. Можно проверить валидность.
2. Откройте инструменты разработчика, посмотрите адаптивность, там возле вкладки Elements есть иконка с телефоном и планшетом. Чтобы открыть инструменты разработчика нажмите f12 или ctrl+shift+j
3. Там же, в инструментах можно открыть вкладку Audit и нажать Run audit, потом почитать результаты.
Все остальные параметры качества это уже надо понимать код.
Может, конечно, кто еще что-то посоветует.

Comments

[Юрий Вискалин]

спасибо, воспользуюсь вашими советами!