1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Как оценить качество верстки (для заказчиков)

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alex_storm, 16 дек 2013.

  1. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Без знаний невозможно объективно оценить качество верстки. Это факт. Поэтому можно оценивать по следующим параметрам, которые наиболее часто встречаются в верстке и их легко проверить.

    1. Сайт должен работать нормально.
    Не должно ничего плавать, все должно открываться, переключаться и максимально быстро.
    Должен быть сверстан px в px(допускаются отклонения при верстке в % соотношении).
    Отображаться на заданных разарешениях. Сейчас принято верстать еще и под мобильные устройства (за отдельную плату конечно же).

    2. Семантика кода
    Без знаний почти ни как, откройте код Вашей страницы в браузере и посмотрите на код. Начиная от тега <body>. Должна быть четкая иерархия тегов <div> с идентификаторами <div id=""> или классами <div class="">. По правилам хорошего тона, <div class=""> не может содержать в себе <div id="">.

    3. Читабельность
    Читабельность кода в большей степени помогает упростить жизнь верстальщика и програмиста. Если Вам сверстали в таком виде <div id="wraper"><div class="header"><div class="menu"></div></div></div> т.е. в одну строчку, Вам будет трудно разобраться в коде. Допускается такой тип верстки, когда проект уже полностью создан и остается только оптимизация кода, т.е. сокращение пробелов и т.п.

    4. Структура заголовков
    Заголовки должны быть в четком иерархическом порядке. На это смотрит поисковая система и пользователи.
    <h1> - один заголовок на странице
    <h2> - Максимум 3 заголовка на странице
    <h3> - Не ограниченное кол-во на странице
    <h4> Не ограниченное кол-во на странице
    <h5> Не ограниченное кол-во на странице
    <h6> Не ограниченное кол-во на странице
    Должна быть четка вложенность. Иначе это плохо отрозится на позициях в поисковых системах.

    5. Альтернативный текст для картинок
    Он нужен для тех случаев если картинка не загрузилась при посещении сайта пользователем. И для поисковой машины.
    Увидеть есть ли начилие альтернативного текста очень легко в теге <img> -картинки должа быть запись <img alt="Название картинки">

    6. Человеческие имена классов и ID
    Как известно имена классов и ID в верстке можно задавать на любом языке и в любом виде. Главное, чтобы первая не была цифра или символ. Общепринято считать, что нужно задавать имена для классов и ID на англ.языке с максимально приблеженными к элементу названием.
    Например если у нас есть шапка сайта, но название должно быть вот такое #header, а не #hd (допускается при оптимизации кода).

    7. Корректное отображение при разных размерах шрифта
    Многие верстальщики забывают о том, что шрифт может применятся пользовательский и размер окна браузера так же влияет на качество шрифта. Если при применении стилей пользователя начинает ехать верстка(изменился шрифт в 2раза в размере), то качество я думаю уже говорит само за себя.


    Сообственно все:Smile:
     
    alex_storm, 16 дек 2013
    #1
  2. Baco

    Baco Антихронофаг Команда форума

    Регистрация:
    9 окт 2012
    Сообщения:
    803
    Симпатии:
    399
    По 2-му пункту есть уточнение по поводу семантики, то есть использование id="" и "правило хорошего тона" с точки зрения программиста, так как очень часто селекторами для javascript (getElementById) являются именно id="" блоков, к которым необходимо применить подобный функционал. Поэтому, что бы заказчик не прочитал данныую тему и сказал "вы мне сделали сайт некачественно , ведь у вас id в классе..." то делаю данную сноску, так же на качество кода влияет кроссбраузерность (IE хотя бы от 8, 9 версии ИМХО).
     
    Baco, 16 дек 2013
    #2
  3. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Если есть вот такой <div id="idi" class="idi"> это ничего страшного, а если вот такое <div class="div"><div id="div"></div></div> - это уже беда. Нужно продумывать код.
    Кроссбраузерность это отдельный разговор. Поскольку один и тот же код теперь нужно проверять в хроме, яндекс.браузере, opere - один и тот же движ) + Opera есть отдельно со старым движком.
    В общем работы по кроссбраузерности можно заводить отдельную тему :Smile:
     
    alex_storm, 16 дек 2013
    #3
    Baco нравится это.
< Сделать рамку вокруг страницы | вопрос по слайдеру >