adaptive design wud2012

Думай  и  адаптируй!  Adap1ve  Design  

Dimitrov  Ivo  CVO  at  Ingenius  Systems  

Быстрый  рост  

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

Быстрый  рост  

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

Быстрый  рост  

Это  более  

14  млн.  пользователей!  

Быстрый  рост  

Зачем  упускать  такое  количество  пользователей?  

Быстрый  рост  Посмотрите  на  разницу  

Март,  2012   Октябрь,  2012  

Возможности  

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

Возможности  

Большой  экран  

Быстрый  интернет  

Клавиатура  

и  Мышь  

Удобное  место  для  работы/отдыха  

Возможности  

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

Возможности  

Маленький  экран  

Медленный  интернет  

Пальцы  

Сенсоры  

Ограничения?  

• Размер  экрана  • Скорость  интернета  • Доступные  возможности  

Ограничения  =  Фокус  

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

Ограничения  =  Фокус  

Медленная  скорость  интернета  заставляет  задуматься  о  скорости  загрузки  вашего  проекта  …  

Ограничения  =  Фокус  

1.  Использование  меньшего  кол-­‐ва  изображений  

2.  Оптимизация  подключаемых  файлов  3.  Использование  изображений  меньшего  

«веса»  4.  Продумывание  кода  для  более  быстрой  

загрузки  проекта  

…,  что  влечет  за  собой:  

Ограничения  =  Фокус  Возможности  при  проектировании  «маленьких  разрешений»  

Мультитач действия Платформы Нажатие

iOS Android OS Web OS Windows Phone 7 и 8 OS X Windows 7 и 8 RIM >6.0 Ubuntu

Двойное нажатие

Перемещение

Смахивание

Сведение

Разворачивание

Вращение

Ограничения  =  Фокус  Не  стоит  забывать  о  …  

Взаимодействие  

Чтение  

Разм

еры  пальца?  

Ограничения  =  Фокус  Остальные  интересные  возможности  мобильного  интернета  

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

Что  такое  

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

Режимы  отображения  

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

Рекомендации  по  адаптации  

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

Рекомендации  по  адаптации  

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

Рекомендации  по  адаптации  

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

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  оставить  как  есть?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  выпадающий  список?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  показать  списком?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  раскрывающий  список?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  перенос  списка  в  подвал?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  меню  слева?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

Путь  адаптации  навигации  –  выделение  приоритетов?  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Рекомендации  по  адаптации  

h�p://bradfrost.github.com/this-­‐is-­‐responsive/pa�erns.html  

Выпадающие  списки  с  вложенными  элементами   Скрытие  вложенных  элементов  

Рекомендации  по  адаптации  

Без  адаптации  таблицы  выглядят  так  

Рекомендации  по  адаптации  

Garre�  Dimon  предложил  несколько  вариантов  отображения  таблицы  в  зависимости  от  поставленной  задачи.  

h�p://css-­‐tricks.com/examples/ResponsiveTables/responsive.php  

Разворот  таблицы  и  представление  в  виде  списка.  Если  вам  требуется  редактирование  таблицы,  то  это  один  из  лучших  способов.  

Рекомендации  по  адаптации  

Sco�  Jehl  предложил  немного  другой  вариант  -­‐  отображение  данных  в  виде  диаграммы.  

h�p://jsbin.com/emexa4  

Рекомендации  по  адаптации  

Еще  одна  из  идей  -­‐  показывать  данные  на  маленьком  экране  только  после  запроса  (клике  на  область).  

h�p://jsbin.com/apane6/14/  

Рекомендации  по  адаптации  

Скрытие  элементов  в  зависимости  от  размера  экрана  

Паттерны  адаптации  

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

Паттерны  адаптации  

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

Паттерны  адаптации  

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

Паттерны  адаптации  

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

Паттерны  адаптации  

Примеры  скрытия  блоков  

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

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

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

А  теперь  –  займемся  делом!  

У  каждой  команды  должны  быть:  

•  Листы  чистой  бумаги  •  5  варианта  задания  •  Таблица  рекомендаций  по  адаптации  •  Ножницы  •  Карандаши  и  ручки  

Если  чего  либо  нет,  то  подходите  ко  мне  =)  

Делает  крутой  интерфейс  (25  минут)  

Спасибо  

Ivo  Dimitrov  Follow  me:  @gogola  Like  me:  �.me/Dimitrov.Ivo  Mail:  id@igsystems.ru