Eng Скачать презентацию
  • Москва
  • Казахстан
Тел: +7 (495) 287-87-00
Факс: +7 (495) 225-13-03
clients@artwell.ru
Тех. поддержка: 8-800-700-2871
115114, г. Москва,
Дербеневская набережная, д. 11,
БЦ "Полларс", блок А (или "здание А"), сектор 2, 6 этаж
+7 (721) 299-63-16
karaganda@artwell.ru
Тех. поддержка: 8-800-700-2871
Казахстан,
г. Караганда,
проспект Бухар Жырау 49, 2 этаж

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

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

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

Чтобы сэкономить время и деньги клиентов, компания «ARTWELL» предлагает более совершенный подход – Responsive Web Design. Его суть заключается в создании «умной» верстки, которая самостоятельно определит размер экрана мобильного устройства и отобразит страницу сайта в оптимальном виде.

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

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

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

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

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

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

Работа по верстке интернет-страниц легко распараллеливается на нескольких исполнителей, поэтому, если требуется успеть к определенной дате – это вполне достижимо. Сроки по верстке сайтов можно сократить до 40% от срока, рассчитанного на одного человека.

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

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


Отзывы о нашей работе
Прочитать
МГО Всероссийское общество глухих
Прочитать
Юниаструм Банк
Прочитать
НТК Интурист
Прочитать
Русатом оверсиз инк
Прочитать
Росатом
Прочитать
РТ Лабс
Прочитать
Severin Group
Прочитать
Royal Canin
Прочитать
Севкав
Прочитать
Казахстан
Прочитать
Пепеляев Групп
Прочитать
Вектор
Прочитать
ОАО "Курорты Северного Кавказа"
Прочитать
ДТиЗН г.Москвы
Прочитать
АО "НДКО "АКГ"
Прочитать
Таском, ЗАО
Прочитать
Роспотребнадзор
Прочитать
Роструд
Прочитать
Росрезерв
Прочитать
Мин инвест НН
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7