2 мая 2014 года мы запустили адаптивный редизайн на платформе 1С-Битрикс для контентного медиапроекта MonsterAuto. На все ушёл ровно месяц. Как мы это сделали?

Я расскажу вам всё!

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

С чего всё начиналось?

Проект MonsterAuto создавался как бренд для поставок автомобильных запчастей и комплектующих из Поднебесной. Идея оказалось не новой, не оригинальной и, как оказалось в последствии, еще и неудачной. Поставки тихо свернулись и на руках у нас остался багаж из 130 статей, вызывающего названия сайта и 500 уникальных посетителей в день, 80% из которых приходили почитать каких-то несчастных пять статей.

Нам стало жалко выбрасывать такое «добро» и мы решили завернуть корпоративный техно-блог в яркую адаптивную обертку автомобильного медиа-журнала.

Зачем понадобился редизайн?

Первоначально сайт базировался на самой дешевой версии Битрикса с типовым дизайном. А в то время типовой дизайн у Битрикса был таким же страшным, как пляжная фотосессия Анастасии Волочковой на Мальдивских островах. Поэтому мы смело выкинули его на помойку и, взяв пример с Павла Дурова, взяли за основу чужой дизайн и доработали его под наши потребности.

---

Старый "резиновый" дизайн MonsterAuto.ru. 

---

Ответьте мне как дизайнер, Вы про UX что-нибудь слышали?

Единственным пожеланием заказчика при составлении ТЗ был адаптивный дизайн. Ибо это круто! И срок реализации был ограничен одним месяцем. А адаптив до этого момента мы не внедряли ни разу :)

Совет 1. Если срок реализации проекта жестко зафиксирован, то никогда не планируйте использовать при разработке незнакомые или неопробованные методы.

---

Десктопная версия индексной страницы MonsterAuto.ru. Ширина ограничена на 1400px. 

---

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

Прототип нарисовали в Paint’е. На нем мы взяли готовые куски разных сайтов и объединили их. Все остальное сделал дизайнер.

---

Дизайн планшетной версии MonsterAuto.ru. Отличается от десктопной только отсутствием фотографий в блоке "Новости"

---

Совет 2. Для экономии времени очень важно не давать дизайнеру думать. Нужно сделать так, что бы он сел и сразу начать работать.

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

Если кто-то еще не знает, что такое UX дизайн, объясняем. Сначала это называлось феншуй, позже - эргономика. Сейчас UX (User eXperience). Слово прикольно звучит и заставляет собеседника кивать, типа да, слышал…По сути, это правильно расставленные вещи в квартире, красивый порядок автомобилей на парковке или очередь в аэропорту в Мюнхене. Все это можно назвать приятным ощущением пользователя. Именно такое ощущение и должно возникнуть у посетителя интернет-журнала, а не “А что тут делать-то нужно?”

---

Дизайн мобильной версии сайта. Блок "Новости" перенесли под свежие статьи.

---

Совет 3. Если в процессе выбора дизайнера у вас возникнет дилемма - дешево, но так себе или дорого и пи$$дато, остановитесь на эконом варианте. Всё равно в любом случаем потом будете переделывать. А если проект не взлетит, то еще и сэкономите.

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

Гораздо важнее сконцентрироваться на юзабилити, правильно работающей структуре сайта и отсутствии ошибок.

Адаптивная верстка

Скажу сразу, когда я в первый раз увидел, как складывается адаптивный веб-сайт, моя челюсть переместилась на 200px ниже, издав характерное WOW. Идея реализовать это у себя пришла сразу после этого и не отпускала. И когда мы занялись ре-дизайном MonsterAuto.ru, нам удалось очень быстро убедить заказчика, что будущее именно за такими технологиями. Оставалось найти подходящего верстальщика.

Совет 4. Если вы берете на адаптивный проект верстальщика-фрилансера, задайте ему вопрос, есть ли у него самого тач-устройство. Это сильно сэкономит время разработки и тестирования. И нервы. У всех.

Вот тут мы первый раз наступили на грабли. Оказалось, что тестирование адаптивной верстки необходимо проводить на всех популярных браузерах и тач-устройствах. И их оказалось немало… Кто бы мог подумать, что ,например, встроенный самсунговский браузер категорически откажется правильно показывать наш сайт. Не говоря уже о стареньких Nokia с их симбианом. Короче, составье список устройств и браузеров и расположите их в порядке убывания популярности на текущий момент. Эти данные есть в Яднекс.Метрике или Google Analytics.

Запуск

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

Существует стандартный джентльменский набор критериев (http://devaka.ru/articles/onpage-factors), которым можно воспользоваться при подготовке сайта к запуску. Мы подумали, что удобно всё это разместить в матрице Эйзенхауэра.

	Срочно	Не срочно
Важно	Ошибки на страницах Скорость работы Наличие микроразметки Метаописания Карта сайта Авторская разметка Google Корректные 301 редиректы	Система комментирования Соц. кнопки и плагины Перелинковка
Не важно	Устранение ошибок на непопулярных тач-устройствах Настройка региона	Логотип сайта Грамотная разметка контента (цитаты, заголовки и т.д.)

Павел Шаров 

Pro-i.ru

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