Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

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

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

В основе адаптивного веб-дизайна лежит так называемый «резиновый» принцип: размеры элементов дизайна сайта пропорционально изменяются, в зависимости от того, каковы размеры окна браузера, в котором просматривается сайт. В адаптивном дизайне сайтов используется «резиновая» верстка, а также «резиновые» изображения.

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

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

Поэтому адаптивный веб-дизайн предлагает применять на сайте «резиновые» изображения: при уменьшении размеров окна браузера меняться будут не только блоки, но также и изображения. Самый простой способ решить подобную задачу — это воспользоваться свойством изображений в CSS {max-width: 100%}. Если применить это свойство к изображению, помещенному в блок, то изображение будет изменяться пропорционально вместе с изменением самого блока.

Еще один способ создания «резиновых» изображений заключается в том, чтобы выдавать с сервера по запросу браузера изображения нужного размера, исходя из того, каково текущее разрешение экрана. Есть несколько вариаций подобного способа, в которых использоваться может Javascript, PHP. Также возможно применение для адаптивного веб-дизайна CSS3 Media Queries.

С помощью набора правил Media Queries в CSS3 можно задать требуемое «поведение» сайта при его просмотре на разных экранах. Так, например, если сайт просматривается на широкоформатном мониторе с большим разрешением, то в этом случае макет может быть наиболее «развернутым»: большие изображения, расположенные в горизонтальный ряд, заголовки, описания. Если экран меньше и уже, то макет может измениться: картинки уменьшаются, их взаимное расположение из горизонтального становится вертикальным, заголовки и описания убираются.

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

Теги:
веб-дизайн, верстка сайта, адаптивный веб-дизайн, media queries