48

Преимущества адаптивного веб-дизайна

  • Upload
    agima

  • View
    705

  • Download
    0

Embed Size (px)

DESCRIPTION

Максим Степанов Возможности использования адаптивного веб-дизайна. Разработка, исследование новых технологий и внедрение в бизнес-процессы. Подробнее http://agima.ru/news/227/

Citation preview

Page 1: Преимущества адаптивного веб-дизайна
Page 2: Преимущества адаптивного веб-дизайна

Степанов Максим, AGIMAВедущий разработчик и исследователь в области применения новейших веб-технологий для бизнеса

Page 3: Преимущества адаптивного веб-дизайна

/Мобильные устройства/

Page 4: Преимущества адаптивного веб-дизайна
Page 5: Преимущества адаптивного веб-дизайна

WTF?

Page 6: Преимущества адаптивного веб-дизайна
Page 7: Преимущества адаптивного веб-дизайна
Page 8: Преимущества адаптивного веб-дизайна

Методология

Page 9: Преимущества адаптивного веб-дизайна

1. Break-Points / Переломные точки.

2. Резиновость – истинный адаптивный сайт.

3. Комбинированные решения.

Принципы построения адаптивного сайта

Page 10: Преимущества адаптивного веб-дизайна
Page 11: Преимущества адаптивного веб-дизайна
Page 12: Преимущества адаптивного веб-дизайна
Page 13: Преимущества адаптивного веб-дизайна
Page 14: Преимущества адаптивного веб-дизайна

5 сайтов = 5 месяцев

1 адаптивный сайт = 3,5 месяца

Вплоть до:

1 адаптивный сайт = 1,5 месяца

Трудозатраты

Page 15: Преимущества адаптивного веб-дизайна

1. Bootstrap2. Responsive Grid System3. Skeleton4. И еще несколько десятков…

Frameworks

Page 16: Преимущества адаптивного веб-дизайна

Media Queries

Page 17: Преимущества адаптивного веб-дизайна

Media queries (HTML)

Page 18: Преимущества адаптивного веб-дизайна

Media queries (CSS)

Page 19: Преимущества адаптивного веб-дизайна

Печатная версия

media=screen media=print

Page 20: Преимущества адаптивного веб-дизайна
Page 21: Преимущества адаптивного веб-дизайна

Альтернативные решения

Page 22: Преимущества адаптивного веб-дизайна

ВозможностиХарактеристики Описание

Типы устройств экран, проектор, принтер, речевой синтезатор, телевизор, экран брайля, телетайп.

Размеры ширина/высота экрана

Соотношение сторон 3:4, 16:9, 16:10…

Цветность цветной, оттенки серого, ч/б, индексированные цвета

Развертка и тип экрана прогрессивная/чересстрочная, матричные экраны

Ориентация экрана портретная/альбомная

Разрешение экрана кол-во пикселей на дюйм/см.

Page 23: Преимущества адаптивного веб-дизайна

Типы устройств

all, screen, print, projection, tv, handheld, braille, aural, speech, unknown, tty, embossed.

Page 24: Преимущества адаптивного веб-дизайна

Размеры и соотношение сторон

width, height, min-width, min-height, max-width, max-height, device-width, device-height, aspect-ratio, device-aspect-ratio

Page 25: Преимущества адаптивного веб-дизайна

Цветность

color, color-index, monochrome

Page 26: Преимущества адаптивного веб-дизайна

Развертка и тип экрана

progressive, interlace, grid

Page 27: Преимущества адаптивного веб-дизайна

Ориентация экрана

landscape, portail

Page 28: Преимущества адаптивного веб-дизайна

Разрешение экрана

resolution

Page 29: Преимущества адаптивного веб-дизайна

Операторы

NOT - not screen and (orientation: portrait)

AND - screen and (min-width: 400px)

Page 30: Преимущества адаптивного веб-дизайна

Совместимость (desktop)

Браузер Версия

Internet Explorer 9.0

Mozilla Firefox 3.5

Google Chrome 4.0

Apple Safari 4.0

Opera 9.5

Page 31: Преимущества адаптивного веб-дизайна

Совместимость (mobile)

Браузер Версия

iOS Safari 3.2

Opera Mini 5.0

Opera Mobile 10.0

Android Browser 3.0

Nokia Browser S60*

Page 32: Преимущества адаптивного веб-дизайна

Совместимость

Page 33: Преимущества адаптивного веб-дизайна

Отношения

Page 34: Преимущества адаптивного веб-дизайна

Дизайн vs Верстка

Page 35: Преимущества адаптивного веб-дизайна

Нет проблем

Page 36: Преимущества адаптивного веб-дизайна

ЦРТ-Сервис

www.crt-service.ru

Page 37: Преимущества адаптивного веб-дизайна

Райффайзенбанк «Скидки для вас»

www.skidki.raiffeisen.ru

Page 38: Преимущества адаптивного веб-дизайна

Доктор

www.doctor-kolbasa.ru

Page 39: Преимущества адаптивного веб-дизайна

Степанов Максим, AGIMAВедущий разработчик и исследовательв области применения новейших веб-технологийдля бизнеса

Page 40: Преимущества адаптивного веб-дизайна
Page 41: Преимущества адаптивного веб-дизайна

Старые браузеры не поддерживают Media Queries

Page 42: Преимущества адаптивного веб-дизайна

Мифы о возможных проблемах

Page 43: Преимущества адаптивного веб-дизайна

Чем сайт лучшемобильного приложения?

Page 44: Преимущества адаптивного веб-дизайна

Чем сайт лучше мобильного приложения?

Page 45: Преимущества адаптивного веб-дизайна
Page 46: Преимущества адаптивного веб-дизайна
Page 47: Преимущества адаптивного веб-дизайна

Как это решается с помощью Media Queries?

Page 48: Преимущества адаптивного веб-дизайна

Как это решалось раньше?