четверг, 4 апреля 2013 г.

Проверка внешнего вида web-приложений

0. Проверить соответствие макету, спецификации, ТЗ...
- в принципе достаточно просто глянуть намётанным глазом, если расхождения заметные — они будут бросаться в глаза

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

2. Проверить переход на страницу:
- переход на страницу по ссылке с другой страницы/по прямому URL
- обновить страницу F5
- свернуть/развернуть окно
- изменение размеров окна (корректное отображение при наличии полосы прокрутки)

3. Проверить верстку страницы:
- корректный title для страницы (в идеале – у каждой страницы уникальный)
- наличие alt у картинок

4. Корректное отображение в процессе работы:
- выбор значений, выпадающие списки
- ввод реального текста (очень длинный текст – полоса прокрутки?)
- отображение ошибок

5. Работоспособность при выключенных картинках
- проверяется в FF через плагин Web Developer https://addons.mozilla.org/ru/firefox/addon/web-developer/ →Images→Replace Images With Alt Attributes.

6. Работоспособность при выключенном JavaScript
- проверяется в FF через плагин Web Developer https://addons.mozilla.org/ru/firefox/addon/web-developer/ →Disable→Disable JavaScript→All JavaScript

7. Работоспособность при выключенном Flash
- проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.

8. Проверить скорость загрузки.
- скорость загрузки страницы можно посмотреть в панели Net в Firebug https://addons.mozilla.org/ru/firefox/addon/firebug/ Необходимо проверять, как отображается страница при загрузке на малых скоростях.

9. Для проектов, где это оговорено:
- версия для печати
- мобильная версия

10. Проверить в разных браузерах:
- Firefox (последняя версия)
- IE (последняя версия + предыдущая)
- Chrome (последняя версия)
- Opera (последняя версия)
- Safari (последняя версия)

11. Проверить в разном разрешении (Проверяется в FF через плагин https://addons.mozilla.org/ru/firefox/addon/web-developer/ Web Developer→Resize). Список классических разрешений:
- 1024x600
- 1024x768
- 1152x864
- 1280x800
- 1280x1024
- 1440x900
- 1680x1050
- 1920x1080

12. Дополнительные проверки:
- логотип на странице ведет на главную страницу
 - возможность навигации по различным страницам приложения
- проверить битые ссылки
- ссылки в тексте должны быть выделены + :hover, :active и :focus
- копирайт должен быть написан правильно http://habrahabr.ru/post/23812/
- проверить favicon.ico
- проверить орфографию http://www.artlebedev.ru/tools/orfograf/
- проверить переход по Tab, возможность работы с приложением только при помощи клавиатуры
 - проверить работу «горячих» клавиш

1 комментарий: