Адаптивная верстка сайта

Адаптивная верстка сайта

Адаптивная вёрстка сайта

Адаптивная вёрстка — это подход, при котором сайт автоматически подстраивается под размер экрана устройства (ПК, планшет, смартфон).

• Основные принципы адаптивной вёрстки

① Гибкая сетка

Использование относительных единиц %, vw, vh, fr вместо фиксированных px

Пример:

.container {

width: 100%; /* Занимает всю ширину экрана */

max-width: 1200px; /* Но не больше 1200px */

margin: 0 auto; /* Центрирование */

}

.column {

width: 50%; /* Половина ширины родителя */

}

② Гибкие изображения и медиа

Изображения должны масштабироваться без переполнения:

Пример:

img, video, iframe {

max-width: 100%; /* Не выходит за границы контейнера */

height: auto; /* Сохраняет пропорции */

}

③ Медиазапросы (Media Queries)

Позволяют применять стили в зависимости от размера экрана:

/* Мобильные (до 768px) */

@media (max-width: 768px) {

.column {

width: 100%; /* Колонки становятся вертикальными */

}

}

/* Планшеты (768px–1024px) */

@media (min-width: 768px) and (max-width: 1024px) {

.column {

width: 48%; /* Две колонки */

}

}

/* Десктопы (1024px+) */

@media (min-width: 1024px) {

.column {

width: 30%; /* Три колонки */

}

}

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

Основных разрешений для адаптивной вёрстки три: 1600 пикселей — для компьютеров; 960 пикселей — для планшетов; 375 пикселей — для телефонов. Это усреднённые значения. Ширина может меняться в зависимости от сайта, идеи и технических особенностей. Ещё эти значения называют брейкпоинтами (от англ. breakpoint) — то есть разрешениями, при которых сайт меняет отображение на экране. Например, пользователь заходит на сайт с ноутбука с шириной экрана 1280 пикселей, а потом вдвое сужает окно браузера. Как только ширина станет меньше 960 пикселей, отображение сайта поменяется.

В популярном фреймворке разработчиков Bootstrap сейчас представлено шесть вариантов макетов: 1920, 1200, 992, 768, 576 и 376 пикселей.

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

Инструменты для адаптивной вёрстки

Основной инструмент — это графический редактор Figma. Дальше название этого онлайн-сервиса будем писать кириллицей.

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

Viewport в HTML  

Viewport в HTML  — это  видимая пользователю область веб-страницы, которую он может просмотреть без прокрутки   1 .

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

Метатег указывают в HTML-коде каждой страницы в разделе  в таком виде: 

Внутри атрибута content описываются все необходимые значения через запятую.

Некоторые основные параметры метатега viewport :

• width  — устанавливает ширину области просмотра. Может принимать значения в виде ключевого слова device-width либо конкретного числа пикселей.
• height  — определяет высоту видимой области. Значениями могут быть ключевое слово device-height и число пикселей.
• initial-scale  — определяет начальное увеличение либо уменьшение видимой области после загрузки страницы. Значение является числом от 0,1 до 10.
• user-scalable  — управляет возможностью пользователей изменять масштаб отображаемой области на мобильных устройствах с использованием жестов. Принимает два значения: yes (можно изменять) и no (изменять запрещено)

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

Единицы измерения в CSS

Единицы измерения в CSS можно разделить на две основные категории:

• Абсолютные
• Относительные

Абсолютные единицы

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

Этот логотип Google в левом углу имеет абсолютную высоту и ширину 30 пикселей и 92 пикселя соответственно, что означает, что если мы изменим размер экрана, другие элементы, такие как панель поиска, изменят свою высоту и ширину, но логотип останется в точных размерах: 92 x 30.

Для логотипов сайтов обычно используют абсолютные единицы. Большинство из этих единиц используются для печати, единственная единица, широко используемая для веб-сайтов, — это пиксель (px). Если мы посмотрим на пример, то поймем, что именно означает абсолютный . Мы возьмем div и установим абсолютные единицы измерения в качестве его размеров, тогда мы увидим, как изменение окна просмотра не влияет на размеры div.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint modi

similique ducimus laudantium tempora vitae facere ipsa, ipsum id, commodi

quisquam totam labore vel cum maiores, a omnis molestiae reiciendis.

CSS

.box {

width: 300px;

height: 200px;

padding: 20px;

font-size: 20px;

color: red;

background-color: beige;

}

