Фриланс-проекты › Вёрстка одной страницы Вёрстка одной страницы

Здравствуйте! Смотрите макет, который нужно сделать в виде картинки в приложенном файле.

PSD макет вышлю Вам уже в рабочей области проекта.

Макет простой, блоки базовые.

Верстку делаем под 2 размера. Ширина

960 px для ПК

и 480 px для мобильных

Платформы: Windows, MacOs.

Кроссбраузерность: будет произведена проверка последних версий основных браузеров:

IE, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Chrome for Android.

Стандарты: HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.

Соответствие макету: допустимы незначительные различия. Нет нужды вымерять отступы и размеры шрифта до каждого пикселя.  

Шрифт: если возможно нестандартный шрифт, который в PSD макете заменить стандартным, то меняйте на стандартный.

Ширина сайта: статична, сайт выровнен по центру. При 960 px должна отсутствовать горизонтальная прокрутка.

Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70-150% должны выглядеть так же как и при 100%. Допускаются не большие погрешности, которые возникают из-за неправильных округлений координат браузеров.

Масштаб в IE7-8 не проверяется.

Независимость: Каждый экран и существенный блок, является независимым от других. То есть его можно перенести в другую часть html верстки и дизайн останется прежним (не поедет.)

(при необходимости почитайте верстку по методологии бэм)

HTML код:

Кодировка – utf-8

Структурный, комментируемый код (обозначается начало/конец крупных блоков). Отбивка табами.

Семантическая разметка на уровне грамотного использования тегов.

Имена классов и идентификаторов – осмысленные, на Ваше усмотрение.

Классы служат для привязки оформления, идентификаторы – скриптов.

CSS код:

Структурный, отбивка табами.

Комментариями обозначены начало/конец крупных модулей/блоков разметки.

Допускается использование вендорных префиксов.

Стили для IE7-8 вынесены в отдельные CSS.

LP должен так же быть адаптирован под основные мобильные разрешения.

Javascript код:

Структурный, отбивка табами.

Имена переменных осмысленные, на наше усмотрение.

Снабжен комментариями: описаны назначения

методов/классов

функций

условий.

Для объемных задач используется ООП, для простых – обычные функции.

Код должен быть без ошибок.

Изображения:

Имена файлов осмысленные, на наше усмотрение.

Проходят базовую оптимизацию на уровне оптимизации для Веб в Photoshop.

Малые изображения оформления объединенные по назначению и склеиваются в спрайты.

Файловая организация:

HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.

Стили в папке /css/

Javascript - /js/

Изображения оформления - /img/

Изображения содержания - /pic/

Оптимизировать скорость загрузки страницы.

Отложить загрузку данных необязательных для первого отображения страницы

Оптимизировать jpg и png-файлы

Внести правки в дизайн, удалив тяжеловесные элементы

Ссылки:

При нажатии на номер телефона, переходит на звонок.

Номер телефона обрамлен в ссылку вида <a href="tel:+37529xxxxxxx">XXXXXXX<a/>При нажатии на иконку вайбера переходит в приложение вайбера.