Адаптивный веб-дизайн

Адаптивный веб-дизайн или англ. Adaptive Web Design

— дизайн веб-страниц, который обеспечивает правильное отображение сайта на разных, подключённых к интернету устройствах.
Также он способен динамически подстраиваться под параметры окна браузера.
У адаптивного веб-дизайна одна большая цель – обеспечить универсальность отображения всего содержимого веб-сайта для разных устройств.
Веб – сайт должен удобно просматриваться и работать и на смартфоне, и на планшете и на всех устройствах, подключенных к интернету с экранами разных разрешений.
Для всего макета и отдельным его частям устанавливают не фиксированную ширину, а эластичную — в процентах
В 2010 году Итан Маркотт впервые ввел понятие responsive web-design - отзывчивый дизайн,
далее Джеффри Зельдман предложи это понятие расширить,
а Аарон Густафсон уже придумал Adaptive Web Design.
Важной его частью был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки, и, что, немаловажно в адаптивной вёрстке — привязка к определенным разрешениям и устройствам.

Для появления и развития технологий адаптивного веб-дизайна главными причинами стали

• Появление различных разрешений устройств, с выходом в интернет;
• увеличение мобильного интернет-трафика;
• популярность мобильных устройств с выходом в интернет  
• рекомендации поисковых систем Google и Яндекс (нет дублирующих страниц и ссылочная масса сконцентрирована на одном домене)

Основные принципы в отзывчивом дизайне

• flexible, grid-based layout или применение на основе сетки гибкого макета
• flexible images или использование гибких изображений
• media queries или работа с медиа-запросами
Еще в адаптивном веб - дизайне применяют
• Постепенное улучшение
• Проектирование на самом раннем этапе для мобильных устройств,
• Перестраивание блоков в плавном режиме, например при повороте планшета

«Mobile first»

- первые мобильные – это негласное правило, что проектирование адаптивной версии начинается с мобильных устройств.
Здесь дизайнер может использовать только небольшой экран и всего одну колонку и все лишнее ему надо убрать.
И в этом формате передать основной смысл и идеи версии развернутого сайта
Сейчас заказчики хотят иметь у своего сайта мобильную версию.
Один пользователь имеет iPhone, другой – iPad, а версия должна быть приемлемой под другие размеры экранов.
 При адаптивной верстке страница сама должна автоматически подстроиться под любое разрешение.
При стремительном выпуске новых различных устройств с разными разрешениями экрана адаптивная верстка – очень актуальная тема.

 Чтобы не верстать для каждого устройства отдельно, есть несколько решений:

1. Надо все делать гибким, хотя это решение не устраняет все проблемы
Итан Маркотт создал простой шаблон, который показывает использование гибкой вёрстки:
Весь дизайн по его шаблону — микс адаптивных слоев, картинок и, где требуется, умной разметки.
 Создание адаптивных слоев – задача не сложная, и в практике веб-дизайнера встречается часто, а вот, чтобы сделать адаптивные картинки, следует использовать техники:
• Hiding and Revealing Portions of Images
• Foreground Images That Scale With the Layout
• Creating Sliding Composite Images
Гибкие изображения можно сделать с использованием max-width в CSS: img {max-width: 100%;}
Но max-widthне поддерживается в IE, здесь используйте width: 100%.
Данный способ - отличное начало в создании адаптивных изображений, но разрешение и время загрузки все-таки должны оставаться приоритетными.
2. Следующий способ: отзывчивые изображения Filament Group представляет технику, которая и изменяет размер изображений в соответствии с пропорциями, и сжимает разрешение картинок на самых маленьких экранах. И на больших они не занимают дополнительные места.
Чтобы использовать данную технику, можно скачать несколько файлов наGithub
Сначала возьмите JavaScript-файл или rwd-images.js, следующий -файл .htaccess и, наконец, rwd.gif (файл изображения).
 Чтобы связать большие и маленькие разрешения потребуется использование HTML:
сначала изображение с префиксом .r(маленькое), потом отсылка к большему изображению, используяпри этом data-fullsrc:
Если экран шире 480 пикселей, то загрузится изображение largeRes.jpg или с большим разрешением.
Для маленького экрана загружать большое изображение не понадобится, загрузится маленькое (smallRes.jpg). Когда браузер не поддерживает CSS3-медиазапросы, то замену стилей проводят с помощью jQuery