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

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

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