�ݺ�ߣ

Разработка сайтов с учетом
мобильных платформ
Бойченко Александр

О чем сегодня поговорим?
• Зачем надо думать о мобильных пользователях?
• Какие способы адаптации сайтов для мобильных
существуют и какой из способов лучше выбрать?
• Инструменты облегчающие тестирование и
разработку

Зачем надо думать о
мобильных пользователях?

Динамика использования различных
типов устройств за последние 5 лет

Динамика использования различных
типов устройств с начала 2015 года

Статистика использования различных
платформ на текущий момент
6%
31%
63%
Desktop Mobile Tablet

Какие проблемы сейчас
существуют?
• Отсутствие оптимизации как таковой
• Псевдо-оптимизация (75% мобильных версий
сайтов весят столько-же сколько и десктопная их
версия)
• Низкое качество интернета на мобильных (не
стоит надеяться на 3G)

Проблема качества
интернета

интернета
Edge
Скорость: 240 kbps,  
Ping: 400ms
3G
Скорость: 780 kbps,
Ping: 100ms
ADSL
Скорость: 2 Mbit,
Ping: 5ms
WIFI
Скорость: 40 mbit,
Ping: 1ms

интернета (2 sec)
Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms

Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms
4 секунды

Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms
9 секунд 4 секунды

Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms
37 секунд 9 секунд 4 секунды

Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms

Edge
Ping: 400ms
3G
Ping: 100ms
ADSL
Ping: 5ms
WIFI
Ping: 1ms
120 секунд 37 секунд 9 секунд 4 секунды

Где граница между
классами устройств?

Какие классы устройств
существуют?
• Десктопы, неттопы, моноблоки (PC, iMac, mac mini и прочие )
• Ноутбуки
• Нетбуки
• Трансформеры (ноутбук/нетбук + планшет)
• Планшеты
• Фаблеты (смартфон с большим экраном и мощностью планшета)
• Смартфоны
• Мобильные телефоны
• Прочее (умные часы, умное телевидение, устройства для людей с
ограниченными возможностями)

Предлагаю упростить до
двух классов

• Десктопы
• Мобильные

• Большой экран, быстрый интернет
• Маленький экран, медленный интернет

Десктопы
• Десктопы, неттопы, моноблоки
• Ноутбуки
• Нетбуки
• Трансформеры
• Планшеты
• Фаблеты

Мобильные
• Фаблеты
• Смартфоны
• Мобильные телефоны

Планшеты?
• Относим к десктопам
• Позиционируются как замена неттопов
• Обладают большим экраном и разрешением
• Обладают хорошей мощностью
• Не требуют оптимизации сайта для себя

Способы адаптировать сайт
под различные платформы.
• Ничего не делать
• Responsive (Адаптивный) сайт
• Отдельная версия для мобильных (планшетов)

Ничего не делать
• Если вы уверены в том, что мобильные
пользователи вам не нужны (не ваша целевая
аудитория)
• Хорошо работает для планшетов
• Достаточно резины для min-width: 1024px

Responsive
• Если ограничен бюджет и время
• Если мобильные пользователи нужны для
«галочки»
• Это самый простой и неправильный способ
сделать мобильную версию сайтов

Отдельная версия для
мобильных
• Долго, дорого, хорошо
• Решает проблемы конкретных пользователей с
их специфическими запросами
• Может поддерживаться отдельной командой
• Может развиваться независимо от Десктопной
версии
• Ebay, Facebook, Google, Bing, Amazon, Yandex…

Почему не Responsive?
• Скрывают (а не удаляют контент)
• Часто требуют для себя дополнительной:
разметки, стилей, JS
• Не всегда решают проблему мобильных
пользователей
• Лишают пользователей возможности
переключится на привычную (десктопную)
версию в случаи необходимости

Определение платформы
• Определять возможности (modernizr)
• Определять платформу на клиенте (Platform.js,
jQuery.browser, navigator.userAgent)
• Определять платформу на стороне сервера (ua-
parser)

Определение платформы
на стороне сервера
• мы знаем возможности клиента до того, как
начали отдавать ему контент
• на базе этих знаний можем направить клиента на
нужную ему версию сайта
• на базе этих знаний можем индивидуализировать
выдачу (отдельная версия, картинки, стили,
скрипты) без лишних редиректов

Реальные устройства

Инструменты разработчика

Онлайн сервисы
• http://www.browserstack.com
• https://crossbrowsertesting.com
• http://mobiletest.me
• и еще десятки подобных сервисов

Эмулятор iOS
• iOS simulator for mac

Эмулятор Android
• https://www.genymotion.com/ (mac, win, linux)

Вопросы?
• Александр Бойченко
• @banzalik

�ݺ�ߣ

Разработка сайтов с учетом мобильных платформ

Recommended

More Related Content

Viewers also liked (20)

Similar to Разработка сайтов с учетом мобильных платформ (20)

More from Aleksandr Boichenko (6)

Разработка сайтов с учетом мобильных платформ