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

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

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

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

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

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

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

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

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

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

Ваш комментарий будет полезен посетителям сайта! Пишите ниже.

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