Полезные сведения об адаптивной верстке

► Для тестирования адаптивной верстки лучше всего использовать различные мобильные устройства (планшетные ПК, смартфоны), но, если они недоступны, можно воспользоваться плагинами для браузеров.

• Internet Explorer — Microsoft Internet Explorer Developer Toolbar (встроен в браузер, начиная с версии 8)
• Firefox — Firesizer, (начиная с 16-ой версии «Инструменты» → «Веб-разработка» → «Адаптивный дизайн»)
• Google Chrome — Windows Resizer (также стандартные Инструменты для разработчика)
• Safari — ResizeMe

При использовании этих инструментов нужно учитывать один важный момент: они показывают размер всего окна браузера, а не области просмотра. Область просмотра (также известная, как viewport) – это область веб-страницы, которую посетитель может увидеть не прибегаю к прокрутке. Viewport определяется размером экрана и сильно отличается у различных устройств.

► Как известно, важную роль при создании адаптивной верстки сайтов играют media queries (медиа запросы). Нужно помнить, что блоки с media queries в файле стилей помещают после всех основных CSS-правил.

► Вести разработку адаптивного сайта нужно с учетом принципа "mobile first" (сначала мобильные). Смысл этого принципа заключается в том, что сначала создается верстка для мобильных устройств с небольшими экранами. На таких устройствах макет состоит из одной колонки с основными элементами сайта: шапка, меню, основное содержимое, подвал. При увеличении размера экрана по ширине, элементы выстраиваются горизонтально так, как задумано в макете сайта для остальных устройств (мониторов ПК, ноутбуков и прочих устройств). Все это получается благодаря использованию media queries (медиа запросов).

► Большинство современных устройств имеют высокое разрешение и высокую плотность пикселей. Таким образом, 2 устройства, имеющие одинаковый размер экрана по диагонали (например, 3,5”), но с различной плотностью пикселей, будут иметь различное разрешение. Это приводит к тому, что одна и та же страница будет хорошо отображаться на одном устройстве, на другом же она станет трудночитаемой. Чтобы этого избежать нужно использовать специальный meta-тег viewport, разработанный специалистами компании Apple, который предназначен для корректного отображения веб-страниц на устройствах с высокой плотностью пикселей (более 200 ppi).

HTML

	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

У meta-тег viewport имеется 2 параметра: width=device-width и initial-scale=1.0

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

Чтобы определить CSS разрешение какого-либо устройства, воспользуйтесь данными из таблицы.

Примеры

Параметр initial-scale - устанавливает первоначальный масштаб веб-страницы. Значение 1.0 означает то, что масштаб равен 100% и веб-страница не будет сжиматься под размер экрана.

Параметр maximum-scale – устанавливает максимальный масштаб. При значении равном 1, zoom будет отключен.

► В процессе верстки, нужно стараться, чтобы блок с основным содержимым страницы располагался в коде как можно выше. Например, у нас есть блок с контентом и блок с второстепенным содержимым (например, врезкой), который в макете должен располагаться слева от содержимого. В этом случае будет правильным в коде страницы сначала разместить блок с контентом, а затем врезку. Благодаря CSS-правилу float, блоки останутся на своих местах, как задумано в макете.

► Верстка, основанная на float в последнее время становится все менее популярной. На смену ей пришла верстка на основе flexbox. Существуют полезные инструменты, которые экономят время и силы разработчика. Речь идет о сетках для верстки, основанных в том числе и на flexbox. Эти инструменты используются и при адаптивной верстке сайта. Примером сетки, основанной на flexbox, является smart-grid.

► Медиа-запросы – это мощный инструмент, применяемый в адаптивной верстке сайтов. Однако, используя только его, создать настоящий отзывчивый сайт не получится. Адаптивный сайт должен быть создан на основе «резинового» макета, в котором ширина блоков указывается в %, а размер шрифта в em или rem.

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

На устройствах с бо́льшими разрешениями будет показана обычная версия сайта без визуальных преобразований. Однако, нужно учитывать при этом и максимальную ширину макета, чтобы сайт «прилично» смотрелся на широких мониторах - об этом читайте ниже.

Существует онлайн-инструмент, с помощью которого можно узнать какие media-queries сработают на вашем устройстве. Он называется MQtest.io и располагается по адресу: http://mqtest.io/

► Для преобразования пиксельных значений ширины фиксированных макетов в процентные применяется формула: ширина целевого элемента(px) / ширину контекста(px) = ширина %

► Значения ширины, полученные при вычислении по этой формуле, используются в CSS-правилах без округления. Например, у нас есть блок-контейнер (ширина - 960px) и в нем блок с навигацией (ширина - 200px): 200px/960px = 0,2083333333333333 (передвигаем запятую на 2 символа вправо) = 20.8333333 %

