Responsive web design — адаптивная верстка веб-сайтов и понимает ли Google ваш сайт как адаптивный

Адаптивный веб-дизайн (англ. Responsive web design) — новый подход в дизайне веб-страниц, обеспечивающий улучшенное восприятие веб-страницы на устройствах с разным разрешением экрана. Целью адаптивного веб-дизайна является представление универсального веб-сайта для различных устройств.

Для того, чтобы веб-сайтом был удобно пользоваться при различных разрешениях и форматах, адаптивный веб-дизайна не предполагает создание отдельных версии веб-сайта для определенных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре разрешений от самых малых (320х240 пикс.) до максимальных — FullHD и больше.

При создании файла стилей для сайта есть 2 основных подхода:

  • mobile-first
  • desktop-first

Mobile-first — это подход в проектировании правил стилей, который предполагает, что стили, заданные по умолчанию, задаются для всех экранов от 0 пикселей и выше, а далее уже через media queries вы кастомизируете или дополняете уже существующие стили. При использовании этого подхода, как и гласит его название, вы должны в первую очередь ориентироваться и думать о маленьких экранах.

Приведу пример:

h1 {font-size: 18px; line-height: 1.2;}

@media screen and (min-width: 480px) {
	h1 {font-size: 24px; line-height: 1.3; margin-bottom: 18px;}
}

@media screen and (min-width: 1024px) {
	h1 {font-size: 36px; line-height: 1.4; margin-bottom: 24px;}
}

Как видно из данного примера, по умолчанию размер заголовка является небольшим, а далее уже с помощью media queries его стили изменяются и дополняются.

Причем, media-queries таргетируются по правилам только min-width: xx — это сделано для того, чтоб вы стремились по возможности только добавлять новые свойства стилей, но не переопределять уже существующие.

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

Второй из подходов, destop-first, проще, так как зачастую верстальшик работает на большом мониторе, и ему проще сначала сделать верстку для больших экранов, а далее уже ее кастрир.. ээ- кастомизировать для планшетов и телефонов. Обратной стороной медали является более запутанный код (больше переопределений в стилях) и больший размер самого кода CSS.

Первый из подходов, благодаря его преимуществам, обрел большую популярность, и его широко используют ставшие уже стандартными фреймворками для разработчиков Bootstrap и Zurb Foundation.
responsive-foundation

Эти фреймворки довольно схожи, используют подключенный файл иконочных шрифтов, 12-ти колоночную структуру (можно кастомизировать структуру, к примеру 16 колонок в Бутстрапе). Есть возможность предварительной кастомизации фреймворка под себя и последующей загрузки уже готового индивидуально вашего каркаса.

К примеру, построение стандартной сеточной html-структуры в bootstrap сводится к следующему:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		This is full-width block 
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 1
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 2
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 3
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 4
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 5
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
		Block 6
    </div>
  </div>
</div>

Как видно, использована 12-ти колоночная структура с 4-мя классами, отвечающими за 4 различных диапазона ширины экранов. Ширина каждой колонки указывается в процентах, что и создает возможность «растягивать» верстку.
Тут ячейки на больших экранах займут 1/3 ширины блока с классом «row» (col-lg-4 определяет поведение для больших экранов, а 4 означает ширину блока в 4 колонки, что из 12 и будет одной третью), а на самых маленьких (к примеру, на «айфонах») — будут во всю ширину, сдвинув соседей вниз.

Ниже подобный пример, сделанный с помощью Bootstrap, в действии:

Блок для примера 1
Блок для примера 2
Блок для примера 3
Блок для примера 4
Блок для примера 5
Блок для примера 6
Попробуйте следить за данными блоками и сужать ширину окна браузера — вы заметите как блоки сначала стают 2 в ряд, а после уже и вовсе в 1 блок в полную ширину. Это и есть основа проектирования и верстки блоками с использованием колоночной структуры и подгоняемой ширины блоков. Проще — адаптивный дизайн.

Также, для продвинутых front-end-девелоперов — в обоих фреймворках есть возможность загрузить SASS(SCSS)-вариант файлов и получить готовый фреймворк в удобой среде редактирования SASS.

А вот узнать, видит ли Google ваш сайт готовым к использованию на мобильных устройствах, вам поможет инструмент проверки Mobile-Friendly Test от самого Google.

Также, множество интересных вещей вы можете унать на специальном ресурсе, посвященном разработчикам сайтов — Web Fundamentals

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

responsive web design and google