http://serenity.su

АДАПТИВНЫЙ ДИЗАЙН

http://serenity.su

Немного о себе: Сооснователь и технический директор SERENITY

Организатор конференции по маркетингу Digitale

Автор блога о технологиях Web Energy

Автор курсов на HTML Academy

github.com/meritt

http://serenity.su

http://serenity.su

ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ

Определяли версии браузеров для поддержки

http://serenity.su

ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ

Определяли версии браузеров для поддержки

Если какие-то функции не работали, делали деградацию (Graceful Degradation)

http://serenity.su

ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ

Определяли версии браузеров для поддержки

Если какие-то функции не работали, делали деградацию (Graceful Degradation)

Особо умные, делали прогрессивное улучшение (Progressive Enhancement)

http://serenity.su

ВСЁ ПОШЛО НЕ ТАК

Браузеров становилось всё больше и больше

http://serenity.su

ВСЁ ПОШЛО НЕ ТАК

Браузеров становилось всё больше и больше

Размеров экранов становилось всё больше и больше

http://serenity.su

ВСЁ ПОШЛО НЕ ТАК

Браузеров становилось всё больше и больше

Размеров экранов становилось всё больше и больше

Чудовищный рост мобильного интернета

http://serenity.su

ОЧЕНЬ МНОГО РАЗРЕШЕНИЙ

http://serenity.su

АДАПТИВНЫЙ ВЕБ-ДИЗАЙНконцепция разработки сайтов, которая позволяет подстраиваться под любые разрешения

http://serenity.su

КОГО ЭТО ВОЛНУЕТ?

http://serenity.su

В 2012 пользователи рунета заходили на сайты с более чем 1000 разрешений

Статистика рунета за ноябрь 2012 http://openstat.ru/counter :meta/trends/report/display/

20%1366×768

17%1280×1024

10%1920×1080

8%1280×800

6%1440×900

4%1600×900

4%1680×1050

2%1024×600

http://serenity.su

В 2012 около 23% всего трафика рунета составляли мобильные устройства

60 миллионовпользователей рунета

14 миллионовиспользовали мобильные устройства

Статистика рунета за ноябрь 2012 http://liveinternet.ru/stat/ru/oses.html?period=month

http://serenity.su

Отчёт TNS о развитии рунета за 2012

12%десктопные устройства

РОСТ АУДИТОРИИ РУНЕТА

http://serenity.su

Отчёт TNS о развитии рунета за 2012

12%десктопные устройства

38%мобильные телефоны

РОСТ АУДИТОРИИ РУНЕТА

http://serenity.su

Отчёт TNS о развитии рунета за 2012

12%десктопные устройства

38%мобильные телефоны

297%планшетные устройства

РОСТ АУДИТОРИИ РУНЕТА

http://serenity.su

25%выходят в интернет с трёх и более устройств

Отчёт TNS о развитии рунета за 2012

http://serenity.su

КАК ИСПОЛЬЗОВАТЬ?

http://serenity.su

ОСНОВНЫЕ ПРИЁМЫ

Резиновая сетка (Fluid Grids)

Гибкие изображения (Flexible Images)

Медиавыражения (Media Queries)

http://serenity.su

ОСНОВНЫЕ ПРИЁМЫ

Резиновая сетка (Fluid Grids)

Гибкие изображения (Flexible Images)

Медиавыражения (Media Queries)

http://serenity.su

РЕЗИНОВАЯ СЕТКА

.container { width: 950px;}

.sidebar { float: left; width: 250px;}

Фиксированный подход

http://serenity.su

РЕЗИНОВАЯ СЕТКА

.container { width: 950px;}

.sidebar { float: left; width: 250px;}

Фиксированный подход

.container { max-width: 950px;}

.sidebar { float: left; width: 26.31%; /* 250 / 950 */}

Резиновый подход

http://serenity.su

РЕЗИНОВАЯ СЕТКА

.container { width: 950px;}

.sidebar { float: left; width: 200px; margin: 0 25px;}

Фиксированный подход

http://serenity.su

РЕЗИНОВАЯ СЕТКА

.container { width: 950px;}

.sidebar { float: left; width: 200px; margin: 0 25px;}

Фиксированный подход

.container { max-width: 950px;}

.sidebar { float: left; width: 21.05%; /* 200 / 950 */ margin: 0 2.63%; /* 25 / 950 */}

Резиновый подход

http://serenity.su

h1 { font-size: 28px;}

p { font-size: 14px;}

Фиксированный подход

ГИБКИЕ ШРИФТЫ

http://serenity.su

ГИБКИЕ ШРИФТЫbody { font-size: 100%; /* ~ 16px */ line-height: 1.6;}

h1 { font-size: 1.75em; /* 28px / 16px */}

p { font-size: 0.875em; /* 14px / 16px */}

Резиновый подход

http://serenity.su

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

ВЬЮПОРТ

http://serenity.su

width, height

ВЬЮПОРТ

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

http://serenity.su

width, height

initial-scale, minimum-scale, maximum-scale

ВЬЮПОРТ

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

http://serenity.su

width, height

