Адаптивный дизайн сайта

Адаптивный (отзывчивый) веб-дизайн является логическим продолжением идеи эластичного макета сайта. Он не просто растягивается или сжимается при изменении размера экрана, а действительно подстраивается под него. Это происходит за счёт изменения внешнего вида элементов сайта для различных диапазонов размеров экрана.

Адаптивный дизайн позволяет эффективно отображать сайт практически на любом устройстве, имеющим доступ в Интернет. Причём структура отображаемой информации может кардинально отличаться для различных устройств. Например, на экране ПК страница сайта будет отображаться вместе со всеми элементами управления и графическими материалами, а на экране бюджетного мобильно телефона будет показан только текст статьи и 2–3 навигационных кнопки.

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

Пример адаптивного дизайна

адаптивный дизайн

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

Адаптивная вёрстка сайта в la mask

Мы, конечно, не могли пропустить такую замечательную технологию и использовали её на своём сайте. Однако у адаптивной вёрстки есть свои недостатки. Процесс адаптации дизайна занимает довольно много времени. По сути приходится верстать 3—4 сайта вместо одного. При этом увеличивается стоимость проекта, вероятность появления ошибок и время загрузки страниц (незначительно). Поэтому прежде чем заказывать адаптивный дизайн, стоит оценить значимость аудитории, заходящей на сайт с мобильных устройств, для вашей отрасли.