В браузере:

Из рисунка видно, что независимо от размера окна просмотра размеры div внутри не меняются. Вот что означают абсолютные единицы. Они остаются одинаковыми при любом размере экрана.

Виды абсолютных единицы в CSS

• Пиксели (px) — широко используются на веб-сайтах для создания элементов фиксированного размера (например, в логотипе), т. е. мы не хотим, чтобы они меняли размер при изменении размера экрана. 1px = 1/96 дюйма.
• Пункты (pt) — в основном используется в принтерах для печати вывода на бумаге и не так широко используется для вывода на экран. 1pt = 1/72 дюйма.
• Пикас (pc) — также как и пункты используется для печати. 1 шт = 1/6 дюйма
• Сантиметры (cm) — это сантиметр, 2,54 см = 1 дюйм.
• Милиметры (mm) — 10 мм = 1 см.
• Дюймы (in)

Относительные единицы

• В относительных единицах размер берется с точки зрения одного и того же свойства, например, если мы говорим о ширине элемента в относительных единицах, то она относится к ШИРИНЕ родительского элемента/окна просмотра.
• Относительные единицы подходят для масштабирования элементов по отношению к другим элементам на той же странице, т. е. для обеспечения адаптивности элемента.

Например, установлена ширина div равная ровно 50% ширины body, и она должна автоматически регулироваться относительно body.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint modi

similique ducimus laudantium tempora vitae facere ipsa, ipsum id, commodi

quisquam totam labore vel cum maiores, a omnis molestiae reiciendis.

СSS

.box {

width: 50%;

height: 200px;

padding: 20px;

font-size: 20px;

color: red;

background-color: beige;

}

В браузере:

Проценты

Проценты позволяют измерять размер элемента относительно размеров родителя. Например, если мы установим ширину HTML-элемента равной K %, тогда его ширина будет рассчитываться следующим образом:

Ширина элемента = (K/100) * Ширина родительского элемента

Размер в процентах широко используется для создания адаптивных сайтов. Это позволяет нам динамически изменять размеры HTML-элементов относительно размера окна просмотра.

EM

Значение EM наследуются относительно своего родителя (также как и проценты). Таким образом, если мы установим размер родительского шрифта равным 2em, а затем снова установим размер дочернего шрифта равным 2em, он будет добавлен к 4em (т.е. 400% от значения по умолчанию)! 

В основном используется, чтобы задать адаптивный размер шрифта.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,

fuga.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, vero.

CSS

body {

font-size: 16px;

} 

div {

font-size: 32px;

padding: 10px;

background-color: aliceblue;

max-width: 500px;

}

.big-text {

font-size: 1.5rem;

padding: 10px;

background-color: cornsilk;

}

В браузере:

Стандартный размер шрифта был задан в body и равен 16px. В элементе div мы увеличили размер шрифта в полтора раза относительно его значение в родителе body. В элементе big-text еще раз увеличили размер, относительно div. Таким образом, для big-text получаем шрифта:

16px * 1.5 * 1.5 = 36px

EM может вызвать проблемы в случае, если код CSS становится сложнее. Для того, чтобы исправить недостатки em был создан REM.

REM

Эта единица противодействует суммирующему эффекту таких единиц, как % и em. rem. Это означает, что браузер будет игнорировать все корректировки, сделанные для родительских элементов, и будет масштабировать элемент HTML, к которому применяется свойство, на основе корневого значения или значения по умолчанию для этого конкретного элемента

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,

fuga.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, vero.

СSS

div {

font-size: 32px;

}

.big-text {

font-size: 1.5rem;

}

В браузере:

В этом коде CSS размер шрифта div установлен 32px (то есть в два раза больше базового шрифта, заданного в body). Если бы мы не задавали размер текста для элемента big-text, то он бы просто наследовал значение 32px от своего родителя div. Однако для big-text мы задали значение 1.5rem. То есть сделали размер текста в полтора больше относительно корневого родителя body, но никак не div! 

Таким образом, для big-text мы получили размер шрифта:

16px * 1.5 = 24px. 

VH

VH — означает высоту области просмотра. Если мы хотим, чтобы элемент имел точно такую ​​же высоту, как и область просмотра/окно просмотра, необходимо задать 100vh для обозначения высоты элемента.

Пример использования: в основном используется для страниц, занимающих всю высоту области просмотра.