initial-scale, minimum-scale, maximum-scale

user-scalable

ВЬЮПОРТ

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

http://serenity.su

W3C SYNTAX

@viewport { width: device-width; zoom: 1.0;}

http://serenity.su

W3C SYNTAX

@viewport { width: device-width; zoom: 1.0;}

Coming soon.http://dev.w3.org/csswg/css-device-adapt/

http://serenity.su

ОСНОВНЫЕ ПРИЁМЫ

Резиновая сетка (Fluid Grids)

Гибкие изображения (Flexible Images)

Медиавыражения (Media Queries)

http://serenity.su

ГИБКИЕ ИЗОБРАЖЕНИЯ

img { max-width: 100%; height: auto;}

http://serenity.su

ГИБКИЕ МЕДИА

video,embed,object { max-width: 100%; height: auto;}

http://serenity.su

ОСНОВНЫЕ ПРИЁМЫ

Резиновая сетка (Fluid Grids)

Гибкие изображения (Flexible Images)

Медиавыражения (Media Queries)

http://serenity.su

CSS3 MEDIA QUERIESдают возможность применять стили в зависимости от параметров устройства

http://serenity.su

КОНТРОЛЬНЫЕ ТОЧКИ (BREAKPOINTS)

max-width: 320px

max-width: 480px

max-width: 768px

max-width: 960px

max-width: 1200px

min-width: 1200px

http://serenity.su

МЕДИАВЫРАЖЕНИЯ

/* Стили для десктопа */

@media (max-width: 960px) { /* Стили для планшета в горизонтальном положении */}

@media (max-width: 768px) { /* Стили для планшета в вертикальном положении */}

@media (max-width: 480px) { /* Стили для телефона */}

http://serenity.su

ПОДДЕРЖКА МЕДИАВЫРАЖЕНИЙ

>=4>=3.5>=4 >=9.5 >=9

http://serenity.su

ЧТО ЖЕ ДЕЛАТЬ С IE8?

respond.jsgithub.com/scottjehl/Respond

css3-mediaqueries-jscode.google.com/p/css3-mediaqueries-js

условные комментарии<!--[if lt IE 9]><![endif]-->

http://serenity.su

СМОТРИМ ПРИМЕРЫ

http://serenity.suПРИМЕР №1

simonenko.su

http://serenity.suПРИМЕР №2

simple-cms.ru

http://serenity.suДРУГИЕ ПРИМЕРЫ

mediaqueri.es

http://serenity.su

СНАЧАЛА МОБИЛЬНЫЕ

http://serenity.su

МЕДИАВЫРАЖЕНИЯ

/* Стили для телефона */

@media (min-width: 480px) and (max-width: 768px) { /* Стили для телефона */}

@media (min-width: 768px) and (max-width: 1200px) { /* Стили для планшета */}

@media (min-width: 1200px) { /* Стили для десктопа */}

http://serenity.su

РЕКОМЕНДАЦИИ

Маленькие изображения по-умолчанию, большие подгружаются позже

http://serenity.su

РЕКОМЕНДАЦИИ

Маленькие изображения по-умолчанию, большие подгружаются позже

SVG изображения для адаптивного дизайна подходят лучше всего

http://serenity.su

РЕКОМЕНДАЦИИ

Маленькие изображения по-умолчанию, большие подгружаются позже

SVG изображения для адаптивного дизайна подходят лучше всего

Использование кастомных шрифтов для иконок

http://serenity.su

РЕКОМЕНДАЦИИ

Маленькие изображения по-умолчанию, большие подгружаются позже

SVG изображения для адаптивного дизайна подходят лучше всего

Использование кастомных шрифтов для иконок

Объединение и минимизация CSS и JavaScript файлов

http://serenity.su

РЕКОМЕНДАЦИИ

Маленькие изображения по-умолчанию, большие подгружаются позже

SVG изображения для адаптивного дизайна подходят лучше всего

Использование кастомных шрифтов для иконок

Объединение и минимизация CSS и JavaScript файлов

Как можно меньше HTTP запросов

http://serenity.su

ИНСТРУМЕНТЫ

http://serenity.su

ИНСТРУМЕНТЫ

responsive.victorcoulon.frтестирование адаптивной вёрстки

csswizardry.com/fluid-gridsрасчёт резиновой сетки

mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства

http://serenity.su

ИНСТРУМЕНТЫ

responsive.victorcoulon.frтестирование адаптивной вёрстки

csswizardry.com/fluid-gridsрасчёт резиновой сетки

mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства

http://serenity.su

ИНСТРУМЕНТЫ

responsive.victorcoulon.frтестирование адаптивной вёрстки

csswizardry.com/fluid-gridsрасчёт резиновой сетки

mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства

http://serenity.suhttp://serenity.su

Спасибо!Алексей Симоненкодиректор по технологиям

http://simonenko.su

alexey@simonenko.su

http://serenity.su

КОНТАКТЫна http://serenity.su

СЛЕДИТЕ ЗА НАМИ

vk.com/serenity_su twitter.com/serenity_su facebook.com/serenity.su