27 октября 2014

Адаптивная верстка

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

Размеры блоков

Для корректного отображения на экране мобильного телефона, необходимо прописать cледующий мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 

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

.block{
	max-width:100%;
	width: 600px;
}

 

Общая структура

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

Структура

<div id="list">
	<div id="head">
		<div class="list"></div>
	</div>	
	<div id="main_body">
		<div class="list"></div>
	</div>
	<div id="footer">
		<div class="list"></div>
	</div>
</div>

 

Стили

#list{
	max-width:96%;
	overflow:hidden;
	margin: 0 auto;
}
.list{
	margin: 0 auto;
	width:900px;
	max-width:100%;
}

 

здесь родительский блок #list предотвращает возможность появления горизонтального скроллинга, а блоки с классом list являются обрамлением для наполнения.

От большого к малому

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

@media screen and (max-width: 900px){
	/* styles */
}

 

Стили прописанные в данном блоке будут применены, только если экран устройства меньше 900px. Последовательно дописывая необходимые стили, можно добиться желаемого отображения на любом разрешении\размере экрана.

Все должно быть прекрасно...

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

Здесь особенно важно использование html5 типов полей (input) - email, number, tel, url, date и т.д. - это значительно упрощает заполнение полей на смартфонах с небольшим экраном.

Все больше появляется устройств с retina-экранами(вернее сказать, экранами с повышенной плотностью пикселей), это стоит также учитывать. (см. статью) На устройстве с сенсорным вводом некоторыми элементами удобнее управлять не так, как на компьютере мышкой - например, карусель удобнее листать пальцем, а не щелкать на стрелдочки. Так что, если у вас на сайте имеется карусель, следует предусмотреть такой режим управления или можете воспользоваться готовым и весьма удачным решением адаптивной карусели с тач управлением - owlcarusel

Демо

У вас нет прав для комментирования