Eng Kr Ru
  • Москва
  • Казахстан
Тел: +7 (495) 287-87-00 clients@artwell.ru
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», перейдя в соответствующий раздел сайта, или продолжить знакомиться с нашим комплексным подходом к разработке интернет-проектов, используя навигацию:


Отзывы о нашей работе
Прочитать
Россети
Прочитать
Пулково 2021
Прочитать
Силовые машины
Прочитать
РСК МИГ
Прочитать
Mercedes-Benz (Daimler)
Прочитать
Мечел новый сайт
Прочитать
ГТЛК 2020
Прочитать
Посольство Японии 2020
Прочитать
ВЭБ Инжиниринг
Прочитать
Русатом
Прочитать
СК Трейд
Прочитать
МИНСТРОЙ РФ
Прочитать
Всемирный фонд природы Амурский филиал
Прочитать
Посольство Японии
Прочитать
МГО Всероссийское общество глухих
Прочитать
Юниаструм Банк
Прочитать
НТК Интурист
Прочитать
Русатом оверсиз инк
Прочитать
Росатом
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
Напишите директору по всем интересующим Вас вопросам