Принципы адаптивного веб-дизайна

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

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

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

Ингредиенты для адаптивного веб-дизайна

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

Жидкие макеты

Благодаря гибкой компоновке вы можете создавать веб-страницы, которые адаптируются к ширине и высоте текущего окна просмотра. Обычная практика включает использование Максимальная ширина свойство вместо того, чтобы давать элементу фиксированную ширину. Кроме того, используя процент (%), высота области просмотра (vh) или ширину области просмотра (vw) помогает улучшить адаптируемость, невозможную с пикселями (px). Итак, в следующий раз, когда вы будете создавать макет, обязательно внесите эти небольшие изменения и начните извлекать выгоду из методов адаптивного дизайна.

Отзывчивые единицы

По мере перехода к более продвинутому CSS вы часто будете видеть использование rem а также Эм единицы длины вместо px единицы. Это потому, что rem unit упрощает масштабирование всей компоновки. По умолчанию 1rem равен 16px, потому что он пропорционален размер шрифта элемента, обычно 16 пикселей. Однако вы можете установить 1rem равным 10 пикселей (или любому другому значению) для упрощения вычислений, отрегулировав размер шрифта верхнего уровня.

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

Изображения представляют собой первоочередную задачу при разработке даже самого простого макета. Вы всегда должны следить за их размером, чтобы они соответствовали дизайну. Кроме того, по умолчанию они не масштабируются при изменении области просмотра. Итак, вы должны использовать % для размеров ваших изображений, а также Максимальная ширина имущество.

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

Принципы адаптивного веб-дизайна

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

Используйте точки останова на основе содержимого

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

Выбирайте веб-шрифты и системные шрифты с умом

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

Оптимизация растровых изображений и векторов

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

Проведите тесты на отзывчивость первого раза

Первая часть веб-сайта - это представление, которое посетители видят при первой загрузке, до какой-либо прокрутки. Он часто включает в себя раздел героев с отзывчивая панель навигации, вводная копия и медиа, а также CTA. Отзывчивость не ограничивается только мобильными устройствами. Вам также следует подумать о планшетах, игровых консолях и других экранах. Итак, главное - проводить частые тесты, по крайней мере, для первого просмотра веб-сайта. Вы можете использовать Chrome DevTools (Маяк) для проверки качества веб-страницы.

Не скрывайте контент на маленьких экранах

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

Управление макетом с помощью вложенных объектов

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

Адаптивный дизайн: что лучше: сначала настольный компьютер, а мобильный?

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

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

6 лучших курсов для изучения UX-дизайна

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

Читать далее

Об авторе