Документ посвящен важности адаптивного дизайна в условиях стремительного роста мобильного интернета, который значительно опережает десктопный. Автор обсуждает ограничение и возможности мобильных устройств, предлагая рекомендации по адаптации контента для различных экранов. Особое внимание уделяется оптимизации изображений, текстов и навигации для улучшения пользовательского опыта на мобильных платформах.

1. Думай и адаптируй!
Adaptive Design
Dimitrov Ivo
CVO at Ingenius Systems

2. Быстрый рост
На сегодняшний день скорость развития
мобильного веба опережает десктопный в 8 раз

3. Быстрый рост
Это значит, что 16%
пользователей Рунета
Выходит в сеть с
помощью мобильный
устройств.

4. Быстрый рост
Это более
14 млн. пользователей!

5. Быстрый рост
Зачем упускать такое
количество пользователей?

6. Быстрый рост
Посмотрите на разницу
Март, 2012 Октябрь, 2012

7. Возможности
Какие возможности доступны при
использовании десктопного интернета?

8. Возможности
Большой экран
Быстрый интернет
Клавиатура
и Мышь
Удобное место для
работы/отдыха

9. Возможности
А какие возможности доступны
пользователям мобильного интернета?

10. Возможности
Маленький экран
Медленный интернет
Пальцы
Сенсоры

11. Ограничения?
• Размер экрана
• Скорость интернета
• Доступные возможности

12. Ограничения = Фокус
Размер экрана позволяет сосредоточиться на
главном и использовать дефицитное место с умом.

13. Ограничения = Фокус
Медленная скорость интернета
заставляет задуматься о скорости
загрузки вашего проекта …

14. Ограничения = Фокус
…, что влечет за собой:
1. Использование меньшего кол-ва
изображений
2. Оптимизация подключаемых файлов
3. Использование изображений меньшего
«веса»
4. Продумывание кода для более быстрой
загрузки проекта

15. Ограничения = Фокус
Возможности при проектировании «маленьких разрешений»
Мультитач действия Платформы
Нажатие
iOS
Двойное нажатие Android OS
Перемещение Web OS
Windows Phone 7 и 8
Смахивание
OS X
Сведение Windows 7 и 8
Разворачивание RIM >6.0
Ubuntu
Вращение

16. Ограничения = Фокус
Не стоит забывать о …
Размеры пальца?
Взаимодействие
Чтение

17. Ограничения = Фокус
Остальные интересные возможности мобильного интернета
• Позиционирование и движение устройства
• Гироскоп
• Определение местоположения пользователя
• Мультитач сенсоры
• Видео и изображения: съемка и быстрое сохранение
на телефон

18. Что такое
Адаптивный дизайн – это техника, при которой создается один
сайт для разных разрешений экрана, а так же адаптация
элементов взаимодействия пользователя с продуктом.

19. Режимы отображения
Два основных режима использования устройств –
Портретный и Ландшафтный.

20. Рекомендации по адаптации
• «Резиновые» изображения
• Адаптивный текст
• Адаптивная навигация
• Адаптивные таблицы
• Отображение и скрытие контента

21. Рекомендации по адаптации
В зависимости от размера экрана подгружать соответствующего размера
изображения, что бы экономить драгоценный трафик

22. Рекомендации по адаптации
Оптимизация размера
шрифта в зависимости от
размера экрана, а так же
изменение его
расположения.

23. Рекомендации по адаптации
Путь адаптации навигации – оставить как есть?
http://bradfrost.github.com/this-is-responsive/patterns.html

24. Рекомендации по адаптации
Путь адаптации навигации – выпадающий список?
http://bradfrost.github.com/this-is-responsive/patterns.html

25. Рекомендации по адаптации
Путь адаптации навигации – показать списком?
http://bradfrost.github.com/this-is-responsive/patterns.html

26. Рекомендации по адаптации
Путь адаптации навигации – раскрывающий список?
http://bradfrost.github.com/this-is-responsive/patterns.html

27. Рекомендации по адаптации
Путь адаптации навигации – перенос списка в подвал?
http://bradfrost.github.com/this-is-responsive/patterns.html

28. Рекомендации по адаптации
Путь адаптации навигации – меню слева?
http://bradfrost.github.com/this-is-responsive/patterns.html

29. Рекомендации по адаптации
Путь адаптации навигации – выделение приоритетов?
http://bradfrost.github.com/this-is-responsive/patterns.html

30. Рекомендации по адаптации
Выпадающие списки с вложенными элементами Скрытие вложенных элементов
http://bradfrost.github.com/this-is-responsive/patterns.html

31. Рекомендации по адаптации
Без адаптации таблицы выглядят так

32. Рекомендации по адаптации
Garrett Dimon предложил несколько вариантов отображения
таблицы в зависимости от поставленной задачи.
http://css-tricks.com/examples/ResponsiveTables/responsive.php
Разворот таблицы и представление в
виде списка. Если вам требуется
редактирование таблицы, то это один
из лучших способов.

33. Рекомендации по адаптации
Scott Jehl предложил немного другой вариант - отображение
данных в виде диаграммы.
http://jsbin.com/emexa4

34. Рекомендации по адаптации
Еще одна из идей - показывать данные на маленьком экране
только после запроса (клике на область).
http://jsbin.com/apane6/14/

35. Рекомендации по адаптации
Скрытие элементов в
зависимости от размера
экрана

36. Паттерны адаптации
Главный блок остается
всегда сверху,
второстепенные блоки
уходят под главный блок.

37. Паттерны адаптации
Второстепенные блоки
опускаются под главный
блок в зависимости от
приоритетности.

38. Паттерны адаптации
Сокращение левого блока
и перенос его наверх на
главным блоком. Чаще
используется, когда в нем
расположена навигация.

39. Паттерны адаптации
Скрытие блоков за
пределы видимости
(экрана).

40. Паттерны адаптации
Примеры скрытия блоков

41. Пара примеров

42. Пара примеров

43. Пара примеров

44. Спасибо
Ivo Dimitrov
Twitter: @gogola
Mail: id@igsystems.ru