Верстка Личного кабинета для готового сайта на 1С-Битрикс

10 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
08 февраля 2017, 18:16 • 1 отклик • 16 просмотров
Необхадима верстка Личного кабинета для сайта. Сайт на 1C-Bitrix, необходимо учитывать в верстке
Подробное ТЗ и PSD в личку

Требования к верстке:
Браузеры
Необходима поддержка следующих браузеров:
• Internet Explorer – версия 10 и выше;
• Microsoft Edge;
• Google Chrome;
• Opera;
• Mozilla Firefox;
• Safari.
Требования к верстке
Стандарты: HTML5/CSS3. HTML – должен проходить валидацию. CSS – не обязательно.
Верстка адаптивная. Используется блочная верстка. Максимальная ширина блока с контентом 1200. Некоторые блоки могут быть выполнены во всю ширину.
Подвал прижат книзу.
Отсутствие горизонтальной полосы прокрутки на всех популярных разрешениях (адаптация к популярным разрешениям):
В качестве breakpoint использовать следующие:
320×480 (iPhone)
480×800 (HTC Desire)
640×960 (iPhone 4)
768×1024 (iPad)
1280×800 (ноутбук)
И выше…

Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.
Для текстовых блоков, заполняемых с помощью визуальных редакторов (меняющийся контент), должны быть прописаны стили оформления всех тегов контента.
Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70-150% в браузерах IE9, Chrome, Opera, Safari, FF1 должны выглядеть так же как и при 100%. Допускаются не большие погрешности, которые возникают из-за неправильных округлений координат браузеров.
При отключенных картинках, плагинах (flash, silverlight) шаблон не должен терять своей информативности и возможностей навигации.

Вёрстка не должна ломаться:
• При добавлении в элементы большего количества текста.
• При использовании картинок с неподходящими размерами.
• Текст не должен выпадать из объектов.
• Переполнение контентными блоками не приводит к нарушению сетки.

HTML код:
Кодировка – utf-8
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
Имена классов и идентификаторов – осмысленные.
Классы служат для привязки оформления, идентификаторы – скриптов.

CSS код:
В данный момент используется сетка Susy Layout
Комментариями обозначены начало/конец крупных модулей/блоков разметки.
Допускается использование вендорных префиксов.
Не рекомендуется использование !important без крайней необходимости.

Javascript код:
Использование фреймворка jQuery.
Структурный, отбивка табами.
Имена переменных осмысленные, на наше усмотрение.
Снабжен комментариями: описаны назначения методов/классов, функций.
Для объемных задач используется ООП, для простых – обычные функции.
Код должен быть без ошибок.

Изображения:
Имена файлов осмысленные.
Проходят базовую оптимизацию на уровне оптимизации для Веб в Photoshop.
Малые изображения для оформления объединяются по назначению и склеиваются в спрайты.
Формат изображений:
• для логотипов: SVG, PNG;
• для визуального оформления: SVG, PNG;
• контентные изображения: JPEG, PNG.

Подробное ТЗ и макеты в личку