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

 

Чем именно является адаптивный дизайн (он же реагирующий и отзывчивый, — responsive web-design) и как создать адаптивный веб-сайт? В этом уроке объясняется концепция, а так же подробно показан процесс создания шаблона адаптивного веб-сайта.

 

Адаптивный веб-дизайн является горячей темой в наши дни, тем более что сайты должны адаптироваться к растущему числу мобильных устройств с их относительно небольшими экранами. Многие дизайнеры и разработчики хотят создавать новые сайты с использованием шаблона, основанного на быстром реагировании, или изменить существующие сайты, чтобы включить в них элементы быстрого реагирования.
Тем не менее, с первого взгляда вся эта тема может вызвать недоумение. Адаптивный дизайн является относительно новой идеей, которая быстро развивается. В ней довольно много запутанных терминов, таких как реагирующие шаблоны, адаптивные шаблоны, media queries и viewport’ы. С чего начать?
В этой статье вы получите короткое введение в мир адаптивнаго веб-дизайна. В…:

  • Узнаете, чем именно является адаптивный дизайн и почему это полезно
  • Посмотрите на разницу между терминами «реагирующий шаблон» и «адаптивный шаблон»
  • Возьмете существующий изменяющийся шаблон и превратите его в адаптивный шаблон, который будет хорошо смотреться на всех экранах, начиная от экрана мобильного телефона и заканчивая широкоформатным рабочим столом
  • Посмотрите, как media queries и мета тег viewport могут помочь вам построить адаптивные шаблоны.

Готовы исследовать мир адаптивного дизайна? Поехали!

Адаптивный дизайн в двух словах

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

  • Адаптация шаблона в соответствии с различными размерами экранов, начиная от широкоэкранных настольных компьютеров до крошечных телефонов
  • Изменение размеров изображения в соответствии с разрешением экрана
  • Обслуживание низкоскоростных изображений на мобильных устройствах
  • Упрощение элементов страницы для использования в мобильных устройствах
  • Скрытие несущественных элементов на небольших экранах
  • Предоставление больших по размеру и удобных для нажатия пальцами ссылок и кнопок для мобильных пользователей
  • Выявление и реагирование на мобильные функции, такие как геолокация и ориентация устройства.

Однако, в большинстве случаев, когда люди говорят о «адаптивном веб-дизайне», они имеют в виду главным образом первую из этих позиций: создание реагирующего шаблона, который сможет легко приспосабливаться к различным размерам экрана. На этом и будет сфокусирована данная статья.
В настоящее время большинство веб-сайтов предназначены для просмотра в браузерах настольных компьютеров с окном около 1000px в ширину. Если окно вашего браузера значительно меньше этого размера, то содержание страницы или выглядит сдавленным, или у вас появляется горизонтальная полоса прокрутки. Аналогичным образом, если вы выводите ваш браузер на широкоформатный экран, то содержание часто выглядит слишком растянуто по горизонтали, или появляется излишнее количество белого пространства на странице.
Например, посмотрите текущую схему на различных размерах браузера: