Техническое задание в формате word можно скачать тут:
1. Техническое задание
1.1. Нужно сверстать landing page на основе предоставляемого дизайна.
Дизайн-макет и комментарии к нему:
1.2. Исходники PSD готовые к верстке (сетка, слои по папкам и т.д):
______ (отдельно отправим)
2. Технические условия для верстки:
2.1. Блочная верстка (HTML5 и CSS3 приветствуется).
(!) Сайт должен быть резиновым и адекватно открываться во всех масштабах браузера, а также на устройствах (!).
2.2. Cоблюдение стандартов W3C.
2.3. Комментирование кода (обязательно).
2.4. Для скриптов использовать библиотеку JQuery и ее плагины.
2.5. Использование CSS-эффектов вместо картинок (там где это возможно).
2.6. Hover эффекты на CSS3 (transition – delay: 0.3 – 0.5).
2.7. Добавить Яндекс.Метрику. Коды предоставим (цели для Метрики, привязанные к успешно выполненным заявкам).
2.8. Вставить favicon (фавикон) в виде первой буквы названия, либо логотипа.
2.9. Все картинки, особенно большие фоновые, должны быть оптимизированы, сжаты и открываться максимально быстро.
2.10. Для заголовков каждого блока использовать тэги H1 – H5.
3. Важные моменты, которые нужно учесть:
3.1. – Первый экран должен помещаться в экран 960х700 (область первого экрана смотрите тут:
).
3.2. – Верхнее меню и кнопка «Получить консультацию» должны быть плавающими при скроллинге.
3.3. – Ссылки в верхнем (плавающем) меню должны быть привязаны к якорям на странице (смотреть в папке с макетом какой якорь к какому блоку должен быть привязан).
3.4. – Название страницы, отображаемое во вкладке в браузере, скопировать из самого верхнего заголовка.
3.5. – При всплывании модальных окон, сайт должен затемняться примерно на 70%.
4. Заявки должны приходить со следующими пометками в теме письма:
4.1. – Верхнее (плавающее) меню: «Получить консультацию из верхнего меню»
4.2. – Кнопка «Заказать звонок» под телефоном в шапке: «Заказ звонка (вверху)»
4.3. – Кнопка «Заказать звонок» под телефоном в подвале: «Заказ звонка (внизу)»
4.4. – Первый экран: «Заявка с первого экрана»
4.5. – Форма и кнопка «Узнать стоимость» в большом всплывающем окне при клике на «Подробнее» (где 4 вида подъемников):
4.5.1. – «Заявка из карточки товара на 1-ый (шахтный) подъемник»;
4.5.2. – «Заявка из карточки товара на 2-ой (консольный, мачтовый) подъемник»;
4.5.3. – «Заявка из карточки товара на 3-ий (сервисный, малогрузовой) подъемник»;
4.5.4. – «Заявка из карточки товара на 4-ый (в глухой шахте) подъемник»;
4.6. – Кнопка «Заказать» (где 4 вида подъемников):
4.6.1. – «Заказать 1-ый (шахтный) подъемник»;
4.6.2. – «Заказать 2-ой (консольный, мачтовый) подъемник»;
4.6.3. – «Заказать 3-ий (сервисный, малогрузовой) подъемник»;
4.6.4. – «Заказать 4-ый (в глухой шахте) подъемник»;
4.7. – Блок «Не знаете какой выбрать?…»: «Нужна консультация по выбору подъемника»
4.8. – В последнем блоке на карте «Оформите заказ»: «Оформленный заказ от клиента»
5. Формы обратной связи и всплывающие окна:
5.1. – Вставить в формы захвата проверку ввода («Имя» проверять НЕ обязательно).
5.2. – Наличие телефона и email (где он есть) обязательно.
5.3. – При установке курсора в поле «телефон», должен появляться шаблон номера (серым цветом) в формате +7 (___) ___-__-__ .
5.4. – Выводить уведомление-сообщение «Неверно заполнено поле» (пример на макете), если телефон или email (где он есть) не заполнен.
5.5. – Все всплывающие окна закрываются крестиком в правом верхнем углу, либо кликом вне модального окна.
6. Другие важные моменты:
6.1. – Все кнопки, ссылки, поля, стрелочки имеют ховеры (где-то два состояния, где-то три – смотреть на исходниках дизайна). Если есть три состояния, то делать их все: 1-стандартное положение, 2-наведенное, 3-нажатое.
6.2. – Видео-отзывы будут позже (а, возможно, не будут вообще), пока верстать без данного блока.
6.3. – Вставить динамическую яндекс-карту с указанием адреса, при этом элементы масштабирования должны быть с правой стороны карты.
6.4. – Вставить ссылку на разработчика внизу по центру: Разработано в «ВОСТРЕЦОВ & ДРУЖИНИН» (адрес для ссылки vdstudio.net) и логотип.
6.5. – Информация о четырех видах подъемников (для больших всплывающих окон) по ссылке:
7. -
8. Из скриптов нужно подключить:
8.1. – Модальное окно для того, чтобы получить консультации
8.2. – Модальное окно для того, чтобы узнать стоимость
8.3. – Модальное окно с описанием каждого подъемника
8.4. – Модальное окно успеха
8.5. – Модальное окно Политики конфиденциальности
8.6. – Цели для Метрики, привязанные к успешно выполненным заявкам
8.7. – Динамическое плавающее меню (у каждого якоря должен быть свой адрес для привязки горячих ссылок в контекстной рекламе)
9. Крайний срок: 3 дня с момента принятия заказа с правками, т.е.
до 12:00 (МСК) 13 июля (понедельник).