Промо-сайт My.com и myMail для Mail.Ru Group
Запуск: апрель 2014 года
О клиенте и проектеMy.com это первый почтовый сервис, разработанный исключительно для мобильных устройств, проект интернет-компании Mail.Ru Group. В 2013 году он был запущен на рынке США, а с 2014 года сервисы и приложения My.com стали доступны по всему миру. MyMail это мобильное приложение для работы со всеми почтовыми ящиками пользователя, доступное для устройств Apple iOS (iPad и iPhone), а также для смартфонов и планшетов на платформе Android.
Задача
В работе было необходимо сконцентрироваться на трех основных моментах:
О процессеВсего за 10 рабочих дней мы не просто сделали одностраничный промо-сайт, но изобрели множество простых, но остроумных решений, которые позволили добиться результата в условиях цейтнота.
Варианты вёрстки страницы при загрузкеМы сделали 2 варианта вёрстки с разной анимацией для основной загрузочной страницы сайта. В начале кампании продвижения акцент был сделан на левую сторону сайта, которая посвящена проекту My.com.
В дальнейшем главная страница была поделена на 2 активные части, чтобы пользователь мог выбрать, с каким содержанием он хочет ознакомиться с My.com или myMail, а также переключиться между двумя частями в любой момент (или вернуться к просматриваемому слайду в предыдущем разделе)
АнимацияНашей основной задачей было создание плавной сложной анимации для перехода между различными частями сайта. Каждая страница состоит из двух неравнозначных в каждый момент времени половин. Левая рассказывает про мобильный почтовый сервис, а правая про приложение для работы со всеми почтовыми ящиками пользователя.
Содержание страницы состоит из слайдов про какую-нибудь особенность или возможность новых сервисов. Переход между слайдами происходит при помощи прокрутки вверх и вниз по одному за раз, они должны плавно переходить из одного в другой без каких-либо промежуточных состояний. Дополнительно на каждой из страниц есть более мелкие анимированные элементы, которые требовали большой аккуратности и внимания.
Вертикальная прокрутка Прокрутка в мобильном Для анимации переходов между частями мы использовали средства CSS, и это позволило увеличить производительность и обеспечить быструю и плавную смену кадров, особенно при таком большом количестве анимации для мобильных устройств. Javascript мы использовали только тогда, когда без него было не обойтись. Выбранный нами для прокрутки страницы плагин пришлось существенно доработать под особенности анимации сайта.
Работа с языкамиСайт одновременно запустился на большом количестве иностранных языков, что требовало внимательного подхода к верстке. Текст выглядит в каждом из вариантов немного иначе, поэтому было необходимо проверять и настраивать вид для каждого кадра отдельно.
Адаптация для touch-устройствБыло очень важно, чтобы промо-сайт и в мобильных браузерах выглядел так же красиво, как на обычных компьютерах, а анимация не замедляла его работу. Ведь представляемые проекты были ориентированы исключительно на использование в мобильных устройствах. Мы были очень ограничены во времени, делать отдельный сайт для планшетов оказалось невозможно. Поэтому мы адаптировали сайт для просмотра на iPad, оптимизировали прокрутку страницы, сделав ее максимально плавной даже на устройствах более старых версий. Весь контент и изображения уменьшены под размер экрана планшета, чтобы пользователю было проще и удобнее просматривать страницу, а скрипты оптимизированы так, чтобы максимально комфортно перемещаться по сайту на мобильном браузере.
ИтогЗаказчик своевременно смог запустить промо-сайт и начать кампанию по продвижению нового проекта. Эффектный сайт с красивой сложной анимацией, адаптированный для просмотра как в браузере компьютера, так и планшета, а также для каждого из 8 предусмотренных языков соответствовал ожиданиям клиента и позволил успешно решить задачу по привлечению новых пользователей по всему миру.
Отзыв клиентаЗинаида Панина, менеджер проекта интернет-компании Mail.Ru Group: ![]()
«Джету досталась сложная задача в очень сжатые сроки заверстать промо сайт с локализацией на 9 стран и адаптацией верстки под небольшие экраны с высоким разрешением. Больше всего впечатлило даже не то, что ребята справились раньше срока, а гипер ответственное отношение к проекту. Казалось бы, работа сделана де-юре и де-факто очень хорошо, но никто не остановился! Команда верстки с нашей стороны и JetStyle продолжали взаимодействовать и придумывать, как же еще можно улучшить сайт и оптимизировать его работу. Ответственность, профессионализм и заинтересованность это все про ребят из JetStyle.»
Команда проектаМенеджер: Маркин Алексей, Разработчики: Беляев Сергей, Митькин Стас, Шаляпин Илья.
Похожие работы![]() |
Как с нами связаться?![]() Звоните
+7 (343) 384 84 81 ![]() |
|||
Как с нами связаться?
Телефон:
E-mail: info@jetstyle.ru Адрес нашего офиса: ![]() |