► Размер шрифта в адаптивных макетах указывается в emили rem. Отличие rem от em состоит в том, что rem задает размер относительно шрифта корневого элемента <html>, а значение в em наследуется от родительского элемента. Предварительно размер шрифта у всех элементов приводится к одному размеру. Этот размер по-умолчанию у всех браузеров равен 16px.

CSS

	*{
		font-size: 100%;
	}

► В процессе верстки адаптивного макета используются «резиновые» изображения. Такие изображения могут масштабироваться пропорционально макету.

CSS

	img{
		max-width: 100%; /* работает в современных браузерах и IE начиная с 7 версии */
        height: auto;
	}

При этом не нужно указывать значения ширины и высоты изображения в атрибутах тега <img />. Однако, чтобы изображения не увеличивались больше своего физического размера, нужно применить к ним следующее правила:

CSS

	img.someImg{
		width: 35.7142857%; /* изображение - 250px / контейнер - 700px */
		max-width: 250px;
	}

При использовании этого правила изображение не увеличиться при масштабировании больше своего физического размера.

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

► В идеале при разных размерах экрана должны загружаться разные по размеру изображения. Это необходимые меры для оптимизации времени загрузки страницы и объема трафика у посетителей, использующих мобильные устройства. Существует инструмент под названием Adaptive Images, который генерирует уменьшенные изображения на стороне сервера. Он не требует внесения изменений в разметку страницы. Для корректной работы этого инструмента требуется провести небольшие настройки в .htaccess и добавить на страницы с изображениями javaScript-код. При загрузке Adaptive Images в архиве имеется файл-инструкция по настройке.

► При создании адаптивной верстки, необходимо принимать в расчет области просмотра на экранах с высоким разрешением, таких как у современных устройств компании Apple. Например, у iPhone4 разрешение составляет 326 ppi. Для качественного отображения сайта на экранах таких устройств нужно создавать альтернативные изображения с хорошим разрешением.

Например, вы планируете разместить в шапке сайта логотип размером 150px на 150px. Для устройств с экранами с высоким разрешением, вам будет нужно создать изображение в 2 раза больше, а именно 300px на 300px. Причем, не нужно при создании нового файла устанавливать разрешение больше, чем 72 ppi. Дело в том, что на экранах мониторов и других устройств, изображения с разными разрешениями (например, 72 ppi и 300 ppi) будут выглядеть одинаково. При подключении этого фонового изображения, его необходимо масштабировать под размер блока с логотипом. Для этого используется CSS-правило backround-size. В нашем случае, его значение будет равно 150px.

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

CSS

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
   #wrap header .logo{
      background-image: url("path/to/image@2x.png");
      background-size: 150px 150px;
   }
   #wrap header .logo:hover {
      background-image: url("path/to/image_hover@2x.png");
      background-size: 150px 150px;
   }
 }

Примерно так мы можем показать более «качественный» логотип владельцам устройств с экранами высокого разрешения, которые посетят наш сайт.

► Существует полезный инструмент для загрузки альтернативных изображений с хорошим разрешением. Он называется Retina.js. Чтобы этот инструмент работал, нужно просто подключить файл retina.js в коде страницы. Во время загрузки страницы, скрипт будет проверять каждое изображение на наличие крупной версии изображения (в имени файла изображения с хорошим разрешением, должно присутствовать "@2x") и в случае если такое изображение есть, оно будет заменять обычное изображение. Кроме того, этот инструмент включает в себя LESS-код «примеси» (mixin), которая генерирует CSS-код для замены фоновых изображений.

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

HTML

<style> 
.buttonArea {
   margin: 50px;
   width: 250px;
}

.button {
	background: #7999ff;
	background: -webkit-linear-gradient(#7999ff 0%, #002c62 100%);
	background: linear-gradient(#7999ff 0%, #002c62 100%);
	border-radius: 60px;
	box-shadow: 1px 1px 4px #666;
	cursor: pointer;
	padding: 10px 40px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px #000;
}
</style> 
<div class="buttonArea"> 
	<a class="button"> Click Me</a> 
</div> 

Также нужно обращать внимание на размер элементов интерфейса сайта (например, ссылок постраничной навигации или кнопок в формах): на экранах мобильных устройств они не должны выглядеть мелкими, чтобы посетителям было удобно на них нажимать. Поэтому в блоках CSS-правил для устройств с шириной экрана меньше 600px, размер указанных элементов необходимо увеличивать.

► Для показа на страницах различных мелких значков, рекомендуется использовать вместо графических изображений иконочные шрифты. Сейчас это довольно популярная методика. Шрифты отлично масштабируются, имеют небольшой размер, поэтому быстро загружаются. Иконочные шрифты поддерживаются практически всеми браузерами. Ознакомиться с одним из них, вы можете здесь: http://fontawesome.io/.

► Чтобы шаблон сайта «не разъезжался» на широких мониторах больше определенной ширины также нужно использовать CSS-правило max-width, применив его к контейнеру.

CSS

	#wrap{
		width:96%;
		margin: 0 auto;
		max-width: 1280px;
	    min-height: 100%;
	}