Запуск: апрель 2014 года

О клиенте и проекте

My.com – это первый почтовый сервис, разработанный исключительно для мобильных устройств, проект интернет-компании Mail.Ru Group. В 2013 году он был запущен на рынке США, а с 2014 года сервисы и приложения My.com стали доступны по всему миру.

MyMail – это мобильное приложение для работы со всеми почтовыми ящиками пользователя, доступное для устройств Apple iOS (iPad и iPhone), а также для смартфонов и планшетов на платформе Android.

Задача

В условиях очень ограниченного времени создать анимированный промо-сайт на основе макетов клиента, который бы раскрывал особенности новых проектов интернет-компании Mail.Ru Group. 

В работе было необходимо сконцентрироваться на трех основных моментах:

1. Уделить особое внимание красивой, плавной и сложной анимации, что должно подчеркнуть уникальный и современный характер новых проектов;
2. Добиться правильного отображения сайта на мобильных устройствах, быстрой и корректной его работы, учитывая направленность представляемого сервиса на использование в смартафонах и планшетах;
3. Помочь с локализацией версий сайта на 8 языках (кроме русского, еще английский, французский, немецкий, итальянский, испанский, португальский и его бразильская версия), чтобы их особенности не нарушали правильное визуальное восприятие сайта для продвижения проекта на международный рынок.

О процессе

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

Варианты вёрстки страницы при загрузке

Мы сделали 2 варианта вёрстки с разной анимацией для основной загрузочной страницы сайта.

В начале кампании продвижения акцент был сделан на левую сторону сайта, которая посвящена проекту My.com.

В дальнейшем главная страница была поделена на 2 активные части, чтобы пользователь мог выбрать, с каким содержанием он хочет ознакомиться – с My.com или myMail, а также переключиться между двумя частями в любой момент (или вернуться к просматриваемому слайду в предыдущем разделе)

Анимация

Нашей основной задачей было создание плавной сложной анимации для перехода между различными частями сайта.

Каждая страница состоит из двух неравнозначных в каждый момент времени половин. Левая рассказывает про мобильный почтовый сервис, а правая – про приложение для работы со всеми почтовыми ящиками пользователя.

Содержание страницы состоит из слайдов про какую-нибудь особенность или возможность новых сервисов.

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

Вертикальная прокрутка

Прокрутка в мобильном

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

Javascript мы использовали только тогда, когда без него было не обойтись.

Выбранный нами для прокрутки страницы плагин пришлось существенно доработать под особенности анимации сайта.

Работа с языками

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

Адаптация для touch-устройств

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

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

Итог

Заказчик своевременно смог запустить промо-сайт и начать кампанию по продвижению нового проекта.

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

Отзыв клиента

Зинаида Панина, менеджер проекта интернет-компании Mail.Ru Group:

«Джету досталась сложная задача – в очень сжатые сроки заверстать промо сайт с локализацией на 9 стран и адаптацией верстки под небольшие экраны с высоким разрешением. Больше всего впечатлило даже не то, что ребята справились раньше срока, а гипер ответственное отношение к проекту. Казалось бы, работа сделана де-юре и де-факто очень хорошо, но никто не остановился! Команда верстки с нашей стороны и JetStyle продолжали взаимодействовать и придумывать, как же еще можно улучшить сайт и соптимизировать его работу. Ответственность, профессионализм и заинтересованность – это все про ребят из JetStyle».

Перейти на сайт