Что такое адаптивная вёрстка сайта, виды и как это работает виды

Оглавление:

1. Суть понятия.
2. Как работает и почему адаптивная верстка важна сегодня.
3. Какие виды верстки существуют в 2023 году.
4. Виды вывода адаптивного содержимого.
5. Как создать отзывчивый веб-сайт: пошаговый алгоритм действий.
6. Резюме.

Адаптивная вёрстка сайта (от английского, responsive web design, иногда — adaptive web design) — это умная вёрстка, которая автоматически адаптируются под устройство пользователя, в частности под особенности его экрана. Независимо от диагонали экрана, нестандартного разрешения, текущей ориентации, сайт с адаптивной версткой — всегда будет выглядеть красиво, а контент страниц — всего будет оставаться читаемым. Взаимодействия пользователя с элементами страницы также остается удобным на любом устройстве благодаря адаптивному дизайну. Этот вид вёрстки создаётся не на основе фиксированного шаблона, как стандартный вариант верстки, а на основе key points — контрольных точек. Именно они используются для ориентира и автоматической адаптации контента на странице.

Простыми словами, адаптивная вёрстка сайта — это умная вёрстка, которая подстраивается под экран конечного устройства.

Wikipedia использует адаптивную верстку страниц

Как работает адаптивная верстка и почему она важна в 2023 году

Если взглянуть на адаптивную вёрстку не со стороны пользователя, а с технического аспекта, то вот как выглядит процесс адаптации сайта к особенностям устройства пользователя:

1. Пользователь открывает страницу сайта. 
2. Сервер посылает в браузер пользователя HTML-документ. Сам HTML-код будет одинаковым для любых устройств, с которых сайт открывают пользователи.
3. На всех устройствах выполняется идентичный код.
4. Размер страницы, расположение контента и всех элементов веб-страницы — настраивается уже в браузере каждого пользователя индивидуально. 
5. Визуальный размер компонентов веб-страницы изменяется благодаря каскадным таблицам стилей (CSS).

В конце 2022 года наличие адаптивной вёрстки на сайте становится особенно важным фактором: не только для удобства пользователей, но и для поисковых систем — неудобные для просмотра на мобильных устройствах сайты могут понижаться в поисковой выдаче искусственно самими ПС.

В первом квартале 2021 года мобильные устройства обеспечили 54,8 % от всего объема глобального трафика 

Какие виды вёрстки сайтов существуют в 2023 году

Прежде чем говорить о конкретных видах адаптивного содержимого, следует упомянуть и другие виды вёрстки. В частности, на старых сайтах, до сих пор можно встретить фиксированную верстку. Но распространена также резиновая и отзывчивая. Чем же они отличаются друг от друга?

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

Парадокс, но «отзывчивая» и «адаптивная» верстка — разные виды верстки. Давайте кратко разберем разницу между всеми четырьмя видами.

Адаптивная. Этот вид сочетает достоинства отзывчивого дизайна с плюсами адаптивных макетов. Медиа запросы предусматривают зафиксированное расположение контента для каждой точки слома. Самостоятельная разметка с якорем — главный маркер адаптивного дизайна.

Отзывчивая. Этот вид верстки использует процентные показатели, которые указываются в «стилях» сайта (CSS). Самостоятельной статической разметки с якорем — здесь нет. Так что корректнее всего сказать, что отзывчивая верстка является частью адаптивного дизайна.

Фиксированная. Этот вид дизайна использовался на сайтах много лет назад. Такие сайты неудобно просматривать с мобильных устройств, так как макет страницы имеет фиксированный размер и никак не подстраивается под особенности экрана пользователя. Сайт с фиксированным размером макета — анахронизм. Его можно рекомендовать только в том случае, если сайт вам нужен чисто формально и реальные пользователи не будут им пользоваться.

Резиновая. Этот вид дизайна предусматривает определение максимальной и минимальной ширины страницы. Точное значение ширины — не задается. При этом сайт с резиновым дизайном, всё ещё, может быть удобным для просмотра с большинства устройств, даже в конце 2022 года.

Виды вывода адаптивного содержимого

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

Медиа запросы

