SlideShare a Scribd company logo
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ
ВАРЛАМОВ АЛЕКСЕЙ / VOXWEB.RU
2АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
ОСНОВНАЯ ИДЕЯ АДАПТИВНОСТИ
Корректное и удобное отображение
страниц сайтов на различных экранах
и устройствах.
3
КОНТЕКСТ И КОНТЕНТ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
Контекст
Транспорт/метро/автомобили
TV и приставки
Ожидание в очереди
Контактные данные
Схема проезда
Быстрый заказ
Контент
4
ПРЕДПОСЫЛКИ СОЗДАНИЯ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
15-20%
Мобильный трафик
5
ПРИНЦИПЫ И ОСОБЕННОСТИ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
Breakpoints
6
ПРИНЦИПЫ И ОСОБЕННОСТИ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
Резиновая вёрстка и адаптированные изображения
7
ПРИНЦИПЫ И ОСОБЕННОСТИ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
Медиазапросы и специальные js-библиотеки
IE
Нативные решения
8
МОБИЛЬНЫЙ ИЛИ АДАПТИВНЫЙ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
Адаптивный сайт
+ Гарантированная работа сайта на любых устройствах и экранах
+ Возможность выкладывать изменения на сайт быстрее
- Относительная сложность реализации
Мобильный сайт
+ Технологичесвкая простота
+ Облегчённая версия сайта
- Дополнительный домен
- Поддержка 2-х сайтов
- Не поддерживает многообразие устройств
9
ПРИМЕРЫ САЙТОВ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
10
ПРИМЕРЫ САЙТОВ
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU
КНИГА
10
Responsive Web Design
by Ethan Marcotte
АДАПТИВНЫЙ ДИЗАЙН САЙТОВ / VOXWEB.RU 11
СПАСИБО ЗА ВНИМАНИЕ!
Варламов Алексей
voxweb.ru / @voxweb_ru / varlamov@voxweb.ru
+7 (8452) 393-323

More Related Content

Viewers also liked

Региональный SMM — что делать самому, а что отдать агентству
Региональный SMM — что делать самому, а что отдать агентствуРегиональный SMM — что делать самому, а что отдать агентству
Региональный SMM — что делать самому, а что отдать агентству
Wake_up_province
 
Комплексный маркетинг по Agile Scrum (гибкое планирование)
Комплексный маркетинг по Agile Scrum (гибкое планирование)Комплексный маркетинг по Agile Scrum (гибкое планирование)
Комплексный маркетинг по Agile Scrum (гибкое планирование)
Wake_up_province
 
Развитие ведущего районного интернет-СМИ с нуля или тролли
Развитие ведущего районного интернет-СМИ с нуля или троллиРазвитие ведущего районного интернет-СМИ с нуля или тролли
Развитие ведущего районного интернет-СМИ с нуля или тролли
Wake_up_province
 
Как SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
Как SMM может решать бизнес-задачи в Саратове? Алексей ТретьяковКак SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
Как SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
Wake_up_province
 
Unit 3 media sectors job roles grid
Unit 3 media sectors job roles gridUnit 3 media sectors job roles grid
Unit 3 media sectors job roles grid
daryll1234
 
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон ТребунскийХорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
Wake_up_province
 
Next Level — Сергей Прокофьев
Next Level — Сергей ПрокофьевNext Level — Сергей Прокофьев
Next Level — Сергей Прокофьев
Wake_up_province
 
Увлеченные делом или как мы строили процессы. Александр Кунташов
Увлеченные делом или как мы строили процессы. Александр КунташовУвлеченные делом или как мы строили процессы. Александр Кунташов
Увлеченные делом или как мы строили процессы. Александр Кунташов
Wake_up_province
 
Unit 3 media sectors
Unit 3 media sectorsUnit 3 media sectors
Unit 3 media sectors
daryll1234
 
Кризис на руку или звездный час для региональной студии
Кризис на руку или звездный час для региональной студииКризис на руку или звездный час для региональной студии
Кризис на руку или звездный час для региональной студии
Wake_up_province
 
Adobe muse — лекарство от html, Александр Бакин
Adobe muse — лекарство от html, Александр БакинAdobe muse — лекарство от html, Александр Бакин
Adobe muse — лекарство от html, Александр Бакин
Wake_up_province
 
Удаленный дизайнер убьет вашу студию или…
Удаленный дизайнер убьет вашу студию или…Удаленный дизайнер убьет вашу студию или…
Удаленный дизайнер убьет вашу студию или…
Wake_up_province
 
