8 800 500-03-04 бесплатно по России +7 (383) 207-56-07 Новосибирск +7 (495) 540-49-23 Москва

Этого вы не увидите в нашем портофолио

10 мая 2011

 

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

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

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

Количество согласований по проекту на этот раз побило все рекорды — за полтора месяца разработчики обменялись с клиентами более чем 200 письмами. По этой причине итоговый сайт немного отличается от первоначальной задумки, но в целом соответствует ей.

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

«Обычно мы имеем дело с проектами, полностью выполненными нашей командой, от этапов прототипирования и создания дизайна сайта до разработки функционала. Но в этот раз заказчик поставил перед нами такую интересную задачу, что мы не смогли отказаться.

Клиенты передали нам готовый дизайн в виде psd-файлов, а мы в свою очередь сверстали его, написали скрипты на jQuery и разработали серверную часть приложения, которая выдает нужный контент, в зависимости от того, подключен у пользователя JavaScript или нет.

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

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

Мы попытались решить задачу для IE с помощью использования фильтров Matrix Transform, но оказалось, что в этом браузере фильтр трансформации не работает одновременно со сменой позиции объекта. Поэтому для IE эффект поворота заменили на плавное «растворение» содержимого страницы с последующей подгрузкой нового контента (Fade out — Fade in).

Нам надо было повернуть картинку стоянки-подзарядки для электромобилей на 360 градусов вокруг оси, для этого мы использовали библиотеку Reel.

Из-за некорректной работы этого фреймворка в IE6 было принято решение отказаться от поддержки этого браузера.

Еще одна приятная особенность сайта — необычная анимированная смена картинок в фотогалерее.

При нажатии на «горячие точки» (hotspot) на иллюстрациях всплывают картинки, которые демонстрируют особенности работы зарядных станций для электромобилей.

И это, пожалуй, все, что хотелось сказать про визуальное оформление этого промо-сайта.

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

Хочется обратить внимание, что пользователи сайта могут пользоваться привычной навигацией: в браузере корректно работают кнопки Back и Forward. Дело в том, что браузеры не сохраняют историю передвижения посетителей по сайту, созданному с помощью AJAX, но мы решили эту проблему, используя готовую библиотеку History.

Также мы предусмотрели возможность SEO-адаптации сайта: поисковые роботы, попадая на сайт, кроме контента получают все необходимые мета-данные и ключевые слова».

Функциональная часть проекта была разработана за 1,5 месяца, включая все согласования и доработки.

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

 

Качественный контент для сайта: какой он?
Преодолевая кризис
Сайт-визитка для digital-издательства WeOne, на котором есть что посмотреть
Как правильно уйти к другой?
Сам себе дизайнер. Тестируем 7 онлайн-сервисов для создания визуального контента
Агентство интернет-маркетинга: инструкция по применению
Сочный лендинг для сибирского производителя морсов «Сила ягод»
В поисках взаимопонимания: «вредные советы» для заказчиков
Веб-студии: инструкция по применению
Минималистичный сайт-визитка для Энитех
Продвижение по узкому списку запросов не работает
Секреты хороших фотографий для сайта: мини-гид по видам коммерческой съёмки
Как мы продвигали сайт ветеринарной клиники в ТОП
Делаем лучше
EuroCMS – система управления сайтом от «Евростудио»
Почему интернет-продвижение не может гарантировать N продаж в месяц?
Рунет - 2016 в цифрах и фактах
Как заставить офис увлечённо читать?
Сайт ветеринарной клиники «БЭСТ»
Наши успехи в контекстной рекламе