разное Как нужно верстать 

Дата публикации  Дата изменения29.07.15  Комментарии1   Просмотры3443

Курсы

Источники информации – различные статьи и блоги + личный опыт Ивана Блинкова.

  1. HTML и CSS должны быть читаемыми (все равно потом все ужимаем):

    1. HTML должен быть иерархическим, открывающие теги с новой строки (кроме случаев с), отступы 4 пробела
    2. CSS желательно не свернутые в строчку, а по одной директиве на строку, тоже с отступами по 4 пробела
    3. Можно сразу использовать  SASS – сильно упрощает всем жизнь
    4. Идентификаторы классов должны быть человекочитабельмыми английскими словами и фразами
    5. Очень желательно  не использование в названиях классов и идентификаторов ключевых слов из HTML/CSS/JS/jQuery
    6. Очень желательно, чтобы идентификаторы и классы  не были префиксными (ни одно названия не является началом или концом другого, например .icon и .icon_small) – это позволяет сократить их все до 1-2 символов на этапе постобработки
  2. DOCTYPE предпочтителен HTML5, но в крайнем случае можно и XHTML

  3. Кодировка: обязательно UTF-8
  4. Валидность:

    1. HTMLhttp://validator.w3.org
    2. CSShttp://jigsaw.w3.org/css-validator/
    3. WCAGhttp://www.cynthiasays.com/ и  http://www.w3.org/WAI/WCAG20/quickref/
  5. Соответствие макету:

    1. Проверка:  https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/https://github.com/aishek/modulargrid и https://browserlab.adobe.com/en-us/index.html
    2. Хоть и попиксельное соответствие приветствуется и считается обязательным, но местами возможны отклонения:
      1. Когда дизайнер нарисовал криво
      2. Когда незначительные различия в отрисовке шрифтов
      3. Когда у дизайнера разошлось вдохновение и единственный способ сделать точно так как на картинке – впихнуть здоровенный JPEG в пару сот килобайт на фон; в таких случаях стараемся разбить фон на составные части и/или паттерны и делаем его частями, стараясь минимизировать ущерб "креативу" при адекватном размере страницы
  6. Кроссбраузерность:

    1. Перед приемом/сдачей работы проверить на  http://browsershots.org/ (или аналоге) и во всех доступных под рукой браузерах
    2. Не забыть мобильные браузеры Opera Mini, iPhone и Android.
    3. Хаки для IE в conditional comments, не забываем правильно фильтровать для разных его версий
    4. IE6 должен адекватно воспринимать специфичные для HTML5 теги
    5. Помимо этого желательно проверить все разрешения от 1024х768 до 1920х1080 – везде все должно смотреться пристойно, без скроллбаров и излишних пустых областей
  7. Гибкость шаблона:

    1. При этом не смотря на то, что в макетах для примера используется какой-то текст, шаблон должен нормально себя вести при любом количестве текста (как нулевом, так и очень большом) в любом элементе
    2. Если пункт меню, заголовок или просто текст в 5-10 раз длиннее или короче того, что на макете – все должно отображаться корректно (по возможности, естественно)
    3. Если в макете не было всех шести видов заголовков, ссылок в тексте, картинок, цитат, аббревиатур, блоков pre и code – это не значит, что стиль по-умолчанию для всех стандартных html-элементов может отсутствовать в CSS – возьмите цвета и стиль от других элементов шаблона и сделайте хоть как-то, для образца все элементы можно добавить в текст, даже если их там не было
    4. У всех ссылок должно быть отдельное поведение для :hover, у ссылок внутри текста – и для :visited
    5. Если в макете все же были заголовки: их структура должна быть перенесена верно
    6. Надеяться, что WYSIWYG или Word проставит какие-то особые стили к тексту и все будет нормально  нельзя
    7. Если используем HTML5, то верстка должна быть  семантической, то есть блоки навигации заворачиваем в nav, сайдбар в aside и.т.п.
    8. Стили для печати и мобильной версии указываем отдельными файлами с соответствующим media
  8. CSS:

    1. Не забываем о производительности CSS: селекторы обрабатываются справа-налево, подробнее здесь:  http://code.google.com/speed/page-speed/docs/rendering.html
    2. CSS3 правила для нормальных браузеров (border-radius, gradient, text-shadow, box-shadow), с остальными извращаемся отдельно, никаких хаков с кучей <b> и подобных
    3. Размеры и позиционирование элемента должны указываться в одних единицах измерения
  9. Изображения:

    1. С умом относимся к выбору формата и уменьшаем их объем (см.  "Инструменты для минимизации размера изображений"
    2. Иллюстрации и элементы интерфейса с четкими краями лучше сохранять в PNG8, фотографии в progressive JPEG – но в целом руководствуемся минимизацией объема не в ущерб качеству
    3. Отсутствие title и alt  непростительно
    4. По возможности всегда указываем размеры изображений, особенно если они являются частью дизайна и заранее известны
    5. Для групп небольших изображений приблизительно одинаковой ширины или высоты (иконки, картинки разных буллетов и.т.п.) используем CSS Sprites:  http://css-tricks.com/css-sprites/ (для ленивых есть ряд инструментов для автоматизации процесса)
    6. Для совсем маленьких изображений используем data:URI+MHTML:  http://www.phpied.com/inline-mhtml-data-uris/
  10. Шрифты:

    1. Указываем базовый размер шрифта в em, там где нужен размер больше или меньше – в % от базового
    2. Line-height задаем в долях
    3. Должно быть как минимум одному шрифту для Windows, Linux и Mac OS. Примеры:
      1. Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif
      2. "Courier New",Courier,FreeMono,"Nimbus Mono L","Liberation Mono",monospace
      3. Georgia,"Bitstream Charter","Century Schoolbook L","Liberation Serif",Times,serif
      4. "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Lucida,sans-serif
      5. "Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono",monospace
      6. Palatino,"Palatino Linotype",Palladio,"URW Palladio L","Book Antiqua","Liberation Serif",Times,serif
      7. Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif
      8. "Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif","Liberation Serif",serif
      9. Verdana,"Bitstream Vera Sans","DejaVu Sans","Liberation Sans",Geneva,sans-serif
    4. Если требуется нестандартный шрифт, используем кроссбраузерный font-face:  http://randsco.com/index.php/2009/07/04/p680
  11. Формы:

    1. Ко всем полям должен быть label или, если так задумано, toggleval
    2. Если используем HTML5, то и поля форм тоже делаем по этому стандарту (email/tel)
    3. Проверить работу tabindex
  12. Использование микроформатов желательно, если они уместны (hCard, hCalendar, hAtom, XFN)

  13. JavaScript:

    1. Весь используемый JS располагается перед закрывающим </body>
    2. Желательно использование асинхронной загрузки файлов
    3. Работоспособность проверяем средствами Firebug
    4. Сайт должен нормально функционировать с выключенным JavaScript (и Flash тоже, к слову)
    5. Если на странице имеются формы – они должны валидироваться еще до отправки и нормально отображать ошибки (как минимум просто цветом)
  14. Остальное:

    1. Полное отсутствие комментариев в html, кроме условных
    2. Копирайт пишем правильно:  http://habrahabr.ru/blogs/typography/23812/
    3. Никакого CSS или JS внутри HTML, только внешние файлы
    4. Ссылки на внешние ресурсы должны быть с target="_blank" и по необходимости могут снабжаться иконками:  https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/plugins/link-icons/screen.css
    5. Текст лучше оттипографить перед публикацией:  http://rmcreative.ru/blog/post/tipograf
    6. Логотип должен вести на главную страницу
    7. Ссылки на внешние ресурсы (изображения, CSS, JS) лучше делать относительными
    8. Не забываем <title> всей страницы, должен быть понятен как человеку, так и поисковым системам
    9. HTML, JS и CSS лучше минимизировать не на этапе верстки, а автоматически при генерации шаблонов
    10. Не забыть выкинуть не используемые стили (вроде красной рамочки для выделения элементов в процессе верстки)

Бесплатные курсы

Категории

Теги: ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

    Гость

     

    Опис использования микроформатов


 

Старые →← Новые