Responsive design

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

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

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

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

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

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

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

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

Progressive enhancement
Responsive design
Flash will survive
Native support for plug-in features
Appification takes hold
Web app fragmentation
Mobile gets bigger
A device explosion
Respect beyond aesthetics
Social battles heat up
Growth of the two-screen model
Distributed model
Stronger customer service
Better value, not lower prices
Pushing the boundaries

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

all print

embossed projection

speech screen

braille tty

handheld tv

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

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

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

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

Responsive design

Related slideshows

More Related Content

Responsive design