Инфографика в сети — что, зачем и почему, Ярослав Кирсанов
Инфографика в сети — что, зачем и почему, Ярослав КирсановИнфографика в сети — что, зачем и почему, Ярослав Кирсанов
Инфографика в сети — что, зачем и почему, Ярослав Кирсанов
Wake_up_province
 

Viewers also liked (13)

Региональный SMM — что делать самому, а что отдать агентству
Региональный SMM — что делать самому, а что отдать агентствуРегиональный SMM — что делать самому, а что отдать агентству
Региональный SMM — что делать самому, а что отдать агентству
 
Комплексный маркетинг по Agile Scrum (гибкое планирование)
Комплексный маркетинг по Agile Scrum (гибкое планирование)Комплексный маркетинг по Agile Scrum (гибкое планирование)
Комплексный маркетинг по Agile Scrum (гибкое планирование)
 
Развитие ведущего районного интернет-СМИ с нуля или тролли
Развитие ведущего районного интернет-СМИ с нуля или троллиРазвитие ведущего районного интернет-СМИ с нуля или тролли
Развитие ведущего районного интернет-СМИ с нуля или тролли
 
Как SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
Как SMM может решать бизнес-задачи в Саратове? Алексей ТретьяковКак SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
Как SMM может решать бизнес-задачи в Саратове? Алексей Третьяков
 
Unit 3 media sectors job roles grid
Unit 3 media sectors job roles gridUnit 3 media sectors job roles grid
Unit 3 media sectors job roles grid
 
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон ТребунскийХорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
Хорошо забытое старое — о нюансах SEO в условиях кризиса, Антон Требунский
 
Next Level — Сергей Прокофьев
Next Level — Сергей ПрокофьевNext Level — Сергей Прокофьев
Next Level — Сергей Прокофьев
 
Увлеченные делом или как мы строили процессы. Александр Кунташов
Увлеченные делом или как мы строили процессы. Александр КунташовУвлеченные делом или как мы строили процессы. Александр Кунташов
Увлеченные делом или как мы строили процессы. Александр Кунташов
 
Unit 3 media sectors
Unit 3 media sectorsUnit 3 media sectors
Unit 3 media sectors
 
Кризис на руку или звездный час для региональной студии
Кризис на руку или звездный час для региональной студииКризис на руку или звездный час для региональной студии
Кризис на руку или звездный час для региональной студии
 
Adobe muse — лекарство от html, Александр Бакин
Adobe muse — лекарство от html, Александр БакинAdobe muse — лекарство от html, Александр Бакин
Adobe muse — лекарство от html, Александр Бакин
 
Удаленный дизайнер убьет вашу студию или…
Удаленный дизайнер убьет вашу студию или…Удаленный дизайнер убьет вашу студию или…
Удаленный дизайнер убьет вашу студию или…
 
Инфографика в сети — что, зачем и почему, Ярослав Кирсанов
Инфографика в сети — что, зачем и почему, Ярослав КирсановИнфографика в сети — что, зачем и почему, Ярослав Кирсанов
Инфографика в сети — что, зачем и почему, Ярослав Кирсанов
 

More from Wake_up_province

6 фишек рекламы Вконтакте для ваших проектов
6 фишек рекламы Вконтакте для ваших проектов6 фишек рекламы Вконтакте для ваших проектов
6 фишек рекламы Вконтакте для ваших проектов
Wake_up_province
 
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержке
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержкеБыть успешной региональной студией. Хорошо зарабатываем на технической поддержке
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержке
Wake_up_province
 
Агентство. От фэйла к фэйлу
Агентство. От фэйла к фэйлуАгентство. От фэйла к фэйлу
Агентство. От фэйла к фэйлу
Wake_up_province
 
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
Wake_up_province
 
Правда о ваших будущих клиентах
Правда о ваших будущих клиентахПравда о ваших будущих клиентах
Правда о ваших будущих клиентах
Wake_up_province
 
Как мы применяли свой системный подход для разработки проектов не на словах, ...
Как мы применяли свой системный подход для разработки проектов не на словах, ...Как мы применяли свой системный подход для разработки проектов не на словах, ...
Как мы применяли свой системный подход для разработки проектов не на словах, ...
Wake_up_province
 
Как сделать так, чтобы основатель Trello написал вам
Как сделать так, чтобы основатель Trello написал вамКак сделать так, чтобы основатель Trello написал вам
Как сделать так, чтобы основатель Trello написал вам
Wake_up_province
 
Повышаем эффективность первой встречи при личных продажах. Андрей Григорьев
Повышаем эффективность первой встречи при личных продажах. Андрей ГригорьевПовышаем эффективность первой встречи при личных продажах. Андрей Григорьев
Повышаем эффективность первой встречи при личных продажах. Андрей Григорьев
Wake_up_province
 
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
Wake_up_province
 
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
Wake_up_province
 
