В презентации есть ответ на вопрос: «Почему я должен тратить больше сил и делать сайты адаптивными?»

1. http://serenity.su
АДАПТИВНЫЙ
ДИЗАЙН

2. http://serenity.su
Немного о себе:
Сооснователь и технический директор SERENITY
Организатор конференции по маркетингу Digitale
Автор блога о технологиях Web Energy
Автор курсов на HTML Academy
github.com/meritt

3. http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки

4. http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки
Если какие-то функции не работали, делали деградацию (Graceful Degradation)

5. http://serenity.su
ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ
Определяли версии браузеров для поддержки
Если какие-то функции не работали, делали деградацию (Graceful Degradation)
Особо умные, делали прогрессивное улучшение (Progressive Enhancement)

6. http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше

7. http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше
Размеров экранов становилось всё больше и больше

8. http://serenity.su
ВСЁ ПОШЛО НЕ ТАК
Браузеров становилось всё больше и больше
Размеров экранов становилось всё больше и больше
Чудовищный рост мобильного интернета

9. http://serenity.su
ОЧЕНЬ МНОГО РАЗРЕШЕНИЙ

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

11. http://serenity.su
КОГО ЭТО ВОЛНУЕТ?

12. http://serenity.su
В 2012 пользователи рунета заходили на сайты с более чем 1000 разрешений
20% 10% 6% 4%
1366×768 1920×1080 1440×900 1680×1050
17% 8% 4% 2%
1280×1024 1280×800 1600×900 1024×600
Статистика рунета за ноябрь 2012 http://openstat.ru/counter:meta/trends/report/display/

13. http://serenity.su
В 2012 около 23% всего трафика рунета составляли мобильные устройства
60 миллионов
пользователей рунета
14 миллионов
использовали мобильные устройства
Статистика рунета за ноябрь 2012 http://liveinternet.ru/stat/ru/oses.html?period=month

14. http://serenity.su
РОСТ АУДИТОРИИ РУНЕТА
12%
десктопные устройства
Отчёт TNS о развитии рунета за 2012

15. http://serenity.su
РОСТ АУДИТОРИИ РУНЕТА
12% 38%
десктопные устройства мобильные телефоны
Отчёт TNS о развитии рунета за 2012

16. http://serenity.su
РОСТ АУДИТОРИИ РУНЕТА
12% 38% 297%
десктопные устройства мобильные телефоны планшетные устройства
Отчёт TNS о развитии рунета за 2012

17. http://serenity.su
25%
выходят в интернет с трёх и более устройств
Отчёт TNS о развитии рунета за 2012

18. http://serenity.su
КАК ИСПОЛЬЗОВАТЬ?

19. http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids) Медиавыражения (Media Queries)
Гибкие изображения (Flexible Images)

20. http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids) Медиавыражения (Media Queries)
Гибкие изображения (Flexible Images)

21. http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container {
width: 950px;
}
.sidebar {
float: left;
width: 250px;
}
Фиксированный подход

22. http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container { .container {
width: 950px; max-width: 950px;
} }
.sidebar { .sidebar {
float: left; float: left;
width: 250px; width: 26.31%; /* 250 / 950 */
} }
Фиксированный подход Резиновый подход

23. http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container {
width: 950px;
}
.sidebar {
float: left;
width: 200px;
margin: 0 25px;
}
Фиксированный подход

24. http://serenity.su
РЕЗИНОВАЯ СЕТКА
.container { .container {
width: 950px; max-width: 950px;
} }
.sidebar { .sidebar {
float: left; float: left;
width: 200px; width: 21.05%; /* 200 / 950 */
margin: 0 25px; margin: 0 2.63%; /* 25 / 950 */
} }
Фиксированный подход Резиновый подход

25. http://serenity.su
ГИБКИЕ ШРИФТЫ
h1 {
font-size: 28px;
}
p {
font-size: 14px;
}
Фиксированный подход

26. 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 */
}
Резиновый подход

27. http://serenity.su
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">

28. http://serenity.su
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
width, height

29. http://serenity.su
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
width, height
initial-scale, minimum-scale, maximum-scale

30. http://serenity.su
ВЬЮПОРТ
<meta name="viewport" content="width=device-width">
width, height
initial-scale, minimum-scale, maximum-scale
user-scalable