Это специальные правила и условия в «стилях», для управления компонентами страницы. Медиа запросы в CSS работают в зависимости от особенностей пользовательского устройства, например, текущей ориентации или разрешения экрана. 

Далее — рассмотрим несколько самых важных для адаптивного дизайна типов медиа запросов.

Относительность и размеры

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

Процент, высота шрифта, пиксель, высота символа — примеры относительных единиц измерения в адаптивной вёрстке.

Размеры экранов для адаптивной верстки

В 2023 году для устройств разного типа приняты традиционные значения размеров экранов. Вот эти значения.

• Смартфоны — разрешение экрана от 320 пикселов.
• Планшеты — разрешение экрана от 768 пикселов.
• Нетбуки — разрешение экрана от 1024 пикселов.
• Мониторы FULL-HD — разрешение экрана от 1920 пикселов.

Смешивание условий

Прежде чем говорить о конкретных медиа запросах важно отметить, то как именно смешиваются условия. 

В медиа запросах можно использовать три логических оператора: «НЕ» (not), «И» (and), «ИЛИ» (условия для этого оператора просто разделяются при помощи знака запятой). 

Чтобы не запутаться — посмотрим, как использовать логические операторы на одних и тех же условиях: портретная ориентация (orientation: landscape) и минимальная ширина вьюпорта (min-width: 800px).

Пример использования логического оператора НЕ (not):

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

Пример использования логического оператора И (and):

Обратите внимание: как отделяются два условия друг от друга. Этим логическим оператором мы указали, что свойства будут задействоваться только в том случае, если у пользователя будут соответствовать сразу два условия.

Пример использования логического оператора ИЛИ:

Обратите внимание, на запятые между ориентации и минимальной шириной. Таким образом, мы указали, что свойства будет задействоваться только в том случае, если у для пользовательского устройства будет справедливо любое из двух указанных условий (в нашем случае — это портретная ориентация или viewport минимум 600 пикселей).

Когда viewport растягивается по горизонтали, каждый столбец также расширяется 

Ориентация экрана пользователя

Например, для портретной ориентации код может выглядеть следующим образом:

Таким образом мы указали, что условие должно выполняться исключительно для вертикальной ориентации, неважно какой какой тип устройства использует пользователь  — смартфон или планшет. Обратите внимание: мы также задали цвет бэкграунда страницы (background: #000).

Других значений, кроме portrait and landscape, не предусмотрено. Ведь любое устройство будет иметь либо портретный, либо горизонтальный экран. Неважно, что это — кофемашина или холодильник.

Третьего — не дано

Шрифты

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

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

font-size:100%; /*  по-умолчанию 16px */
}

p {
	font-size: 1.25rem; /* 1,25rem относительно основы в 16px к body в результате даст размер шрифта в 16*1.25 = 20px */
}

Обратите внимание на единицу измерения rem — она задаёт размеры по отношению к шрифту в теге html. Это означает, что все дочерние блоки также изменят размер шрифта. Таким образом, для изменения типографики мелких экранов (через media queries) нам нужно будет просто отредактировать величину body-шрифта. 

Изменяя размер основного шрифта всё текстовое содержимое страницы автоматически будет изменяться. Например, вот так:

@media screen and (max-width: 700px) {
	body {
    	font-size:80%;
	}
}