Яндекс.Директ в 2015 году. Роман Байкаев
Яндекс.Директ в 2015 году. Роман БайкаевЯндекс.Директ в 2015 году. Роман Байкаев
Яндекс.Директ в 2015 году. Роман Байкаев
Wake_up_province
 
Как я построил свой интернет. Евгений Крылов.
Как я построил свой интернет. Евгений Крылов.Как я построил свой интернет. Евгений Крылов.
Как я построил свой интернет. Евгений Крылов.
Wake_up_province
 
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
Wake_up_province
 
Второе пришествие WAP игр. Антон Гришин
Второе пришествие WAP игр. Антон ГришинВторое пришествие WAP игр. Антон Гришин
Второе пришествие WAP игр. Антон Гришин
Wake_up_province
 
Ну ты же дизайнер! Дмитрий «koozoo» Кизенков
Ну ты же дизайнер! Дмитрий «koozoo» КизенковНу ты же дизайнер! Дмитрий «koozoo» Кизенков
Ну ты же дизайнер! Дмитрий «koozoo» Кизенков
Wake_up_province
 
Правила игры, Сергей Соловьёв
Правила игры, Сергей СоловьёвПравила игры, Сергей Соловьёв
Правила игры, Сергей Соловьёв
Wake_up_province
 

More from Wake_up_province (16)

6 фишек рекламы Вконтакте для ваших проектов
6 фишек рекламы Вконтакте для ваших проектов6 фишек рекламы Вконтакте для ваших проектов
6 фишек рекламы Вконтакте для ваших проектов
 
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержке
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержкеБыть успешной региональной студией. Хорошо зарабатываем на технической поддержке
Быть успешной региональной студией. Хорошо зарабатываем на технической поддержке
 
Агентство. От фэйла к фэйлу
Агентство. От фэйла к фэйлуАгентство. От фэйла к фэйлу
Агентство. От фэйла к фэйлу
 
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
История развития платформы «Битрикс» с 2003 года глазами участника. Предприни...
 
Правда о ваших будущих клиентах
Правда о ваших будущих клиентахПравда о ваших будущих клиентах
Правда о ваших будущих клиентах
 
Как мы применяли свой системный подход для разработки проектов не на словах, ...
Как мы применяли свой системный подход для разработки проектов не на словах, ...Как мы применяли свой системный подход для разработки проектов не на словах, ...
Как мы применяли свой системный подход для разработки проектов не на словах, ...
 
Как сделать так, чтобы основатель Trello написал вам
Как сделать так, чтобы основатель Trello написал вамКак сделать так, чтобы основатель Trello написал вам
Как сделать так, чтобы основатель Trello написал вам
 
Повышаем эффективность первой встречи при личных продажах. Андрей Григорьев
Повышаем эффективность первой встречи при личных продажах. Андрей ГригорьевПовышаем эффективность первой встречи при личных продажах. Андрей Григорьев
Повышаем эффективность первой встречи при личных продажах. Андрей Григорьев
 
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
Проблемы, которые будут подстерегать вас при выходе на федеральный рынок. Чем...
 
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
User Experience или наш опыт разработки интерфейсов мобильных приложений. Диа...
 
Яндекс.Директ в 2015 году. Роман Байкаев
Яндекс.Директ в 2015 году. Роман БайкаевЯндекс.Директ в 2015 году. Роман Байкаев
Яндекс.Директ в 2015 году. Роман Байкаев
 
Как я построил свой интернет. Евгений Крылов.
Как я построил свой интернет. Евгений Крылов.Как я построил свой интернет. Евгений Крылов.
Как я построил свой интернет. Евгений Крылов.
 
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
Сусуватари в проектах или полезная бюрократия при работе с клиентами. Марина ...
 
Второе пришествие WAP игр. Антон Гришин
Второе пришествие WAP игр. Антон ГришинВторое пришествие WAP игр. Антон Гришин
Второе пришествие WAP игр. Антон Гришин
 
Ну ты же дизайнер! Дмитрий «koozoo» Кизенков
Ну ты же дизайнер! Дмитрий «koozoo» КизенковНу ты же дизайнер! Дмитрий «koozoo» Кизенков
Ну ты же дизайнер! Дмитрий «koozoo» Кизенков
 
Правила игры, Сергей Соловьёв
Правила игры, Сергей СоловьёвПравила игры, Сергей Соловьёв
Правила игры, Сергей Соловьёв
 

Адаптивный дизайн и вот это всё