Что такое адаптивный веб-дизайн?

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

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

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

В своей книге Маркотт объясняет, что есть два других элемента для разработки адаптивных веб-сайтов, помимо медиа-запросов: это гибкие / гибкие сетки и реактивные изображения. Сетки состояли в основном из количества пикселей и количества столбцов. Чтобы эта жидкость была одним из первых способов думать о дизайне, вы должны думать о пропорциях и заставлять вещи развиваться. Уже есть предопределенные жидкостные сетки, которые можно загружать и использовать для новых адаптивных веб-сайтов. Следующая проблема — проблема неподвижных изображений в жидкой сетке, которая обрабатывается с помощью реактивных изображений. Ключ заключается в том, чтобы ограничить размер изображения контейнером, используемым на веб-сайте. Эти вопросы просты с точки зрения идей, но сложны в их исполнении. Эти концепции являются неотъемлемой частью будущего веб-дизайна, поскольку адаптивное поведение будет все более ценно для дизайнеров и потребителей. Реактивный веб-дизайн, по сути, позволит пользователю, независимо от используемого устройства, жить более индивидуально и комфортно.



Source by Dennis L Myers

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *