http://serenity.suАДАПТИВНЫЙ  ДИЗАЙН
http://serenity.suНемного о себе:Сооснователь и технический директор SERENITYОрганизатор конференции по маркетингу Digital...
http://serenity.su       ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИОпределяли версии браузеров для поддержки
http://serenity.su        ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИОпределяли версии браузеров для поддержкиЕсли какие-то функции не работал...
http://serenity.su        ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИОпределяли версии браузеров для поддержкиЕсли какие-то функции не работал...
http://serenity.su                  ВСЁ ПОШЛО НЕ ТАКБраузеров становилось всё больше и больше
http://serenity.su                  ВСЁ ПОШЛО НЕ ТАКБраузеров становилось всё больше и большеРазмеров экранов становилось ...
http://serenity.su                  ВСЁ ПОШЛО НЕ ТАКБраузеров становилось всё больше и большеРазмеров экранов становилось ...
http://serenity.suОЧЕНЬ МНОГО РАЗРЕШЕНИЙ
http://serenity.su           АДАПТИВНЫЙ ВЕБ-ДИЗАЙНконцепция разработки сайтов, которая позволяет подстраиваться под любые ...
http://serenity.suКОГО ЭТО ВОЛНУЕТ?
http://serenity.suВ 2012 пользователи рунета заходили на сайты с более чем 1000 разрешений20%               10%           ...
http://serenity.suВ 2012 около 23% всего трафика рунета составляли мобильные устройства60 миллионовпользователей рунета14 ...
http://serenity.su          РОСТ АУДИТОРИИ РУНЕТА12%десктопные устройства                        Отчёт TNS о развитии руне...
http://serenity.su          РОСТ АУДИТОРИИ РУНЕТА12%                     38%десктопные устройства   мобильные телефоны    ...
http://serenity.su          РОСТ АУДИТОРИИ РУНЕТА12%                     38%                                     297%дескт...
http://serenity.su                    25%выходят в интернет с трёх и более устройств              Отчёт TNS о развитии рун...
http://serenity.suКАК ИСПОЛЬЗОВАТЬ?
http://serenity.su             ОСНОВНЫЕ ПРИЁМЫРезиновая сетка (Fluid Grids)               Медиавыражения (Media Queries)  ...
http://serenity.su             ОСНОВНЫЕ ПРИЁМЫРезиновая сетка (Fluid Grids)               Медиавыражения (Media Queries)  ...
http://serenity.su               РЕЗИНОВАЯ СЕТКА.container {  width: 950px;}.sidebar {  float: left;  width: 250px;}Фиксир...
http://serenity.su               РЕЗИНОВАЯ СЕТКА.container {           .container {  width: 950px;          max-width: 950...
http://serenity.su               РЕЗИНОВАЯ СЕТКА.container {  width: 950px;}.sidebar {  float: left;  width: 200px;  margi...
http://serenity.su               РЕЗИНОВАЯ СЕТКА.container {           .container {  width: 950px;          max-width: 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; /* 28...
http://serenity.su                     ВЬЮПОРТ<meta name="viewport" content="width=device-width">
http://serenity.su                      ВЬЮПОРТ <meta name="viewport" content="width=device-width">width, height
http://serenity.su                      ВЬЮПОРТ <meta name="viewport" content="width=device-width">width, heightinitial-sc...
http://serenity.su                      ВЬЮПОРТ <meta name="viewport" content="width=device-width">width, heightinitial-sc...
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...
http://serenity.su             ОСНОВНЫЕ ПРИЁМЫРезиновая сетка (Fluid Grids)              Медиавыражения (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)               Медиавыражения (Media Queries)  ...
http://serenity.su               CSS3 MEDIA QUERIESдают возможность применять стили в зависимости от параметров устройства
http://serenity.suКОНТРОЛЬНЫЕ ТОЧКИ (BREAKPOINTS)max-width: 320pxmax-width: 480pxmax-width: 768pxmax-width: 960pxmax-width...
http://serenity.su    МЕДИАВЫРАЖЕНИЯ/* Стили для десктопа */@media (max-width: 960px) {  /* Стили для планшета в горизонта...
http://serenity.suПОДДЕРЖКА МЕДИАВЫРАЖЕНИЙ>=4   >=3.5   >=4   >=9.5   >=9
http://serenity.su                   ЧТО ЖЕ ДЕЛАТЬ С IE8?respond.jsgithub.com/scottjehl/Respondcss3-mediaqueries-jscode.go...
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) {  /* Стили д...
http://serenity.su                    РЕКОМЕНДАЦИИМаленькие изображения по-умолчанию, большие подгружаются позже
http://serenity.su                     РЕКОМЕНДАЦИИМаленькие изображения по-умолчанию, большие подгружаются позжеSVG изобр...
http://serenity.su                     РЕКОМЕНДАЦИИМаленькие изображения по-умолчанию, большие подгружаются позжеSVG изобр...
http://serenity.su                     РЕКОМЕНДАЦИИМаленькие изображения по-умолчанию, большие подгружаются позжеSVG изобр...
http://serenity.su                     РЕКОМЕНДАЦИИМаленькие изображения по-умолчанию, большие подгружаются позжеSVG изобр...
http://serenity.suИНСТРУМЕНТЫ
http://serenity.su                             ИНСТРУМЕНТЫresponsive.victorcoulon.frтестирование адаптивной вёрсткиcsswiza...
http://serenity.su                             ИНСТРУМЕНТЫresponsive.victorcoulon.frтестирование адаптивной вёрсткиcsswiza...
http://serenity.su                             ИНСТРУМЕНТЫresponsive.victorcoulon.frтестирование адаптивной вёрсткиcsswiza...
http://serenity.suСпасибо!Алексей Симоненкодиректор по технологиямhttp://simonenko.sualexey@simonenko.su
http://serenity.su                        КОНТАКТЫ                        на http://serenity.su                     СЛЕДИТ...
Upcoming SlideShare
Loading in …5
×

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

4,701 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,701
On SlideShare
0
From Embeds
0
Number of Embeds
3,236
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×