Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

NEW AGIMA.RU

29 мая 2013 | Опубликовано в статьюшечки | 15 Комментариев »

AGIMA сделала свой сайт адаптивным. Не секрет, что за последние три года потребление контента интернет-сайтов с различных устройств изменилось. Если в начале 2010 года на AGIMA.ru заходило всего 1,5% пользователей мобильных устройств, то сейчас этот сегмент аудитории вырос почти до 30%. Учитывая эти данные, адаптивный сайт интерактивного агентства AGIMA ушел далеко за пределы общепринятых стандартов. В его основе — принцип прогрессивного улучшения, который позволяет использовать нативные функции устройств, например, геолокационные сервисы, аппаратное ускорение графики и акселерометр. Например, если вы зайдете на главную страницу сайта со своего iPad’а и покрутите его немного в руках, то увидите, как под логотипом AGIMA перемещаются промо-банеры. А в случае ввода неверных данных в форме обратной связи, просто встряхните свой iPhone, и поля очистятся.

Вес десктопной версии сайта 1,6 Мб. Но при его загрузке с мобильных устройств, вес составит всего 600 Кб. И, конечно, изображения подготовлены под Retina-дисплеи: графика сожмется на лету, определив  плотность пикселей экрана.

 

Дизайн

Дизайн сайта максимально лаконичный, а цветовая гамма — смелая. Четкие информационные блоки и фирменные коллажи легко адаптируются под экраны любых устройств. «У нас всегда был яркий стиль, — комментирует креативный директор AGIMA Гриша Коченов, а с выходом нового сайта мы решили его еще усилить. Цвета «вырви глаз» на некоторых страницах сильно отличают нас от многих «профессиональных», сдержанных и скромных компаний. Это хорошо передает настоящий дух агентства AGIMA».

Меньше слов

Простыни текста и въедливые описания канули в лету. В русской и английской версиях нового сайта сказано ровно столько, сколько нужно, чтобы клиенты захотели пообщаться лично. Каждое слово несет в себе необходимый смысл и отражает стиль работы и видение интерактивного маркетинга. «На сегодняшний день, AGIMA признанный лидер в области адаптивного веб-дизайна в России. Это далось нам непросто — за работой прошли тысячи часов, проведенных в исследованиях и экспериментах. И я рад, что нам удалось объединить все наши знания,  активировать все силы, энергию, дать себе полную свободу и выпустить действительно отличный сайт!» — добавляет Александр Богданов, генеральный директор.

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

 

Проектная команда

Руководитель проекта: Александр Богданов

Креативный директор: Григорий Коченов

Ведущий дизайнер: Татьяна Назарова

Дизайнер: Аркадий Гребенников

Дизайнер: Полина Молчанова

Дизайнер: Екатерина Булыгина

Копирайтер: Анна Майорова

Копирайтер-переводчик: Галина Кондратова

Контент-менеджер: Руслан Карболсунов

Технический руководитель: Андрей Рыжкин

Ведущий front-end разработчик: Дмитрий Демидовский

Front-end разработчик: Владимир Калмыков

Руководитель QA: Евгений Пономаренко

Фотограф: Дмитрий Бубонец

 

Автор: AGIMA




