Некоторые принципы адаптивной вёрстки в веб-дизайне:

• Дублирование контента. 1 Всё, что пользователь может увидеть с компьютера, должно быть доступно со смартфонов и планшетов. 1
• Сохранение дизайна. 1 Шрифты, цвета, логотипы и другие элементы должны быть одинаковы и в десктопной, и в мобильной версиях сайта. 1
• Сохранение иерархии элементов. 1 Иерархия заголовков, подзаголовков, текстовых блоков, иллюстраций, а также кнопок должна выстраиваться на основе целей сайта. 1
• Повторение функциональных возможностей десктопного сайта. 1 Если с компьютера доступны фильтры и различные варианты отображения товаров, в адаптивном представлении они тоже должны поддерживаться. 1
• Уменьшение количества колонок. 1 Для узких экранов смартфонов и планшетов не требуется сетка из 12 колонок, достаточно 1–4 штук. 1
• Компактность. 1 Вертикальное расположение мобильной версии карточек и иных элементов, которые в десктопной интерпретации идут в ряд. 1
• Mobile-first подход. 3 Проектировать и верстать сайт в первую очередь для смартфонов, а уже потом добавлять блоки и элементы для больших экранов. 3
• Гибкий макет на основе CSS. 3 Использование относительных единиц, таких как проценты, вместо фиксированных размеров в пикселях. 3
• Медиа-запросы для подстройки дизайна. 3 Правила @media используются для изменения стилей на разных размерах экрана. 3
• Векторная графика вместо растровой. 3 Использование SVG и шрифтовых иконок. 3 Такие элементы поддерживают масштабирование без потери качества, что особенно важно для экранов с высокой плотностью пикселей. 3