Верстка, интеграция сайта на Oktober CMS(желательно)
Верстка, интеграция сайта на Oktober CMS(желательно) требования по пейдж спиду обязательно 90+
- Верстка должна соответствовать макету. Допускается лишь незначительное расхождение размеров, сделанное с целью исправить расположение криво нарисованных блоков или отступов.
- Верстка должна быть кроссбраузерной. Корректное отображение в стабильных версиях браузеров: Mozilla Firefox, Yandex.Браузер, Safari, Opera, Miscrosoft Edge, IE 11.
- Должна быть установлена кодировка
UTF-8 - HTML страницы должны проходить проверку на валидность W3C
- Первая строка любой страницы должна начинаться с
<!DOCTYPE HTML> - В разметке HTML5 должны использоваться теги
headerfooterasidenavsectionarticle - Должна быть соблюдена правильная структура заголовков
h1, h2, h3... - Логотип сайта должен вести на главную страницу
- Необходимо что бы верстка была надежной! При изменении текста в блоках, вбивании реального текста (короткий, длинный, длинный без переноса) - сайт не должен ломаться. Все изображения, используемые на сайте в новостях, товарах, в слайдерах и т.д., которые будут выводиться из CMS должны быть заменяемые. Должна быть предусмотрена загрузка изображений любых пропорций и разрешений. С этой целью вместо
imgдопустимо использоватьbackground-image - Ссылки на внешние сайты должны быть с атрибутами:
target="_blank"иrel="nofollow noopener" - Все
<input>должны быть правильного типаemail/url/tel/text/password - При верстке не использовать id, только классы. Именование классов допустимо только маленькими буквами. Если нужно добавить обработчик JS к какому-то элементу ему дается дополнительный класс в стиле js_action.
Стили
- Проверить что все интерактивные элементы, которые должны работать - работают. Все ссылки и кнопки имеют стили для
:hover, поля и textarea имеют стили для:focus. Элементы должны реагировать изменением цвета, подчеркиванием, размером, чем угодно. При наведении на такое элементы курсор должен становитьсяpointer - В верстке не должен использоваться Bootstrap
- Не должны быть использованы инлайновые
стили в HTML. Все стили должны быть в CSS файле. Сайт должен корректно отображаться на всех популярных разрешениях экранов: от 320px - до 1920px. Адаптивность сайта должна достигаться только путем использования <code>@mediaзапросов. Файл стилей должен быть отдельным и называтьсяmedia.css.Поля ввода <code><input>на мобильных устройствах должны иметь размер текстаfont-size: 16px.Все параметры подключенных шрифтов должны соответстовать макету (размер, межстрочный интервал, стиль). При подключении шрифтов обязательно должен быть указан альтернативый заменяющий шрифт, схожий с кастомным.При расположении блоков на странице использование flex в приоритете (использование float и inline-block только с обоснованием в комментариях)Стили должны соответстовать стандарту CSS3Все тени, градиенты, скругления должны быть реализованы с помощью CSS свойств. Также в CSS следует избегать <code>!important, допускается использования этого параметра с обоснованием в комментарии.При использовании LESS, SASS препроцессоров CSS код должен быть обязательно скомпилирован в файл <code>.css.
viewBox="">
В консоли браузера не должно быть JS ошибок и console.log()Должен быть подключен внутренний jQuery последней стабильной версииСкрипты должны быть подключены перед закрывающим тегом <code></body>. Файл скриптов проекта должен быть самым последним.
viewBox="">
Все изображения должны находиться в отдельной папке, css стили - в отдельной и js скрипты- в отдельной. Графика которая не является частью дизайна (иллюстрации, фотографии в новостях и т.д.) должна находит]мся в отдельной папке (напр. uploads)Все изображения должны быть поджаты без потери качества. Все js-скрипты должны быть минифицированы (без потери читабельности, не js код в одну строку!). Все css файлы должны быть минифицированы без потери читабельности. (Название каждого класса и каждого свойства к нему - разные строки)Сайт должен иметь favicon.ico и apple-touch-icon. При необходимости запросить favicon в дизайнера.Все иконки сайта (в т.ч. логотип) должны быть реализованы при помощи иконочных шрифтов или SVG изображений. При необходимости запросить недостающие изображения у дизайнера.