Необходимо сделать 2 простых мобильных ленда, общий дизайн которых представлен на прикрепленных файлах.
Вот основные технические требования к лендам:
1) Ленды представляют собой некое подобие квиза, но в результатах не учитываются ответы пользователя, а главной целью является вовлечение пользователя. Именно поэтому для данного ленда не нужна база данных с целью проверки правильности/неправильности его ответов, равно как и не нужен подсчет результатов.
2) Ленд делается под мобильные телефоны и смартфоны шириной экрана от 128px примерно до 400px, соответственно необходимо сделать ленд резиновым, чтобы он нормально сжимался по ширине, но в то же время ограничить его максимальную ширину 320px (наиболее популярное разрешение смартфонов). На первом макете ленда я показал, что кнопки для широкого экрана должны располагаться на одном уровне, а для узкого экрана – одна под другой.
3) Ленды необходимо сверстать максимально просто – без всяких фреймворков и наверное JQuery (я не спец в этом). В идеале это простая страница на HTML/CSS/PHP с Java скриптами (важно чтобы используемые скрипты поддерживались древними браузерами типа Opera Mini 4, 5, Nokia Web Browser, IBrowse, Android Browser и др.).
4) Конечный ленд должен состоять из 2-3 файлов (.html или .php с прописанными стилями .css, и если требуется файла с .js скриптами). Общий вес ленда (по сути там будет только код) не должен превышать 30-50кб.
5) Ленды как видно из макета, должны состоять из трех типов страниц – это стартовый экран с предложением пройти тест, несколько типовых страниц с вопросами, и финальной страницы на котором будет показан результат и CTA. Конкретно по каждой странице:
i) первая стартовая страница с предложением пройти тест – представляет собой обычную HTML страницу без наворотов и всяких функций
ii) на втором типе страниц с типовыми вопросами в верхней части необходимо сделать счетчик, где будет указано сколько вопросов еще осталось пройти. Данный вариант страницы нужно сделать в двух вариантах – в первом случае пользователю будет предложен один вопрос и две кнопки с кнопками "Да/Нет" или "Правда/Не правда", а во втором случае на один вопрос будет предложено несколько ответов, возле одного из которых пользователь должен будет поставить галочку и перейти к следующему вопросу. После нажатия на кнопку должен происходить переход на следующую страницу!
iii) третий тип страницы также как и первая представляет собой обычную HTML страницу, с результатами выдаваемыми пользователю (не зависят от его ответов!!!) и возможно какой-то CTA.
6) Вопросы и тексты для квизов, представленных на скрине я взял отсюда
– но сами тексты, их оформление, стили, цвета, отступы – это все не важно – потом все будет тестироваться и еще кучу раз переделываться... Сейчас нужен сам макет!
7) В результатах работы необходимо будет предоставить 2 ленда (их работу проверим на нескольких старых телефонах Nokia, LG, и паре современных смартфонов), краткая инструкция – где и что изменить чтобы установить количество шагов, оставшихся пользователю до прохождения теста, изменить сами вопросы и тексты для стартовой и финальной страниц.