Responsive design

Интерактивное агентство Nimax2012

Адаптивная верстка

Часть первая Теория + Дизайн

Бесконечность

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

Сначала мобильный

1. Контент

2. Контекст

3. Дизайн и проектирование

Как данный тип контента поддерживает общие цели сайта?

Зачем это надо пользователю?

Что мы хотим, чтобы пользователь сделал с этим?

?

?

?

Как элемент содействует целям относящегося к нему контента?

Какой смысл теряется, если этот элемент убрать?

Как связан элемент с другими элементами на странице?

?

?

?

1. Контент

2. Контекст

3. Дизайн и проектирование

СТАРЫЙ КОНТЕКСТ

НОВЫЙ КОНТЕКСТ

Размер экрана

Соединение

Возможности устройства

Скорость обработки

Способ ввода

? ?

? ?

?

Количественный контекст

Качественный контекст

Цели пользователя

Окружение пользователя

Внимание пользователя

Продвинутость пользователя

?

?

?

?

1. Контент

2. Контекст

3. Дизайн и проектирование

320 px 480 px 640 px 768 px 900 px 1400 px

Метод прогрессивного улучшения

Раскладки

www.lukew.com/ff/entry.asp?1514

www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

www.mediaqueri.es

Часть втораяПрактика + Верстка

Адаптивный дизайн

Progressive enhancementResponsive design

Flash will surviveNative support for plug-in features

Appification takes holdWeb app fragmentation

Mobile gets biggerA device explosion

Respect beyond aestheticsSocial battles heat up

Growth of the two-screen modelDistributed model

Stronger customer service

Better value, not lower prices

Pushing the boundaries

Активный VS пассивный подходы

all

embossed

speech

braille

handheld

print

projection

screen

tty

tv

Верстаем самый большой макет

Вносим коррективы для других версий

1

2

Как это внедрять в CMS?

Как это тестировать?

Оптимизация

Заключение