emisart
+7 495 996-02-16 пн-пт 10.00-18.00

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

Примеры верстки. Адаптивная верстка

Автор: Колесников Дмитрий
Дата публикации: 02.06.18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример адаптивной верстки

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

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

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

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

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

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

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


Автор: Колесников Дмитрий
Дата публикации: 02.06.18
To Top