Задача: сверстать новый дизайн для сайта
Макеты:
Чтобы было понятно как тянуть макеты, они отрисованы в 4 разрешениях. Полный список страниц – в десктопной версии, в остальных могут быть отрисованы не все страницы, а наиболее сложные. Остальные нужно сделать по аналогии. Если появятся вопросы по конкретным элементам – готов ответить. В целом тянется так: берём десктопную версию. При уменьшении разрешения сначала сжимается сайдбар с 300 до 240 пикселей, затем он пропадает вовсе, ну а дальше что происходит с контентной областью – отрисовано. В качестве примере – почти так же сделано на auto.ru
Внимание! В коде страницы не должно возникать дублирования контента (например для мобильной и десктопной версии). К примеру, ранее у нас был случай, когда текст статьи повторялся в коде 2 раза, что резко негативно влияет на поисковое ранжирование сайта.
Общие требования к вёрстке:
- Валидная
- Корректно отображается во всех современных браузерах на десктопах, планшетах, смартфонах
- Проходит тест скорости загрузки Google
минимум на 95 баллов из 100 для компьютеров, так и минимум на 87 для мобильных
- Контентная область выше в коде насколько это возможно
- Микроразметка: элементы навигации размечены разметкой schema.org
- Теги заголовков H1-H6 можно использовать только в контентной области и не в коем случае в элементах навигации
- H1 только один на странице
- Вёрстка адаптивная, проходит тест от Google с показателем Отлично
- Максимум картинок, используемых в навигации/интерфейсах должно быть сделаны при помощи CSS-спрайтов
По конкретным элементам:
- При клике на картинку с планировкой квартиры открывается большое изображение. Пример
Аналогично на странице ход строительства
- Везде, где на страницах указан телефон – это ссылка вида <a href='tel:+78121234567'>(812) 123-45-67</a>
- При клике на ссылки «отдел продаж», «задать вопрос» и т.п. должно окрыляться модальное окно со сторонней html-страничкой. Реализация например через fancybox.
- на странице object.psd два плавающих меню. мы хотим попробовать какое будет работать лучше. сделайте 2 html-странички с этими разными меню. По моменту их появления на экране – float menu type 1 появляется сразу после прокрутки заголовка h1, float menu type 2 после прокрутки слоя object_menu. Появляются не резко, а выезжают сверху (пример
- при вводе стоимости в форму поиска, цифры разделяются пробелом после каждых 3 знаков. Пример:
- подсказки при вводе текста в форму поиска (в поля «название ЖК» и «Метро, район, локация»). Ваша задача передать php-скрипту буквы, которые ввёл пользователь, скрипт отдаёт вам данные формате json, вы выводите данные в виде подсказок. сам php-скрипт будет предоставлен.
- на странице object.psd при выборе в меню пунктов Видео, Панорамы, Фото от пользователей и т.п. должен сразу показываться соответствующий контент (это не ссылки на другие страницы). При этом в адресной строке должно подставляться что-то вроде #panorami или #video т.е. чтобы если пользователь скопирует ссылку из браузера и поделиться ей с другом, то у друга сразу же открылись, к примеру, панорамы.
- внимательно смотрим все комментарии в макетах и скрытые слои во избежание недоразумений
В комментариях сразу пишите стоимость и сроки.