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


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

6


Это более

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

7

Mobile First

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

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

8

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

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

9


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

10


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

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

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

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

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

11


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

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

12


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

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

Клавиатура

Мышь

Стул и стол

13


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

14


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

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

Пальцы

Сенсоры

15

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

16


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

17


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

18


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

19


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

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

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

Перемещение


Смахивание


Сведение


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


Вращение


20


Нажатие

21


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

22


Перемещение

23


Смахивание

24


Сведение

25


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

26


Вращение

27


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

28


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

Чтение

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

29


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

30


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

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

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

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

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

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

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

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


Не влияет

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


Не влияет

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


Не влияет

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

31


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

• Позиция и движения устройством• Гироскоп: движение 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



48



49



50

Инструменты

http://quirktools.com/screenfly/

51




http://responsive.is

52

http://responsive.is/

http://responsive.is/


http://mattkersley.com/responsive/

53




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

54



Спасибо!

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

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

55

mobile first & responsive design

Documents