Download - Адаптивный веб-дизайн
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
МЕДИАВЫРАЖЕНИЯ
/* Стили для телефона */
@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
http://serenity.su
КОНТАКТЫна http://serenity.su
СЛЕДИТЕ ЗА НАМИ
vk.com/serenity_su twitter.com/serenity_su facebook.com/serenity.su