Верстка сайта

В результате верстки макеты арт-дизайна, проработанные на этапе технического дизайна, будут преобразованы в html-шаблоны, пригодные для интеграции с системой управления сайта.

Важнейшее требование к сверстанным шаблонам – стопроцентная идентичность макетам дизайна. Только так можно в полной мере реализовать идеи, заложенные на этапе проектирования.

Не менее важна техническая составляющая верстки сайта: результат должен соответствовать стандартам World Wide Web Consortium (w3c), или, говоря техническим языком – быть валидным. Также страницы должны одинаково отображаться во всех популярных интернет-браузерах.

    Это полезно знать:
    Популярные браузеры в России
    по состоянию на август 2011
    — Opera 11 16%
    — Chrome 14,3%     — Opera Mini 12,8%     — Explorer 8 12%     — Firefox 5 11,9%

Еще на этапе маркетингового исследования составляется портрет аудитории, одной из частей которого является статистика по предпочтительным программам, которые используют потенциальные клиенты для просмотра сайтов в Интернете. Кроме этого, собираются данные по используемым мобильным устройствам. Вся полученная информация формируется в список требований к верстке по совместимости проекта.

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

Универсальная резиновая верстка

Полученные html-шаблоны должны легко «растягиваться» в разные стороны, подстраиваясь под размер экрана и содержимого.

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

Резиновые сайты удобны, когда необходимо как можно большее пространство для размещения пользовательских интерфейсов, для лучшего восприятия информации или по конъюнктурным соображениям.

В этом случае нельзя точно предугадать, в каком именно виде посетители получат сайт на свое устройство доступа в Интернет. На больших экранах он будет просторным и воздушным, на маленьких элементы подвинутся друг к другу. В случаях, когда контроль над информацией сайта критичен, применяют так называемую «фиксированную» верстку.

Фиксированные сайты могут быть либо одной и той же ширины, либо быть частично-резиновыми: на маленьких экранах сайт будет автоматически сужаться, на больших – расширяться до определенного значения и останавливаться. Чаще всего это наиболее оптимальный способ реализации динамики, позволяющий получить совместимость с максимальным числом устройств просмотра сайтов.

Кроме размера экрана, грамотная верстка также учитывает и содержимое, которое будет наполнять различные информационные блоки интернет-страниц. Некоторые из них должны менять высоту, в зависимости от контента (размера текста, изображения), другие – отекать лишние края. Все это требуется для того, чтобы сайт сохранил заложенный в него дизайн независимо от возможных ошибок и недосмотров в сопровождении ресурса.

Подход Responsive Web Design

Когда требования по охвату аудитории крайне высоки, универсальной резиновой верстки бывает недостаточно. В таких случаях прибегают к использованию специальных скриптов, которые сперва определяют, с какого устройства посетитель пытается посмотреть сайт, а после выдают ему версию, оптимизированную под нужный формат. Это ведет к значительному увеличению трудозатрат на верстку сайтов.

Таким образом, вместо того, чтобы для каждого разрешения экрана делать отдельную версию сайта, дизайнер с самого начала описывает поведение элементов страниц при разных вариантах отображения, а html-кодер реализует эту логику.

Однако, при помощи Responsive Web Design можно реализовать только относительно простые интерфейсы. Там же, где обилие навигации сочетается с множеством информационных блоков, все же придется использовать дополнительные скрипты для оптимизации вывода.

Стоимость и сроки верстки сайтов

    Состав команды:
    Копирайтер
    Дизайнер иконок     Технический дизайнер     QA менеджер     Сроки: 1 – 16 дней

В простейших случаях верстка сайта заключается в нарезке макетов главной и внутренней страниц. В итоге формируются шаблоны, которые в дальнейшем подключаются к CMS и после готовы для заполнения. Такая работа занимает не больше дня.

В случае с порталами, с сайтами, требующими особенной проработки, с онлайн-сервисами и другими крупными интернет-проектами, речь может идти о многих десятках шаблонов. Максимальный срок, с которым нам приходилось сталкиваться на своей практике – это 1 месяц верстки, при постоянном контроле менеджера проекта и тестировании результата согласно требованиям проектной документации.

Мы тщательно следим за качеством работ, производимых нашими специалистами, за тем, чтобы весь комплекс задач по созданию проекта шел в едином русле, очерченным вместе с клиентом и выверенным работой бизнес-аналитика.

Вы можете узнать больше про компанию «ARTWELL», перейдя в соответствующий раздел сайта, или продолжить знакомиться с нашим комплексным подходом к разработке интернет-проектов, используя навигацию: