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

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

WTF?

Методология

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

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

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

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

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

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

Вплоть до:

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

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

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

Frameworks

Media Queries

Media queries (HTML)

Media queries (CSS)

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

media=screen media=print

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

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

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

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

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

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

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

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

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

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

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

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

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

Цветность

color, color-index, monochrome

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

progressive, interlace, grid

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

landscape, portail

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

resolution

Операторы

NOT - not screen and (orientation: portrait)

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

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

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

Internet Explorer 9.0

Mozilla Firefox 3.5

Google Chrome 4.0

Apple Safari 4.0

Opera 9.5

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

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

iOS Safari 3.2

Opera Mini 5.0

Opera Mobile 10.0

Android Browser 3.0

Nokia Browser S60*

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

Отношения

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

Нет проблем

ЦРТ-Сервис

www.crt-service.ru

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

www.skidki.raiffeisen.ru

Доктор

www.doctor-kolbasa.ru

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

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

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

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

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

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

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