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

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

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

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

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

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

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

больше Размеров экранов становилось всё больше и больше

больше Размеров экранов становилось всё больше и больше Чудовищный рост мобильного интернета

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

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

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

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

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

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

устройства 38% мобильные телефоны РОСТ АУДИТОРИИ РУНЕТА

устройства 38% мобильные телефоны 297% планшетные устройства РОСТ АУДИТОРИИ РУНЕТА

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

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

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

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

float: left; width: 250px; } Фиксированный подход .container { max-width: 950px; } .sidebar { float: left; width: 26.31%; /* 250 / 950 */ } Резиновый подход

float: left; width: 200px; margin: 0 25px; } Фиксированный подход

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

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; /* 28px / 16px */ } p { font-size: 0.875em; /* 14px / 16px */ } Резиновый подход

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

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

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

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

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 soon. http://dev.w3.org/csswg/css-device-adapt/

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

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

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

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

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

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

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

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) { /* Стили для телефона */ } @media (min-width: 768px) and (max-width: 1200px) { /* Стили для планшета */ } @media (min-width: 1200px) { /* Стили для десктопа */ }

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

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

для адаптивного дизайна подходят лучше всего Использование кастомных шрифтов для иконок

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

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

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

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

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

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

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

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

More Decks by Alexey Simonenko

Other Decks in Programming

Featured

Transcript