Блог

Главная - Блог - Адаптивный веб дизайн

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

04.11.2018

 

 Бизнес XXI века – это грамотное и универсальное сочетание идей и передовых технологий.

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

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

Адаптивный веб-дизайн (англ. Adaptive Web Design) —  это дизайн веб-страниц, который обеспечивает правильное отображение сайта на технических устройствах (гаджетах), подключённых к глобальной паутине и который в режиме реального времени (динамически) подстраивается под заданные размеры дисплея гаджета. То есть конечная цель этого вида дизайна является создание универсального дизайна веб-сайта, который мог бы просматривать и взаимодействовать с ресурсом любых инновационных гаджетов.

 

Адаптивный веб-дизайн и его принципы

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

Принцип №1 - адаптивный шаблон сайта. Это способность шаблона динамически настраиваться под различные дисплеи устройств (начиная от монитора обыкновенного ПК и заканчивая небольшим смартфоном);

Принцип №2 - адаптация и перемещение блоков контента. Это способность контентных блоков (в зависимости от дисплея вашего устройства) принимать нужные размеры, а также способность передвигаться на другую позицию в макете;

Принцип №3 - адаптация изображений. Это способность графического контента изменять свой размер в зависимости от дисплея технического устройства или загрузка более адаптированного изображения, но уже с меньшим весом и размером;

Принцип №4 - использование гибкой сетки. Данный принцип делает возможным максимально быстро изменять конструкцию макета;

Принцип №5 - скрытие менее важных блоков. Принцип, благодаря которому появляется технология сокрытия некоторых блоков на небольших экранах;

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

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

Принцип №8 - адаптация видео контента. Видеоролики уже давно стали неотъемлемой частью информации, поэтому данный принцип используется и для учёта адаптации видео;

Принцип №9 - использование медиа — запросов(media query). Принцип для создания адаптивного макета;

Принцип №10 - сначала мобильные устройства (mobile first). Разработка адаптивного веб – дизайна начинается с макета, который будет применяться на мобильных телефонах.

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

 

В адаптивном веб – дизайне мы можем встретить метатеги (например, viewport), которые позволяет программистам и дизайнерам устанавливать ширину экрана для устройств, которая прописана в языке программирования CSS или наткнуться на медиа – функции (так называемые breakpoints –  контрольные точки). Контрольные точки могут быть разными, что позволяет разработчикам менять дизайн сайта. Например, размер 320px и 480рх — соответствует мобильным вариантам, 768px— планшетам, 1024px— планшетам и нетбукам, 1280px и более — ПК.