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

В последнее время все больше и больше развиваются технологии и различные устройства (планшеты, смартфоны, мониторы) при помощи которых просматриваются сайты.
В сферу чего мы получаем огромное множество различных разрешений экранов, что в свою очередь ведет к затруднению получения информации с сайтов. Чтобы информация была хорошо читаема и удобно просматриваема на большинстве устройств и была разработана технология адаптивного дизайна.
Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.
Адаптивный дизайнпредполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.
Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Основные принципы адаптивного дизайна:
• Адаптивный шаблон сайта, способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
• Адаптация и перемещение блоков контента, способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
• Адаптация изображений, способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
• Использование гибкой сетки, позволяет максимально быстро изменять конструкцию макета;
• Скрытие менее важных блоков, на небольших экранах некоторые блоки могут скрываться;
• Переработка юзабилити элементов навигации, так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
• Упрощение ряда элементов на веб — странице, некоторые элементы упрощаются для использования на мобильных устройствах;
• Адаптация видео контента, также следует учесть и адаптацию видео;
• Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
• Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.