Авторы презентации: Антон Кротов, Юрий Панасюк

1. Адаптивная верстка
Интерактивное агентство Nimax
2012

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

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

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

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

10. 1. Контент
2. Контекст
3. Дизайн
и проектирование

11. ? Как данный тип контента
поддерживает общие цели сайта?
? Зачем это надо пользователю?
? Что мы хотим, чтобы пользователь
сделал с этим?

12. ? Как элемент содействует целям
относящегося к нему контента?
? Какой смысл теряется, если этот
элемент убрать?
? Как связан элемент с другими
элементами на странице?

13. 1. Контент
2. Контекст
3. Дизайн
и проектирование

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

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

16. Количественный контекст
? Размер экрана ? Скорость обработки
? Соединение ? Способ ввода
? Возможности устройства

17. Качественный контекст
? Цели пользователя
? Окружение пользователя
? Внимание пользователя
? Продвинутость пользователя

18. 1. Контент
2. Контекст
3. Дизайн
и проектирование

19. 320 px 480 px 640 px 768 px 900 px 1400 px

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

22. Раскладки
www.lukew.com/ff/entry.asp?1514
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

23. www.mediaqueri.es

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

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

26. 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

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

29. all print
embossed projection
speech screen
braille tty
handheld tv

32. 1 Верстаем самый большой макет
2 Вносим коррективы для других версий

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

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

36. Оптимизация

37. Заключение