Регистрация
Раздел: Для веб-программиста

Адаптивный веб-дизайн - стратегия для работы при неизвестных размерах экрана.

User 30-09-2017, 08:11 704 Для веб-программиста
0

Адаптивный веб-дизайн - стратегия для работы при неизвестных размерах экрана.

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

Адаптивный веб-дизайн — это стратегия по предоставлению пользовательских макетов для устройств в зависимости от размера области просмотра (окна браузера). Хитрость адаптивного дизайна в том, что для всех устройств предоставляется один HTML-документ, но применяются разные таблицы стилей в зависимости от размера экрана, чтобы обеспечить наиболее оптимизированный макет для конкретного устройства. Например при просмотре страницы на смартфоне текст отображается в одной колонке с крупными ссылками для легкого нажатия.
Но когда та же самая страница просматривается в браузере на большом настольном компьютере, контент перегруппируется в несколько колонок с традиционными элементами навигации. Как по волшебству! (Но на самом деле это просто каскадные таблицы стилей CSS).

Сообщество веб-дизайнеров активно обсуждает адаптивный веб-дизайн с тех пор, как Итан Маркотт впервые написал ввел это понятие в статье «Responsive Web Design». Данный вид дизайна стал одним из основных инструментов, используемых при работе с неизвестным размером окна.

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

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

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

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

Написать сообщение

Кликните на изображение чтобы обновить код, если он неразборчив

Похожие новости

Требования к верстке сайта. Макеты, таблицы, страницы.

Как известно, театр начинает с вешалки. Сайт начинается с профессионально верстки страниц. К

18.03.16 Для веб-программиста
Анатомия веб-страницы.

Мы все знакомы с тем, как веб-страницы выглядят в окне браузера, но что происходит «за кадром»? На

01.02.16 Для веб-программиста
Каскадные таблицы стилей CSS - дизайн сайта и контента.

В то время как HTML используется, чтобы описать содержимое вебстраницы, именно каскадные таблицы

01.02.16 Для веб-программиста

 
Powered by UseSite.ru. Все права защищены. Копирование материала строго запрещено.
Закрыть