Кристина Кледзик — SEO-специалист, работает в Distilled c 2012 года. Ее работа связана практически со всеми аспектами поисковой оптимизации: от аналитики до тонких технических настроек.

В ноябре Уилл Критчлоу писал, что блог компании Distilled приобрел новый адаптивный дизайн, но недавно я осознала, что мы еще ни разу не писали о том, чем так хорош адаптивный дизайн. В последнее время адаптивный дизайн вызывает множество обсуждений в сфере интернет-маркетинга. Но действительно ли это будущий стандарт индустрии?

Короткий ответ: да.

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

Учитывая 55 % рост распространения смартфонов в одном только 2012 году, адаптивный веб-дизайн — это будущее интернет-маркетинга.

Как это работает

Звучит слишком хорошо, чтобы быть правдой, не так ли? Все началось с довольно простой теории Итана Маркотта. В 2010 году он написал статью, озаглавленную «Адаптивный веб-дизайн». Вместо создания отдельной интернет-страницы в 800 пикселей по горизонтали и расположения в центре экрана адаптивные страницы составлены из элементов, которые располагаются в зависимости от ширины браузерного окна. Эти элементы определяют размер экрана при помощи медиа-запросов CSS.

Начнем с простого примера с сеткой из 9 прямоугольников с пометками A–I. На маленьком экране, например, на экране планшета или старого компьютера с маленьким количеством пикселей, эти прямоугольные элементы будут располагаться в виде решетки 3 х 3:

На более широком экране эти элементы могут развернуться в стороны