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

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

Что? Где? Когда?

Адаптация —

естественный эволюционный процесс

Адаптивныйилиотзывчивый?

Вёрстка? Вёрстка!

Смартфон и фичафон

Мобильный телефон vs компьютер

Телефон для выхода в Интернет

Место пользования и способ доступа

Для чего выходят в мобильный Интернет

Браузер или приложение

Не стоит прогибаться под изменчивый мир?..

Основные принципы адаптивного веб-дизайна

  1. Fluid Grids — подвижные («резиновые») сетки
  2. Flexible Images — гибкие изображения
  3. Media Queries — медиавыражения

Fluid Grids

Пример макета

#main
760px
#sidebar
220px
980px
					#main {
					  float:left;
					  width:760px;
					  }
				
					#wrapper {
					  width:980px;
					  margin:0 auto;
					  }
				
					#sidebar {
					  float:right;
					  width:220px;
					  }

Формула Итана Маркотта

				target / context = result
			
				#main {
				  float:left;
				  width:  77.551%;    /* 760px / 980px = 0.77551 */
				  }

				#sidebar {
				  float:right;
				  width:  22.449%;    /* 220px / 980px = 0.22449 */
				  }
			
				#wrapper {
				  width: 100%;
				  max-width:980px;
				  margin:0 auto;
				  }

Подвижная сетка

77.551%
22.449%

Вьюпорт

				<meta name="viewport" content="width=device-width;
				initial-scale=1.0">

Flexible Images

Картинка фиксированного размера

				.flexible-image {
				  max-width:100%;
				  }
				 
				/* Для Internet Explorer 7 */
				.ie .flexible-image {
				  width:100%;
				  height:auto;
				  }

Гибкая картинка

Media Queries

Пример макета

Бытует масса легенд о том, что среди синеоких тайских кошек-красавиц больше всего ценились при дворцах те, что имели многочисленные крючки и изломы на хвостах. Якобы на них тайские принцессы нанизывали свои кольца, снятые на время купания. Современные кошки Таиланда, как и тайские кошки России, изобилуют укороченными, искривленными или закрученными хвостами. Исторически являясь носителями генов дефектов хвостов, тайские кошки стали прародителями новой российской породы куцехвостых кошек — тайского бобтейла.

				@media screen and (max-width:320px) {
				  #main, #sidebar {
				    float:none;
				    width:100%;
				    }
				  }

Результат использования медиавыражения

Бытует масса легенд о том, что среди синеоких тайских кошек-красавиц больше всего ценились при дворцах те, что имели многочисленные крючки и изломы на хвостах. Якобы на них тайские принцессы нанизывали свои кольца, снятые на время купания. Современные кошки Таиланда, как и тайские кошки России, изобилуют укороченными, искривленными или закрученными хвостами. Исторически являясь носителями генов дефектов хвостов, тайские кошки стали прародителями новой российской породы куцехвостых кошек — тайского бобтейла.

Контрольные точки

  • 320 и менее пикселей
  • 320 - 480 пикселей
  • 480 - 768 пикселей
  • 768 - 980 пикселей
  • 980 - 1200 пикселей
  • 1200 и более пикселей
				@media screen and (max-width:480px) {
				  .image {
				    display:none;
				    }
				  }

Примерная реакция дизайнера

Mobile First

Отсекаем все лишнее

Полезные правила Mobile First

  • использование спрайтов
  • минимизация CSS и JavaScript файлов
  • ограничение использования тяжелых JavaScript библиотек
  • ограничение использования CSS-сеток
  • HTTP-заголовки для сохранения нужных файлов в кэш
  • использование CSS3 для теней и закругленных углов

Спасибо!