Ваш отдел интернет-маркетинга на аутсорсе
Работаем по KPI на продажи
08 апреля 2020

Что такое верстка сайта?

Основ­ные кри­те­рии каче­ства верст­ки сайта

РазработкаСайты
Декоративное изображение

Что представляет собой верстка сайта

Про­цесс созда­ния сай­та состо­ит из несколь­ких эта­пов, верст­ка – это один из обя­за­тель­ных эта­пов, кото­рый сле­ду­ет после созда­ния маке­та сай­та дизайнером.

Что же это такое? Давай­те обра­тим­ся к Википедии:

Вёрст­ка веб-стра­ниц — созда­ние струк­ту­ры html-кода, раз­ме­ща­ю­ще­го эле­мен­ты веб-стра­ни­цы (изоб­ра­же­ния, текст и т. д.) в окне бра­у­зе­ра, соглас­но раз­ра­бо­тан­но­му маке­ту таким обра­зом, что­бы эле­мен­ты дизай­на выгля­де­ли ана­ло­гич­но макету.

Если еще про­ще, то верст­ка – это про­цесс пре­об­ра­зо­ва­ния кар­тин­ки в html-код — язык раз­мет­ки, понят­ный браузеру.

Пример верстки - описательное изображение

Пример верстки

Любой сайт, кото­рый вы види­те в интер­не­те — это сово­куп­ность про­грамм, фай­лов с кодом. Верст­ка — это опи­са­ние бло­ков и эле­мен­тов сай­та в виде кода. Напри­мер, вот часть HTML-кода одной из стра­ниц наше­го сайта:

Важные критерии качества верстки

У любой рабо­ты есть свои кри­те­рии оцен­ки каче­ства. И веб-раз­ра­бот­ка — не исклю­че­ние. Суще­ству­ет мно­же­ство пара­мет­ров, по кото­рым мож­но оце­нить верст­ку веб-стра­ниц, но мы выде­лим 3 из них, кото­рые наи­бо­лее важ­ны и не тре­бу­ют от заказ­чи­ка зна­ния тех­ни­че­ской части процесса:

 

Соот­вет­ствие верст­ки маке­ту дизайнера Вер­сталь­щик в сво­ей рабо­те выпол­ня­ет роль чело­ве­ка, кото­рый дела­ет репро­дук­цию кар­ти­ны худож­ни­ка (в дан­ном слу­чае в его роли высту­па­ет дизай­нер). Все эле­мен­ты в верст­ке долж­ны мак­си­маль­но точ­но соот­вет­ство­вать маке­ту — по раз­ме­рам, цве­ту и положению.
Кроссбра­у­зер­ность Кроссбра­у­зер­ная верст­ка оди­на­ко­во хоро­шо отоб­ра­жа­ет­ся во всех бра­у­зе­рах, через кото­рые могут смот­реть сайт.

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

Адап­та­ция под раз­ные устройства Сей­час поль­зо­ва­тель может зай­ти на сайт с раз­ных устройств: со смарт­фо­на, план­ше­та, ноут­бу­ка или с пер­со­наль­но­го ком­пью­те­ра с огром­ным мони­то­ром. Важ­но, что­бы верст­ка сай­та при раз­ной ширине экра­на под­стра­и­ва­лась (адап­ти­ро­ва­лась) под него и при этом не зале­за­ла за область экра­на и не «лома­лась».
 Валид­ный код Суще­ству­ют стан­дар­ты, опре­де­лен­ные пра­ви­ла, по кото­рым дол­жен писать­ся HTML-код. Каче­ствен­ная верст­ка соот­вет­ству­ет этим правилам.

Это важ­но как для кор­рект­но­го отоб­ра­же­ния сай­та бра­у­зе­ра­ми, так и для SEO-про­дви­же­ния — робо­ты поис­ко­вых систем учи­ты­ва­ют, нет ли оши­бок в коде.

Что такое адаптивная верстка

Адап­тив­ная верст­ка – это верст­ка, кото­рая под­стра­и­ва­ет­ся под раз­ные раз­ре­ше­ния экра­на. При этом на стра­ни­це может изме­нить­ся поло­же­ние эле­мен­тов, их раз­мер и даже пол­но­стью внеш­ний вид.

Описательное изображение

Блок с порт­фо­лио на нашем сай­те на экране шири­ной боль­ше 960px

