Бесплатно зарегистрируйся и получай уведомления о новых проектах по работе

Поделиться:

Вёрстка портала

i
Заказчик
Отзывы фрилансеров: + 56 - 0
Зарегистрирован на сайте 15 лет и 3 месяца
Бюджет: по договоренности
Задача: сверстать новый дизайн для сайта domananeve.ru

Макеты: www.dropbox.com/sh/6ql70p...

Чтобы было понятно как тянуть макеты, они отрисованы в 4 разрешениях. Полный список страниц – в десктопной версии, в остальных могут быть отрисованы не все страницы, а наиболее сложные. Остальные нужно сделать по аналогии. Если появятся вопросы по конкретным элементам – готов ответить. В целом тянется так: берём десктопную версию. При уменьшении разрешения сначала сжимается сайдбар с 300 до 240 пикселей, затем он пропадает вовсе, ну а дальше что происходит с контентной областью – отрисовано. В качестве примере – почти так же сделано на auto.ru

Внимание! В коде страницы не должно возникать дублирования контента (например для мобильной и десктопной версии). К примеру, ранее у нас был случай, когда текст статьи повторялся в коде 2 раза, что резко негативно влияет на поисковое ранжирование сайта. 

Общие требования к вёрстке:

- Валидная
- Корректно отображается во всех современных браузерах на десктопах, планшетах, смартфонах
- Проходит тест скорости загрузки Google developers.google.com/spe... минимум на 95 баллов из 100 для компьютеров, так и минимум на 87 для мобильных
- Контентная область выше в коде насколько это возможно
- Микроразметка: элементы навигации размечены разметкой schema.org 
- Теги заголовков H1-H6 можно использовать только в контентной области и не в коем случае в элементах навигации
- H1 только один на странице
- Вёрстка адаптивная, проходит тест от Google с показателем Отлично www.google.com/webmasters...
- Максимум картинок, используемых в навигации/интерфейсах должно быть сделаны при помощи CSS-спрайтов

По конкретным элементам:

- При клике на картинку с планировкой квартиры открывается большое изображение. Пример domananeve.ru/novostroyki... Аналогично на странице ход строительства domananeve.ru/novostroyki... 
- Везде, где на страницах указан телефон – это ссылка вида <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. Появляются не резко, а выезжают сверху (пример auto.ru/cars/porsche/all/... 
- при вводе стоимости в форму поиска, цифры разделяются пробелом после каждых 3 знаков. Пример: novoselovo.com
- подсказки при вводе текста в форму поиска (в поля «название ЖК» и «Метро, район, локация»). Ваша задача передать php-скрипту буквы, которые ввёл пользователь, скрипт отдаёт вам данные формате json, вы выводите данные в виде подсказок. сам php-скрипт будет предоставлен.
- на странице object.psd при выборе в меню пунктов Видео, Панорамы, Фото от пользователей и т.п. должен сразу показываться соответствующий контент (это не ссылки на другие страницы). При этом в адресной строке должно подставляться что-то вроде #panorami или #video т.е. чтобы если пользователь скопирует ссылку из браузера и поделиться ей с другом, то у друга сразу же открылись, к примеру, панорамы.
- внимательно смотрим все комментарии в макетах и скрытые слои во избежание недоразумений

В комментариях сразу пишите стоимость и сроки.
Разделы:
Опубликован:
20.05.2017 | 13:23

Теги: верстальщик удаленно, сверстать сайт, сделать верстку, требуется верстальщик, сверстать страницу, ищу верстальщика