Основы адаптивного веб-дизайна 

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

Основы адаптивного веб-дизайна

Адаптивный веб-дизайн

Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в A List Apart , отвечает потребностям пользователей и устройств, которые они используют. Компоновка меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент в виде одного столбца; планшет может отображать одно и то же содержимое в двух столбцах.

Основы адаптивного веб-дизайна

ХОД КОНЕМ

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

Основы адаптивного веб-дизайна

КАК ПРОИСХОДИТ ХИМИЯ?

Чтобы попытаться обеспечить лучший опыт, мобильные браузеры визуализируют страницу с шириной экрана рабочего стола (обычно около 980px, хотя это зависит от устройства), а затем пытаются улучшить внешний вид содержимого, увеличивая размер шрифта и масштабируя содержимое по размеру экрана. . Это означает, что размеры шрифта могут показаться несовместимыми для пользователей, которым, возможно, придется дважды нажать или ущипнуть для увеличения, чтобы увидеть контент и взаимодействовать с ним.

Основы адаптивного веб-дизайна

ТОЧНОСТЬ НАШЕ ВСЁ

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

Основы адаптивного веб-дизайна

медиа-запросы CSS5

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

Основы адаптивного веб-дизайна

SERVICE 6

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