Анализ современных видов верстки сайтов

Авторы: Палаш Борис Викторович

.

Рубрика: Технические науки

Страницы: 37-40

Объём: 0,23

Опубликовано в: «Наука без границ» № 6(34), июнь 2019

Скачать электронную версию журнала

Библиографическое описание: Палаш Б.В. Анализ современных видов верстки сайтов // Наука без границ. 2019. № 6(34). С. 37-40.

Аннотация: В статье рассматриваются пять основных типов современной верстки. Описываются их особенности и порог вхождения для новых специалистов, также дано обоснование необходимости использования каждого вида верстки для определенного типа сайтов.

Каждый веб-разработчик во время своей работы сталкивается с таким вопросом: какой тип верстки выбрать для реализации текущего проекта? Для этого необходимо проанализировать самые популярные решения. На данный момент существует всего шесть основных видов верстки.

Первый вид верстки – это обычная «статическая» верстка. Суть такой верстки заключается в том, что положение сайта и его блоков совершенно не зависит от размеров экрана, такая верстка имеет строго определенный размер в пикселях. У такого типа верстки существуют как плюсы, так и очень сильные минусы. Самым главным плюсом такой верстки является ее независимость от размена экрана. Благодаря этому не изменяется изначальная задумка, и сайт выглядит одинаково на всех устройствах.

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

Рис. 1. Пример реализации статической верстки

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

Такой тип не требует особых усилий со стороны верстальщика и подойдет для верстки оконных приложений или страниц с заранее известными размерами.

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

Рис. 2. Пример поведения резиновой верстки

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

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

-     Для создания дизайна нет возможности использовать растровые изображения. Можно использовать либо стандартные тэги HTML страниц, либо простые векторные фигуры, так как при изменении размера экрана любая картинка будет терять свои пропорциональные размеры.

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

Третьей версткой из рассмотренных является верстка с использованием таблиц, иначе говоря «Табличная верстка». Такой тип верстки предполагает, что весь сайт состоит из главной таблицы, в ячейках которой располагаются различные элементы или другие таблицы [2]. Данный вид верстки является самым простым в реализации из всех возможных, однако имеет ряд недостатков. Таким недостатком является обилие большого количества одинаковых HTML тегов, которые возникают из-за множества вложенных таблиц. Благодаря чему возникает сложная иерархия, которая очень сложна для восприятия сторонним программистом. По этой же причине различные поисковые системы, такие как Google или Yandex, очень редко индексируют такие сайты. В результате чего такие сайты не попадают на первые страницы при поисковых запросах. Из-за плохой читабельности такой тип верстки практически невозможно встретить на крупных сайта в сети интернет. Однако она все еще продолжает использоваться в особых проектах, где необходим вывод данных в сложной табличной форме.

Рис. 3. Пример реализации табличной верстки

Использование же такого типа верстки в повседневных проектах является плохим тоном среди веб-разработчиков.

К четвертому типу можно отнести самую распространенную на данный момент, но уже теряющая свою популярность «Блочную» верстку. Такая верстка состоит из большого количества различный <div> тегов языка HTML в сочетании с языком каскадных таблиц стилей (CSS) [3]. Преимуществом такой верстки является возможность формирования простой и удобной структуры, которая при правильной организации уменьшает порог вхождения стороннего разработчика в программный код, для внесения необходимых исправлений. Благодаря использованию только стандартных тегов, разработчик может не задумываться о кроссбраузерности своего проекта.

Рис. 4. Пример реализации блочной верстки

Предпоследний рассмотренный тип верстки «Адаптивная верстка». Данный тип является самым сложным для реализации, его использование можно встретить только на больших и крупных проектах, либо на сайтах, которые основаны на популярных фреймворках. Этот тип верстки применяется в случаях, когда заранее неизвестно, с какого вида устройства будет подключаться пользователь [4]. Структура сайта остаётся такой же, как при «Блочной» верстке, однако поддержка большого количества устройств осуществляется за счет большого набора каскадных таблиц стилей, которые описывают поведение сайта для каждого возможного размера экрана.

Рис. 5. Пример отображения адаптивной верстки

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

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

Семантическая верстка – последний тип верстки, взятый для рассмотрения. Данная верстка получила свое распространение совсем недавно, с выходом HTML 5. В основе данного принципа лежит необходимость использования специализированных тегов, которые окончательно были задокументированы с выходом новой версии языка. Специальные теги делают код страницы более структурированным и облегчают поисковым системам анализ сайта. Такую верстку довольно сложно отнести к отдельному виду, скорее она является дополнением к любому другому типу.

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

Список литературы

1. Фаронов В. Создание современных web приложений. – Издательский дом «Эксмо», 2010. – 12 с.

2. Рябоконь С. Вёрстка: переход к семантической разметке – главная цель HTML. – Хабрахабр (18 июня 2013). – 222-247 с.

3. Marsman J. HTML5 Part 1: Semantic Markup and Page Layout. – MSDN Blogs (1 August 2011). – 15 с.

4. Блочная вёрстка [Электронный ресурс]. – Режим доступа: http://htmlbook.ru/samlayout/blochnaya-verstka (дата обращения: 04.12.2018).

Материал поступил в редакцию 22.06.2019

© Палаш Б.В., 2019