Документ описывает процесс создания продукта для мобильного веба, включая этапы разработки от постановки требований до запуска и тестирования. Основное внимание уделяется необходимым адаптациям для работы на мобильных устройствах, включая дизайн и ограничения браузеров. Также подчеркивается важность статистики и обратной связи после запуска продукта.

1. Особенности создания продукта для
мобильного веба

2. Динамика трафика по проектам
О докладчике
Имя: Александр Лысков
Должность: менеджер
продуктов
Специализация:мобильный
веб
Опыт в отрасли: с 2005 года
В Mail.ru с 2011 года

3. Мобильный веб: что,
для чего, для кого?
• Мобильный веб – это привычная нам всем
«Глобальная сеть» (World Wide Web), но
адаптированная для просмотра на
мобильных устройствах.
• Мобильные устройства – это персональные
устройства с доступом в интернет, которые
«не привязаны к розетке». Такими
устройствами являются: мобильные
телефоны, смартфоны, планшетные
компьютеры, навигаторы, MP3-
проигрыватели и пр.

4. История развития

5. История развития

6. Создание продукта.
Основные этапы
1. Постановка требований к продукту («хотелки
руководства», исследования)
2. Оценка ресурсов и первоначальное
планирование
3. Прототипирование и дизайн
4. Server-side разработка
5. Client-side разработка
6. Тестирование
7. Запуск
8. Статистика и аналитика
9. Развитие

7. Постановка
требований к продукту
Задача – создание нового интерфейса
Почты для современных смартфонов с
touch-экранами. Интерфейс должен быть
красивым, функциональным,
современным и удобным.

8. Исходные данные и
ресурсы
• Существующий
сервис Почты для
«большого» веба
• Разработчики
серверной части
• Разработчики
клиентской части
• Системные администраторы
• Отдел UI и UX
• Отдел тестирования и поддержки

9. Конкретизация
требований
• Конкурентный анализ
• Исследование
• Уточнение требований (описание функционала для
альфа-версии, с указанием функционала будущих
версий)
• Совместное обсуждение будущего продукта со
всеми задействованными участниками проекта
• Повторное уточнение требований
• Утверждение итоговых требований у руководства
• И снова уточнение требований.

10. Оценка ресурсов и
планирование
Умножайте сроки на два!

11. Особенность №1
Отсутствие специалистов,
понимающих потребности
мобильных пользователей
и специфику мобильного
веба.

12. Прототипирование
и дизайн
Ключевые особенности:
• Маленький экран
• Управление пальцами
• Ограниченная поддержка современных
веб-технологий мобильными браузерами
• Постоянно обновляющийся и
изменяющиеся платформы, они все
молоды и постоянно вводят новшества
• Эти же критерии подходят и к дизайнерам,
только им ещё надо понимать, что дизайн
должен быть «лёгким»

13. Прототипирование
и дизайн
При создании дизайна, лучше всего
ориентироваться на разрешение
экрана от 320 пикселей по ширине.

14. Server-side
разработка
На данном этапе ключевая
особенность – адаптация
имеющихся API для нужд
мобильного веба

15. Client-side
разработка
Что использовать?

16. Client-side
разработка
Если у вас не промо-сайт, а
сложный сервис с
функциональным интерфейсом,
то не бойтесь вводить
ограничения для различных
мобильных ОС и браузеров.

17. Client-side
разработка
DOM (Document Object Model -
объектная модель, используемая
для XML/HTML-документов) на
мобильных устройствах
работает очень медленно.
Поэтому,
ОПИТИМИЗАЦИЯ – НАШЕ ВСЁ!

18. Экранная клавиатура также
являются особенностью, т.к. её
вызов (например, при нажатии в
текстовое поле) приводит к
нежелательным сдвигам
Client-side
разработка

19. Client-side
разработка
Touch-event – не вариант.
Используйте событие «tap»!
Подробности тут:

20. Client-side
разработка
Не все мобильные устройства
могут загружать файлы в web

21. Тестирование
Мобильных устройств СЛИШКОМ
много. Надо определить тот
«набор», который будет покрывать
основную массу пользователей

22. Запуск
продукта
• При запуске нового продукта
ВСЕГДА на видном месте
должна быть ссылка на
обратную связь.
• На стадии тестирования «в
бою» у пользователей должна
быть возможность
отказаться от использования
«новой версии»

23. Запуск
продукта

24. Статистика и
аналитика
Надо логировать и
обсчитывать каждый клик
и каждый показ!

25. Мониторинг
продукта
• При запуске нового продукта
ВСЕГДА на видном месте
должна быть ссылка на
обратную связь.
• На стадии тестирования «в
бою» у пользователей должна
быть возможность
отказаться от использования
«новой версии»

26. Заключение
Особенности о которых надо помнить:
• «зоопарк» устройств
• сильно отличающиеся мобильные ОС
• различные и «ущербные» браузеры
• пока ещё недостаточное количество специалистов
разной направленности, но с опытом в мобильном
вебе
• для многих это единственная точка выхода в Сеть
• низкая производительность
• маленькие экраны и управление пальцами
• чаще всего низкоскоростной канал доступа и
постоянными обрывами связи

27. Александр Лысков
менеджер продуктов, БЮ «Почта & портал»
a.lyskov@corp.mail.ru
www.mail.ru
СПАСИБО!