Описательное изображение

Тот же блок для экра­на шири­ной 420px

На боль­шом экране блок со спис­ком нахо­дит­ся сле­ва, а спра­ва — бло­ки с кар­тин­ка­ми в 3 колон­ки. На малень­ком же экране бло­ки с кар­тин­ка­ми «убе­жа­ли» под спи­сок и «вста­ли» в 2 колонки.
Описательное изображение

Меню для ПК на нашем сайте:

Описательное изображение

Меню для мобиль­ных устройств:

Меню для мобиль­ных «схло­пы­ва­ет­ся» в кноп­ку и раз­во­ра­чи­ва­ет­ся по кли­ку, то есть этот эле­мент пол­но­стью изме­ня­ет­ся при про­смот­ре с теле­фо­нов. Этот метод отоб­ра­же­ния исполь­зу­ет­ся сей­час на боль­шин­стве адап­тив­ных сайтов.

Пра­ви­ла изме­не­ния верст­ки зара­нее про­ду­мы­ва­ют­ся дизай­не­ром и вер­сталь­щи­ком. Бла­го­да­ря это­му сай­том удоб­но и ком­форт­но поль­зо­вать­ся на любом устрой­стве с любой шири­ной экра­на. В насто­я­щее вре­мя боль­шин­ство сай­тов дела­ют­ся адап­тив­ны­ми, и поис­ко­вые систе­мы отда­ют при­о­ри­тет имен­но тако­му виду верстки.

Мы любим дарить подарки!

Все способы получить клиентов из интернета: список из 30 каналов продаж в интернете с кратким описанием каждого.

Кейсы

Молодежный проект
«Инициативы Ямала»


Авто­ма­ти­за­ция 4 500 заявок

Подробнее Молодежный проект<br>«Инициативы Ямала»

Онлайн доставка
молочных продуктов
«Золотые луга»


Рост про­даж в 8 раз
Подробнее Онлайн доставка<br>молочных продуктов<br>«Золотые луга»

Ресторан баварской кухни
Brezelino


Выве­ли в онлайн

Поток зака­зов вырос с 10 до 40 в день

Подробнее Ресторан баварской кухни <br> Brezelino

Семейный гриль-ресторан Rancho


Запол­ня­е­мость ресто­ра­на вырос­ла на 20%

Подробнее Семейный гриль-ресторан Rancho

Интернет-магазин подарочных наборов
для детей Play Plan Box


Объ­ем про­даж вырос в 7 раз

Цена при­вле­че­ния кли­ен­та сни­же­на в 2 раза
Подробнее Интернет-магазин подарочных наборов <br> для детей Play Plan Box
Портфолио

Статьи и полезные материалы

Как рассчитать бюджет для теста канала продвижения
19 ноября 2021

Как рассчитать бюджет для теста канала продвижения

Какой объ­ем средств от при­бы­ли вы гото­вы тра­тить на при­вле­че­ние кли­ен­тов ежемесячно?

ВебвизорСайты
Ошибки при анализе сайта через вебвизор
15 июня 2021

Ошибки при анализе сайта через вебвизор

О раз­ра­бот­ке кон­цеп­ции сайта

ВебвизорДизайнСайты
Видеоконтент — не тренд, а необходимость. Пожалуй, это навсегда!
27 февраля 2021

Видеоконтент — не тренд, а необходимость. Пожалуй, это навсегда!

Как ани­ма­ция и видео­кон­тент повы­ша­ют кон­вер­сию сайта 

SMMПривлечение клиентов
Памятка по запуску продвижения в соцсетях
24 декабря 2020

Памятка по запуску продвижения в соцсетях

Про­дви­же­ние биз­не­са в соц­се­тях – поша­го­вая инструкция

SMM
SMM-маркетинг служб доставки пиццы и суши
7 сентября 2020

SMM-маркетинг служб доставки пиццы и суши

Про­дви­же­ние ресто­ра­нов: наше иссле­до­ва­ние мар­ке­тин­га служб достав­ки еды

SMMДизайнПривлечение клиентов
Что такое верстка сайта?
8 апреля 2020

Что такое верстка сайта?

Основ­ные кри­те­рии каче­ства верст­ки сайта

РазработкаСайты

Все статьи

Все сложно и непонятно?

Закажите обратный звонок — мы позвоним и все объясним