Блог графического дизайнера

Все о дизайне и для дизайна

Заказать дизайн

Тайны адаптивного дизайна

Вся тайна адаптивного веб-дизайна кроется в том, что многие не знают, что это, вот и все. Есть понятие, что это отзывчивый или реагирующий дизайн, но что под всем этим кроется – неизвестно.  Постараюсь объяснить, что означает «адаптивный дизайн» и как к нему прийти.

Небольшое вступление

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

Сегодня я расскажу о следующем:

  • Что такое адаптивный дизайн и зачем он нужен;
  • Какая разница между адаптивным дизайном и реагирующим дизайном;
  • Как из обычного шаблона сделать адаптивный;
  • Как с помощью media queries сделать свой дизайн адаптивным.

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

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

Адаптивный дизайн преследует следующие принципы:

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

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

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

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

Реагирующий дизайн

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

Идея у обоих терминов одна – сайт изменяется в зависимости от устройства, на котором его смотрят. В этом случае предпочитаю использовать термин адаптивного дизайна, так как по сути шаблон действительно адаптируется или перестраивается под существующие условия его эксплуатации.

Примеры адаптивных шаблонов вы легко можете найти в сети. Я не буду приводить огромные строчки кода. Предпочитаю больше уделить внимание теории.

Как создать адаптивный шаблон

Создать адаптивный шаблон довольно просто. В нем должны обязательно находиться такие стандартные элементы, как:

  • Header. Полоса должна проходить по всей ширине загрузки;
  • Content. Область может находиться слева и занимать не более 65% по всей ширине;
  • Sidebar. Этот модуль может располагаться справа и занимать не более 20% от рабочей области;
  • Навигация. Этот модуль занимает около 15% области страницы;
  • Футер. Находится в нижней части страницы и вы можете вручную менять размер окна браузера в коде.

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

Что такое media queries

Media queries – это ключевой момент в создании адаптивного дизайна. С его помощью вы можете сохранять шаблоны, содержащие некие правила CSS. Если использовать media queries для редактирования размера окон с шириной меньше 700 рх, то прекрасно работает шаблон, адаптирующий окна для небольших размеров браузера. Media queries применяется практически во всех браузерах, известных сегодня.

Вот время проектирования адаптивных шаблонов я чаще всего использую следующие шаблоны:

  • min-width: width. Используется в тех случаях, когда ширина окна больше ширины окна браузера.
  • max-width: width. Используется в тех случаях, когда ширина окна меньше ширины окна браузера.
  • min-device-width: width . Используется, когда ширина экрана устройства, на котором просматривают страницу, больше самого шаблона.
  • max-device-width: width . Используется, когда ширина экрана устройства, на котором просматривают страницу, меньше самого шаблона.

Можно и не задавать диапазонные значения, а использовать точные показатели, но я бы не советовала пользоваться этим методом.

Адаптивные шаблоны для экранов с разрешением менее 1000 рх

Я уже говорила о том, что адаптивный дизайн хорошо выглядит в браузере, но чаще всего страдает футер, сайдбар, контент и навигация. Это происходит в 100% случаев, когда ширина браузера меньше 1000 рх. Как это исправить? Вернемся к известному media queries, чтобы определить ширину браузера. Если наши опасения подтвердятся, то нужно расположить навигационную панель не вверху страницы, а сбоку, лучше всего слева.

Основные правила в этом случае звучат следующим образом:

  • Ширина контента растягивается на 60-70%;
  • Навигационная панель располагается сбоку и увеличивается на 25%;
  • Правое поле не удаляется из боковой панели, а становится автоматически верхним. Так мы получаем необходимое вертикальное пространство между навигационным полем и сайдбаром.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*

*