Вёрстка Панир.ру, сайта с вегетарианскими рецептами

Задача: сверстать резиновый сайт в соответствии с пожеланиями дизайнера.

Детализация задачи

Панир.ру — это проект дизайнера Антона Ловчикова, поэтому все требования к поведению вёрстки заранее известны и в наглядной форме изображены на макетах. Нужно сделать растягивающиеся заголовки, предусмотреть удобный способ форматирования текста, написать немного джаваскрипт-функций, дополняющих основную функцинальность, а также сверстать почти десяток типовых страниц, каждая из которых обладает своими особенностями.

Сетка

Дизайнер предусмотрел интересную сетку, разметив макеты всех страниц соответствующим образом. С такими исходниками очень приятно работать, и я с удовольствием провёл не один час, выверяя расстояния в процентах. Сайт резиновый, поэтому пришлось немного поколдовать — Антон считал все размеры относительно ширины всей страницы, а в CSS все процентные отношения считаются исходя из ширины родительского блока. Результат того стоил, и даже Opera со своим округлением дробных значений ширины, выраженных в процентах, не смогла его испортить.

К сожалению, в вёрстке нельзя точно задать расстояния между базовыми линиями строк текста (о чём пишет Черенкевич в одной из статей из цикла «Модульные сетки»), поэтому вертикальные интервалы между блоками заданы на глаз, что вполне приемлимо и никому не заметно.

HTML-разметка и CSS-стили

Как обычно, я написал семантичный, структурированный и понятный xHTML-код и много CSS-стилей, задающих грамотное поведение разметки в различных полевых условиях и браузерах. Работа получилась продуктивной и интересной, потому что, вместо фантазирования на тему «правильного» поведения того или иного элемента страницы, я смог сосредоточиться на реализации задуманного дизайнером.

Дизайнерские фишки и их реализация

• Процентные значения ширины высчитывались вручную, подобно описанному Чикуёнком методу вёрстки растягивающихся многоколоночных сайтов — ширина относительно страницы домножалась на несколько коэффициентов, выражающих отношение ширин между родительскими блоками.
• Нестандартные шрифты реализованы с помощью CSS3-инструкции @font-face. К счастью, эта возможность существует уже давно и работает стабильно во всех современных браузерах, даже в старых IE.
• «Обед наудачу» на главной с гранцией из точечек тянется джавскриптом, чтобы его размер был кратным расстоянию между точками. Растягивание по высоте происходит автоматически, т.к. правильно подобрана высота строки и размер изображения.
• Выносные элементы в текстовых блоках сделаны float-элементами, смещёнными на ширину отступа справа, что позволяет располагать их в том же потоке, что и текст. Оформление цитат там же сделано с помощью псевдоэлементов :before и :after и свойства content. Это работает везде, а также в IE8+, что вполне допустимо.
• Время приготовления блюда сделано вполне семантичным элементом sup, правда его пришлось выравнивать вручную, т.к. в Webkit отлично от других браузеров считается смещение надстрочного элемента.
• Ровные ряды блюд с картинками разной высоты в энциклопедии получилось сделать с использованием vertical-align:bottom для элементов списка с display:inline-block.

Что можно сделать лучше?

• Оптимизировать файлы шрифтов, возможно, вырезав из них ненужные символы.
• Вместо (или вместе с) растягивания заголовков джаваскриптом использовать CSS Media Queries, которые позволяют применять разные стили в зависимости от устройства (например, для разных разрешений экрана).
• Более умно структурировать CSS-код, чтобы полностью использовать преимущества каскадности, либо совсем от неё отказаться. Сейчас получилось нечто среднее, и я не уверен, что будет лучше для сайта такого размера.

Резюме

Всего я сверстал 10 страниц, 3 раза переделывал раскладку страницы, чтобы добиться необходимого поведения при растягивании и «прилипания» футера к низу экрана, написал около 1000 строк CSS-кода и около 500 строк Javascript-кода. В проекте вовсю используется jQuery, пришлось написать свою функцию $.fn.getMarginInPixels(), потому что свежий хром сошёл с ума.

Вёрстка сайта валидная (за исключением <input type="search" />, сделанного специально для мака) и семантичная, у всех страниц правильное и осмысленное оглавление (outline). Основные функции, само собой, работают без Javascript.

Изначально я планировал сделать эту работу за неделю, но Антон сказал, что лучше сделать хорошо, чем быстро, и я не торопясь нашёл самые подходящие решения задач, потратив в итоге 2 недели. Подобная работа стоит около 20 тысяч рублей.