Требования к верстке

Общие требования 

Верстка должна соответствовать PSD макету. Мы не требуем верстку пиксель в пиксель. Однако следует проверять верстку html с PSD макетом с помощью специальных расширений для браузеров для PixelPerfect верстки или специальных JS скриптов.
Например Perfetto.  Github
 

1. Стили CSS файлов лежат в папке CSS, которая в свою очередь, лежит на одном уровне в папке вместе с файлами HTML.
2. Все картинки которые прописываются через CSS файлы лежат в папке /css/img/ . В этой папке не должно быть изображений (из каждого правила бывают исключения), которые прописываются в HTML файле.
3. Все JS файлы должны находится в папке JS, которая в свою очередь, лежит на одном уровне в папке вместе с файлами HTML.

Пример структуры папки с версткой:

Технические стандарты

1. Файлы должны быть в кодировке UTF-8.
2. Верстка должна быть блочная. Если вы верстаете таблицами, вас нужно сжечь.
3. Не должно быть JavaScript-ошибок.
4. Абсолютные пути используются только на внешних ссылках, а во внутренних - относительные пути.
5. Все CSS-стили подключаются в виде CSS-файлов.
6. 
Все JS-скрипты, в т.ч. обработчики событий подключаются в виде JS-файлов.

 

Доступность верстки проверяется в следующих браузерах :

  • Firefox (последний)
  • Chrome (последний)
  • Safari (последний)
  • iPhone (iOS 4.2 и 5.0, landscape, portrait)
  • Android 2.2
  • Opera (последняя)
  • IE9+
  • Opera Mini (последняя)

​Сайт должен нормально выглядеть на следующих экранах :

  • 1024
  • 1152
  • 1280
  • 1440
  • 1680
  • 1920

​Шрифты

Верстку нужно проверять не только с тем контентом, что представлен в PSD макете, но и с любым произвольным контентом. Не нужно притворятся дурачком, будто думал что сайт так и будет наполнен текстом про Lorem Ipsum. Возьми и вставь какой нибудь текст из википедии, и проверь не поедет ли верстка. Так же нужно иметь ввиду, что в текст могут быть вставлены картинки из WYSISWYG редакторов или ссылки, и это не должно повредить верстку.

Изображения

Все графические изображения, в которых нет текста, которые не являются иконками, и в которых не нужна прозрачность, сохраняются в формате JPEG. Иконки(маленькие изображения), текст сохраняются в форматах PNG или GIF в зависимости от того, нужна ли полупрозрачность или нет. 

У изображений должен быть 100% масштаб, если отдельно не обговаривалось другое. Это значит, что если у изображения реальный размер 2000 х 1000, а необходимый размер в макете 400х500, то изображение должно быть уменьшено до необходимых размеров в графическом редакторе. Не допускается уменьшение размеров с помощью css или html средств, например таким образом : <img src="kartinka.jpg" width="400" height="500">

Раздел: 
Теги: