Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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

Alexey Simonenko

December 07, 2012
Tweet

More Decks by Alexey Simonenko

Other Decks in Programming

Transcript

  1. http://serenity.su Немного о себе: Сооснователь и технический директор SERENITY Организатор

    конференции по маркетингу Digitale Автор блога о технологиях Web Energy Автор курсов на HTML Academy github.com/meritt http://serenity.su
  2. http://serenity.su ОБЫЧНЫЙ ПРОЦЕСС ВЁРСТКИ Определяли версии браузеров для поддержки Если

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

    какие-то функции не работали, делали деградацию (Graceful Degradation) Особо умные, делали прогрессивное улучшение (Progressive Enhancement)
  4. http://serenity.su ВСЁ ПОШЛО НЕ ТАК Браузеров становилось всё больше и

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

    больше Размеров экранов становилось всё больше и больше Чудовищный рост мобильного интернета
  6. 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
  7. http://serenity.su В 2012 около 23% всего трафика рунета составляли мобильные

    устройства 60 миллионов пользователей рунета 14 миллионов использовали мобильные устройства Статистика рунета за ноябрь 2012 http://liveinternet.ru/stat/ru/oses.html?period=month
  8. http://serenity.su Отчёт TNS о развитии рунета за 2012 12% десктопные

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

    устройства 38% мобильные телефоны 297% планшетные устройства РОСТ АУДИТОРИИ РУНЕТА
  10. http://serenity.su РЕЗИНОВАЯ СЕТКА .container { width: 950px; } .sidebar {

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

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

    float: left; width: 200px; margin: 0 25px; } Фиксированный подход
  13. 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 */ } Резиновый подход
  14. http://serenity.su h1 { font-size: 28px; } p { font-size: 14px;

    } Фиксированный подход ГИБКИЕ ШРИФТЫ
  15. 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 */ } Резиновый подход
  16. http://serenity.su W3C SYNTAX @viewport { width: device-width; zoom: 1.0; }

    Coming soon. http://dev.w3.org/csswg/css-device-adapt/
  17. http://serenity.su МЕДИАВЫРАЖЕНИЯ /* Стили для десктопа */ @media (max-width: 960px)

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

    and (max-width: 768px) { /* Стили для телефона */ } @media (min-width: 768px) and (max-width: 1200px) { /* Стили для планшета */ } @media (min-width: 1200px) { /* Стили для десктопа */ }
  19. http://serenity.su РЕКОМЕНДАЦИИ Маленькие изображения по-умолчанию, большие подгружаются позже SVG изображения

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

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

    для адаптивного дизайна подходят лучше всего Использование кастомных шрифтов для иконок Объединение и минимизация CSS и JavaScript файлов Как можно меньше HTTP запросов