31. http://serenity.su
W3C SYNTAX
@viewport {
width: device-width;
zoom: 1.0;
}

32. http://serenity.su
W3C SYNTAX
@viewport {
width: device-width;
zoom: 1.0;
}
Coming soon.
http://dev.w3.org/csswg/css-device-adapt/

33. http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids) Медиавыражения (Media Queries)
Гибкие изображения (Flexible Images)

34. http://serenity.su
ГИБКИЕ ИЗОБРАЖЕНИЯ
img {
max-width: 100%;
height: auto;
}

35. http://serenity.su
ГИБКИЕ МЕДИА
video,
embed,
object {
max-width: 100%;
height: auto;
}

36. http://serenity.su
ОСНОВНЫЕ ПРИЁМЫ
Резиновая сетка (Fluid Grids) Медиавыражения (Media Queries)
Гибкие изображения (Flexible Images)

37. http://serenity.su
CSS3 MEDIA QUERIES
дают возможность применять стили в зависимости от параметров устройства

38. http://serenity.su
КОНТРОЛЬНЫЕ ТОЧКИ (BREAKPOINTS)
max-width: 320px
max-width: 480px
max-width: 768px
max-width: 960px
max-width: 1200px
min-width: 1200px

39. http://serenity.su
МЕДИАВЫРАЖЕНИЯ
/* Стили для десктопа */
@media (max-width: 960px) {
/* Стили для планшета в горизонтальном положении */
}
@media (max-width: 768px) {
/* Стили для планшета в вертикальном положении */
}
@media (max-width: 480px) {
/* Стили для телефона */
}

40. http://serenity.su
ПОДДЕРЖКА МЕДИАВЫРАЖЕНИЙ
>=4 >=3.5 >=4 >=9.5 >=9

41. http://serenity.su
ЧТО ЖЕ ДЕЛАТЬ С IE8?
respond.js
github.com/scottjehl/Respond
css3-mediaqueries-js
code.google.com/p/css3-mediaqueries-js
условные комментарии
<!--[if lt IE 9]><![endif]-->

42. http://serenity.su
СМОТРИМ ПРИМЕРЫ

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

44. http://serenity.su
ПРИМЕР №2
simple-cms.ru

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

46. http://serenity.su
СНАЧАЛА МОБИЛЬНЫЕ

47. http://serenity.su
МЕДИАВЫРАЖЕНИЯ
/* Стили для телефона */
@media (min-width: 480px) and (max-width: 768px) {
/* Стили для телефона */
}
@media (min-width: 768px) and (max-width: 1200px) {
/* Стили для планшета */
}
@media (min-width: 1200px) {
/* Стили для десктопа */
}

48. http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже

49. http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего

50. http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок

51. http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок
Объединение и минимизация CSS и JavaScript файлов

52. http://serenity.su
РЕКОМЕНДАЦИИ
Маленькие изображения по-умолчанию, большие подгружаются позже
SVG изображения для адаптивного дизайна подходят лучше всего
Использование кастомных шрифтов для иконок
Объединение и минимизация CSS и JavaScript файлов
Как можно меньше HTTP запросов

53. http://serenity.su
ИНСТРУМЕНТЫ

54. http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.fr
тестирование адаптивной вёрстки
csswizardry.com/fluid-grids
расчёт резиновой сетки
mobify.com/mobifyjs
фреймворк для адаптации сайта под
мобильные устройства

55. http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.fr
тестирование адаптивной вёрстки
csswizardry.com/fluid-grids
расчёт резиновой сетки
mobify.com/mobifyjs
фреймворк для адаптации сайта под
мобильные устройства

56. http://serenity.su
ИНСТРУМЕНТЫ
responsive.victorcoulon.fr
тестирование адаптивной вёрстки
csswizardry.com/fluid-grids
расчёт резиновой сетки
mobify.com/mobifyjs
фреймворк для адаптации сайта под
мобильные устройства

57. http://serenity.su
Спасибо!
Алексей Симоненко
директор по технологиям
http://simonenko.su
alexey@simonenko.su

58. http://serenity.su
КОНТАКТЫ
на http://serenity.su
СЛЕДИТЕ ЗА НАМИ
vk.com/serenity_su twitter.com/serenity_su facebook.com/serenity.su