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

• Каждый месяц — 22% населения (14.1 млн.ч.)
• Каждую неделю — 17% населения (10.3 млн.ч.)
• Каждый день — 7% населения (4.4 млн.ч.)

• Смартфон с touch screen — 54%
• Смартфон с большим экраном — 20%
• Телефон с большим экраном — 22%
• Телефон с небольшим экраном — 16%

• На работе/учебе — 92%
• В общественном месте — 91%
• Дома — 85%
• В транспорте — 81%
• По дороге на ходу — 74%
• В машине — 61%

• Социальные сети — 69%
• Поиск — 67%
• Мессенджеры — 65%
• Погода — 55%
• Новости — 52%

• Карты и пробки — 35% / 49%
• Видео — 54% / 26%
• Погода — 55% / 29%
• Соц.сети — 64% / 22%
• Новости — 78% / 11%
• Поиск товаров и услуг — 81% / 7%

http://events.yandex.ru/talks/92/

1. Резиновые сетки (Fluid Grids)
2. Гибкие изображения (Flexible Images)
3. Медиавыражения (Media Queries)

1. Резиновые сетки (Fluid Grids)
2. Гибкие изображения (Flexible Images)
3. Медиавыражения (Media Queries)

target / context = result

			#wrapper {
			  width:100%;
			  max-width:980px;
			  margin:0 auto;
			  }
		

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

			#sidebar {
			  float:right;
			  width:22.449%;    /* 220px / 980px = 0.22449 */
			  }
		

			<meta name="viewport" content="width=device-width">
		

1. Резиновые сетки (Fluid Grids)
2. Гибкие изображения (Flexible Images)
3. Медиавыражения (Media Queries)

			.flexible-image {
			  max-width:100%;
			  }
			 
		

1. Резиновые сетки (Fluid Grids)
2. Гибкие изображения (Flexible Images)
3. Медиавыражения (Media Queries)

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

• max-width: 320px
• max-width: 480px
• max-width: 768px
• max-width: 980px
• max-width: 1200px
• min-width: 1200px

			@media screen and (max-width:480px) {
			  .image {
			    display:none;
			    }
			  }
		

• http://www.lancs.ac.uk
• http://3200tigres.wwf.fr
• http://www.bostonglobe.com
• http://www.madebysplendid.com
• http://naomiatkinson.com

http://mediaqueri.es

• По умолчанию (компьютер)
• max-width: 980px (планшет в ландшафтной ориентации)
• max-width: 768px (планшет в портретной ориентации)
• max-width: 480px (смартфон)

Нажатия (tap, tap&hold)

Однопальцевые жесты (swipe, drag)

Двухпальцевые жесты (swipe, spread, pinch, rotate)

1. Смысл документа, логическая разметка (HTML)
2. Внешний вид (CSS)
3. Безупречный внешний вид (CSS3)
4. Взаимодействие, интерактивность, удобство (JavaScript)

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

• Matt Kersley Responsive Tester — http://mattkersley.com/responsive/
• ProtoFluid — http://protofluid.com/#?protoFluid=ready
• Responsive.is — http://responsive.is/
• Responsivepx — http://responsivepx.com/
• Screenfly — http://quirktools.com/screenfly/
• Screenqueri.es — http://screenqueri.es/
• The Responsinator — http://www.responsinator.com/

• http://responsive.victorcoulon.fr/
• http://lab.maltewassermann.com/viewport-resizer/
• http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

Анна Селезнёва, CreativePeople

ask@cpeople.ru