Аудит от независимых экспертов

поможет выявить проблемы на вашем сайте


 

 
 
 

Как протестировать верстку?

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

1. Во-первых, нужно зайти в код и посмотреть наличие DOCTYPE – он располагается в первой строке кода веб-страницы и позволяет браузеру правильно отображать вашу страницу согласно заданному стандарту. Это связано с тем, что существует множество разных версий html и xhtml, в которых браузер может путаться без четкого указания стандарта.

2. Во-вторых, нужно проверить кодировку сайта. UTF-8 — рекомендуемая кодировка для всех сайтов, она универсальна. На старых сайтах часто можно встретить кодировку Windows-1251- она тоже верная, но может некорректно отображаться на разных устройствах (мобильные устройства, планшеты, некоторые браузеры, маки, линуксы). Также можно встретить кодировку KOI8 – она очень устаревшая и уже не применяется.

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

4. Сайт должен быть кроссбраузерным. В больших сайтах сложно добиться 100% попиксельного соответствия отображения сайта, поэтому под кроссбраузерностью понимается просто отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности в различных браузерах. Для http://www.opera.com/mobile/demo/ - Опера Mini
http://labs.opera.com/news/2010/04/22/ - Опера Mobile
http://www.genuitec.com/mobile/ - iPhone
http://code.google.com/p/ibbdemo2/ - iPad (если не устанавливается, нужен adobe air)

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

9. Проверка наличия в CSS-стилях сайта аналогов шрифтов для Windows, Linux, Mac. Привычные всем шрифты Windows отсутствуют на других платформах, поэтому там они заменяются на стандартные, что может испортить всю верстку. Идем в стили и ищем там «font-family», в котором и прописываются шрифты. 

10. Наличие специальной версии стилей для печати. Это файл print.css. Он важен для информационных сайтов, сайтов СМИ, корпоративных сайтов с прайсами. 
 
11. Резиновая или фиксированная верстка. При резиновой верстке сайт должен растягиваться на весь экран и при изменении масштаба контент сайта (и прочие резиновые элементы) должен тянуться по ширине. При фиксированной верстке сайт должен выглядеть одинаково всегда. 

Идеальный вариант для сайта, когда он сжимается и растягивается до определенных границ. Это параметры min-width и max-width в стилях сайта. 

12. Стили и большие ява-скрипты должны быть вынесены в отдельные файлы. Скрипты лучше всего подключать в конце кода страницы. Это позволяет сначала загрузить контент сайта и только потом все эффекты, что визуально выглядит как более быстрая загрузка сайта.

13.  И наконец, проверка на валидность кода http://validator.w3.org/

Автор: Alexx88

 
Голосов: 5
Баллы рейтинга: 25

Гэми пишет:
31.05.2011 07:48
Полезная информация. Спасибо.
chelovek пишет:
27.10.2011 19:33
Да. Автору спасибо.
Надежда Дмитриевна пишет:
01.06.2011 09:53
интересно и полезно, но мне нехватило подробностей...глубины высказывания
Александр Вайс пишет:
01.06.2011 15:30
Каких подробностей например?
PS: наоборот кратко старался, т.к. итак длинный текст)
Надежда Дмитриевна пишет:
02.06.2011 09:24
да текст объемный вышел. Очень много кратко описанных пунктов, на которые уделено лишь одно-два предложения. Сама незнаю, нехватает...
ну например последний пункт: валидность. Можно было бы в кратце изложить что это и с чем её едят и зачем она, в чем такая важность. В общем никчемных деталей нехватает, которые дали бы статье более интересную начинку
chelovek пишет:
27.10.2011 19:34
Да очень полезная статья и все кратко.
Феликс пишет:
03.06.2011 13:37
Полезная информация. Спасибо. Поддерживаю Гэми.
марина пишет:
06.06.2011 06:10
Сколько еще всего надо знать, учиться, учиться и еще раз. Приятно, когда не отходя от кассы, получаешь нужную информацию.
Александр Вайс пишет:
15.06.2011 12:53
Скинул эту статью в свой блог, поэтому если наткнетесь в интернетах, не считайте за плагиат :) Чуть позже для своего блога сделаю рерайт, а пока пусть копипаст повисит.
libertinee пишет:
23.09.2011 14:59
Хорошая статья, спасибо Alexx