mobile first & responsive design

Думай и адаптируй!Mobile First & Responsive Design

1

Mobile First

Подход, при котором проектирование начинается с версии для мобильной платформы ...

2

Mobile First

А затем происходит наращивание функционала для большого веба.

3

Mobile First

1. РОСТ = ВОЗМОЖНОСТИ2. ОГРАНИЧЕНИЯ = ФОКУС3. ПОТЕНЦИАЛ = ИННОВАЦИИ

4

Mobile First1. РОСТ = ВОЗМОЖНОСТИ

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

5

Mobile First1. РОСТ = ВОЗМОЖНОСТИ

Около 10% всех пользователей рунета выходит в интернет с помощью смартфонов и планшетов.

6

Mobile First1. РОСТ = ВОЗМОЖНОСТИ

Это более

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

7

Mobile First

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

1. РОСТ = ВОЗМОЖНОСТИ

8

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

9

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

10

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

•Оптимизацию подключаемых файлов

•Использование изображений меньшего «веса»

•Продумывание кода для более быстрой загрузки

Медленная скорость интернета заставляет задуматься о скорости загрузки страницы, что влечет за собой:

11

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

десктопной версии сайта?

12

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

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

Клавиатура

Мышь

Стул и стол

13

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

14

Mobile First2. ОГРАНИЧЕНИЯ = ФОКУС

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

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

Пальцы

Сенсоры

15

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

16

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Портретный и ландшафтный режим

17

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Гироскоп в браузерах на iOS и Android

18

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Мультитач позволяет использовать элементы управления нестандартно для большого веба, но в то же время понятно для мобильных устройств.

19

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

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

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

Двойное нажатиеiOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

Перемещение

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

Смахивание

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

Сведение

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

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

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

Вращение

iOSAndroid OSWeb OSWindows Phone 7OS XWindows 7 и 8RIM 6.0Ubuntu

20

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Нажатие

21

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

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

22

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Перемещение

23

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Смахивание

24

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Сведение

25

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

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

26

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Вращение

27

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

и еще немного ...

28

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

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

Чтение

Размеры пальца?

29

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Использование геолокации для определения местоположения пользователей значительно упростит им жизнь.

30

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Точность Время нахождения Жизнь батареи

GPS 10 метров 2-10 минут (только открытое небо)

5-6 часов (большинство телефонов)

WIFI50 метров (чем больше, тем лучше)

По доступности связи (подключение и ответ)

Нет дополнительного расхода

Несколько станций(треугольник)

100 - 1400 метров (в зависимости от дистанции)

По доступности связи (подключение и ответ)

Не влияет

Одна станция500 - 2000 метров (в зависимости от дистанции)

По доступности связи (подключение и ответ)

Не влияет

IPСтраны: 99%Города: 47%

По доступности связи (подключение и ответ)

Не влияет

Системы геолокаций

31

Mobile First3. ПОТЕНЦИАЛ = ИННОВАЦИИ

Суммарный потенциал мобильных устройств

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

32

Responsive Design

Это техника, при которой создается один сайт для разных разрешений и платформ, который адаптируется не только по размерам, но и меняются сами элементы управления.

33

Responsive Design

Каждый день появляются новые устройства с разными разрешениями.

34

Responsive Design

Так же есть два основных режима - портретный и ландшафтный.

35

Responsive Design

Основные рекомендации по адаптации сайта:

1. «Резиновые» изображения2. Адаптируемый текст3. Изменение элементов4. «Текучие» таблицы5. Отображение и скрытие контента

36

Responsive Design«Резиновые» изображения

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

37

Responsive DesignАдаптируемый текст

Размер текста так же изменяется в зависимости от разрешения. Но еще сама структура текста адаптируется под разрешение.

38

Responsive DesignИзменение элементов

Пример, на котором мы видим сайт открытый в обычном браузере со стандартным разрешением.

39

Responsive DesignИзменение элементов

Если не адаптировать меню под меньший размер.

Если адаптировать меню под меньший размер в зависимости от задач пользователя.

40

Responsive Design«Текучие» таблицы

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

41

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

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

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

42

Responsive Design«Текучие» таблицыScott Jehl предложил немного другой вариант - отображение данных в виде диаграммы.

http://jsbin.com/emexa4

43

Responsive Design«Текучие» таблицыЕще одна из идей - показывать данные на маленьком экране только после запроса (клике на область).

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

44

Responsive DesignОтображение и скрытие контента

В зависимости от приоритетов задач пользователя, и для экономия пространства экрана, можно скрывать малозначимые элементы интерфейса.

45

Responsive DesignНе забывайте про размеры и области взаимодействия!

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

Чтение

Размеры пальца?

46

Responsive DesignНесколько примеров

Полная версия Мобильная версия

47

Responsive DesignНесколько примеров

Полная версия Мобильная версия

48

Responsive DesignНесколько примеров

Полная версия Мобильная версия

49

Responsive DesignНесколько примеров

Полная версия Мобильная версия

50

Инструменты

http://quirktools.com/screenfly/

51

Инструменты

http://responsive.is

52

Инструменты

http://mattkersley.com/responsive/

53

Инструменты

http://csswizardry.com/fluid-grids/

54

Спасибо!

Иво ДимитровCVO at Ingenius Systems

Follow me: @gogola Facebook: fb.me/Dimitrov.Ivo

55