Принципы адаптивного веб-дизайна
В настоящее время обычной практикой является создание веб-сайта или приложения, которое настраивает свой пользовательский интерфейс в зависимости от браузера или устройства. Есть два подхода к достижению этой цели. Первый предполагает создание разных версий вашего веб-сайта или приложения для разных устройств. Но это неэффективно и может привести к непредсказуемым ошибкам.
В поисках надежного, перспективного подхода был придуман отзывчивый – или адаптивный – дизайн. Он ориентирован на создание единой версии вашего макета, которая автоматически адаптируется к различным браузерам или устройствам.
В этой статье мы узнаем об адаптивном веб-дизайне и основных принципах, которые помогут вам создать отличный веб-сайт.
Компоненты адаптивного веб-дизайна
Адаптивный веб-дизайн не так сложен, как кажется. Это набор практик, которые вы можете использовать при написании CSS, а не отдельная технология, которую вам придется изучать с нуля. Возможно, вы уже следуете некоторым из этих принципов, даже не осознавая этого. Вы можете понять адаптивный веб-дизайн, изучив четыре его составляющих: гибкие макеты, адаптивные блоки, гибкие изображения и медиа-запросы.
Жидкие макеты
Благодаря гибкой компоновке вы можете создавать веб-страницы, которые адаптируются к ширине и высоте текущего окна просмотра. Обычная практика включает использование свойства max-width вместо задания фиксированной ширины элементу. Кроме того, использование процента ( % ), высоты области просмотра ( vh ) или ширины области просмотра ( vw ) помогает улучшить адаптируемость, которая невозможна с пикселями ( px ). Итак, в следующий раз, когда вы будете создавать макет, обязательно внесите эти небольшие изменения и начните извлекать выгоду из методов адаптивного дизайна.
Отзывчивые единицы
По мере того, как вы переходите к более продвинутому CSS, вы часто будете видеть использование единиц rem и em для длины вместо единиц px . Это связано с тем, что модуль rem позволяет очень легко масштабировать весь макет. По умолчанию 1rem равно 16px, потому что он пропорционален размеру шрифта элемента <html> , обычно 16px. Однако вы можете установить 1rem равным 10 пикселей (или любому другому значению) для упрощения вычислений, отрегулировав размер шрифта верхнего уровня.
Гибкие изображения
Изображения являются первоочередной задачей при разработке даже самого простого макета. Вы всегда должны следить за их размером, чтобы они соответствовали дизайну. Кроме того, по умолчанию они не масштабируются при изменении области просмотра. Итак, вы должны использовать % для размеров ваших изображений вместе со свойством max-width .
Медиа-запросы
Вы можете оживить адаптивные сайты с помощью медиа-запросов. Плавные сетки хороши для начала, но вы обнаружите, что есть несколько моментов, когда макет начинает ломаться. Добавление точек останова для этой ширины области просмотра настраивает макет для разных устройств. Медиа-запросы помогают выборочно применять CSS на основе результатов тестов мультимедийных функций. Вы можете изучить новые функции CSS, чтобы сделать веб-сайт адаптивным за меньшее время.
Принципы адаптивного веб-дизайна
Хотя адаптивный веб-дизайн – спаситель, когда дело касается многоэкранных проблем, у вас может не быть фиксированного физического ограничения, на которое можно было бы ссылаться. Таким образом, существует шесть основных принципов адаптивного веб-дизайна, с которых можно начать разработку адаптивного макета.
Используйте точки останова на основе содержимого
Один из фундаментальных принципов дизайна гласит, что дизайн вашего веб-сайта должен поддерживать контент, а не наоборот. Медиа-контент, такой как видео, фотографии и текстовый контент, такой как длинные и короткие веб-копии, должен оптимально отображаться на всех экранах. Ключом к гибкому веб-дизайну является использование точек останова на основе содержимого, а не на основе устройств.
Выбирайте веб-шрифты и системные шрифты с умом
Веб-шрифты выглядят потрясающе! У вас есть множество возможностей изменить свой дизайн с помощью классных веб-шрифтов. Но вы должны знать, что браузеры должны будут загрузить каждый веб-шрифт. Больше веб-шрифтов, больше времени на загрузку. Напротив, системные шрифты работают молниеносно. Если у пользователя нет именованного системного шрифта на локальном устройстве, он вернется к следующему шрифту в стеке семейства шрифтов . Поэтому при выборе шрифтов обязательно учитывайте время загрузки и требования к дизайну.
Оптимизация растровых изображений и векторов
У вас на сайте есть разные значки, поддерживающие контент? Часто рекомендуется использовать растровый формат, если ваши значки содержат много деталей. С другой стороны, векторные форматы – это лучший вариант для значков, которые хорошо масштабируются вверх и вниз. Векторы часто бывают крошечными, но недостатком является то, что некоторые старые браузеры могут их не поддерживать. Кроме того, бывают случаи, когда векторы тяжелее растровых изображений, например, когда изображение очень детализировано. Поэтому всегда убедитесь, что вы оптимизируете свои растровые изображения и векторы, прежде чем они будут переведены в онлайн.
Проведите тесты на отзывчивость первого раза
Первая часть веб-сайта – это представление, которое посетители видят при первой загрузке, до какой-либо прокрутки. Он часто включает в себя главный раздел с отзывчивой панелью навигации , вводным текстом и мультимедиа, а также призывом к действию. Отзывчивость не ограничивается только мобильными устройствами. Вам также следует подумать о планшетах, игровых консолях и других экранах. Итак, главное – проводить частые тесты, по крайней мере, для первого просмотра веб-сайта. Вы можете использовать Chrome DevTools ( Lighthouse ) для проверки качества веб-страницы.
Не скрывайте контент на маленьких экранах
Многие люди привыкли считать, что мобильные пользователи всегда в спешке ищут информацию небольшого размера, в то время как пользователям настольных компьютеров больше нравится крупномасштабный контент. Теперь мы понимаем, что в современном мире это не так. Люди повсюду используют мобильные устройства, ища полный контент и полный доступ ко всем услугам. Вы должны убедиться, что вместо того, чтобы скрывать контент, вы управляете макетом и точками останова, чтобы представить его как можно проще и без усилий.
Управление макетом с помощью вложенных объектов
Создание макета сайта и правильное позиционирование элементов требует значительных усилий. Вы также могли столкнуться с трудностями в управлении множеством элементов, которые зависят друг от друга. Поэтому вам следует подумать об упаковке связанных элементов в контейнер или <section> . Это помогает свести задачу размещения нескольких элементов к одному, в котором вы размещаете только один элемент.
Адаптивный дизайн: что лучше: сначала настольный компьютер, а мобильный?
Подход в первую очередь для настольных ПК означает, что вы напишете CSS для больших экранов, а затем примените медиа-запросы, чтобы уменьшить дизайн для небольших экранов. Напротив, подход «сначала мобильные» включает написание CSS для мобильных устройств с экранами меньшего размера, а затем применение медиа-запросов для расширения дизайна для больших экранов. Основная цель – свести веб-сайт и приложения к самому необходимому.
Если вы только начинаете адаптивную веб-разработку, вам следует использовать подход, ориентированный на настольные компьютеры, так как в конце дня вам придется складывать контейнер один на другой на мобильных устройствах. Хотя это полностью личное решение, подход, ориентированный на мобильные устройства, поможет вам лучше структурировать HTML, в то время как подход, ориентированный на настольные компьютеры, поможет вам с методами макета и интервалов.