Адаптивный веб-дизайн
Что это такое
Адаптивный веб-дизайн — практика построения одной страницы, которая хорошо читается на любом экране: от телефона, который держат одной рукой, до широкого настольного монитора. Отдельной технологии здесь нет. Раскладкой CSS, запросами и гибкими значениями пользуются так, чтобы страница адаптировалась, а не заставляла пользователя щипать и прокручивать.
Почему это важно
Веб читают на экранах совершенно разных размеров, и раскладка, рассчитанная ровно на один из них, ломается на всех остальных. К тому же адаптивный дизайн дешевле: отдельный мобильный сайт означает две кодовые базы, два набора ошибок и выбор, какую из них забрасывать. При хорошей реализации одно и то же содержимое доступно везде — и читателям, и поисковым системам, и каждому, кто пользуется скринридером или клавиатурой.
Что в этом треке
- Вёрстка mobile-first (02-frontend/10-responsive-web-design/01-mobile-first-layout) — начинать с узкой раскладки и добавлять возможности по мере появления места.
- Плавная типографика и отступы (02-frontend/10-responsive-web-design/02-fluid-type-and-spacing) — позволять размерам масштабироваться непрерывно, а не прыгать между точками перелома.
Предварительные требования
- Каскадные таблицы стилей (CSS) (02-frontend/05-css)
Что читать дальше
- Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — раскладка, которая работает только на одном уровне масштаба, не проходит ни стандарт, ни к читателю.
- Адаптивные изображения (02-frontend/07-responsive-images) — половина той же задачи, отвечающая за доставку.
- Макетирование и сеточные системы (03-design-ux/30-layout-grid-systems) — словарь дизайнерской стороны для сеток, которые вы будете реализовывать.