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

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

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

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

5. Mobile First
1. РОСТ = ВОЗМОЖНОСТИ
Скорость развития
мобильного веба
опережает
десктопный в 8 раз.
5

6. Mobile First
1. РОСТ = ВОЗМОЖНОСТИ
Около 10% всех
пользователей
рунета выходит в
интернет с
помощью
смартфонов и
планшетов.
6

7. Mobile First
1. РОСТ = ВОЗМОЖНОСТИ
Это более
8 млн. пользователей
7

8. Mobile First
Зачем упускать такое
количество пользователей?
1. РОСТ = ВОЗМОЖНОСТИ
8

9. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
Размер экрана
Скорость интернета
Доступные возможности
9

10. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
Размер экрана позволяет сосредоточиться на главном и
использовать дефицитное место с умом.
10

11. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
•Использование меньшего кол-ва изображений
•Оптимизацию подключаемых файлов
•Использование изображений меньшего «веса»
•Продумывание кода для более быстрой загрузки
Медленная скорость интернета
заставляет задуматься о скорости
загрузки страницы, что влечет за
собой:
11

12. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
Какие возможности доступны
пользователю при использовании
десктопной версии сайта?
12

13. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
Большой экран
Быстрый интернет
Клавиатура
Мышь
Стул и стол
13

14. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
А какие возможности доступны
пользователям мобильного интернет?
14

15. Mobile First
2. ОГРАНИЧЕНИЯ = ФОКУС
Маленький экран
Медленный интернет
Пальцы
Сенсоры
15

16. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
16

17. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Портретный и
ландшафтный режим
17

18. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Гироскоп в браузерах
на iOS и Android
18

19. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Мультитач позволяет использовать элементы управления
нестандартно для большого веба, но в то же время понятно
для мобильных устройств.
19

20. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Мультитач действия Платформы
Нажатие
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Двойное нажатие
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Перемещение
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Смахивание
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Сведение
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Разворачивание
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
Вращение
iOS
Android OS
Web OS
Windows Phone 7
OS X
Windows 7 и 8
RIM 6.0
Ubuntu
20

21. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Нажатие
21

22. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Двойное нажатие
22

23. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Перемещение
23

24. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Смахивание
24

25. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Сведение
25

26. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Разворачивание
26

27. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Вращение
27

28. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
и еще немного ...
28

29. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Взаимодействие
Чтение
Размеры пальца?
29

30. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Использование геолокации для определения местоположения
пользователей значительно упростит им жизнь.
30

31. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Точность Время нахождения Жизнь батареи
GPS 10 метров
2-10 минут (только
открытое небо)
5-6 часов (большинство
телефонов)
WIFI
50 метров (чем больше,
тем лучше)
По доступности связи
(подключение и ответ)
Нет дополнительного
расхода
Несколько станций
(треугольник)
100 - 1400 метров (в
зависимости от
дистанции)
По доступности связи
(подключение и ответ)
Не влияет
Одна станция
500 - 2000 метров (в
зависимости от
дистанции)
По доступности связи
(подключение и ответ)
Не влияет
IP
Страны: 99%
Города: 47%
По доступности связи
(подключение и ответ)
Не влияет
Системы геолокаций
31

32. Mobile First
3. ПОТЕНЦИАЛ = ИННОВАЦИИ
Суммарный потенциал мобильных устройств
• Позиция и движения устройством
• Гироскоп: движение 360 градусов
• Определение геолокации
• Мультитач сенсоры
• Ориентация: электронный компас
• Видео и изображения: съемка и сохранение с телефона
• Две камеры: спереди и сзади
• Подключение к другим устройствам по bluetooth
• NFC: Чтение карт
32

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

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

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

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

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

38. Responsive Design
Адаптируемый текст
Размер текста так
же изменяется в
зависимости от
разрешения. Но
еще сама структура
текста
адаптируется под
разрешение.
38

39. Responsive Design
Изменение элементов
Пример, на котором
мы видим сайт
открытый в обычном
браузере со
стандартным
разрешением.
39

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

41. Responsive Design
«Текучие» таблицы
Без адаптации таблицы выглядят
так или так
41

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

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

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

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

46. Responsive Design
Не забывайте про размеры и области взаимодействия!
Взаимодействие
Чтение
Размеры пальца?
46

47. Responsive Design
Несколько примеров
Полная версия Мобильная версия
47

48. Responsive Design
Несколько примеров
Полная версия Мобильная версия
48

49. Responsive Design
Несколько примеров
Полная версия Мобильная версия
49

50. Responsive Design
Несколько примеров
Полная версия Мобильная версия
50

51. Инструменты
http://quirktools.com/screenfly/
51

52. Инструменты
http://responsive.is
52

53. Инструменты
http://mattkersley.com/responsive/
53

54. Инструменты
http://csswizardry.com/fluid-grids/
54

55. Спасибо!
Иво Димитров
CVO at Ingenius Systems
Follow me: @gogola
Facebook: fb.me/Dimitrov.Ivo
55