Теоретические основы адаптивной верстки и адаптивного дизайна

Все большую популярность в веб разработке получает кроссбраузерная адаптивная верстка. Тема эта большая и практически неисчерпаемая, так как постоянно появляются новые HTML теги, идеи и решения. Чтобы не отставать от прогресса и понимать, как устроена адаптивная верстка, попробуем разобраться в основах адаптивного дизайна и адаптивного сайтостроения.

Считается, что концепция адаптивного дизайна появилась в 2010 году и включила в себя следующие моменты. Во-первых, это концепция независимости от устройства. Во-вторых, это концепция "отзывчивого" веб-дизайна. В-третьих, это концепция прогрессивного улучшения.

Независимость от устройства

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

"Отзывчивый дизайн"

Вторая концепция это "Отзывчивый дизайн". В 2010 году в своей статьи "Отзывчивый веб дизайн" (http://alistapart.com/article/responsive-web-design) Итан Маркотт предложил новый подход к верстке сайтов, при котором сайт будет прекрасно выглядеть вне зависимости от разрешения и размера устройства. В основе этого подхода лежат три технологии:

• резиновая сетка, при которой размеры элементов задаются не в пикселях или условных единицах, а в процентах. Данный вид компоновки элементов, в отличие от фиксированной, позволяет растягивать сетку на всю ширину экрана и не зависит от текста, как это бывает с эластичной компоновкой, в которой используются условные единицы (em).
• медиа-запросы (media-queries), технология появившаяся в CSS3, позволяющая использовать стили в зависимости от ряда факторов, включая ширину и высоту устройства, разрешение, соотношение сторон, ориентацию устройства и т.д. Данной теме посвящу отдельный пост, так тема сложная и объемная.
• адаптивные изображения, когда при расчете размеров медиа контента, в данном случае изображений, используются проценты, которые высчитываются по формуле: ширина изображения / контекст.

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

Прогрессивное улучшение

Концепция прогрессивного улучшения впервые была озвучена в 2003 году. Однако применить ее именно к адаптивному дизайну было предложено Аароном Густафсоном в 2010 году. Тут необходимо отметить, что в  среде веб разарботчиков считалось хорошим тоном делать сайты для самых современных браузеров, однако при этом игнорировались старые браузеры. В основе концепции прогрессивного улучшения лежит идея, что сайт необходимо начинать разрабатывать с базовой версии, которая будет доступна для любых браузеров и устройств. И только после этого улучшать эту базовую версию для новых браузеров.

Эта же концепция легла в основу идеи mobile first, когда сначала делается простая версия доступная для мобильных устройств, которая потом улучшается по мере увеличения экрана/ширины устройства.

Изучив данные базовые концепции теперь будет гораздо проще погрузиться в такую интересную тему, как адаптивная верстка.