Оценка качества верстки
24 Oct, 2007Время от времени меня просят оценить качество той или иной свёрстанной страницы, да и сам я когда серфлю часто быстро проверяю - насколько профессионально была создана страничка. За всё это время сформировался ряд довольно стандартных критериев, коими делюсь.
Инструменты
Так как делается это все в онлайне, и я лентяй, то для оценки верстки я использую обычно Firefox с плагином Web Developer.Оценки в порядке важности (для меня)
0. Сайт должен нормально работать. Конечно это является важнейшим критерием. Это нужно а приори для оценки верстки, иначе какой смысл ее оценивать? Он должен быть достаточно кроссбраузерным: IE6-7, FF, Safari, Opera - мой список.1. Семантика кода
Это я проверяю двумя способами.
- Отключаем стили на страничке Ctrl+Shift+S(для мак Apple+Shift+S) и сразу видно - остается ли страничка в понятном виде? Видно ли навигацию? Заголовки? Или все сделано сплошным текстом в ДИВах...
- смотрю в коде - сколько разных тагов и для чего используется. Обычно с первого взгляда видно если там одни ДИВы, или множество вложенных таблиц (оба варианта плохи).
2. Правильное использование тага TABLE
Сам по себе критерий часть предыдущего. Но ввиду распространенности упомяну отдельно.
Жмем Outline -> Outline Tables -> Table Cells и сразу видим где и для чего на странице использовались таблицы. Примерно так:
3. Читабельность
Критерий конечно субьективный, но тем не менее всегда видно, когда человек старался делать отступы и комментарии, а когда делал "абы как"... Увидеть легко - сделав View Source.
Так же в CSS сразу заметно когда человек пытался соблюдать хоть-какой то порядок. Я не говорю о каком-то конкретном именовании и комментариях - но хоть что-то...
4. Структура заголовков
Для меня важно как выстроена структура заголовков h1-h6, по идее они должны соблюдать строгую иерархию. Конечно отклонения на живых сайтах - вполне реальны и приемлемы, я очень хорошо понимаю как это трудно. Но тем не менее: в плагине Information -> View Document Outline выдаст на хороших сайтах что то вроде этого (пример сайта http://uaweb.in.ua/):
h1 должен быть один на всю страницу, далее структура должна быть ниспадающей.(вообще то их может быть несколько, но они должны четко описывать структуру сайта) Это хорошо видно по картинке. Конечно, строго именно такая структура нигде не задана в стандартах - но лично я считаю такую иерархию очень правильной. Она напоминает книжное оглавление, или тезисы дипломной работы.
Хотя существуют другие мнения по этому поводу (кол-во h1).
5. Доступность (accessibility)
Альтернативный текст к картинкам, смысловая нагруженность кода(семантика), изменяемые размеры шрифтов, и то как сайт выглядит без картинок(Images -> Replace Images With Alt Attributes) - все это вместе делает сайт доступным для пользователей и поисковиков. Последний хоткей кстати проявляет "плохие" image replacement техники.
6. Именование классов и ID
Неправильно: left-column-with-gray-border-at-top (привязано к отображению)
Правильно: secondary-content (привязно к смыслу блока)
7. Микроформаты
Это можно назвать "продвинутой семантикой". Их наличие легко определить плагином Tails. Если на страничке есть микроформаты то в статус баре будет активной их известная зеленая иконка, вот так:
А если микроформатов нет:
(Оранжевая иконка плагина Tails Export - для экспорта информации из страницы в другие места)
Хотел бы добавить валидность, но это слишком круто для живых проектов. И из-за редкости этого пункта - я его обычно даже не затрагиваю. Хотя валидация HTML в шаблонах перед реализацией проекта в жизнь обязательна для меня.
7 хорошее число.
В конце
Примерно таким способом я обычно оцениваю чужую верстку. В зависимости от наличия времени использую только первые 2 или первые 4 пункта...Буду рад услышать ваше мнение и критерии!
58 комментариев к “Оценка качества верстки”