Верстаем, верстаем и проверяем!

Разработка веб-сайтов
После того, как макет господина dinamyte был любезно сверстан господином curlybrace пришла очередь немного протестировать то, что получилось — похвалить, покритиковать и отработать некий механизм тестирования готовой верстки, для всех, кто в этом нуждается.

Наша задача:


  • найти ошибки
  • исправить ошибки
  • больше не допускать этих ошибок
  • составить некий алгоритм проверки качества верстки сайта, и предупредить проблемы, которые могут возникнуть уже в процессе «натягивания»


Кроссбраузерность:


Проверим отображение этой страницы в разнообразных браузерах и под различными осями, для этого будем использовать http://browsershots.org/.
Архив с результатом работы этого сервиса, а именно 79 скриншотов, на некоторых видны косяки.

Валидатор:


Говорить не о чем. Все валидно как в лучших домах Парижа. :)

Соответствие дизайна и верстки:


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

Этап №1


Слою с версткой задаем прозрачность 30-50% и анализируем полученную картинку.


Логотип



съехал


RSS



съехал


Копирайт



Выровнены по разным направляющим (на дизайне – относительно картинок в левом блоке, в верстке – относительно левого края хедера)


Ссылки в шапке



Ссылки в шапке – имеют совершенно разное вертикальное выравнивание относительно зеленого фона, на котором они находятся.


Выравнивание в правой колонке



снова видим отхождение от дизайна


Междустрочные расстояния



меньше необходимого


Размер шрифта в подвале



крупней, чем надо


Меню



на дизайне кнопка Home — активна


Аналогичную операцию следует проводить для нескольких браузеров. Я использую следующие:
  • Internet Explorer 7 (этот анализ проводился именно на основе картинки, полученной с этого браузера)
  • Internet Explorer 6
  • Mozilla Firefox 3.х  (последняя версия)
  • Opera 9.6х (последняя версия)
  • Safari 3.1.х  (последняя актуальная версия)

Технические моменты:


  • В IE6-7 нет возможности увеличить размер шрифта (грубая ошибка)
  • Для картинок желательно прописывать еще и title
  • Для ссылок желательно прописывать title
  • В шапке для иконок–пиктограмм  отсутствуют  подписи, хотя они уже определены подписями под самими картинками.
  • Для ссылки логотипа следует прописать title
  • У ссылок есть состояние не только hover, но и visited, active, focus
  • Проверяем наличие комментариев к коду, на нашем примере они есть
  • Указывать размер шрифта в пикселях недопустимо, используем em или проценты


Типографика:


Теперь пришла очередь проверить типографику.  Почти на всех сайтах клиент (он же администратор) имеет право вставлять текст. Проверим, а что будет, когда нам попадется довольно сложный, но правильно отформатированный текст?
Для этой цели в контент область вставим тест с разнообразными элементами и тегами, в качестве основы я возьму  текст с http://loremipsum.banzalik.ru/, он имеет необходимую структуру для проверки стилистики текста макета.
Для сравнения к скрину верски был прикреплён «эталонный» макет.


Какой вывод можно сделать из последнего скриншота?


  • Клиент замучается при наполнении сайта
  • Такие элементы как таблицы, списки совершенно не адаптированы к использованию на данном проекте
  • Верстальщика будут дергать по мере наполнения сайта


Версия для печати.




Первое, что хочется отметить — отсутствие каких-либо оптимизаций под печать.
Итак все по-порядку:
  • Большой отступ сверху
  • Отсутствие логотипа компании
  • Графические элементы в хедере — на принт версии лишние, пожалуй, весь хедер можно смело скрыть
  • Ссылки, заголовки, тексты — делаем черно-белыми, мы живем во временя лазерных ч\б принтеров, цветные тексты на них выглядят тускло
  • Иконки rss на бумаге ни к чему
  • Ссылки more в левой колонке лишняя


Теги:вёрсткамакетtestingloremipsumbrowsershotsreset csscsshtmlem vs px
Хабы: Разработка веб-сайтов
+75
3,2k 115
Комментарии 76

Похожие публикации

Автор профессиональных курсов по HTML
от 100 000 до 150 000 ₽HTML AcademyСанкт-ПетербургМожно удаленно
Младший веб-разработчик (PHP)
от 30 000 до 80 000 ₽Media WorksЧебоксарыМожно удаленно
Middle Frontend developer (вёрстка)
от 150 000 ₽SkyengМожно удаленно
HTML Верстальщик / Frontend разработчик
от 75 000 до 90 000 ₽LightМожно удаленно
Middle Frontend Developer (удаленно)
от 100 000 до 150 000 ₽Студия 15Можно удаленно

Лучшие публикации за сутки