@media screen and (max-width: 900px) {
	body {
    	font-size:90%;
	}

Это не единственный способ решить проблему адаптивности шрифтов в адаптивной верстке, а лишь один из множества.

Ещё один вариант — указать размерность шрифтов для каждого разрешения экрана отдельно. В этом случае шрифты будут корректно выводиться на всех устройствах и вы сможете оперативно поменять шрифт для любого разрешения, если возникнет такая необходимость. Например, вот так:

@media only screen and (min-width: 750px) {
font-size:13px;
}
@media only screen and (min-width: 968px) {
font-size:14px;
}

Гибкие сетки 

Это один из самых важных элементов, ведь на нём держится вообще весь адаптивный дизайн. Гибкая сетка формируется заданием свойств ширины и максимальной ширины.

Сетка отзывчивого макета состоит из трех элементов: колонок (1), промежутков (2) и полей (3)

Точки слома или breakpoints

Еще один важнейший компонент адаптивной верстки. Без него сайт не сможет подстраиваться под разные разрешения экрана.

Breakpoints указываются условным значением разрешения экрана пользователя. Например, максимальная высота — указывается стандартным CSS-условием max-height (а минимальная, соответственно, min-height). 

Платформа Bootstrap предусматривает шесть точек разрыва по умолчанию, но каждую из них можно настроить вручную

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

• max-width: 1500px.
• max-width: 100px.
• max-width: 700px

Если главным для вас являются мобильные пользователи и вы хотите внедрить концепцию Mobile First, то в стиле указываются наоборот: от самых маленьких разрешений вверху, до самых больших — внизу.

А теперь взгляните на эту таблицу. Обратите внимание: при автоматическом изменении размеров макета сетка также меняет ширину полей. И даже — количество колонок.

При масштабировании макета адаптивная сетка автоматически настраивает ширину полей (и заодно количество колонок)

Адаптивные изображения

Их также называют гибкими или responsive-изображениями. Адаптивные изображения реализуются при помощи элементов , атрибута srcset и sizes, соответственно.

В случае стандартных изображений, обычно, указывается только один путь к картинке. Делается это таким образом:

<img src="donut-800w.jpg" alt="Donut">

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

<img srcset="donut-320w.jpg 320w,
         	donut-480w.jpg 480w,
         	donut-800w.jpg 800w"
 	sizes="(max-width: 320px) 280px,
        	(max-width: 480px) 440px,
        	800px"
 	src="donut-800w.jpg" alt="yammy donut">

Таким образом, браузер устройства автоматически проанализирует ширину экрана, затем — идентифицирует наиболее релевантные условия из sizes-атрибута, после — оценит размеры слота к медиа-выражению и наконец — загрузит наиболее близкое изображение из srcset.

Фреймворки для адаптивного дизайна

Легкий, быстрый и качественный фреймворк для CSS даст вам хороший толчок при разработке любого сайта. И особенно поможет на этапе верстки.

Некоторые фреймворки (например, BootStrap) могут быть довольно тяжелыми и неповоротливыми, они несколько перегружены излишним кодом. Другие — более простые и не требуют сложного обучения (например, Spark и Bijou).

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

Вот 11 лучших вариантов фреймворков для создания адаптивного дизайна и оптимизации адаптивной верстки.

1. Cute Grids. Лёгкая и простая 12-колоночная система отзывчивых сеток. Всё. Больше никаких дополнительных функций и наворотов здесь нет. Зато — удобно.
2. FICTOAN. Этот фреймворк для тех, кто любит простые и понятные решения. Минимальный набор сеток, минимальный набор контейнеров.
3. Typebase. Минимально кастомизируемый шаблон стилей для управления типографикой на сайте. Эффективно убирает типовые проблемы, например, неровности текста в длинных колонках.
4. Beauter. 5 килобайт и у вас в кармане: отзывчивые сетки, неплохие контейнеры, моды и попапы.
5. Spark. Отличный вариант для воплощения отзывчивого и адаптивного веб-дизайна. Отдельно отметим неплохие цветовые темы, которые есть внутри фреймворка.
6. Vanilla Framework. Красивые контейнеры и другие графические элементы, которые великолепно выглядят уже из коробки. Конечно их можно настроить.
7. Bijou. Фреймворк весит менее 2 килобайта, стандартная десяти-колоночная сетка и большое количество кнопок, панелей, уведомлений и таблиц.
8. Cirrus.CSS. Один из лучших вариантов для тех занимается, кто занимается прототипированием.
9. Emerald. Отзывчивая сетка на блочных элементах. Больше ничего нет.
10. Halfmoon. Отличный вариант фронтенд-фреймворка для любых целей.
11. SCHEMA. Расширенный набор CSS-компонентов, включая: формы, кнопки и попап-окна. Отличная вариант для тех, кто не любит сложные фреймворки. 

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

Достоинства фреймворка Beauter

Попробуйте хотя бы 3-4 варианта из нашего списка выше. Вы быстро найдёте наиболее удобный для вас вариант.

Тег viewport

Важнейший маркер адаптивного дизайна на странице — наличие тега viewport. Выглядит он так:

meta name="viewport"

Если вы видите этот тег в коде страницы, значит сайт является адаптивным.

Ширина каждого элемента в пикселях основывается на ширине области просмотра в 1000 пикселей

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Как создать отзывчивый веб-сайт: пошаговый алгоритм действий

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

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

    

   
   Десктопный макет основан на трех элементах: Body, Navigation, App bars

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

   Используйте брейкпоинты для наиболее распространенных разрешений, используемых на телефонах, десктоп и планшетах в 2023 году:

   • 1920×1080 (9.61 %)
   • 1366×768 (7.87 %)
   • 360×640 (4.36 %)
   • 414×896 (4.34 %)
   • 1536×864 (4.11 %)
2. Внедрите Fluid Grid (гибкую / жидкую сетку). Раньше элементы сайта и его страниц всегда строились на конкретных значениях, которые указывались в пикселях. Теперь же, в адаптивном дизайне, используется Fluid Grid. 

   Такая сетка устанавливает компоненты на странице сайта пропорционально размеру экрана, на котором они отображаются. Вместо того, чтобы создавать элементы одного конкретного размера (заданного в пикселях),элементы во Fluid Grid автоматически изменяются, в зависимости от размера экрана пользовательского устройства. Задавать значение вручную не нужно.

   

   «Контент как вода. Вы наливаете воду в чашку и она превращается в чашку. Вы наливаете воду в бутылку и она превращается в бутылку. Вы наливаете воду в чайник и она превращается в чайник»

   Fluid Grid делится на несколько колонок, при этом происходит масштабирование воссоздание высоты / ширины.

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

   С гибкой сеткой, можно быстро менять всё, что связано с дизайном страницы или всего сайта.
3. Предусмотрите юзабилити для сенсорных экранов. Задаваясь вопросом, как создать отзывчивый веб-сайт, нельзя не упомянуть сенсорность. Большинство мобильных устройств высокого класса (современные смартфоны и планшеты) комплектуются сенсорами. Теперь сенсорные экраны даже есть в ноутбуках. Естественно, и сама адаптивная вёрстка должна быть настроена таким образом, чтобы взаимодействие с сайтом и компонентами страницы было удобно именно через сенсорный экран. 

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

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

4. Внедрите гибкие (адаптивные) изображения. Подробнее об отзывчивых изображениях мы уже сказали выше, в разделе «Адаптивные изображения». Для внедрения гибких изображений используйте соответствующие теги, например, вот так: 

   <style>
   img {
   max-width: 100%;
   }
   </style>
   
   <picture>
   <source type="image/webp" srcset="https://age.ru/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
   <source type="image/png" srcset="https:/age.ru/my-image-100.png 1x, https://age.ru/my-image-200.png 2x">
   <img alt="my image" src="https://age.ru/my-image-200.png" loading="lazy" width="100" height="100">
   </picture>

   Давайте подробнее разберём вышеуказанный пример.

   • Свойство CSS max-width: картинка будет автоматически масштабироваться, в зависимости от ширины контейнера.
   • Метатеги picture, source и img: сгруппированы, чтобы при отрисовке задействовалось только одно изображение, которое будет наиболее приемлемым на каждом конкретном экране.
   • source type="image/webp" srcset="ваш URL". Source: используется для ссылки на изображение в формате WebP. Этот формат использует расширенное сжатие, чтобы уменьшить размер файла и сохранить высокую детализацию. Все современные браузеры теперь поддерживают формат WebP, но если пользователь использует очень старый браузер — картинки могут вообще не загрузиться. Но эта проблема в нашем примере успешно решена. Смотрите второй тег.
   • Второй тег (source) — ссылается на PNG-файл того же изображения, для браузеров без поддержки WebP. 
   • Атрибут srcset — уведомляет браузер о том, какое именно изображение должно выводиться на экран, в зависимости от разрешения экрана конкретного устройства.
   • Атрибут loading="lazy" — при помощи этой пары внедряется ленивая загрузка для изображений.
5. Внедрите адаптивное видео. Адаптивный дизайн можно распространить и на видео. Для этого нужно поработать с соотношением сторон. Например, нам нужно встроить видео с сайта YouTube — через iframe, при этом для div-контейнера используется класс videoWrapper. Задача не настолько сложная, как может показаться изначально. Мы использовали videoWrapper:

   <style>
   .videoWrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   height: 0;
   }
   
   .videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }
   </style>
   
   <div class="videoWrapper">
   <!-- Copy » Pasted from YouTube -->
   <iframe width="560" height="349" src="http://www.youtube.com/embed/n_d47ZNLr54cME97?245»hd=1" frameborder="0" allowfullscreen></iframe>
   </div>

   Давайте подробнее разберём вышеуказанный пример кода:

   • Position: relative — относительное позиционирование. Относится к контейнерному элементу, чтобы дочерние компоненты позиционировались соответствующим образом (по отсутствию относительно него).
   • Свойство CSS height: 0 сочетается со свойством padding-bottom: 56.25%. В этом случае реализуется динамическое изменение экрана, если пользовательское соотношение сторон — 16:9.
   • Свойство CSS Position: absolute, top: 0 и left: 0, эти значения задаются на iframe для того, чтобы компоненты на странице позиционировались по отношению родительского элемента.
   • Значение CSS width и height 100%, делают соотношение дочернего элемента iframe в 100% от его родительского элемента (videoWrapper). Он задаёт ratio для сторон адаптивного макета.

   
   Так выглядит стандартный макет сайта

