Разработка адаптивных сайтов

Раньше многие посетители интернет-сайтов жаловались, что им неудобно смотреть картинки, читать информацию с разных гаджетов. Просчитать каждое устройство, с которого посетители могут зайти на сайт, нереально.

Так что создание отдельной версии сайта (мобильной) не всегда является необходимостью. Тем более, большому количеству владельцев смартфонов и планшетов не по душе, что на их устройстве отображена мобильная версия, а не полная.

Чтобы не было необходимости в классификации устройства на типы и создании отдельного сайта для разных гаджетов, придумали адаптивный дизайн.

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

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

Адаптивный дизайн включает в себя три принципа:

1) медиазапросы;

2) резиновые изображения;

3) резиновый макет.

Создание гибкого макета

Для его создания применяются относительные единицы измерения: % (для размера элементов) и еm (для размера шрифтов). Ещё можно использовать рх. Есть возможность ограничения ширины сайта до нужного значения.

Гибкое изображение

Если размер изображений не указан в атрибутах тега img, то он добавляется в CSS.

Медиазапросы

Многие современные браузеры поддерживают медиазапросы: Firefox 3.5+, Opera 9.5+, браузеры на базе WebKit (IE 9+, Safari 3+, Chrome).

С мобильными браузерами тоже нет проблем. Медиазапросы поддерживаются браузерами на основе WebKit: Opera Mini, Opera Mobile, webOS производства Android и HP, Mobile Safari. С 2011 года на Windows Phone устанавливают IE9+, что гарантирует поддержку медиазапросов.

Нет проблем и со старыми браузерами, включая IE8 и ниже. Имеются специальные JavaScript-библиотеки, обеспечивающие стопроцентную кроссбраузерность, начиная с IE5.

В медиазапросах всё индивидуально. Туда вписываются изменения, необходимые для определённого сайта при конкретном размере браузера. Можно поменять размер десктопного браузера (ресайз) и отследить применение стилей.

Рекомендуем обратиться в рекламное агентство Витрувий для разработки хорошего адаптивного сайта. Витрувий является одним из лидеров рынка в разработке адаптивных сайтов