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. – Название страницы, отображаемое во вкладке в браузере, скопировать из самого верхнего заголовка. (тег – title)
3.5. – При всплывании модальных окон, сайт должен затемняться примерно на 70%.
4. Заявки должны приходить со следующими пометками в теме письма:
4.1. – Верхнее (плавающее) меню: «Получить консультацию из верхнего меню»
4.2. – Кнопка «Заказать звонок» под телефоном в шапке: «Заказ звонка (вверху)»
4.3. – Кнопка «Заказать звонок» под телефоном в подвале: «Заказ звонка (внизу)»
4.4. – Первый экран: «Заявка с первого экрана»
4.5. – Увеличивающиеся фотографии при клике на сорта робусты а арабики (сорт *, скрин*)
4.5.1. – «Заявка из карточки арабики»;
4.5.2. – «Заявка из карточки робусты»;
4.5.3. – Блок «Акция! При заказе от…»: «Заявка по акции – бесплатная доставка от 300кг»;
4.5.4. – Блок «Есть вопросы по условиям доставки и оплаты?»: «Нужна консультация по доставке и оплате»
4.6. – Блок «Получите условия эксклюзивного сотрудничества»: «Эксклюзивное сотрудничество»
4.6.1. – Блок «Получите наши образцы…»: «Заявка на образцы»
4.6.2. В последнем блоке на карте «Задайте вопрос нашему специалисту»: «Вопрос для специалиста»
5. Формы обратной связи и всплывающие окна:
5.1. – Вставить в формы захвата проверку ввода («Имя» проверять НЕ обязательно).
5.2. – Наличие телефона и email (где он есть) обязательно.
5.3. – В поле «телефон» по умолчанию стоит плейсхолдер вида +7 (911) 111 – 11 – 11
5.4. – Выводить уведомление-сообщение «Неверно заполнено поле» (пример на макете), если телефон или email (где он есть) не заполнен. При этом курсор ставить в верхнее обязательное поле.
5.5. – Все всплывающие окна закрываются крестиком в правом верхнем углу, либо кликом вне модального окна.
6. Другие важные моменты:
6.1. – Все кнопки, ссылки, поля, стрелочки имеют ховеры (где-то два состояния, где-то три – смотреть на исходниках дизайна). Если есть три состояния, то делать их все: 1-стандартное положение, 2-наведенное, 3-нажатое.
6.2. – Видео-отзывы будут позже (а, возможно, не будут вообще),
6.3. – Вставить динамическую яндекс-карту с указанием адреса, при этом элементы масштабирования должны быть с правой стороны карты.
6.4. – Вставить ссылку на разработчика внизу по центру: Разработано в «ВОСТРЕЦОВ & ДРУЖИНИН» (адрес для ссылки vdstudio.net) и логотип.
7. ВАЖНО: В вашем коде будут разбираться другие! Будьте, пожалуйста, Людьми!:)
8. Из скриптов нужно подключить:
8.1. – Модальное окно для того, чтобы получить консультации
8.2. – Модальное окно для того, чтобы узнать стоимость
8.3. – Модальное окно успеха
8.4. – Цели для Метрики, привязанные к успешно выполненным заявкам
8.5. – Динамическое плавающее меню (у каждого якоря должен быть свой адрес для привязки горячих ссылок в контекстной рекламе)
Так же потребуется сделать динамические эффекты для главной страницы и заголовков.
9. Крайний срок: 3 дня с момента принятия заказа с правками.
Очень сильно надеемся на приятное и долгосрочное сотрудничество с профессиональным верстальщиком (!) + помните, что для Вас это еще один симпатичный дизайн в Ваше портфолио.