6. Определите шрифты и типографику. В прошлом размеры шрифтов устанавливались точными значениями, в пикселях. В адаптивной верстке размер шрифта изменяется от ширины родительского контейнера. Таким образом, шрифты подстраиваются под размер пользовательского экрана и типографика на странице — остаётся читабельной на любом размер экрана.

   Сейчас самое время вернуться к единице rem. Напомним, мы уже затрагивали её выше. По сути эта единица похожа на блок em, но действует относительно элемента HTML:

   html { font-size:100%; } /* так мы сбросили размер шрифта у HTML */

   Теперь нужно установить размеры шрифтов, отвечающих необходимым в вашем случае значениям (font-size указывается в rem):

   @media (min-width:650px) { body {font-size:1rem;} }
   @media (min-width:970px) { body {font-size:1.2rem;} }
   @media (min-width:1200px) { body {font-size:1.5rem;} }

7. Воспользуйтесь готовой темой или шаблоном с адаптивным дизайном в используемой на сайте CMS.Этот вариант идеален, если не получается внедрить адаптивную верстку самостоятельно. Также он подойдет, если нужно создать сайт с адаптивным дизайном максимально быстро.

    

   Отзывчивые темы или или темы с отзывчивыми макетами есть в большинстве современных CMS

    

   Например, в том же WordPress доступно большое количество тем с адаптивными свойствами, как платных, так и бесплатных. После выбора темы — остается только заполнить сайт собственным контентом.

   
   На themeforest.net можно найти крутые темы с готовой адаптивной версткой страниц

8. Проверьте адаптивность сайта, открыв его на разных типах устройств вручную.

   Какие бы крутые инструменты для тестирования адаптивности вы не использовали, всегда полезно проверить, как сайт ведёт себя на реальных устройствах. Возьмите телефон у своего друга, спросите планшет у кого-то из членов семьи. Но — обязательно проверяйте не только внешний вид страниц, но и функциональность элементов.

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

   

   Тестирование адаптивной верстки сайта в BrowserStack

Резюме

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

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

Помните: пользователи ожидают, что любой сайт должен идеально открываться на их устройстве. И если это не так — они очень расстраиваются. И сразу же уходят.

Если адаптивная верстка не учитывает часто используемые в 2023 году разрешения, сайт рискует оказаться на задворках страницы результатов поиска (вырастет процент отказов, пользователи будут с него уходить). Плохие поведенческие факторы — негативно скажутся на позициях сайта. Избежать вышеуказанных негативных последствий можно внедрив качественную адаптивную вёрстку страниц.