Первоклассные услуги по продвижению и раскрутке сайтов

Адаптивный сайт — лучший выбор для всех видов устройст

Опубликовано: 2013/08/15Рубрика:
Полезные материалы
Комментариев: 0
Просмотров: 1555

Адаптивный сайт: что это такое и с чем его едят

(Нажмите для увеличения)

Понятие «адаптивный сайт» (responsive website) появилось относительно недавно, вместе с бумом продаж мобильных девайсов с возможностью выхода в интернет, и следовательно, повышением спроса на веб-сайты, приспособленные для этих устройств. И так«Адаптивный» означает тип проектировки и разработки сайта, при котором один и тот же сайт является совместимым со всеми типами мобильных устройств, и при этом правильно выглядит при просмотре на десктопном компьютере. На сегодня мобильный сайт является не прихотью, а необходимостью, поскольку все больше и больше пользователей предпочитают пользоваться интернетом со смартфона или планшета. Так же очень интересный факт что около половины всех покупателей в Интернете в 2013 году совершали свои покупки именно с мобильных девайсов.

Адаптивность сайта означает гибкость  во всем – в приспосабливаемости к разрешению экрана, к ориентации изображения и к платформе, на которой работает то или иное устройство.
Для обеспечения полной совместимости сайта по этим параметрам, сейчас применяют три основные метода создания сайта — media queries, резиновые сетки и гибкие изображения. Благодаря таким «регулирующимся» компонентам сайт подстраивается под устройства автоматически, без дополнительных настроек и независимо от того, какой новый девайс скоро появится на рынке.

Резиновая сетка – это уникальная возможность создавать почти безразмерные макеты сайтов. В такой сетке страница состоит из контейнеров, ширина которых задана в процентах от ширины страницы, а не в конкретных числах. Все параметры зависят только от размера экрана девайса, так как резиновой сеткой фиксируется взаимное расположение и размерное соотношение компонентов дизайна, а не величины в сантиметрах. Новые возможности для такого дизайна создали HTML5 и CSS3, и это только начало.

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

Камень преткновения для мобильных сайтов — масштабирование изображений. При создании адаптивного сайта выходов несколько. С приходом CSS3 самым простым выходом стало применение CSS max-width для динамического масштабирования. Еще вариант – обрезать изображение при помощи CSS overflow (задать параметр типа overflow:hidden). Картинка обрежется «на лету», и сразу же изменится расположение контейнеров в резиновой сетке, чтобы приспособиться к новым пропорциям. Еще можно сохранить несколько вариантов одной картинки разных размеров, которые будут автоматически подгружаться в зависимости от девайса пользователя на основе клиентской или серверной функции обнаружения или манипуляций DOM.

Медиа запросы (Media Queries)

Медиа запросы разрешают в выборочной таблице стилей для документа HTML ввод такого параметра, как размеры окна браузера, и таким образом создается несколько макетов. Сюда же к настраиваемым параметрам относится разрешение экрана, ориентация страницы и так далее. Новые девайсы, выпущенные уже после пришествия CSS3 (вроде устройств на iOS и Android), отлично приспособлены для поддержки медиа функций. Вопросы к допустимому разрешению экрана и его размеру уже неактуальны при применении медиа запросов.
В общем, все инструменты для создания адаптивных сайтов уже предоставлены, осталась только пара практических советов: перед написанием кода создайте черновой эскиз вашей сетки, не делайте чересчур растягивающиеся колонки и все величины ширины контейнеров указывайте в процентах. Остальное — дело вашего творческого воображения.

Рейтинг статьи:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Нет рейтинга)