Верстка сайта
В результате верстки макеты арт-дизайна, проработанные на этапе технического дизайна, будут преобразованы в 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», перейдя в соответствующий раздел сайта, или продолжить знакомиться с нашим комплексным подходом к разработке интернет-проектов, используя навигацию: