Download - Адаптивный веб-дизайн
![Page 2: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/2.jpg)
http://serenity.su
Немного о себе: Сооснователь и технический директор SERENITY
Организатор конференции по маркетингу Digitale
Автор блога о технологиях Web Energy
Автор курсов на HTML Academy
github.com/meritt
http://serenity.su
![Page 3: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/3.jpg)
http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки
![Page 4: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/4.jpg)
http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки
Если какие-то функции не работали, делали деградацию (Graceful Degradation)
![Page 5: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/5.jpg)
http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки
Если какие-то функции не работали, делали деградацию (Graceful Degradation)
Особо умные, делали прогрессивное улучшение (Progressive Enhancement)
![Page 6: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/6.jpg)
http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше
![Page 7: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/7.jpg)
http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше
Размеров экранов становилось всё больше и больше
![Page 8: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/8.jpg)
http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше
Размеров экранов становилось всё больше и больше
Чудовищный рост мобильного интернета
![Page 9: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/9.jpg)
http://serenity.su
ОЧЕНЬ МНОГО РАЗРЕШЕНИЙ
![Page 10: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/10.jpg)
http://serenity.su
АДАПТИВНЫЙ ВЕБ-ДИЗАЙНконцепция разработки сайтов, которая позволяет подстраиваться под любые разрешения
![Page 11: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/11.jpg)
http://serenity.su
КОГО ЭТО ВОЛНУЕТ?
![Page 12: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/12.jpg)
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
![Page 13: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/13.jpg)
http://serenity.su
В 2012 около 23% всего трафика рунета составляли мобильные устройства
60 миллионовпользователей рунета
14 миллионовиспользовали мобильные устройства
Статистика рунета за ноябрь 2012 http://liveinternet.ru/stat/ru/oses.html?period=month
![Page 14: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/14.jpg)
http://serenity.su
Отчёт TNS о развитии рунета за 2012
12%десктопные устройства
РОСТ АУДИТОРИИ РУНЕТА
![Page 15: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/15.jpg)
http://serenity.su
Отчёт TNS о развитии рунета за 2012
12%десктопные устройства
38%мобильные телефоны
РОСТ АУДИТОРИИ РУНЕТА
![Page 16: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/16.jpg)
http://serenity.su
Отчёт TNS о развитии рунета за 2012
12%десктопные устройства
38%мобильные телефоны
297%планшетные устройства
РОСТ АУДИТОРИИ РУНЕТА
![Page 17: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/17.jpg)
http://serenity.su
25%выходят в интернет с трёх и более устройств
Отчёт TNS о развитии рунета за 2012
![Page 18: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/18.jpg)
http://serenity.su
КАК ИСПОЛЬЗОВАТЬ?
![Page 19: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/19.jpg)
http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids)
Гибкие изображения (Flexible Images)
Медиавыражения (Media Queries)
![Page 20: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/20.jpg)
http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids)
Гибкие изображения (Flexible Images)
Медиавыражения (Media Queries)
![Page 21: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/21.jpg)
http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container { width: 950px;}
.sidebar { float: left; width: 250px;}
Фиксированный подход
![Page 22: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/22.jpg)
http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container { width: 950px;}
.sidebar { float: left; width: 250px;}
Фиксированный подход
.container { max-width: 950px;}
.sidebar { float: left; width: 26.31%; /* 250 / 950 */}
Резиновый подход
![Page 23: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/23.jpg)
http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container { width: 950px;}
.sidebar { float: left; width: 200px; margin: 0 25px;}
Фиксированный подход
![Page 24: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/24.jpg)
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 */}
Резиновый подход
![Page 25: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/25.jpg)
http://serenity.su
h1 { font-size: 28px;}
p { font-size: 14px;}
Фиксированный подход
ГИБКИЕ ШРИФТЫ
![Page 26: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/26.jpg)
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 */}
Резиновый подход
![Page 27: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/27.jpg)
http://serenity.su
<meta name="viewport" content="width=device-width">
ВЬЮПОРТ
![Page 28: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/28.jpg)
http://serenity.su
width, height
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
![Page 29: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/29.jpg)
http://serenity.su
width, height
initial-scale, minimum-scale, maximum-scale
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
![Page 30: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/30.jpg)
http://serenity.su
width, height
initial-scale, minimum-scale, maximum-scale
user-scalable
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
![Page 31: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/31.jpg)
http://serenity.su
W3C SYNTAX
@viewport { width: device-width; zoom: 1.0;}
![Page 32: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/32.jpg)
http://serenity.su
W3C SYNTAX
@viewport { width: device-width; zoom: 1.0;}
Coming soon.http://dev.w3.org/csswg/css-device-adapt/
![Page 33: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/33.jpg)
http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids)
Гибкие изображения (Flexible Images)
Медиавыражения (Media Queries)
![Page 34: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/34.jpg)
http://serenity.su
ГИБКИЕ ИЗОБРАЖЕНИЯ
img { max-width: 100%; height: auto;}
![Page 35: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/35.jpg)
http://serenity.su
ГИБКИЕ МЕДИА
video,embed,object { max-width: 100%; height: auto;}
![Page 36: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/36.jpg)
http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids)
Гибкие изображения (Flexible Images)
Медиавыражения (Media Queries)
![Page 37: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/37.jpg)
http://serenity.su
CSS3 MEDIA QUERIESдают возможность применять стили в зависимости от параметров устройства
![Page 38: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/38.jpg)
http://serenity.su
КОНТРОЛЬНЫЕ ТОЧКИ (BREAKPOINTS)
max-width: 320px
max-width: 480px
max-width: 768px
max-width: 960px
max-width: 1200px
min-width: 1200px
![Page 39: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/39.jpg)
http://serenity.su
МЕДИАВЫРАЖЕНИЯ
/* Стили для десктопа */
@media (max-width: 960px) { /* Стили для планшета в горизонтальном положении */}
@media (max-width: 768px) { /* Стили для планшета в вертикальном положении */}
@media (max-width: 480px) { /* Стили для телефона */}
![Page 40: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/40.jpg)
http://serenity.su
ПОДДЕРЖКА МЕДИАВЫРАЖЕНИЙ
>=4>=3.5>=4 >=9.5 >=9
![Page 41: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/41.jpg)
http://serenity.su
ЧТО ЖЕ ДЕЛАТЬ С IE8?
respond.jsgithub.com/scottjehl/Respond
css3-mediaqueries-jscode.google.com/p/css3-mediaqueries-js
условные комментарии<!--[if lt IE 9]><![endif]-->
![Page 42: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/42.jpg)
http://serenity.su
СМОТРИМ ПРИМЕРЫ
![Page 43: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/43.jpg)
http://serenity.suПРИМЕР №1
simonenko.su
![Page 44: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/44.jpg)
http://serenity.suПРИМЕР №2
simple-cms.ru
![Page 45: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/45.jpg)
http://serenity.suДРУГИЕ ПРИМЕРЫ
mediaqueri.es
![Page 47: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/47.jpg)
http://serenity.su
МЕДИАВЫРАЖЕНИЯ
/* Стили для телефона */
@media (min-width: 480px) and (max-width: 768px) { /* Стили для телефона */}
@media (min-width: 768px) and (max-width: 1200px) { /* Стили для планшета */}
@media (min-width: 1200px) { /* Стили для десктопа */}
![Page 48: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/48.jpg)
http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
![Page 49: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/49.jpg)
http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
![Page 50: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/50.jpg)
http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок
![Page 51: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/51.jpg)
http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок
Объединение и минимизация CSS и JavaScript файлов
![Page 52: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/52.jpg)
http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок
Объединение и минимизация CSS и JavaScript файлов
Как можно меньше HTTP запросов
![Page 53: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/53.jpg)
http://serenity.su
ИНСТРУМЕНТЫ
![Page 54: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/54.jpg)
http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.frтестирование адаптивной вёрстки
csswizardry.com/fluid-gridsрасчёт резиновой сетки
mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства
![Page 55: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/55.jpg)
http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.frтестирование адаптивной вёрстки
csswizardry.com/fluid-gridsрасчёт резиновой сетки
mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства
![Page 56: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/56.jpg)
http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.frтестирование адаптивной вёрстки
csswizardry.com/fluid-gridsрасчёт резиновой сетки
mobify.com/mobifyjsфреймворк для адаптации сайта под мобильные устройства
![Page 57: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/57.jpg)
http://serenity.suhttp://serenity.su
Спасибо!Алексей Симоненкодиректор по технологиям
http://simonenko.su
![Page 58: Адаптивный веб-дизайн](https://reader034.vdocument.in/reader034/viewer/2022052600/557dc336d8b42a8a4e8b4cef/html5/thumbnails/58.jpg)
http://serenity.su
КОНТАКТЫна http://serenity.su
СЛЕДИТЕ ЗА НАМИ
vk.com/serenity_su twitter.com/serenity_su facebook.com/serenity.su