yuriy-vskln
@yuriy-vskln
Project manager

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

Перед мной стоит задача - найти ошибки в вёрстке. Как правильно тестировать вёрстку не зная кода? Понятно, что лучше знать код. Изучение кода, стоит в списке задач, но проверить вёрстку нужно прямо сейчас. Буду рад любой помощи, полезные статьи, методики, хитрости, лайфхаки... В гугле не забанен, активно пользуюсь. Но подумал мало ли, кто-то подскажет, что нужно понять в первую очередь. Надеюсь на помощь сообщества.
  • Вопрос задан
  • 1452 просмотра
Решения вопроса 1
Kadzi
@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 и они отличаются, во-вторых, если видим ошибку - это не значит, что это всегда ошибка. Т.к некоторые вещи могут быть не описаны там
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Garfields
@Garfields
Как вариант, можно воспользоваться валидатором.
Ответ написан
Комментировать
dimovich85
@dimovich85
https://u-academy.net/
1. Можно проверить валидность.
2. Откройте инструменты разработчика, посмотрите адаптивность, там возле вкладки Elements есть иконка с телефоном и планшетом. Чтобы открыть инструменты разработчика нажмите f12 или ctrl+shift+j
3. Там же, в инструментах можно открыть вкладку Audit и нажать Run audit, потом почитать результаты.
Все остальные параметры качества это уже надо понимать код.
Может, конечно, кто еще что-то посоветует.
Ответ написан
Ваш ответ на вопрос

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

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