Верстка сайтов: что это, виды и их краткие особенности
Ashino 13 июня 2020 Читать
Что же такое верстка?
Версткой сайта является превращение макета сайта, который вам создал дизайнер или же вы сами, в HTML (разметка сайта) и CSS-код(его внешний вид), т.е. в читаемый браузерами вид, где уже будет интерактив и взаимодействие с конечным пользователем.
Зачем?
Верстка сайтов является одним из важнейших этапов создания любых интернет-ресурсов, поскольку от работы верстальщика зависит: скорость загрузки веб-сайта; соответствие стандартам и нормам html; соответствие требование поисковых систем; правильность отображения веб-страницы в различных браузерах(кроссбраузерность); адаптивность под различные экраны.
И при выборе вида верстки, зависит какой конечный продукт будет в итоге, как он будет выглядеть и как с ним будет взаимодействовать пользователь.
Картинка типо показывание перевода из макета в код
Виды верстки
Табличная верстка
С неё всё и началось – это набор таблиц с невидимой границей, реализуемый лишь HTML кодом, в которой располагался контент.
Такой способ верстки позволяет удобно размещать отдельные элементы веб-страницы, а также его простота и быстрота в разработке, в совокупности с кроссбраузерностью, являются главными плюсами табличной верстки.
Но, помимо этого, имеются и минусы, в виде долгой загрузке всей страницы, если таблица массивная, т.к. она не появится до тех пор, пока не будет загружена полностью. Также сложности возникают при внесении изменений, это происходит из-за иерархической структуры тегов, что приводит к громоздкости написанного кода. И плохой индексации поисковыми роботами, из-за расположения контента относительно друг друга, а он находится далеко, что затрудняет попадание сайта в топ поисковой выдачи.
Блочная верстка
Это подход, при котором сайт строят на основе блоков и в качестве данных блоков выступают теги
Можно выделить следующие преимущества:
- Уменьшение объема кода, что позволяет увеличить скорость загрузки сайтов и уменьшить нагрузку на ваш сервер;
- Повышение читаемости кода;
- Удобство изменение оформления, путем правки стилей, а также позволяет решать задачи по нестандартному размещению элементов на веб-странице и реализации адаптивной версии сайтов как для компьютеров, так и для смартфонов;
- SEO. Благодаря распознаванию именно контента и в итоге его правильной семантике.
Но несмотря на все плюсы, есть и минусы:
- Сложность в освоении, но это решаемо учебой и усердием;
- Проблемы с кроссбраузерность, чтобы решить данный задачу, потребуется приложить больше усилий, чем в случае с применением таблиц.
Семантическая верстка
Семантическая верстка – это подтип блочной верстки, но в данном случае, мы используем html разметку таким образом, чтобы наиболее точно передать значение и тип контента, поисковым роботам и программам, которые в свою очередь будут ранжировать ваш веб-сайт в поисковых системах.
Статическая или фиксированная верстка
Является таким типов верстки, при котором он привязан лишь к одному размеру экрана. Т.е. если вы зайдете со смартфона на такой сайт, вам придется его листать страницу в разные стороны, т.к. контент сохранил свои пропорции в соответствии с заданным ему размером. Пример данной верстки можно увидеть на сайтах без адаптивной верстки.
Резиновая верстка
Резиновая верстка – данный вид подстраивается под размеры экрана устройства, с которого вы зашли и каждый элемент рассчитывается в процентном соотношении. Является не самым удачном методом адаптивности под различные устройства. Является одним из видов адаптивной верстки.
Адаптивная верстка
Адаптивная верстка – это веб-сайт, который на одном мониторе отображается полная версия, на планшете уже изменились размеры блоков, кнопок и элементов и так до мобильной версии сайта. Его особенность в том, что он имеет несколько вариантов отображения в зависимости от ширины экрана или типа устройства. Так же это можно это видно, при изменении ширины браузера, но рывками. При решении данных недостатков, в виде данных «рывков», появилась отзывчивая верстка.
Отзывчивая верстка
Отзывчивая верстка – это та же адаптивная верстка, но исправлены недостатки в виде рывков, т.е. появилась, так называя «резиновость» сайта. При изменении ширины браузера – элементы медленно меняются в своих размера, блоки плавно ужимаются, а при контрольных точках сайт меняет расположение блоков. Но данная верстка, при всех своих плюсах, стоит дороже и более сложнее при разработке.
Стоит ли переходить со Sketch на Figma?
Lewayer • 5 июня 2020
Конкуренция между этими двумя удивительн..