Комментарии

  1. d1mmmk
    Thumb up Thumb down +2

    мало того что при повороте устройства все лагает, так еще и скрипты/стили не умеете в один файл сливать для ускорения загрузки

    dev.1c-bitrix.ru/api_help...dditionalcss.php

    dev.1c-bitrix.ru/api_help...ddheadscript.php

    в настройках главного модуля

    Объединять CSS файлы: V

    Объединять JS файлы: V

    + дочитайте документацию про css @media, не ленитесь. зачем подгружать ретина изображение для не ретина устройств? @media умеет определять плотность пикселей (это я про логотип, может еще что можно найти?) ;-)

    для тач-устройств не забывайте e.preventDefault () при слайде свайпом, а то происходит выделение контента, но и не надо его заглушать полностью. резкое движение продолжительностью меньше 200мс — свайп, больше — просто выделяем.

    вы не поверите, но есть устройства с таким чувствительным экраном, что парение пальца над элементом вызывают :hover.

    для мобильных устройств хорошим тоном считается отключение стандартной задержки в 300мс на действие.

    Константин Ответ:

    Thumb up Thumb down 0

    Зато сколько пафоса в статью они вложили... уххх. "...Цвета «вырви глаз» на некоторых страницах сильно отличают нас от многих «профессиональных», сдержанных и скромных компаний... " — т.е. им совесть позволяет сказать, что все остальные студии- УГ и только они профессионалы без кавычек. Слишком смело. Так смело, что даже неправда. Ребята, есть куча ни чуть не менее профессиональных студий, с меньшим набором громких оскорбительных слов. Уважайте своих конкурентов и будет вам счастье.

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Не торопитесь с выводами.

    CSS и JS минифицированы. Те файлы, которые вы предлагаете сжать силами Битрикса — это весьма малая часть.

    Плотность пикселей определяется в JS. С чего вы взяли, что на обычных экранах грузится ретина?

    Из описания тач-событий не совсем понятно, в чем проблема. Было бы любопытно узнать, какого поведения вы ожидали (и заодно модель устройства).

    d1mmmk Ответ:

    Thumb up Thumb down +2

    одно дело минифицированны, другое склеены, я насчитал на главной 7 css файлов и 5 js, не считая фиксов для ие. итого 12 запросов к серверу вместо возможных двух, т.е. экономия целых 10 запросов, что для не всегда хорошего мобильного интернета очень критично.

    просто открыл через devtools

    @media screen and (min-width: 768px)

    nav .wrapper .logo-sieve

    www.agima.ru/bitrix/templ..._menu_retina.png

    .feedback form .file .mask

    www.agima.ru/bitrix/templ...ns/icon-file.png 53х106 при размере области где этот спрайт используется 23х23

    по поводу тач событий… сожмите главную страницу до вертикальной разметки и потяните работы за картинку, независимо от того, включен в devtools хрома «Emulate touch events» или нет, картинка парит за мышкой, словно никакого свайпа не произошло, и только после события mouseup происходит перелистывание. исходя из вышеперечисленного, а так же путем беглого визуального анализа кода делаем вывод, что события click и touchstart объедены (и в коде это подтверждается), что в корне не верно. мухи отдельно, котлеты отдельно. для чего вообще сдвигать по движению мышки на нетач устройствах? необходимо события touchstart, touchend и touchcancel обрабатывать самостоятельно(и желательно не сомнительными сторонними библиотеками с толстым слоем абстракции добавляющим задержки, а по хардкору slider__list.addEventListener («touchstart», touch_slide, true)), и уже на основе входных-выходных данных: направлении, расстоянии, скорости, времени — делать вывод о том действие было ли горизонтальным свайпом и надо перелистнуть и при этом заглушить стандартную реакцию движения «призрака» картинки за мышью равно как выделения области на тач устройствах, либо это была вертикальная прокрутка или случайное действие. как правило достаточно time20px || deltaX>container.width т.е. резкое движение по горизонтали(но при этом не клик с небольшим смещением), либо продолжительный сдвиг минимум на половину области.

    про ожидания поведения — получается совсем печально, свайпаю по картинке: из-за отсутствующего e.preventDefault () картинка подсвечивается синим полупрозрачным оверлеем(стандартное реагирование на тег ); происходит ховер с анимацией до полупрозрачного желтого; возможно, происходит сдвиг слайда с очень низким fps т.к. в это время происходит еще и анимация желтого оверлея(но почему-то не всегда перелистывает).

    девайс не топ конечно, но и не $50 китаец, обычный «бюджетный» sony xperia sola, ведро4, 2 ядра, пол гига, pixel-aspect-ratio: 1.5

    d1mmmk Ответ:

    Thumb up Thumb down 0

    блин, админы, предупреждение под полем ввода пишите хоть что включены html теги, а то стрелки съел, да еще и тег вставил

    time стрелка влево 250ms && deltaX стрелка вправо 20px || deltaX стрелка вправо container.width

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Беглый визуальный анализ кода вас подвел.

    Совместная обработка click и touchstart производится не для слайдера.

    Для слайдера идет обработка touchstart + mousedown (а также аналогичных) – это сделано для поддержки устройств на Windows Phone. Обрабатывается на jQuery без доп. плагинов.

    Если вы пишете про устройство, при чем здесь «сожмите главную страницу в хроме»? Имея на руках реальную среду исполнения рассуждать по искусственной — не совсем корректно.

    d1mmmk Ответ:

    Thumb up Thumb down 0

    api.jquery.com/category/events/ ни слова от touchstart, так что где-то лукавите ;-)

    по поводу wp blogs.windows.com/windows...er-10.aspx#step4

    Что по вашему корректно? Чтобы и в искусственной и реальной среде работало не так как следует? 8)

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Никакого лукавства: $(...).on («touchstart», handler). По вашей ссылке в документации, кстати, есть.

    Обработка mouse-cобытий, когда нет поддержки touch-событий, мне видится более универсальной.

    Корректно в данном случае — это объяснить, что не так со слайдером при просмотре с устройства.

  2. Yzif
    Thumb up Thumb down +4

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

    Александр Ответ:

    Thumb up Thumb down -9

    Комментарий скрыт из-за рейтинга

    Yzif Ответ:

    Thumb up Thumb down +2

    Заказчикам тоже полусырые проекты сдаёте, мотивируя это поэтапностью и постепенностью?

    Александр Ответ:

    Thumb up Thumb down -1

    Главное, что бы контент был всегда доступен. Если обратите внимание, то на странице с портфолио есть ссылка на старую версию сайта, где временно представлены работы.

    Yzif Ответ:

    Thumb up Thumb down +2

    Где? Она так неочевидна, что я не нашёл.

  3. socialist
    Thumb up Thumb down 0

    Сыро. Нельзя такой продукт на рынок выпускать.

  4. Ольга
    Thumb up Thumb down 0

    Ни одного положительного отзыва =-O