Adaptive Design

Думай и адаптируй! Adaptive 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

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

Перемещение

Смахивание

Сведение

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

Вращение


Не стоит забывать о …

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

Чтение

Раз

мер

ы п

альц

а?


Остальные интересные возможности мобильного интернета

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

на телефон

Что такое

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

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

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

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

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


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


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


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

http://bradfrost.github.com/this-is-responsive/patterns.html







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








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








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








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








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








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









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







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


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

http://css-tricks.com/examples/ResponsiveTables/responsive.php

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





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

http://jsbin.com/emexa4

http://jsbin.com/emexa4


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

http://jsbin.com/apane6/14/

http://jsbin.com/apane6/14/


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

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

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


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


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


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


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

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



Спасибо

Ivo Dimitrov Twitter: @gogola Mail: [email protected]

Education

Adaptive Design