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

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

Transcript

1. http://serenity.su АДАПТИВНЫЙ ДИЗАЙН
2. http://serenity.su Немного о себе: Сооснователь и технический директор SERENITY Организатор конференции по маркетингу Digitale Автор блога о технологиях Web Energy Автор курсов на HTML Academy github.com/meritt http://serenity.su
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 разрешений Статистика рунета за ноябрь 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
13. http://serenity.su В 2012 около 23% всего трафика рунета составляли мобильные устройства 60 миллионов пользователей рунета 14 миллионов использовали мобильные устройства Статистика рунета за ноябрь 2012 http://liveinternet.ru/stat/ru/oses.html?period=month
14. http://serenity.su Отчёт TNS о развитии рунета за 2012 12% десктопные устройства РОСТ АУДИТОРИИ РУНЕТА
15. http://serenity.su Отчёт TNS о развитии рунета за 2012 12% десктопные устройства 38% мобильные телефоны РОСТ АУДИТОРИИ РУНЕТА
16. http://serenity.su Отчёт TNS о развитии рунета за 2012 12% десктопные устройства 38% мобильные телефоны 297% планшетные устройства РОСТ АУДИТОРИИ РУНЕТА
17. http://serenity.su 25% выходят в интернет с трёх и более устройств Отчёт TNS о развитии рунета за 2012
18. http://serenity.su КАК ИСПОЛЬЗОВАТЬ?
19. http://serenity.su ОСНОВНЫЕ ПРИЁМЫ Резиновая сетка (Fluid Grids) Гибкие изображения (Flexible Images) Медиавыражения (Media Queries)
20. http://serenity.su ОСНОВНЫЕ ПРИЁМЫ Резиновая сетка (Fluid Grids) Гибкие изображения (Flexible Images) Медиавыражения (Media Queries)
21. http://serenity.su РЕЗИНОВАЯ СЕТКА .container { width: 950px; } .sidebar { float: left; width: 250px; } Фиксированный подход
22. http://serenity.su РЕЗИНОВАЯ СЕТКА .container { width: 950px; } .sidebar { float: left; width: 250px; } Фиксированный подход .container { max-width: 950px; } .sidebar { float: left; 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 { 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 */ } Резиновый подход
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 width, height ВЬЮПОРТ <meta name="viewport" content="width=device-width">
29. http://serenity.su width, height initial-scale, minimum-scale, maximum-scale ВЬЮПОРТ <meta name="viewport" content="width=device-width">
30. http://serenity.su width, height initial-scale, minimum-scale, maximum-scale user-scalable ВЬЮПОРТ <meta name="viewport" content="width=device-width">
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) Гибкие изображения (Flexible Images) Медиавыражения (Media Queries)
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) Гибкие изображения (Flexible Images) Медиавыражения (Media Queries)
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://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