VW

VW означает ширину области просмотра. 100vw означает 100% ширины области просмотра/окна просмотра.

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

Пример использования VH и VW:

CSS

.box {

background-color: #9acd32;

width: 50vw;

height: 100vh;

}

Последовательность разработки сайта с адаптивным дизайном

Планирование и анализ :

• Определите цель сайта (информирование, продажа, поддержка и т.д.). Исследуйте целевую аудиторию и ее предпочтения. Проанализируйте конкурентов и лучшие практики в вашей сфере.
• Определите цель сайта (информирование, продажа, поддержка и т.д.).
• Исследуйте целевую аудиторию и ее предпочтения.
• Проанализируйте конкурентов и лучшие практики в вашей сфере.

Создание структуры сайта :

• Разработайте информационную архитектуру: сгруппируйте содержимое по категориям. Создайте карту сайта (sitemap) для визуализации структуры.
• Разработайте информационную архитектуру: сгруппируйте содержимое по категориям.
• Создайте карту сайта (sitemap) для визуализации структуры.

• Создание прототипа : Создайте wireframe (черновик) страниц для определения распределения контента. Обратите внимание на интерактивные элементы и навигацию.
• Создайте wireframe (черновик) страниц для определения распределения контента.
• Обратите внимание на интерактивные элементы и навигацию.

• Визуальный дизайн :

• Разработайте графический интерфейс (UI): цветовая схема, шрифты, иконки, кнопки. Убедитесь, что дизайн соответствует правилам адаптивного веб-дизайна.
• Разработайте графический интерфейс (UI): цветовая схема, шрифты, иконки, кнопки.
• Убедитесь, что дизайн соответствует правилам адаптивного веб-дизайна.
• Адаптивная верстка : Используйте гибкие сетки (flexbox, grid) и медиа-запросы для обеспечения адаптивности на разных устройствах. Оптимизируйте изображения и контент для быстрого загрузки на мобильных устройствах.
• Используйте гибкие сетки (flexbox, grid) и медиа-запросы для обеспечения адаптивности на разных устройствах.
• Оптимизируйте изображения и контент для быстрого загрузки на мобильных устройствах.
• Разработка функционала : Реализуйте все необходимые функциональные элементы (формы, кнопки, интерактивные элементы). Используйте языки программирования (HTML, CSS, JavaScript) для создания интерактивности.
• Реализуйте все необходимые функциональные элементы (формы, кнопки, интерактивные элементы).
• Используйте языки программирования (HTML, CSS, JavaScript) для создания интерактивности.
• Тестирование : Протестируйте сайт на различных устройствах и браузерах для проверки адаптивности. Убедитесь, что все элементы работают корректно и не имеют ошибок (functional testing).
• Протестируйте сайт на различных устройствах и браузерах для проверки адаптивности.
• Убедитесь, что все элементы работают корректно и не имеют ошибок (functional testing).
• Оптимизация : Оптимизируйте загрузку страниц: используйте сжатие, кэширование, минимизацию CSS и JavaScript. Проверьте SEO (поисковая оптимизация): корректная структура URL, мета-теги, оптимизация контента.
• Оптимизируйте загрузку страниц: используйте сжатие, кэширование, минимизацию CSS и JavaScript.
• Проверьте SEO (поисковая оптимизация): корректная структура URL, мета-теги, оптимизация контента.

• Запуск сайта :

• Перенесите сайт на рабочий сервер и настройте доменное имя. Проверьте функционал после переноса на сервер.
• Перенесите сайт на рабочий сервер и настройте доменное имя.
• Проверьте функционал после переноса на сервер.
• Поддержка и обновление : Регулярно обновляйте контент и проверяйте работоспособность сайта. Собирайте отзывы пользователей и анализируйте их для дальнейшего улучшения.
• Регулярно обновляйте контент и проверяйте работоспособность сайта.
• Собирайте отзывы пользователей и анализируйте их для дальнейшего улучшения.
• Маркетинг и продвижение : Разработайте стратегию продвижения сайта (социальные сети, контент-маркетинг, PPC-реклама). Анализируйте эффективность с помощью инструментов аналитики (Google Analytics и т.д.).
• Разработайте стратегию продвижения сайта (социальные сети, контент-маркетинг, PPC-реклама).
• Анализируйте эффективность с помощью инструментов аналитики (Google Analytics и т.д.).